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.
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.
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.
Don't center glyph-and-name contents vertically This led to the text names of the single-row glyphs ("Single", "Double" and "Line") appearing lower than the names of "Pipe" and "Squat-T" in the same row. With this fix, all glyph names are aligned within a row.
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).
Fix a couple of typos in my comments here While reading this to remind myself how I achieved a responsively-sized square, I found I had a number of misspellings.
Scribe: Fix the font size to not depend on page height The height of the game board is already fixed based on the viewport width, (to mtain a square asepct ratio). The use of 'vmin' in the font size led to a weird result where shrinking the page height left the board size untouched but the text-based game-play components would shrink, which was undesirable. The fix for that here is to simply switch from 'vmin' to 'vw' so the font size depends only on the page width, not the height. While exploring the issue described above, I found that making the page _extremely_ wide also caused the fonts to grow excessively and make the board spill out over the page margin. To avoid that, we cap the font size with a calculation based on the maximum page width. This takes advantage of a variable introduced in the previous commit.
Scribe: Increase font size for game elements It was just too hard to see things on my phone. I hadn't used this larger font size earlier because it caused the squares to stretch tall (no longer as squares) and squashing flat the mini grids without characters in them. But here I found I can avoid that problem by setting line height to 0.
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.