medal system

src/const/medals.ts

@@ -0,0 +1,34 @@
+export interface IMedal {
+  name: string
+  emoji: string
+  differenceFromOptimal: number
+}
+
+export const MEDALS: IMedal[] = [
+  {
+    name: 'Perfection',
+    emoji: '🏆',
+    differenceFromOptimal: 0
+  },
+  {
+    name: 'Gold',
+    emoji: '🥇',
+    differenceFromOptimal: 1
+  },
+  {
+    name: 'Silver',
+    emoji: '🥈',
+    differenceFromOptimal: 2
+  },
+  {
+    name: 'Bronze',
+    emoji: '🥉',
+    differenceFromOptimal: 3
+  }
+]
+
+export const NONE_MEDAL: IMedal = {
+  name: 'No',
+  emoji: '🫤',
+  differenceFromOptimal: -1
+}

src/screens/game/WordCount.tsx

@@ -4,26 +4,35 @@ import { useThrottle } from '@uidotdev/usehooks'
 import { useMemo } from 'react'
 import { isWord } from '../../util/game/handleSubmit'
 import classNames from 'classnames'
+import { generateSolution } from '../../util/solution/generateSolution'
+import { lettersForToday } from '../../util/lottery/letters'
 
 export const WordCount = () => {
   const wordCount = useAtomValue(words).length
   const word = useAtomValue(currentWord)
 
+  const solutionNumberOfWords = useMemo(() => {
+    return generateSolution(lettersForToday()).length
+  }, [])
+
   // Throttle the word so that we're not checking on every keystroke
   const throttledWord = useThrottle(word, 150)
   const isProperWord = useMemo(() => {
     return isWord(throttledWord)
   }, [throttledWord])
 
-  console.log(isProperWord)
-
   return (
     <div
-      className={classNames('absolute top-[24px] z-20 text-sm', {
-        'text-green-700 underline': isProperWord
-      })}
+      className={classNames(
+        'absolute top-[84px] flex w-full items-center justify-between px-7 text-sm'
+      )}
     >
-      Word #{wordCount + 1}
+      <p className={classNames({ 'text-green-700 underline': isProperWord })}>
+        Word #{wordCount + 1}
+      </p>
+      <div className="tooltip tooltip-left" data-tip={`The perfect solution's number of words`}>
+        <p>🏆 {solutionNumberOfWords}</p>
+      </div>
     </div>
   )
 }

src/screens/results/App.tsx

@@ -7,6 +7,7 @@ import { lettersForToday } from '../../util/lottery/letters'
 import { useMemo } from 'react'
 import { decodeResults } from '../../util/results/encodedInfo'
 import { Bot } from './Bot'
+import { Medal } from './Medal'
 
 export const Results = () => {
   const wordList = useAtomValue(words)
@@ -28,6 +29,7 @@ export const Results = () => {
       className="w-full max-w-xl"
     >
       <Top />
+      <Medal />
       {otherResults ? (
         <Words title="Their Words" words={otherResults.words} letters={otherResults.letters} />
       ) : null}

src/screens/results/Medal.tsx

@@ -0,0 +1,43 @@
+import { useMemo } from 'react'
+import { MEDALS, NONE_MEDAL } from '../../const/medals'
+import { generateSolution } from '../../util/solution/generateSolution'
+import { lettersForToday } from '../../util/lottery/letters'
+import { getMedal } from '../../util/results/getMedal'
+import { useAtomValue } from 'jotai'
+import { words } from '../../store/game'
+
+export const Medal = () => {
+  const wordList = useAtomValue(words)
+
+  const medal = getMedal(wordList.length)
+
+  const perfectSolutionWordCount = useMemo(() => {
+    return generateSolution(lettersForToday()).length
+  }, [])
+
+  return (
+    <div className="center card mt-4 w-full select-text bg-base-100 shadow-xl">
+      <div className="card-body flex flex-col items-center">
+        <h3 className="mb-2 text-xl font-bold">Medal</h3>
+        <div className="flex flex-col items-center justify-center gap-5">
+          <div>
+            <h2 className="text-7xl font-bold ">{medal.emoji}</h2>
+          </div>
+
+          <div className="text-md opacity-90">
+            {MEDALS.map((medal) => {
+              return (
+                <p key={medal.name + '-medal'}>
+                  {medal.emoji} {medal.differenceFromOptimal + perfectSolutionWordCount} Words
+                </p>
+              )
+            })}
+            <p>
+              {NONE_MEDAL.emoji} {perfectSolutionWordCount + 4}+ Words
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/store/game.ts

@@ -16,7 +16,9 @@ export const words = atomWithSeedStorage('words', [] as string[])
 
 export const resultHistory = atomWithStorage<
   Array<{
+    seed: string
     puzzleNum: number
     wordsUsed: number
+    perfectSolutionWordsUsed: number
   }>
->('history', [])
+>('game-history', [], undefined, { getOnInit: true })

src/util/game/handleSubmit.ts

@@ -8,6 +8,8 @@ import { SUCCESS_WORD_MESSAGES } from '../../const/messages'
 import { wordsByStartingLetter } from '../../const/wordList'
 import { Screen, screen } from '../../store/screen'
 import { PUZZLE_NUMBER } from '../../const/puzzleNumber'
+import { generateSolution } from '../solution/generateSolution'
+import { seed } from '../lottery/seed'
 
 export const isWord = (word: string) => {
   const firstLetter = word[0]
@@ -56,15 +58,19 @@ export const handleSubmit = async () => {
   }
 
   const nextLetter = letters[lastLetterIndex + 1]
+
   if (!nextLetter) {
     store.set(screen, Screen.results)
+
     // Push to our result history
     store.set(resultHistory, (prev) => {
       return [
         ...prev,
         {
           puzzleNum: PUZZLE_NUMBER,
-          wordsUsed: store.get(words).length
+          seed,
+          wordsUsed: store.get(words).length,
+          perfectSolutionWordsUsed: generateSolution(letters).length
         }
       ]
     })

src/util/results/getMedal.ts

@@ -0,0 +1,16 @@
+import { MEDALS, NONE_MEDAL } from '../../const/medals'
+import { lettersForToday } from '../lottery/letters'
+import { generateSolution } from '../solution/generateSolution'
+
+export const getMedal = (wordsUsed: number) => {
+  const solutionWordsUsed = generateSolution(lettersForToday()).length
+  const difference = Math.abs(solutionWordsUsed - wordsUsed)
+
+  let medal = MEDALS.find((medal) => {
+    return medal.differenceFromOptimal === difference
+  })
+  if (!medal) {
+    medal = NONE_MEDAL
+  }
+  return medal
+}

src/util/results/share.ts

@@ -4,14 +4,17 @@ import { words } from '../../store/game'
 import { store } from '../../store/store'
 import { toast } from 'sonner'
 import { encodeResults } from './encodedInfo'
+import { getMedal } from './getMedal'
 
 const colors = ['🟦', '🟧', '🟪', '🟨', '🟩', '🟫', '⬜']
 
 export const resultText = () => {
   const wordsUsed = store.get(words)
+  const medal = getMedal(wordsUsed.length)
 
   let text = `🎰 Charlottery No. ${PUZZLE_NUMBER}
 ✅ Completed in ${wordsUsed.length} words
+${medal.emoji} ${medal.name} Medal
 `
 
   let colorIndex = 0

src/util/solution/generateSolution.ts

@@ -61,7 +61,16 @@ const findWordsMatchingOrder = (letters: string[], options?: { maxLettersPerWord
   return matchingWords
 }
 
+const solutionCache = new Map<string, string[]>()
+
 export const generateSolution = (letters: string[], options?: { maxLettersPerWord?: number }) => {
+  if (!options) {
+    const cacheKey = letters.join('')
+    if (solutionCache.has(cacheKey)) {
+      return solutionCache.get(cacheKey)!
+    }
+  }
+
   // Create our root node which is an empty word at the start of the letters
   const root = new WordNode({
     word: '',
@@ -109,5 +118,9 @@ export const generateSolution = (letters: string[], options?: { maxLettersPerWor
     }
   }
 
+  if (!options) {
+    solutionCache.set(letters.join(''), solution)
+  }
+
   return solution
 }