Add multiplier text, increase selection length

Jcparkyn · Dec 23, 2023 · 8a0a2be · 8a0a2be
1 parent f6512d6
commit 8a0a2be
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/public/main.css b/public/main.css
@@ -120,24 +120,53 @@ dialog > form {
   background-color: var(--col-cell);
 }
 
+.cell-selected::before {
+  font-size: 35px;
+  opacity: 0.6;
+  font-family: monospace;
+  text-align: center;
+  position: absolute;
+  width: var(--cell-size);
+  box-sizing: border-box;
+  line-height: 55px;
+  font-weight: bold;
+}
+
 .cell:hover {
   outline: var(--grid-gap) solid #666;
   border-radius: 3px;
 }
 
 .cell-2w {
   background-color: rgb(187, 145, 94);
+  color: rgb(176, 127, 66);
+}
+.cell-2w.cell-selected::before {
+  content: "2W";
 }
 .cell-3w {
   background-color: rgb(206, 76, 76);
 }
+.cell-3w.cell-selected::before {
+  content: "3W";
+  color: rgb(206, 76, 76);
+}
 .cell-2l {
   background-color: rgb(98, 142, 178);
 }
+.cell-2l.cell-selected::before {
+  content: "2L";
+  color: rgb(98, 142, 178);
+}
 .cell-3l {
   background-color: rgb(20, 74, 174);
 }
-.cell-origin::before {
+.cell-3l.cell-selected::before {
+  content: "3L";
+  color: rgb(20, 74, 174);
+}
+
+.cell-origin:not(.cell-selected)::before {
   content: "✦";
   font-size: var(--cell-size);
   line-height: 49px;
@@ -148,8 +177,6 @@ dialog > form {
   box-sizing: border-box;
 }
 
-
-
 .cell-select-highlight {
   background-color: #e5dcc2;
   height: 100%;

diff --git a/src/Main.elm b/src/Main.elm
@@ -876,7 +876,7 @@ getCellState model point =
     let
         -- computes the desired highlight opacity in one dimension
         highlightOpacity selected current =
-            (1 - toFloat (Basics.modBy gridSize (current - selected)) / 7)
+            (1 - toFloat (Basics.modBy gridSize (current - selected)) / 10)
                 |> clamp 0 1
                 |> (*) 0.4
     in
@@ -910,6 +910,7 @@ viewCell point state =
                 , ( "cell-2l", state.multiplier.letter == 2 )
                 , ( "cell-3l", state.multiplier.letter == 3 )
                 , ( "cell-origin", point == Point (gridSize // 2) (gridSize // 2) )
+                , ( "cell-selected", state.state == Selected )
                 ]
 
             else