some absolute positioning for other players
This commit is contained in:
parent
f845f91a8e
commit
42e092e747
@ -38,11 +38,12 @@ object RoomStateView {
|
||||
val me = Player("wormy", PlayerID())
|
||||
val pony = Player("pony", PlayerID())
|
||||
val birdy = Player("birdy", PlayerID())
|
||||
val horsey = Player("horsey", PlayerID())
|
||||
RoomStateView(
|
||||
players = List(me, birdy, pony),
|
||||
players = List(me, birdy, pony, horsey),
|
||||
me = me.id,
|
||||
allowedCards = List("xs", "s", "m", "l", "xl"),
|
||||
round = ViewingRound(Map( me.id -> "xs", pony.id -> "l", birdy.id -> "s" )),
|
||||
round = ViewingRound(Map( me.id -> "xs", pony.id -> "l", birdy.id -> "s", horsey.id -> "m" )),
|
||||
canCloseRound = true
|
||||
)
|
||||
}
|
||||
|
@ -10,15 +10,16 @@ object RoomView {
|
||||
// NOTE i guess "other players" would have to be in circle with 'me' as empty space in the bottom
|
||||
def renderRoom(state: RoomStateView): Element = {
|
||||
val roomStateSignal = Var(state).signal
|
||||
// i want to number other players, for the star arrangement
|
||||
val otherPlayers = roomStateSignal.map { state =>
|
||||
state.players.filterNot(_.id == state.me)
|
||||
state.players.filterNot(_.id == state.me).zipWithIndex
|
||||
}
|
||||
|
||||
div(
|
||||
className := "w-full h-full border-4 border-amber-900 flex flex-col",
|
||||
div(
|
||||
className := "flex flex-row",
|
||||
children <-- otherPlayers.split(_.id) { (id, initial, playerSignal) =>
|
||||
children <-- otherPlayers.split(_._1.id) { (id, initial, playerSignal) =>
|
||||
renderPlayer(playerSignal, roomStateSignal.map(_.allowedCards.size))
|
||||
}
|
||||
),
|
||||
@ -26,10 +27,13 @@ object RoomView {
|
||||
)
|
||||
}
|
||||
|
||||
def renderPlayer(p: Signal[Player], cardsAmount: Signal[Int]): Element = {
|
||||
def renderPlayer(p: Signal[(Player, Int)], cardsAmount: Signal[Int]): Element = {
|
||||
val xOffsetStyleSignal = p.map(_._2)
|
||||
div(
|
||||
className := "w-20 h-20 border-2 border-amber-400 m-2",
|
||||
child.text <-- p.map(_.name),
|
||||
className := "w-20 h-20 border-2 border-amber-400 m-2 absolute",
|
||||
// left <-- p.map(tuple => ((1 + tuple._2) * 10000).toString()),
|
||||
styleAttr <-- p.map(tuple => s"left: ${(1 + tuple._2) * 100}px"),
|
||||
child.text <-- p.map(_._1.name),
|
||||
renderHandCardBacks(cardsAmount)
|
||||
)
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user