Fencing Mode

[stevenhao]

Part 1: https://github.com/downforacross/downforacross.com/pull/146 (merged)

• preparation for game logic by wiring things together in the correct way
• reimplement core game logic in typescript
• copy & adapt core event synchronization logic from rooms.tsx

Part 2 (This PR):

• hold notes & implementation plan
• add fencing mode reducers & UI

Todos

• [x] support /beta/fencing/gid url param interface. incompatible with regular games
• [x] fencing mode initialization of unlocked squares
  • done serverside at game creation time
  • number of teams: (hardcoded to 2)
  • initial set of unlocked squares generated via algo (see Game Mechanics section)
• [x] in fencing mode, new state is tracked:
  • powerup tokens/cooldowns (reveal & check-square) [PUNT to future]
  • user<->team mapping
  • reveal & check actions other than "reveal-square" and "check-square" actions are ignored
  • invalid actions (square already checked, or square still in cooldown, or ran out of reveal-square tokens) are ignored as well
• [x] fencing mode UX
  • autocheck on cooldown (hardcoded to on by default) [PUNT to future]
    • could potentially deviate from reference implementation in the future by turning off autocheck
  • team rosters & scoreboard
    • render number of reveal-tokens each team has (as part of roster)
  • color the background of correct (green) squares by the team that got it
  • gray out inaccessible squares [see below for game mechanics]
  • render cooldown for check-square
  • instructions blurb
    • explanation of fencing rules & mechanics
• [ ] fix css of page

Game mechanics

• in fencing mode, you can only see entries (and their corresponding clues) that you have correctly solved. (these entries are called "unlocked") at least one cell of
• you can only navigate to a cell that belongs to an entry you have unlocked
• at the start, each team has a set of entries that are pre-unlocked. this is determined dynamically based on grid shape & number of teams
  • initial implementation: something like, take the 9 white cells closest to the starting location, and unlock all the entries that contain one of these cells - starting locations for 2-team games will be corners, but could be easily extended to support multiple teams as well)
• game ends when game timer runs out, or when one team has solved have the clues.
  • future/optional: scoreboard is frozen & game transitions to collaborative mode at this point, + replay UX is shown

Acknowledgements

Credits to @cesium12 for building the original matchmaking and game server for the competitive crossword game that this PR is based on.

• Credit also goes to the other members of the organizing team, https://github.com/YewLabs, of MIT Mystery Hunt 2021 for their help in inventing this mode.
• Reference implementation: https://github.com/YewLabs/cross-swords
• Livestream of MIT Mystery Hunt finals with commentary (highly recommend watching!): https://www.youtube.com/watch?v=jqlrJtg-JKg

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/downforacross/downforacross.com/83EixLdNd9LMNy2q3VjVaiJSc13Z
✅ Preview: https://downforacrosscom-git-fencing-downforacross1.vercel.app

[stevenhao]

Some implementation notes

• [x] New component Fencing as entrypoint. Takes in gid. These gids will be incompatible with regular games.
• [x] Fencing uses subscribeToGameEvents (new function!) to stay in sync w/ the server via websocket connection on what game events exist for the game.
• [x] Then, it uses gameState = useGameState(events) to transform a list of game events into the current game state. (this pattern is known as event sourcing -- the source of truth for the state rendered on the screen is actually a list of structured "updates". kind of like git & other vcs)
• [ ] Finally, it uses transformGameStateToPlayerProps(gameState) to prepare to render a child <Player/> component -- props are derived from game state appropriately.
• [x] and then the Fencing component returns <Player {...playerProps}/>.

Need to support:

• [ ] all the existing events & reducers (migrate from js)
• [ ] all the new events specific to fencing

[cesium12]

initial set of unlocked squares generated via algo (see Game Mechanics section)

FWIW, the original behavior is: The corner square itself must be white. Then, count white squares in the two available directions until hitting a black square. The product of the two counts must be between 10 and 30 for the grid to be allowed; furthermore, all clues that intersect that L-shaped region are unlocked initially. The goal is to provide a natural subsection of the grid as a reasonably sized "starting base".

color the background of correct (green) squares by the team that got it

This is one of the places where I ran into UX trouble. Most crossword interfaces shade the square the cursor is on, but I had reserved shading to indicate which team owned the square. I ended up trying to pop out the square slightly plus hatching on the rest of the light, so it would be independent of the color. (And the cell also has to indicate its cooldown somehow.)

[stevenhao]

The corner square itself must be white. Then, count white squares in the two available directions until hitting a black square. The product of the two counts must be between 10 and 30 for the grid to be allowed; furthermore, all clues that intersect that L-shaped region are unlocked initially.

This is really helpful! I was unsure about how to choose constants, so it helps a lot to have some reference parameters (10-30 starting corner area) that already have been tested in live gameplay.

Most crossword interfaces shade the square the cursor is on, but I had reserved shading to indicate which team owned the square.

Yeah, this is going to be tricky. I'll experiment with various styles that play nicely with the background-color-cursor... (maybe underline with color? outline?). Will also look closely at how you did it with pop-out/hatching... your UI felt very natural to me when I first used it.