Wordleeeeeeee

How to play

You have 10 attempts to guess a 3 (thats e rounded to the nearest whole number) character sequence of variations of the letter e. You are not without help. If a letter is in the sequence, it will be highlighted in yellow. If a letter is in the correct place in the sequence. If a letter is not in the sequence, it will be highlighted grey.

Why this game is different from most (kind of)

This game is basically completly based on state. That means the only actions (onclick) I had to write were setting state.

For example, here is the code for the Key component, that shows up when you type:

<div
  class={clsx(
      'flex size-15 items-center justify-center rounded border text-2xl',
      attempts[attempt] && /* because typescript */
        attempts[attempt][letter] === word[letter] &&
        'bg-green-400/25',
      attempts[attempt] &&
        attempts[attempt][letter] !== word[letter] &&
        word.includes(attempts[attempt][letter]) &&
        'bg-yellow-400/25',

      attempts[attempt] && attempts[attempt][letter] !== word[letter] && 'bg-gray-400/25'
  )}
>
  {attempt == current ? currentText[letter] : attempts[attempt] && attempts[attempt][letter]}
</div>

Sure, its not good code but it works, and the one rule of programming is if it works, DONT TOUCH IT.