From 217837187b454150061615cebaf439752cf1bd3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ra=C3=BAl?= <wychouza@gmail.com>
Date: Mon, 12 Feb 2024 18:51:17 -0800
Subject: [PATCH] More fixes on style

---
 priv/assets/styles.css                  | 152 +++++++-----------------
 src/luster/games/three_line_poker.gleam |  14 +--
 src/luster/systems/comp.gleam           |   2 +-
 src/luster/web.gleam                    |   4 +-
 src/luster/web/tea_game.gleam           | 121 ++++++++++---------
 5 files changed, 117 insertions(+), 176 deletions(-)

diff --git a/priv/assets/styles.css b/priv/assets/styles.css
index 351750d..d126992 100644
--- a/priv/assets/styles.css
+++ b/priv/assets/styles.css
@@ -6,184 +6,122 @@
 
 /* This is what makes the click through elements work */
 
-div[data-event]>* {
+*[data-event]>* {
   pointer-events: none;
 }
 
-div[data-event="popup-toggle"] {
-  position: absolute;
-  width: 100vh;
-  height: 100vh;
-  top: 0;
-}
-
 /* Page level styles */
 
 :root {
-  --white: #ffffff;
-  --light-gray: #f0f1ff;
-  --gray: #b0b0b0;
-  
-  --dark-gray: #303030;
-  --light-blue: #4483d529;
+  /* Scores totals */
   --dark-blue: #4483d5ab;
-  --font-blue: #4483d5;
-  --light-red: #ffc0ef45;
   --dark-red: #d544a3ab;
-  --light-green: #eaffdd85;
-  --dark-green: #4d8848;
-  --font-red: #d544a3;
-  --font-purple: #4f40ffc9;
-  --dark-purple: #6588ba;
-  --dubious-light-green: #b7cc91ad;
-  --dubious-dark-green: #436c3b99;
-  --not-black: #44230f;
+
+  --font-bonus-formation: #4d8848;
+  --font-bonus-flank: #4f40ffc9;
+  
   --green: #e5fbcc;
   --yellow: #f0f2b7f0;
+
+  --gold: #ac9100;
+  --light-pine-green: #f1f3e5;
+  --dark-pine-green: #456d69;
 }
 
 body {
   margin: 0;
   padding: 0;
-  background-color: var(--light-gray);
+  background-color: var(--light-pine-green);
 }
 
 /* Layout and sections */
 
 .player-info {
-  display: flex;
-  flex-direction: row;
-  background-color: var(--gray);
   font-family: sans-serif;
   height: 10vh;
+  font-size: 4vh;
 }
 
-.player-info .player {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 6vh;
-  flex: 1;
-}
-
-.player-info .status {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.player-info .status .action {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--white);
-  background-color: var(--dark-purple);
-  font-size: 3.2vh;
-  flex: 1 1;
-}
-
-.player-info .status .alert {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2.5vh;
-  flex: 1 1;
+.play {
+  height: 90vh;
 }
 
 .board {
-  height: 90vh;
+  background-color: var(--dark-pine-green);
+  border-radius: 2vh;
+  padding: 2vh;
 }
 
 .popup {
   position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100vh;
+  top: 0;
+  width: 100%;
   height: 100vh;
   font-size: 5vh;
-  text-align: center;
 }
 
-.popup>div {
+.final-score {
   border-radius: 0.5vh;
+  text-align: center;
 }
 
-.popup h1,
-.popup h2,
-.popup h3 {
+.final-score h1,
+.final-score h2,
+.final-score h3 {
   margin: 0;
 }
 
-.alert.green {
-  background-color: rgb(193, 255, 193);
-  color: var(--dark-gray)
-}
-
-.alert.red {
-  background-color: rgb(255, 137, 137);
-  color: var(--dark-gray);
-}
-
-.alert.purple {
-  background-color: rgb(112, 112, 255);
-  color: var(--white);
-}
-
-.alert.yellow {
-  background-color: rgb(255, 255, 193);
-  color: var(--dark-gray);
-}
-
-.cheatsheet {
+.final-score .cheatsheet {
   font-size: 1.5vh;
   width: 25vh;
   border-collapse: collapse;
-  background-color: var(--white);
 }
 
-.cheatsheet th,
-.cheatsheet td {
+.final-score .cheatsheet th,
+.final-score .cheatsheet td {
   border: 0.1vh solid var(--gray);
 }
 
-.cheatsheet tr {
+.final-score .cheatsheet tr {
   height: 3.5vh;
   text-align: center;
 }
 
-.score-winner {
+.final-score .score-winner {
   padding: 1vh 0 1vh 0;
 }
 
-.score-group {
+.final-score .score-group {
   display: flex;
   font-size: 2.25vh;
   padding: 2vh 0 2vh 0;
   background-color: var(--yellow);
 }
 
-.score-group>div {
+.final-score .score-group>div {
   padding: 0 2vh 0 2vh;
 }
 
+.final-score .score-group table {
+ width: 100%; 
+}
 
-.score-group table td {
+.final-score .score-group table td {
   padding: 0.5vh 1.0vh;
 }
 
-.score-group table td:nth-child(1) {
+.final-score .score-group table td:nth-child(1) {
   text-align: left;
   font-size: 3vh;
 }
 
-.score-group table td:nth-child(2) {
+.final-score .score-group table td:nth-child(2) {
   text-align: right;
   font-size: 3.25vh;
 }
 
-.score-group table td div:nth-child(2) {
-  text-align: right;
+.final-score .score-group table td div:nth-child(2) {
+  text-align: left;
   font-size: 1.75vh;
 }
 
@@ -193,8 +131,6 @@ body {
 }
 
 .scores>.score {
-  outline: 0.1vh solid var(--gray);
-  background-color: var(--white);
   height: 2vh;
   width: 7.5vh;
 
@@ -231,11 +167,11 @@ body {
 }
 
 .scores>.score>.formation {
-  color: var(--dark-green);
+  color: var(--font-bonus-formation);
 }
 
 .scores>.score>.flank {
-  color: var(--font-purple);
+  color: var(--font-bonus-flank);
 }
 
 
@@ -245,14 +181,10 @@ body {
 }
 
 .slots .slot {
+  outline: 0.2vh solid var(--gold);
   position: relative;
-  background-color: var(--light-green);
-  outline-color: var(--dark-green);
-  outline-style: solid;
-  outline-width: 0.2vh;
   height: 18.25vh;
   width: 7.5vh;
-
   border-radius: 0.25vh;
   margin: 0.32vh;
   padding: 0.4vh;
diff --git a/src/luster/games/three_line_poker.gleam b/src/luster/games/three_line_poker.gleam
index 7361a55..f9817d7 100644
--- a/src/luster/games/three_line_poker.gleam
+++ b/src/luster/games/three_line_poker.gleam
@@ -9,23 +9,23 @@ pub const max_hand_size = 8
 
 pub const plays_per_turn = 4
 
-const straight_flush = 19
+const ranks = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
+
+const suits = [Spade, Heart, Diamond, Club]
+
+const straight_flush = 23
 
 const three_of_a_kind = 17
 
-const straight = 7
+const straight = 11
 
 const flush = 5
 
 const pair = 3
 
-const flank_bonus = 5
-
 const highcard = 0
 
-const ranks = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
-
-const suits = [Spade, Heart, Diamond, Club]
+const flank_bonus = 5
 
 pub type Message {
   DrawCard(player: Player)
diff --git a/src/luster/systems/comp.gleam b/src/luster/systems/comp.gleam
index 2cf0e23..75b67b2 100644
--- a/src/luster/systems/comp.gleam
+++ b/src/luster/systems/comp.gleam
@@ -77,7 +77,7 @@ fn handle_message(message: Message, state: State) -> Next(Message, State) {
         Error(Nil) -> Nil
       }
 
-      let _timer = process.send_after(state.self, between(50, 50), AssessMove)
+      let _timer = process.send_after(state.self, between(25, 25), AssessMove)
 
       Continue(state, None)
     }
diff --git a/src/luster/web.gleam b/src/luster/web.gleam
index faf7049..0b48cd1 100644
--- a/src/luster/web.gleam
+++ b/src/luster/web.gleam
@@ -39,8 +39,8 @@ pub fn router(
 
     http.Post, ["battleline"] -> {
       let assert Ok(#(id, subject)) = sessions.create(store)
-      let assert Ok(_comp_1) = comp.start(tlp.Player1, id, subject, pubsub)
-      let assert Ok(_comp_2) = comp.start(tlp.Player2, id, subject, pubsub)
+      //let assert Ok(_comp_1) = comp.start(tlp.Player1, id, subject, pubsub)
+      //let assert Ok(_comp_2) = comp.start(tlp.Player2, id, subject, pubsub)
 
       redirect("/")
     }
diff --git a/src/luster/web/tea_game.gleam b/src/luster/web/tea_game.gleam
index 2a6ff3c..42eb940 100644
--- a/src/luster/web/tea_game.gleam
+++ b/src/luster/web/tea_game.gleam
@@ -9,7 +9,7 @@ import nakai/html
 import nakai/html/attrs
 
 // --- Elmish Game --- //
-
+// TODO: Reintegrate gamestate into model update
 pub type Message {
   SelectCard(g.Card)
   ToggleScoring
@@ -45,21 +45,57 @@ pub fn update(model: Model, message: Message) -> Model {
 }
 
 pub fn view(model: Model, state: g.GameState) -> html.Node(a) {
-  let phase = g.current_phase(state)
-
   html.Fragment([
-    game_info(state, model.alert),
+    game_info(state, model.selected_card, model.alert),
     board(model, state),
-    // TODO: Should be a section
-    popup(phase == g.End, case model.toggle_scoring {
-      True -> end_game_scoring(state)
-      False -> html.Nothing
-    }),
+    score_popup(model, state),
+  ])
+}
+
+fn game_info(
+  state: g.GameState,
+  selected_card: Option(g.Card),
+  alert: Option(g.Errors),
+) -> html.Node(a) {
+  let #(_color, message) = case alert {
+    Some(g.InvalidAction(_)) -> #("red", "Invalid Action.")
+    Some(g.NotCurrentPhase) -> #("yellow", "Not current phase.")
+    Some(g.NotCurrentPlayer) -> #("yellow", "Not current player.")
+    Some(g.NoCardInHand) -> #("yellow", "Card not in hand.")
+    Some(g.EmptyDeck) -> #("green", "Deck already empty.")
+    Some(g.MaxHandReached) -> #("green", "Hand at max.")
+    Some(g.NotClaimableSlot) -> #("green", "Slot is not claimable.")
+    Some(g.NotPlayableSlot) -> #("green", "Slot is not playable.")
+    None -> #("purple", "")
+  }
+
+  let action = case
+    g.current_turn(state),
+    g.current_phase(state),
+    selected_card
+  {
+    0, g.Draw, _selected -> "Initial Draw."
+    _, g.Draw, _selected -> "Draw a card from pile."
+    _, g.Play, Some(_) -> "Play a card from hand."
+    _, g.Play, None -> "Select a card from hand."
+    _, g.End, _ -> "Game!"
+  }
+
+  let player = case g.current_turn(state), g.current_player(state) {
+    0, _player -> ""
+    _, g.Player1 -> "Player 1,"
+    _, g.Player2 -> "Player 2,"
+  }
+
+  html.section([attrs.class("player-info column")], [
+    html.div([attrs.class("player row center ")], [
+      html.span_text([], message <> " " <> player <> " " <> action),
+    ]),
   ])
 }
 
 fn board(model: Model, state: g.GameState) -> html.Node(a) {
-  html.section([attrs.class("board row evenly")], [
+  html.section([attrs.class("play row evenly")], [
     html.div([attrs.class("column")], [
       html.div([attrs.class("s2")], []),
       html.div([attrs.class("s2 column center")], [deck(state, g.Player2)]),
@@ -68,7 +104,7 @@ fn board(model: Model, state: g.GameState) -> html.Node(a) {
     ]),
     html.div([attrs.class("column")], [
       html.div([attrs.class("s2")], []),
-      html.div([attrs.class("s8 row")], [
+      html.div([attrs.class("board s8 row")], [
         html.div([attrs.class("column center")], [
           view_score_columns(state, g.Player2),
         ]),
@@ -94,42 +130,26 @@ fn board(model: Model, state: g.GameState) -> html.Node(a) {
   ])
 }
 
-// --- View board segments --- //
+fn score_popup(model: Model, state: g.GameState) -> html.Node(a) {
+  let markup = case g.current_phase(state), model.toggle_scoring {
+    g.End, True -> {
+      scores(state)
+    }
 
-fn game_info(state: g.GameState, alert: Option(g.Errors)) -> html.Node(a) {
-  let #(color, message) = case alert {
-    Some(g.InvalidAction(_)) -> #("red", "Invalid Action")
-    Some(g.NotCurrentPhase) -> #("yellow", "Not current phase")
-    Some(g.NotCurrentPlayer) -> #("yellow", "Not current player")
-    Some(g.NoCardInHand) -> #("yellow", "Card not in hand")
-    Some(g.EmptyDeck) -> #("green", "Deck already empty")
-    Some(g.MaxHandReached) -> #("green", "Hand at max")
-    Some(g.NotClaimableSlot) -> #("green", "Slot is not claimable")
-    Some(g.NotPlayableSlot) -> #("green", "Slot is not playable")
-    None -> #("purple", "")
+    _phase, _toggle -> {
+      html.Fragment([])
+    }
   }
 
-  let phase = case g.current_turn(state), g.current_phase(state) {
-    0, g.Draw -> "Initial Draw"
-    _, g.Draw -> "Draw Card Phase"
-    _, g.Play -> "Play Card Phase"
-    _, g.End -> "Game!"
-  }
+  let dataset = dataset([#("event", encode_popup_toggle())])
 
-  let player = case g.current_player(state) {
-    g.Player1 -> "P1 Turn"
-    g.Player2 -> "P2 Turn"
-  }
-
-  html.section([attrs.class("player-info")], [
-    html.div([attrs.class("player")], [html.span_text([], player)]),
-    html.div([attrs.class("status")], [
-      html.div([attrs.class("action")], [html.span_text([], phase)]),
-      html.div([attrs.class("alert " <> color)], [html.span_text([], message)]),
-    ]),
+  html.section([attrs.class("popup column center"), ..dataset], [
+    html.div([attrs.class("row center")], [markup]),
   ])
 }
 
+// --- View board segments --- //
+
 fn deck(state: g.GameState, player: g.Player) -> html.Node(a) {
   let size = g.deck_size(state)
 
@@ -322,7 +342,7 @@ type ScoreGroup {
   )
 }
 
-fn end_game_scoring(state: g.GameState) -> html.Node(a) {
+fn scores(state: g.GameState) -> html.Node(a) {
   let scores = g.score_columns(state)
   let total = g.score_total(state)
 
@@ -380,7 +400,7 @@ fn end_game_scoring(state: g.GameState) -> html.Node(a) {
   let p2_form_total = list.fold(p2_scores, 0, sum_form)
   let p2_flank_total = list.fold(p2_scores, 0, sum_flank)
 
-  html.div([attrs.class("sparkle")], [
+  html.div([attrs.class("final-score sparkle")], [
     html.Fragment([
       html.div([attrs.class("score-winner")], [html.h1_text([], "Game!")]),
       html.div([attrs.class("score-group")], [
@@ -454,15 +474,15 @@ fn subtotals_table(card: Int, formation: Int, flank: Int) -> html.Node(a) {
   html.table([], [
     html.tbody([], [
       html.tr([], [
-        html.td_text([], "Point distribution"),
+        html.td_text([], "Card points"),
         html.td_text([], int.to_string(card)),
       ]),
       html.tr([], [
-        html.td_text([], "Formation"),
+        html.td_text([], "Formation points"),
         html.td_text([], int.to_string(formation)),
       ]),
       html.tr([], [
-        html.td_text([], "Flank"),
+        html.td_text([], "Flank points"),
         html.td_text([], int.to_string(flank)),
       ]),
     ]),
@@ -493,17 +513,6 @@ fn winner(total: #(Option(g.Player), Int)) -> html.Node(a) {
   ])
 }
 
-fn popup(display: Bool, markup: html.Node(a)) -> html.Node(a) {
-  case display {
-    True ->
-      click(
-        [#("event", encode_popup_toggle())],
-        html.div([attrs.class("popup")], [markup]),
-      )
-    False -> html.Nothing
-  }
-}
-
 // --- View HTML Helpers --- //
 
 fn click(