Add unseen tiles dialog

Jcparkyn · Nov 12, 2023 · c566796 · c566796
1 parent 9aed042
commit c566796
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 12 deletions.
diff --git a/public/main.css b/public/main.css
@@ -36,7 +36,7 @@ html {
 
 body {
   height: 100%;
-  padding: 2vh 2vw;
+  padding: 1vh 2vw;
   margin: 0;
   box-sizing: border-box;
   display: flex;
@@ -81,7 +81,7 @@ dialog > form {
   flex-direction: row-reverse;
 }
 
-#closeDialogButton {
+.close-dialog-button {
   background-color:  transparent;
   border: 2px  solid rgba(255, 255, 255, 0.527);
   color: white;
@@ -250,8 +250,17 @@ dialog > form {
   font-size: 1.8em;
   font-family: Consolas, monospace;
   padding: 8px 12px;
-  /* border-radius: 24px; */
-  /* border: 2px solid #fff; */
-  /* background-color: transparent; */
-  /* color: var(--col-primary) */
+}
+
+.unseen-tiles-button {
+  align-self: end;
+  background-color: transparent;
+  color: white;
+  text-decoration: underline;
+  font-family: inherit;
+  font-size: inherit;
+  float: right;
+  padding: 0;
+  line-height: inherit;
+  opacity: 0.7;
 }
diff --git a/src/Main.elm b/src/Main.elm
@@ -63,6 +63,7 @@ type alias PlayingModel =
     , opponent :
         { name : String
         , score : Int
+        , rack : Array Tile
         }
     , selfName : String
     , selfScore : Int
@@ -218,6 +219,7 @@ init flags url _ =
                 , opponent =
                     { name = initialState.lastPlayer.name
                     , score = 0
+                    , rack = initialState.lastPlayer.rack
                     }
                 , selfName = initialState.nextPlayer.name
                 , selfScore = 0
@@ -429,6 +431,7 @@ urlModelToModel model flags =
         , opponent =
             { name = playerName (turnCount - 1 |> modBy 2)
             , score = finalState.lastPlayer.score
+            , rack = finalState.lastPlayer.rack
             }
         , selfName = playerName (turnCount |> modBy 2)
         , selfScore = finalState.nextPlayer.score
@@ -591,6 +594,7 @@ view model =
                         pm.shareUrlSupported
                         pm.clipboardWriteSupported
                         pm.submitDialogState
+                    , viewUnseenTilesDialog (getUnseenTiles pm)
                     , viewGrid cellProps
                     , viewRack pm.rack pm.gameOver
                     , viewActionButtons moveOutcome pm
@@ -681,7 +685,7 @@ viewSubmitDialog outcome urlQueryState shareUrlSupported clipboardWriteSupported
                     [ text "next turn" ]
                 ]
         , Html.form []
-            [ button [ Html.Attributes.attribute "formmethod" "dialog", id "closeDialogButton" ]
+            [ button [ Html.Attributes.attribute "formmethod" "dialog", class "close-dialog-button" ]
                 [ text "Cancel" ]
             ]
         ]
@@ -700,7 +704,7 @@ viewScoreHeader model moveOutcome =
                 [ text <| gameOverText model.selfScore model.opponent.score ++ " "
                 , a [ href "?", style "color" "var(--col-primary)" ] [ text "Start new game" ]
                 ]
-        , div [ style "display" "flex", style "margin-bottom" "4px" ]
+        , div [ style "display" "flex", style "margin-bottom" "8px" ]
             [ div [ style "flex" "1" ]
                 [ text ("You (" ++ model.selfName ++ "): ")
                 , text (String.fromInt model.selfScore)
@@ -719,7 +723,7 @@ viewScoreHeader model moveOutcome =
         ]
 
 
-moveSummaryText : PlayingModel -> MoveOutcome -> Html msg
+moveSummaryText : PlayingModel -> MoveOutcome -> Html Msg
 moveSummaryText model outcome =
     case outcome.checkerResult of
         ValidPlacement { score, words } ->
@@ -733,10 +737,11 @@ moveSummaryText model outcome =
             in
             case longestWord of
                 Just longestWord_ ->
-                    span []
+                    div []
                         [ text <| model.opponent.name ++ " played "
                         , span [] (longestWord_.tiles |> List.map viewLetter)
-                        , text <| " for " ++ String.fromInt score ++ " points."
+                        , text <| " for " ++ String.fromInt score ++ " points. "
+                        , button [ class "unseen-tiles-button", onClick (OpenDialog "unseenTilesDialog") ] [ text <| String.fromInt (model.bag |> List.length) ++ " tiles left" ]
                         ]
 
                 _ ->
@@ -746,7 +751,7 @@ moveSummaryText model outcome =
             text ""
 
 
-viewMoveOutcome : PlayingModel -> MoveOutcome -> Html msg
+viewMoveOutcome : PlayingModel -> MoveOutcome -> Html Msg
 viewMoveOutcome model outcome =
     case outcome.checkerResult of
         NothingPlaced ->
@@ -940,3 +945,27 @@ viewTile tile isJustPlaced isPreview =
         [ div [ class "tile-value " ] [ text (getLetterValue tile |> String.fromInt) ]
         , text (String.fromChar tile)
         ]
+
+
+getUnseenTiles : PlayingModel -> List Tile
+getUnseenTiles pm =
+    pm.bag ++ Array.toList pm.opponent.rack |> List.sort
+
+
+viewUnseenTilesDialog : List Tile -> Html Msg
+viewUnseenTilesDialog unseenTiles =
+    let
+        groups =
+            unseenTiles
+                |> List.Extra.frequencies
+                |> List.map (\( t, c ) -> t |> List.repeat c |> String.fromList)
+    in
+    Html.node "dialog"
+        [ id "unseenTilesDialog" ]
+        [ h1 [] [ text "Unseen tiles" ]
+        , p [] (groups |> List.map text |> List.intersperse (text " "))
+        , Html.form []
+            [ button [ Html.Attributes.attribute "formmethod" "dialog", class "close-dialog-button" ]
+                [ text "Back" ]
+            ]
+        ]