anagrams: Add letters to the rack optimistically

Rather than waiting for a server response before displaying the letters
in the rack.

We _do_ still wait for the server response, and if it fails, then we
will revert and move the letter from the rack back to the center of
the board.

This optimistic addition guarantees that letters are added to the rack
in the order that the user typed them, (even if the responses to each
request come back in some other order). Reliable typing---what a concept!

Move ReconnectingEventSource from client to base.html in the server

Since some pages use that without referencing lmno.js but all pages
need to have the ReconnectingEventSource defined.

Add a new ReconnectingEventSource, and use it in all cames

This wrapper for EventSource will attempt to reconnect after a lost
connection (up to 5 times with a 2-second delay between each attempt).

With this in place, a quick server restart (< 10 seconds) should be
unnoticed by clients.

anagrams: Again, follow the rule that server events are the source of truth

Prior code here was returning letters from the rack (claim area) to
the center of the board, but then server events would also return the
letters, resulting in duplicate letters appearing in the center as
ghosts.

Meanwhile, there was an opposite problem in response to the user
pressing backspace in quick succession. Because the client was waiting
for the server to remove the tile from the rack, addiitional presses
of backspace would all apply to the same last tile, ad would fail.

So, now, as of this commit, we remove tiles from the rack with
backspace, (allowing subsequent presses to target subsequent letters)
but wait for the server to tell us the tile has been returned to the
center area. This should keep state in sync and keep things humming
along.

anaagrams: Implement a game-ending modal

Once the bag is empty and all players have gone idle, (nobody has even
attempted to claim a word in some time), the server will report that
the game is ready to end. The client then displays a modal with a
countdown giving the user the chance to say whether they are still
looking for words. If anyone is still looking, the server should start
its idle counter over. If not, then the server should declare the game
over.

An attempt at catching some state drift bugs (and adding logging as well)

I recently noticed a letter get "stuck" in the center area, (it appeared
to be there, but did not allow any interaction).

This commit is by claude which it described as follows, (note: in the
below, rAF is requestAnimationFrame):

* Fixed the likely culprit — rAF loop using stale state:

  The old code checked this.state.revealing[tile.id] synchronously
  after an async setState to decide whether to keep animating. Now it
  uses a local running flag, and the loop termination is decided
  inside the setState callback where it has access to the actual
  current state.

* Defensive cleanup in receive_center:

  When the server sends an authoritative center update, any revealing
  entries for tiles no longer in center are now cleaned up. This
  prevents ghost revealing state from accumulating.

* Periodic consistency check (every 5s):

  - Detects stale revealing entries for tiles not in center, logs a
    warning, and auto-cleans them

  - Detects inconsistent claim state

The combination of the rAF fix and the defensive cleanup in
receive_center should prevent the stuck-tile scenario. And if
something else causes drift in the future, the console warnings will
help diagnose it.

Add comment about authoritative server state for central tiles

As a reminder to ensure we follow this principle.

Allow for rearranging the rack while claiming a work

This is implemented with both of DND and touch drag, (so should work
either a mouse or a touchscreen).

anagrams: Fix claim interface to work for stealing a word

Typing letters in the claim area now draws from stolen words first,
(if possible), and from the center area otherwise. Each letter used
from a stolen word is marked in accent-color-muted to show it has
been used. The backspace key or a little "X" badge can be used to
return letters from the rack back to where they came from.

anagrams: Display words and letters being claimed by another player

This allows other players to be a part of the action, (and even try
to predict what the final word will be while a claim is happening).

anagrams: Make the "return word" a badge at the upper right of the word

This makes it much more clear what this icon is, (it was confusing
when it was inline next to the existing '+').

anagrams: Allow clicking on a word to steal it

In addition to dragging the word, which was already supported.

anagrams: Allow pressing Enter to start a claim

If claiming letters from the center, the user can just start typing.

But for a steal, they need another keybinding to initiate the claim
phase and Enter seems like a reasonable option for this.

Display 3, 2, 1 when revealing a tile (even if server uses < 3 seconds)

We recently change the server to make the tile reveal time be only 1.5
seconds. But we still want to display a "3, 2, 1" countdown.

So evenly space out those 3 numbers in whatever time the server gives us.

letterrip, anagrams: Make game reload smoother

Previously we were requiring each player to do a separate join_game
(even after they were already part of the game). Notably, if the user
ever reloaded their browser, they had to click "Join game" yet again.

Instead, in this commit we add a game.started state. And we only need
one player to start the game, triggering the send of the started game
state to all players.

Now, if a player reloads their browser, they will just see the game
state, and not a "join game" button.

Arrange tiles neatly when reloading the game

The random positioning (which we use for one-at-a-time dealing of
tiles) was failing here, because each tile's random position was being
chosen against an empty playfield, (the tiles are being added in bulk
and the state isn't being updated between tiles). So the letters ended
up piling on top of each other.

We have a nice way to arrange non-overlapping tiles with the
shuff_tiles() function, so just call that once when doing a bulk
receive of tiles.

Use a full tile's worth of space between words in the score display.

Previously, the inter-word display was a tiny gap and things all ran
together.

Both the tile size and the gap between tiles are variables for
consistent computation.

anagrams: Compute correct constraints when dragging tiles

Keeping tiles precisely in the bounds of play.

Add a shuffle button for arranging all tiles in the play area

If the user wants to move them around, they can. But for cleaning up,
(or changing the order randomly), the player can click this shuffle
button.

anagrams: Bring claim area into our color scheme

By preferring --accent-color and existing button styling wherever
possible, and add a new --accent-color-muted. Avoid bright red for
actions like cancelling the claim or returning a word, using subtle
gray instead.

anagrams: Try a little to avoid placing a tile on top of others

This just tries 10 different random positions and picks the one that
is the furthest from existing tiles.

Add support for dragging tiles while claiming

This can be either to drag tiles to the rack (to claim them) or to
just rearrange the tiles (as can already be done outside of
claiming). A 5-pixel threshold of movement will trigger a drag
operation. Movement less than that will be considered a click and will
claim the letter.

anagrams: Add a bunch of keybindings to make things keyboard friendly

The most significant is that just typing a word starts a claim
implicitly. But we also add "space" for drawing a new letter from the
bag, and Y/N for voting.

Use an SVG for the tile bag (rather than an emoji that looks like a purse)

This SVG is creative commmons (public domain dedication) made available
through the Open Clipart Library. We originally found it here:

https://commons.wikimedia.org/wiki/File:Mcol_money_bag.svg

And edited it to remove the dollar sign.

anagrams: Change score to use existing accent color

Rather than inventing a new color (which looked pretty bad).

anagrams: Use gloabl styling for the "Claim a Word" button

Trying to have some consistent styling across the games here.

Remove custom "join-btn" classes from letterrip and anagrams

We already have button styling at the top levl. Use it for consistency.

Make the "Host a new game" buttons primary on each page

Displaying it first, (before the form for joining an existing game).

Also drop the submit button from the join form, (relying on the user
simply entering a game ID instead).

This makes the primary flow smoother: Choose a game, then click "Host"
without the user being confronted with a form and having to decide
which of two buttons to click.

Simplify tile dealing from the bag

No longer require multiple people to request a letter. Instead, any person
can draw a new letter from the bag as long as no letter reveal is currently
in progress.

Fix tile dealing animation

It was previously showing only a "3" instead of "3", "2", "1", and it
was fading the whole tile instead of just the number. Both issues are
fixed in this commit.

Fix Anagrams: draggable center tiles, keyboard input, countdown animation, claim bugs

1. Center tiles can be dragged to rearrange (client-side only,
   mouse and touch) to help visualize possible words.
2. Keyboard input during claiming: type letters to grab from
   center, Backspace to return last, Enter to submit, Escape
   to cancel.
3. Countdown shows 3, 2, 1 on the tile with opacity fade
   animation each second.
4. Fix cancelled claims not returning tiles to center (let
   server SSE events handle state cleanup).
5. Fix UI staying in claim mode after successful word submission
   (server-side fix: broadcast claim-end after acceptance).
Also remove game_steal references (deferred for later).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Add Anagrams client-side UI

React game component with center letter pool (random tile
positions), claim mode with rack for arranging words, player
word areas with steal support, voting modal for non-dictionary
words, and game-over scoreboard. Also adds lobby page and
listing on main index.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Extract shared tile CSS into tiles.css

Base .tile and .tile.blank styles are now in a shared stylesheet
so they can be reused by multiple letter-based games.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

letterrip: Fix blank-letter to work even if letter selection is cancelled

If a user is moving a blank tile off of their rack onto the board,
then they are required to choose a letter for the blank. In this
situation, cancelling letter selection cause the blank tile to be
returned to the rack.

In contrast, when moving a blank tile from one space on the board to
the other, the blank will already have a selected letter, and it's
reasonable for that selection to be unchanged. So in this case,
cancelling the letter selection should let the movement work, and
should not send the letter back to the rack.

This commit fixes that scenario by performing the movement prior to
bringing up the selection modal. That way, if the selection modal is
cancelled, there's nothing else to do and the user gets the desired
behavior (the tile moved, unchanged).

Add a form to join an existing game (by 4-letter code) from each game page

We already had the ability to host a new game at these pages, but a
user may land here on want to join an existing game. So give them that
form to be able to do that. (Saves them having to know that they could
go to / to do that, and saves them the work of doing that.)

letterrip: Allow the grid to grow beyond the default page width

It's silly to make the user scroll back and forth when the grid gets
wider than the default page. So set the board's container to use a
maximum width that is based on the viewport, rather than just being a
percentage of the parent. For this to work, we also have to drop the
parent-relative 100% maximum width from .board-and-rack.

letterrip: Don't bring up modal for selecting blank tile when first clicking it

Instead, just select the tile on first click, and then bring up the
selection modoal on the second click, (either when selecting the
destination cell for movement or deselecting it).

This is consistent behavior with what the user will have first seen
when moving the blank from the rack to the board, and now means that
the user can use click-to-select/click-to-move to move a blank tile
from one board square to another, (which was impossible prior to this
commit).

letterrip: Remove all word validation from the client

Now that the server has a dictionary, it performs all validation of
valid tile placements. This allows for a smaller client, (no need
to download a word list anymore), and ensures that word validation
is performed consistently in a single place on the server side.

letterrip: Display scores at the end of the game

The server now computes a score for each player and sends them out,
so display the scores and the board for each player.

Rework touch drag operation to render dragging tile as a React component

We encountered a bug where a touch drag operation was interrupted, by
some operation, leaving a ghost tile left around half-way through the
drag operation. One option to fix this would be to implement a
tounchCancel handler to clean things up.

But an alternate approach, in this commit, is to render the tile being
dragged as a React component. This way, everything is rendered
uniformly as React components, and we have less dependence on precise
browser semantics with respect to touchCanel, etc.

Several fixes for styling of the "blank modal" selector

This is the modal dialog that pops up when the user clicks on a
blank tile to select what letter it represents. The changes in
this commit are:

1. Use the same appearance (referencing the same CSS class) for
   the tiles in this modal as for tiles in other contexts, (this
   replaces the previous custom styling which was white text on
   a light background and hard to read).

2. Restructure the modal so that it is centered over the grid
   rather than centered over the viewport (also constrain the
   rack to not be wider than the grid).

3. Fix a bug that resulted from the user cancelling a selection of a
   blank tile, (it was "returned" to the rack before being properly
   removed from the rack, resulting in two occurences of the same tile
   on the rack). See the reassign_true logic in this commit for the
   relevant fix.

Updated babelrc from babel 6 to babel 7 format

And update this dependency in the README file.

index.html: Add "Letter Rip" to the list of available games.

Which is the latest addition to LMNO games.

Use new /place endpoint to tell server aboud tile placements

And accept the board contents when the server provides it.

This is all so that a browser refresh doesn't destroy board state.

Don't grow the grid if not needed, (shift tiles instead)

At least, shifting of the tiles is what the user experiences. Within
the code, the concept is simpler: We don't have a grid size at all
anymore, but simply compute the grid bounds that we want whenever
things change. The bounds are made to just fit the tiles (plus one
extra row/column on each side) and never smaller than the original
size chosen to fill the screen.

Make the rack sticky

If the user needs to start panning the grid around, we want their rack
to always stay visible.

Only apply hover effects on devices with a true pointer

Prior to this change, the "stuck" button was staying stuck (ha!) with
styling as if hovered even after the user was done pressing it.

Compute initial grid size to be no larger than fits on the screen

Nobody wants a UI that starts off with a horizontal scrollbar!

But the 10x10 initial grid wasn't fitting on my mobile device. So
dynamically compute a smaller grid size that will fit.

Also, rather than hard-coding the cell size in the computation of the
grid size, use a --cell-size custom property.

Add a "touch drag" interface to the game

This sits alongside the existing HTML5 DND interface.

The new touch interface is _much_ more friendly on a phone than the
previous HTMl DND interface, (which required long pressing before
it would do anything).

Change height of the "Letter Rip" button to match the height of tiles

Prior to this change, the appearance of this button was causing the
rack to grow vertically, which was distracting.

Leave the "Some words are not valid" text up whenever it is relevant

Prior to this commit, this message was disappearing when the last tile
was removed from the rack, but there's no reason for that. The message
depends only on the state of the board, not whether there are tiles
on the rack or not.

Add a tap-to-select/tap-to-place interface

This sits alongside the existing drag-and-drop interace, so either
can be used.

Fix race condition in handling of stuck button

Which was causing the button to stay stuck (ha!). The new logic
lets the SEE event be the single source of truth.

While fixing this, fix the styling of the button to be more clear,
specifically making it appear as a button saying "I'm stuck" where
it was previously blank which made its use non-obvious.

Calm down the dynamic grid resizing

There was some annoying jitter as rows were being constantly
added/removed so that there were always 3 empty rows/columns around
placed tiles. Instead, in this commit, the grid starts initially at a
size of 10x10 and then only grows (by one tile) when a tile is placed
at an extreme edge.

Add logging for any non-alphabetic tile that might show up

I saw a bug where a tile was diplayed with a value of '1' which was
unexpected. If this happens again, this logging should help us
determine what happened.

Track receival of bag_remaining count when joining

This was recently added to what the server sends on join

Initial implementation of Letter Rip

This is the game we originally learned as "Speed Scrabble", (but
similar to what others may have learned later as Bananagrams).

This implementation was created with the assistance of claude opus
4.6.

Add some autofocus attributes

Just trying to make the games a little more keyboard friendly.

scribe: Add explicit width/height of 100% to elements of the "board" class

This fixes a bug with Safari where every mini-grid was appearing with
a height of 0.

Reformat some h2 tags

The extra whitespace here was causing emacs to do something funny,
(underlining that space), so things look better with it dead.

Remove extraneous closing p tag.

Missed this in a recent edit.

Link scribe in at the top level

Now that glyphs are scored, I feel a bit better about putting the game
out there.

Score each mini glyph and render the winner for each

At this point the game is almost totally complete. All that is missing
is the final-score indication of the majority winner and the
super-glyph winner.

Prep for stashing final scores against each mini grid

By turning each mini grid into an object rather than just an array of
squares. This new object now has a place to lodge scores and a final
winner for each mini grid, (though we aren't populating those yet).

This commit is intended to have no visible change on the game.

Add support for detecting glyph shapes

And color the background of each cell that is part fo a glyph in a
player-specific color.

Note: I'm not at all convinced that this is a good way to style
things, but the actual functionality is here now, and I'll be happy to
improve the specific styling in the future.

Scribe: Prep game state for detection of glyphs

There's not any detection of glyphs here yet, there's simply a new
slot in each of the squares: Where we used to just have a textual
ymbol for each occupied square, we now have an object:

{
          symbol: '+' or 'o',
          glyph: true or false
        }

And the glyph Boolean is used to add a class to the HTML square
element as well.

Stop ignoring .gitattributes

We're implementing a cleaner approach for this where the nogit script will provide its own .gitattributes data as needed, (and the lmno-todo repository won't need to).

Remove typo in URL

Way to many Ts there, of course.

Ignore the TODO file, its .nogit directory, and its .gitattributes file

I'm going to experiment with a TODO file that is present in this
directory but tracked via a separate git repository.

If we ever end up wanting to add a TODO file here, (or a
.gitattributes file), then we can reconsider this implementation
approach at that point.

empathy: Don't force active:true when adding state for a new player

This fixes the bug where reloading the interface would cause inactive,
grayed-out player names to appear solid instead of grayed out.

What I had been thinking when writing this code is that this function
would be called only when a new player joins the game, (and by
definition, a newly joined player must be active). But this function
can also be called when a player reloads their interface, and at that
point player-join events are received for all players whether active
or not.

Meanwhile, the server is now explicitly providing the active bit for
players, so we get the right information without doing anything.

Display (grayed out) inactive players with non-zero scores

This issue came up with playtesting last night: We had a player who
finished in the top three overall, but dropped out for the last couple
of rounds. But we still wanted to see their score in the final
results. So, here we keep track of active and inactive players and
display the inactive ones (if they have non-zero score) with 50%
opacity.

Only consider active players when counting players needed for prompt voting

Now that the server is sending us inactive players, we don't want to
consider them when computing how many votes we need to go forward with
a category.

Fix "KUDOS SLAM" achievement to only consider players that answered

The potentially larger number of registered players is totally
irrelevant here.

Allow a user to un-select a star

By doing the intuitive thing and clicking it again.

Add instructions for giving kudos

Otherwise, this feature could be hard to discover.

Add the KUDOS SLAM and GREAT MINDS achievements

At this point, I've implemented all of the achievements we originally
thought of, (except for TWINNER which is going to take a bit more code
to find cases where it applies).

Add some explanatory text when there aren't enough categories/votes

Encouraging the players to make more of either, so that the game will
make some progress.

Fix category voting to select among only those with the most votes

Previously, the code was selecting randomly among all categories with
at least a quorum of votes. With this commit, the code now does what
was intended, by selecting randomly only among the categories that are
tied for the most votes.

Change category voting to require fewer votes when there are more categories

Now, at the beginning, it's no longer enough for there to be a
majority of votes on a single prompt. Instead, the number of votes
required is the number of players minus the number of available
prompts.

Put the "Start Game" button above the category-vote prompts

So that it's not required to scroll down a tone before being able to
start the game.

Display kudos (as stars) in the per-round scores

Now that the server gives us this information, let's display it,
(otherwise, the players could be very confused about why some ties
were apparently broken in the sorting).

Send kudos as a Boolean alongside each word group

This is how the server is now expecting these to come in, (now that
it's actually scoring them).

Add a QUIRKSTER achievement

This one recognizes the dubious achievement of submitting an entire
docket of answers with no matches with anyone else at all. Thanks to
Andrew for naming it.

Rename "label" to "achievement"

The word "label" was far too generic to capture the stlying needs for
this class. Thanks to Andrew for pointing out that this feature is
really what games today call an "achievement".

Don't allow text to overflow an ambiguity button in the Y direction

Thanks to one of my nephews for submitting something like:

b̵̩͚̽̀͂͂͑̿͘̕͝u̸̮̅͌g̷̡̢̻̬͎̙͉̳̬͈̑̐̋̃̅ẻ̶̤̜̾̐x̷̦͔͚͙̤̀̀̀̂̕ṣ̷͙̦̘̰̔̾͊̊̍̒͛̄̉̚p̵̡̤̫̹̥̀́́͆ǫ̷̮͚̳̭̘̭̏s̷͔̈́̈͋̿̌̑͛̚̚͘i̸͔͔̾̄͐̓͗͐̌͘ṉ̷̨̭̻͇̥͌̓̕g̴̢̧̖̬͈͇̻͉̯͈̅̔͛̀

in our game last night, which ended up scribbling over the rows above
and below in the judging view. This fix chops things off vertically,
(which doesn't solve the case if someone is _legitimately_ trying to
get such text to appear—we can address that case when it appears).

Allow a really long word inside an ambiguity button to break onto multiple lines

Thanks to playtesting with "4 made-up words" and entries of
"supercalifragilisticexpialidocious" for exposing this bug.

Reword the Move On button when we're not waiting for anyone specific

This case arises when there are additional players still connected to
the game, but that haven't even started typing any answers.

In this case, the view looks like this:

Submission received

The following players have submitted their answers: <list>

In this case, wording of "Move On Without Their Answers" suggests the
exact opposite, (as if "their" is referring to the submitted players
rather than those not listed on this page). The new wording in this
case, "Move On Without Anyone Else" makes it more clear what the
behavior is.

Define the move_on button after the still_waiting component

This is just code movement here with no intended logical change. The
motivation here is so that the "Move On" button can be worded
differently depending on who we're waiting for.

Reject a category with a number of items of 0

Thanks to my nephews for poking holes at the implementation by feeding
some stressful input to the game.

Add some clarifying text to the "Move On" buttons

Making it more plain to participants that advancing like this will
leave some players out of the specific phase.

Set kudos to null if no answer is starred

This fixes the bug we saw last night where nobody could submit judging
results until they had starred at least one item.

Eliminate some debugging calls to console.log

These were not meant to stick around.

Add key to list of PromptOption components

This is the classic thing to overlook in React programming. It's easy
to forget the key until React warns that it's missing.

empathy: Add the ability to star one favorite item

The client isn't currently saving information about which words the
player themself submitted, so it isn't yet preventing the user from
sending kudos to an item they submitted themself.

empathy: Pre-group words according to common patterns

Specifically, the following will be considered identical and
pre-grouped:

<word> = <word>s
        <word> = a <word>
        <word> = an <word>
        <word> = the <word>

Unlike the server-side canonicalization of case differences, which are
not visible, the above matching words are all still made available to
the player and simply pre-grouped. So, the player can decide whether
to leave them grouped or to separate them back out.

Add a "PERFECT" label for a player with a perfect score

It's nice to know when a player (or group of players) did as well as
could be done.

Fix the key for some list items

We forgot to update this we grouped players that had tied scores. So
since then the key value has been undefined, resulting in a warning
from React.

Drop extra PromptOption state for not showing a specific prompt

It was fun for me to learn about how to use the useState hook,
but this only code path was only necessary for when I was not
planning to distribute negative votes through the server to
other clients.

I ended up distributing that state after all, which has the benefit
that hidden prompts stay hidden when reloading (and from one round to
the next). [One potential downside is that hidden prompts are
permanently hidden---they can't be made to appear again. Oh well!]

And now that the server is telling us about the prompts we've already
voted against, and we're already not dispalying those, we don't need
the additional state here to hide things on the client side before we
receive that notification from the server.

empathy: Add button to hide/(vote against) categories

The server collects (and distributes) votes against but only the
client who voted against a category hides it.

Shorten the fade-out delay for the activity indicators

Andrew said these kept going for too long after the person was done
typing. So hopefully the new values here are a better fit.