feat: add hints

Author: r2dev2

public/global.css

@@ -91,7 +91,7 @@ button {
 	color: #505152;
 }
 
-button:hover, button.swal2-styled:hover, .moe-component:hover {
+button:hover, button.swal2-styled:hover, .moe-component:not(:disabled):hover {
 	box-shadow: var(--elevation-1);
 	filter: brightness(90%);
 }

src/components/CryptogramSolver.svelte

@@ -58,6 +58,9 @@
 
 {#if problem}
   <p>Solve this quote by {problem.author}</p>
+  {#if problem.hint}
+    <p>HINT: The first word is {problem.hint}</p>
+  {/if}
   <div class="cryptogram" class:solved>
     {#each words as word}
       <Word

src/components/Game.svelte

@@ -15,6 +15,7 @@
   } from '@/js/quotes.js';
   import { isHivemindBrain, hivemindBrain } from '@/js/constants.js';
   import {
+    hintEnabled,
     patristocratEnabled,
     progress,
     gameProblem,
@@ -26,10 +27,12 @@
   const getNewQuote = getQuoteGenerator();
 
   /** @type {typeof toAristocratCipher} */
-  const createProblem = (quote) =>
-    $patristocratEnabled
+  const createProblem = (quote) => {
+    const problem = $patristocratEnabled
       ? toPatristocratCipher(toAristocratCipher(quote))
       : toAristocratCipher(quote);
+    return $hintEnabled ? problem : { ...problem, hint: undefined };
+  };
 
   const newProblem = () => {
     getNewQuote().then((quote) => gameProblem.set(createProblem(quote)));
@@ -52,6 +55,12 @@
           bind:checked={$patristocratEnabled}
           disabled={$gameProblem !== null}
         />
+        <Checkbox
+          id="hint-option"
+          label="Hint"
+          bind:checked={$hintEnabled}
+          disabled={$gameProblem !== null}
+        />
       </div>
     </Panel>
   </div>

src/js/quotes.js

@@ -53,7 +53,13 @@ export const toAristocratCipher = (quote) => {
     .map((char) => encryptionAlphabet[alphabet.indexOf(char)] ?? char)
     .join('');
 
-  return { ...quote, plaintext, ciphertext, start: Date.now() };
+  return {
+    ...quote,
+    plaintext,
+    ciphertext,
+    start: Date.now(),
+    hint: splitQuote(plaintext)[0],
+  };
 };
 
 /** @type {(text: string) => string} */
@@ -70,7 +76,6 @@ export const toPatristocratCipher = (quote) => ({
   ...quote,
   plaintext: patristify(quote.plaintext),
   ciphertext: patristify(quote.ciphertext),
-  hint: splitQuote(quote.plaintext)[0],
 });
 
 /** @type {(text: string) => string[]} */

src/js/store.js

@@ -28,6 +28,7 @@ export const name = lswritable(
   `person-${Math.floor(Math.random() * 10000)}`
 );
 export const patristocratEnabled = lswritable('patristocrat', false);
+export const hintEnabled = lswritable('hint', false);
 export const hivemindConnection = writable(
   /** @type {Connection | null} */ (null)
 );