efim/planning-poker-gwargh
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

some absolute positioning for other players

Browse Source
This commit is contained in:
efim 2023-04-22 00:38:27 +04:00
parent f845f91a8e
commit 42e092e747
2 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/main/scala/industries/sunshine/planningpoker/Models.scala
View File

@ -38,11 +38,12 @@ object RoomStateView {
val me = Player("wormy", PlayerID()) val me = Player("wormy", PlayerID())
val pony = Player("pony", PlayerID()) val pony = Player("pony", PlayerID())
val birdy = Player("birdy", PlayerID()) val birdy = Player("birdy", PlayerID())
val horsey = Player("horsey", PlayerID())
RoomStateView( RoomStateView(
players = List(me, birdy, pony), players = List(me, birdy, pony, horsey),
me = me.id, me = me.id,
allowedCards = List("xs", "s", "m", "l", "xl"), 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 canCloseRound = true
) )
} }

14
src/main/scala/industries/sunshine/planningpoker/RoomView.scala
View File

@ -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 // NOTE i guess "other players" would have to be in circle with 'me' as empty space in the bottom
def renderRoom(state: RoomStateView): Element = { def renderRoom(state: RoomStateView): Element = {
val roomStateSignal = Var(state).signal val roomStateSignal = Var(state).signal
// i want to number other players, for the star arrangement
val otherPlayers = roomStateSignal.map { state => val otherPlayers = roomStateSignal.map { state =>
state.players.filterNot(_.id == state.me) state.players.filterNot(_.id == state.me).zipWithIndex
} }
div( div(
className := "w-full h-full border-4 border-amber-900 flex flex-col", className := "w-full h-full border-4 border-amber-900 flex flex-col",
div( div(
className := "flex flex-row", 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)) 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( div(
className := "w-20 h-20 border-2 border-amber-400 m-2", className := "w-20 h-20 border-2 border-amber-400 m-2 absolute",
child.text <-- p.map(_.name), // 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) renderHandCardBacks(cardsAmount)
) )
} }