From 8a0a2be6285a5c0af0e54d264250a4551c50fe4e Mon Sep 17 00:00:00 2001
From: Jcparkyn <51850908+Jcparkyn@users.noreply.github.com>
Date: Sat, 23 Dec 2023 07:04:30 +0000
Subject: [PATCH] Add multiplier text, increase selection length

---
 public/main.css | 33 ++++++++++++++++++++++++++++++---
 src/Main.elm    |  3 ++-
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/public/main.css b/public/main.css
index 5883853..b392850 100644
--- a/public/main.css
+++ b/public/main.css
@@ -120,6 +120,18 @@ 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;
@@ -127,17 +139,34 @@ dialog > form {
 
 .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
index 5105553..f60881d 100644
--- 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