Improve guesser presentation on mobile

taiidani · Sep 30, 2023 · 31354dc · 31354dc
1 parent f77c186
commit 31354dc
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 10 deletions.
diff --git a/app/assets/index.css b/app/assets/index.css
@@ -1,9 +1,14 @@
 :root {
     --text-color: #eee;
+    --default-bg-color: #224;
+}
+
+body.mode-Hard {
+    --default-bg-color: #422;
 }
 
 body {
-    background-color: #224;
+    background-color: var(--default-bg-color);
     color: var(--text-color);
 }
 
@@ -24,17 +29,21 @@ hr {
     border-color: var(--text-color);
 }
 
-.htmx-indicator {
-    display: inline;
-    height: 2em;
-}
-
 .guess-form section {
     padding: 1em 0;
 }
 
-.guess-form #between-logo {
+.guess-form .htmx-indicator {
+    position: absolute;
+    background-color: var(--default-bg-color);
+    opacity: 1;
+}
+
+/* These need to match exactly, as the indicator must obscure the between logo */
+.guess-form #between-logo,
+.guess-form .htmx-indicator {
     height: 3em;
+    width: 3em;
 }
 
 footer {

diff --git a/app/templates/guesser.gohtml b/app/templates/guesser.gohtml
@@ -21,17 +21,20 @@
   <section>
     {{ if not .Answer }}
       <form method="POST" action="/guess" hx-post="/guess" hx-target="#guesser">
+        <div class="hstack gap-2">
           <img
           id="between-logo"
           src="/assets/between.svg"
           alt="Page Break by Arthur Shlain from the Noun Project"
           />
+          <img class="htmx-indicator" src="/assets/loading.svg" />
 
           {{ $commonGuess := .CommonGuessPrefix }}
           <label>
           <input
               id="guess-input"
               name="word"
+              class="form-control"
               placeholder="{{ if $commonGuess }}Starting with '{{ $commonGuess }}'{{ else }}Enter a word here{{ end }}"
               autocomplete="off"
               autocorrect="off"
@@ -42,7 +45,7 @@
           </label>
 
           <button class="btn btn-primary" type="submit">Guess</button>
-          <img class="htmx-indicator" src="/assets/loading.svg" />
+        </div>
       </form>
 
       {{ if and (gt .GuessCount 15) }}

diff --git a/app/templates/header.gohtml b/app/templates/header.gohtml
@@ -13,7 +13,7 @@
     <link rel="stylesheet" href="/assets/index.css" />
 </head>
 
-<body style="background-color: #{{ .List.Color }}">
+<body class="mode-{{ .List.Name }}">
     <noscript>
         <strong>We're sorry but Guess My Word doesn't work properly without JavaScript enabled.
             Please enable it to continue.</strong>

diff --git a/internal/words/lists.go b/internal/words/lists.go
@@ -56,7 +56,6 @@ func (l *ListStore) GetList(ctx context.Context, name string) (model.List, error
 			list = model.List{
 				Name:        hardListName,
 				Description: "The hardest mode available -- represents the entire Scrabble dictionary",
-				Color:       "422422",
 				Words:       strings.Split(strings.TrimSpace(scrabbleList), "\n"),
 			}
 			if err := l.CreateList(ctx, hardListName, list); err != nil {