thinkalittlelonger

I have forked the Val Town React Hono Starter, but made no other changes to the code outside of this todo.md file. help me create make this word game. Let's focus on building out the front-end for now.

• Title: What's the Biggest Word You Can Think of?

The player is prompted with some constraints and must think of the biggest word they can that fulfills the constraints.

examples:

• What's the biggest word you can think of that starts with P and ends with P?
• What's the biggest word you can think of that contains the letters EVE in order (without anything in between)?

• Header
• Prompt
  • title
  • constraint
  • examples
• CurrentGuess
  • Cursor
  • lengthCounter
• SubmitButton
• trash button
• keyboard
  • key

gameState: [preGame, inGame, postGame]

inGame: currentRound currentGuess cursorPosition

• the title always starts with "What's the biggest word you can think of"
• the constraint

• Displays the currentGuess state, which is updated through the keyboard component.
• tapping/clicking on a letter in the current guess adjusts the cursor position
• the cursor should be a thin vertical line that strobes at a standard speed for a text editor.
• use a monospaced font
• Left justify the currentGuess
• Use a font size so that 15 letters fits within the width. when the currentGuess gets larger, dynamically resize the font so that the full word fits. Don't allow input after 30 letters (should be handled in keyboard keys below)
• the lengthCounter component should display the number of letters in the CurrentGuess. It should float above the top right corner of the currentGuess, similar to a notification count on an app icon (but don't use red)

• A button that submits the current guess
• has an selectable property
  • if the currentWord is blank,
  • certain constraints (like "ends with" or "uses every letter in a set") will make the currentGuess unselectable if the constraint is not met
  • when the current guess is submitted, the currentRound is incremented and the next round's constraint is presented. the current guess is reset to blank.
  • If it is the final round, submitting changes gameState to postGame

The trash button resets the currentGuess to blank without submitting. It should be a trash icon.

Submit and Trash buttons should appear on the same line, with trash being to the left of submit, and submit taking up 4x the width of the trash button.

• should always be up when gameState=inGame
• It should fill the bottom third of the screen on mobile
• Follow QWERTY layout, but only have keys for
  • the 26 Letters in the alphabet
  • to the left of Z, there should be a key with a backspace icon. The back button removes the letter at the cursor.
  • to the right of M, there should be left and right arrow keys.
• Keys should have an selectable property, unselectable keys should be indicated visually in css, but by default all keys are selectable.
• pressing a key adds the letter to the currentGuess at the cursor position.

• Mobile experience should be prioritized.
• Make the desktop version look a little more like the mobile version: rather than being full screen, it should be portrait-mode and centered in the screen.
• On desktop (and on mobile with attached keyboard), keyboard input should still word.

make the following tweaks:

1. Add a header at the top: "a word game by Alex Wein"
2. there should be less white space. Increase the size of the other elements slightly so that there's not as much blank space.
3. and distribute the blank space more evenly
4. On mobile, when I have 14 letters in the currentGuess, the cursor moves to a new line. ensure currentGuess is always a single line and doesn't change height.

make the letterCount bigger, keep it's position visually anchored to the top right of the currentGuess (not the container)

undo the last update and try again: I liked how the currentGuess looked (the size of the box should never change), I just want to move the counter down so it's not floating on its own. The counter should display 0 when the current guess is blank

The changes to the make the length counter bigger were successful and you should repeat them. Made the length counter bigger:

Increased font size from 0.9rem to 1rem Increased padding from 3px 9px to 4px 10px Increased min-width from 28px to 32px Increased border-radius to 16px for a larger, rounder look

that's better but not quite there yet. I want the letterCount to partially overlap with the white div with currentGuess at the top right corner.

This is an export from an Observable notebook. I want you to read it, and return a fully formed duckDB query against the wordnik table the query should be a union all of the results of the separate sql queries in the file try to preserve the sql coding style in the query (from-first, lowercase, etc.)

fields in result:

• id: int where the first query is 1, the next is 2, etc.
• rule: string: use text in the comment of each query above the where clause
• word: string: word from wordnik
• n_letters: int: length(word)

update todo.md with the correct query but make no other changes to todo.md:

from (
    -- 1: ends with p
    from wordnik
    select 1 as id, 'ends with p' as rule, word, length(word) as n_letters
    where word like '%p'

    union all

    -- 2: starts and ends with p
    from wordnik
    select 2 as id, 'starts and ends with p' as rule, word, length(word) as n_letters
    where word like 'p%p'

    union all

    -- 3: has the letters dog in sequence
    from wordnik
    select 3 as id, 'has the letters dog in sequence' as rule, word, length(word) as n_letters
    where word like '%d%o%g%'

    union all

    -- 4: starts with the letters OVER
    from wordnik
    select 4 as id, 'starts with the letters OVER' as rule, word, length(word) as n_letters
    where word like 'over%'

    union all

    -- 5: ends with the letters OVER
    from wordnik
    select 5 as id, 'ends with the letters OVER' as rule, word, length(word) as n_letters
    where word like '%over'

    union all

    -- 6: all vowels are As
    from wordnik
    select 6 as id, 'all vowels are As' as rule, word, length(word) as n_letters
    where word similar to '[^eiouy]+'

    union all

    -- 7: only uses QWERTY
    from wordnik
    select 7 as id, 'only uses QWERTY' as rule, word, length(word) as n_letters
    where word similar to '[qwerty]+'

    union all

    -- 8: can be typed only using your left hand
    from wordnik
    select 8 as id, 'can be typed only using your left hand' as rule, word, length(word) as n_letters
    where word similar to '[qwertasdfgzxcvb]+'

    union all

    -- 9: has exactly two Cs
    from wordnik
    select 9 as id, 'has exactly two Cs' as rule, word, length(word) as n_letters
    where length(word) - length(replace(word, 'c', '')) = 2

    union all

    -- 10: has the letters ABC in any order
    from wordnik
    select 10 as id, 'has the letters ABC in any order' as rule, word, length(word) as n_letters
    where word like '%a%'
      and word like '%b%'
      and word like '%c%'

    union all

    -- 11: no s no t no e no a
    from wordnik
    select 11 as id, 'no s no t no e no a' as rule, word, length(word) as n_letters
    where word similar to '[^stea]+'
)
select *
order by id, n_letters desc