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.
Fix square to not be active if occupied Thanks to Scott who noticed yesterday he could tap on an occupied square and get an error message including "Square is already occupied". It's good the server catches that case and sends an error. And it's good the client presentes that cleanly. But the client shouldn't ever even let the user submit a move that the client already know is not legal. In this commit we appropriately set a square to not be active if it is already occupied. This fixes the case described above, and further makes it so that hovering over an occupied square won't even present the user with a cursor suggesting the square is "clickable".
Rename local variable from "active" to "grid_active" There is an "active" property up and down our component stack, (at the board level, whether it's the current players turn; further at the mini-grid level, whether it's a legal mini-grid; further still at the square level, whether the square is unoccupied). It's clear enough to uses a props name of "active" at each level. But when using a local variable to compute the child's "active" prop while in a current component with its own "active" prop, this can get confusing. So, at the board level, use a local variable of "grid_active" to compute the "active" prop for the child grid.
Fix bug where second players first move was forced to match first player's When the last_two_moves array has only one entry in it, then index 0 is the last move, not two moves ago, so we don't actually want to look at that.
Highlight last move and legal mini-grids for current move This is the necessary information so that players can actually know where to play. At this point, the only feature really missing from the game is automatic scoring of completed glyphs.
Move definition of Scribe glyphs to an array of objects And loop over this with map() to generate a list of React elements. This is instead of the previous list of literal React elements we had before. This doesn't have any immediate impact, but makes the glyph data available if other code wants to access it in the future, (such as code that is scoring a mini grid).
Don't waste space for glyphs that are not full height. For "Single" through" Squat-T" only two rows of dots are needed to display the full glyph, so it's wasteful to have a full-size glyph. We fix this by dynamically computing a correct viewBox for the glyph's SVG given the dots that are present, and then letting the "glyph" class styling automatically determine a height based on its children, rather than explicitly setting it to the full height, assuming a square.
Add a reference diagram of the 19 glyphs of Scribe Trying my hand at using the <svg> element within HTML for the first time. It's actually quite nice and I might start using it more frequently rather than trying to fight browser layout mechanisms when I'm trying to draw something very explicit, (like a board game).
Use an array spread syntax instead of .fill(null) I don't really need null items. In fact, the copy here with the appray spread syntax gives undefined, not null items. All I need is items that map() will actually act on. The initial Array(9) gives only "empty" items which map() ignores.
Add a button to copy the game URL for sharing and tighten up text The way we are styling <h2> right now makes it far too wasteful of vertical screen real estate. Instead, use the same font size/weight but inline with the sentence. Also, this button for copying the game URL should be handy, particularly on phones, etc.
Delay the "Connection lost" message by a second Otherwise, when simply clicking a link to navigate away from the page, this scary-looking red box can appear. Nobody should complain if it takes a few seconds for the game to notice a connection is lost.
Drop back from fanct UTF to plain ASCII "+" and "o" We can use the fancier glyphs in the future after we arrange for the client to have the appropriate font glyphs available.
Scribe: Style the board so there are clear gaps between the mini grids Thanks to Richard for helping me figure out how to force the square aspect ratio at the top-level. Below that, it's just two levels of CSS "grid" for the boxes and the one of "flex" to get the centered content.
Initial implementation of Scribe This is not at all sophisticated yet. Some of the things that are missing: * Proper layout of the board (need spacing to separate mini grids from each other). * Move restrictions: Don't allow a player to move in a super grid that doesn't correspond to their last move's mini-grid placement (unless the corresponding super-grid is full). * Presentation to the user of the scored glyph shapes * Scoring of completed mini grids * Scoring of the super grids for the final game And on that last point, there needs to be an option to play either the "majority" or "super-glyph" variation for the final scoring.