]> git.cworth.org Git - lmno.games/log
lmno.games
2 years agoDisplay kudos (as stars) in the per-round scores
Carl Worth [Mon, 29 Jun 2020 21:28:35 +0000 (14:28 -0700)]
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).

2 years agoSend kudos as a Boolean alongside each word group
Carl Worth [Mon, 29 Jun 2020 21:27:36 +0000 (14:27 -0700)]
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).

2 years agoAdd a QUIRKSTER achievement
Carl Worth [Mon, 29 Jun 2020 17:49:22 +0000 (10:49 -0700)]
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.

2 years agoRename "label" to "achievement"
Carl Worth [Mon, 29 Jun 2020 15:55:29 +0000 (08:55 -0700)]
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".

2 years agoDon't allow text to overflow an ambiguity button in the Y direction
Carl Worth [Mon, 29 Jun 2020 15:43:48 +0000 (08:43 -0700)]
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).

2 years agoAllow a really long word inside an ambiguity button to break onto multiple lines
Carl Worth [Mon, 29 Jun 2020 15:40:08 +0000 (08:40 -0700)]
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.

2 years agoReword the Move On button when we're not waiting for anyone specific
Carl Worth [Mon, 29 Jun 2020 15:32:51 +0000 (08:32 -0700)]
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.

2 years agoDefine the move_on button after the still_waiting component
Carl Worth [Mon, 29 Jun 2020 15:29:51 +0000 (08:29 -0700)]
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.

2 years agoReject a category with a number of items of 0
Carl Worth [Mon, 29 Jun 2020 15:27:07 +0000 (08:27 -0700)]
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.

2 years agoAdd some clarifying text to the "Move On" buttons
Carl Worth [Mon, 29 Jun 2020 15:14:59 +0000 (08:14 -0700)]
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.

2 years agoSet kudos to null if no answer is starred
Carl Worth [Mon, 29 Jun 2020 15:06:54 +0000 (08:06 -0700)]
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.

2 years agoEliminate some debugging calls to console.log
Carl Worth [Mon, 29 Jun 2020 15:06:23 +0000 (08:06 -0700)]
Eliminate some debugging calls to console.log

These were not meant to stick around.

2 years agoAdd key to list of PromptOption components
Carl Worth [Mon, 29 Jun 2020 15:05:23 +0000 (08:05 -0700)]
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.

2 years agoempathy: Add the ability to star one favorite item
Carl Worth [Sun, 28 Jun 2020 23:25:29 +0000 (16:25 -0700)]
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.

2 years agoempathy: Pre-group words according to common patterns
Carl Worth [Sun, 28 Jun 2020 22:55:46 +0000 (15:55 -0700)]
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.

2 years agoAdd a "PERFECT" label for a player with a perfect score
Carl Worth [Sun, 28 Jun 2020 22:28:34 +0000 (15:28 -0700)]
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.

2 years agoFix the key for some list items
Carl Worth [Sun, 28 Jun 2020 22:26:54 +0000 (15:26 -0700)]
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.

2 years agoDrop extra PromptOption state for not showing a specific prompt
Carl Worth [Sun, 28 Jun 2020 21:44:47 +0000 (14:44 -0700)]
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.

2 years agoempathy: Add button to hide/(vote against) categories
Carl Worth [Sun, 28 Jun 2020 21:42:32 +0000 (14:42 -0700)]
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.

2 years agoShorten the fade-out delay for the activity indicators
Carl Worth [Sun, 28 Jun 2020 21:10:40 +0000 (14:10 -0700)]
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.

2 years agoAdd animated, bouncing/fading ellipses to indicate activity
Carl Worth [Sun, 28 Jun 2020 17:46:00 +0000 (10:46 -0700)]
Add animated, bouncing/fading ellipses to indicate activity

So that all users can easily see if other players are actively
participating in the answering/judging phase or if they have gone
totally idle.

2 years agoAdd a containing div element to the "still waiting" component chunks
Carl Worth [Sun, 28 Jun 2020 16:08:06 +0000 (09:08 -0700)]
Add a containing div element to the "still waiting" component chunks

And drop the use of a list.

The list was annoying because it was triggering the React warning:

Each child in a list should have a unique "key" prop

And in this case, it seemed really silly to have to name/distinguish
the <p> element from the following <ul> element.

And this new <div> does give us a logical place to treat this chunk of
the document as a single element if needed, so this is the logically
correct thing to do.

2 years agoMore avoidance of plurals to describe singular lists
Carl Worth [Sun, 28 Jun 2020 15:34:32 +0000 (08:34 -0700)]
More avoidance of plurals to describe singular lists

And I'm not worrying about internationalization here.

2 years agoEliminate lead-in text when there is nothing following
Carl Worth [Sun, 28 Jun 2020 15:21:41 +0000 (08:21 -0700)]
Eliminate lead-in text when there is nothing following

I was often annoyed to see the text "Still waiting for the following
players:" when it was followed by no players at all.

It would have been really awkward to try to achieve the result of this
commit withing the final return statement. It's funny how often I
forget that JSX doesn't require all content to be contained in a
single return statement. I often find myself migrating to an approach
that can be seen in this commit, and I seem to prefer it:

  * Conditions are captured in JavaScript code, (and not within JSX)

  * Various React componenents are each captured in separate JSX chunks

  * The final return statement is often just listing previously
    constructed components

2 years agoUse "answer" instead of "answers" when there is only one item in a category
Carl Worth [Sun, 28 Jun 2020 15:20:15 +0000 (08:20 -0700)]
Use "answer" instead of "answers" when there is only one item in a category

It's funny that here I'm taking advantage of the witespace elimination
that I complained about just a couple of commits ago. Ah well.

2 years agoAdd the text of the active prompt to the judging and scoring screens
Carl Worth [Sun, 28 Jun 2020 15:19:13 +0000 (08:19 -0700)]
Add the text of the active prompt to the judging and scoring screens

It's often helpful to be able to refer back and answer "What was the
exact wording of this category again?".

2 years agoempathy: Add some missing whitespace
Carl Worth [Sun, 28 Jun 2020 15:17:58 +0000 (08:17 -0700)]
empathy: Add some missing whitespace

JSX is sometimes annoyingly aggressive about eliminating whitespace
between textual content and component content. I'm not sure if this
solution is the best approach, but it works at least.

2 years agoAdd score for each word in the display of results for each round
Carl Worth [Sun, 28 Jun 2020 00:39:52 +0000 (17:39 -0700)]
Add score for each word in the display of results for each round

This really helps in picking out whether two words were of equal value
or not.

2 years agoStop abusing the JavaScript back-tick syntax within JSX
Carl Worth [Sun, 28 Jun 2020 00:34:06 +0000 (17:34 -0700)]
Stop abusing the JavaScript back-tick syntax within JSX

JSX already lets us implicitly combine adjacent string literals
together so it's simpler to not use the JavaScript back-tick syntax
but instead simply pop back to JSX when we need some literal string
content.

2 years agoTrack server change of grouping players with tied scores
Carl Worth [Sun, 28 Jun 2020 00:31:34 +0000 (17:31 -0700)]
Track server change of grouping players with tied scores

This makes it more clear that players tied by displaying them in the
same row, (which also saves some space if there are a lot of ties).

2 years agoImplement voting for the "New Game" button
Carl Worth [Sat, 27 Jun 2020 23:32:05 +0000 (16:32 -0700)]
Implement voting for the "New Game" button

Making this phase advance much like the other phases, and dependent on
a majority of the players rather than just letting one player stomp
all over things.

Beyond this, we still do want to allow players to inspect the state of
past rounds, but the UI for that that will have to come later.

2 years agoAdd a ready bit to client state, and render nothing before ready
Carl Worth [Sat, 27 Jun 2020 22:00:09 +0000 (15:00 -0700)]
Add a ready bit to client state, and render nothing before ready

The ready bit is set to true when the client receives a game-state
event from the server.

This commit fixes things so that users will not see a brief flash of
the category-input form before the actual content that is desired.

2 years agoAdd simple styling of the <strong> element
Carl Worth [Sat, 27 Jun 2020 18:09:22 +0000 (11:09 -0700)]
Add simple styling of the <strong> element

Doing the obvious thing and setting font-weight to bold.

This <strong> element is now being used by the admin page.

2 years agoempathy: Track the player-exit event
Carl Worth [Sat, 27 Jun 2020 18:07:49 +0000 (11:07 -0700)]
empathy: Track the player-exit event

Now that the server is correctly noticing when a client drops it
connection, and notifying clients when a player has dropped every
connection, we now listen for that and drop players from our list
when they have left the game.

2 years agoFix square to not be active if occupied
Carl Worth [Sun, 21 Jun 2020 16:19:53 +0000 (09:19 -0700)]
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".

2 years agoRename local variable from "active" to "grid_active"
Carl Worth [Sun, 21 Jun 2020 16:16:29 +0000 (09:16 -0700)]
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.

2 years agoFix bug where second players first move was forced to match first player's
Carl Worth [Sat, 20 Jun 2020 20:14:29 +0000 (13:14 -0700)]
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.

2 years agoHighlight last move and legal mini-grids for current move
Carl Worth [Sat, 20 Jun 2020 19:11:50 +0000 (12:11 -0700)]
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.

2 years agoMove definition of Scribe glyphs to an array of objects
Carl Worth [Sat, 20 Jun 2020 18:01:33 +0000 (11:01 -0700)]
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).

2 years agoDon't center glyph-and-name contents vertically
Carl Worth [Sat, 20 Jun 2020 17:51:04 +0000 (10:51 -0700)]
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.

2 years agoDon't waste space for glyphs that are not full height.
Carl Worth [Sat, 20 Jun 2020 17:48:26 +0000 (10:48 -0700)]
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.

2 years agoAdd a reference diagram of the 19 glyphs of Scribe
Carl Worth [Sat, 20 Jun 2020 17:28:34 +0000 (10:28 -0700)]
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).

2 years agoUse an array spread syntax instead of .fill(null)
Carl Worth [Sat, 20 Jun 2020 17:21:32 +0000 (10:21 -0700)]
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.

2 years agoFix a couple of typos in my comments here
Carl Worth [Sat, 20 Jun 2020 17:20:20 +0000 (10:20 -0700)]
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.

2 years agoPut commas back into players' overall scores list
Carl Worth [Thu, 18 Jun 2020 18:54:09 +0000 (11:54 -0700)]
Put commas back into players' overall scores list

I keep learning that the less logic there is in JSX, the better.

2 years agoAdd Emapthy link to the top-level list
Carl Worth [Thu, 18 Jun 2020 16:18:03 +0000 (09:18 -0700)]
Add Emapthy link to the top-level list

Since the game is getting pretty playable at this point.

2 years agoSort player list by overall scores
Carl Worth [Thu, 18 Jun 2020 16:14:25 +0000 (09:14 -0700)]
Sort player list by overall scores

Making it that much easier to see who is in the lead

2 years agoWait for judging phase to be idle before displaying "Move On" button
Carl Worth [Thu, 18 Jun 2020 16:07:11 +0000 (09:07 -0700)]
Wait for judging phase to be idle before displaying "Move On" button

Just as we already do for the answering phase.

2 years agoBabel: Add the transform-object-rest-spread plugin to the production build
Carl Worth [Mon, 15 Jun 2020 00:11:09 +0000 (17:11 -0700)]
Babel: Add the transform-object-rest-spread plugin to the production build

This should have been added at the same time this was added to the
development build. Without it, a production build fails.

2 years agoAllow word groups and votes to wrap during the judging process.
Carl Worth [Sun, 14 Jun 2020 23:58:05 +0000 (16:58 -0700)]
Allow word groups and votes to wrap during the judging process.

This should keep things from sticking off to the left and right when
there are many words in a group.

2 years agoDon't display the answering "Move On" button until the server reports idle
Carl Worth [Sun, 14 Jun 2020 23:43:49 +0000 (16:43 -0700)]
Don't display the answering "Move On" button until the server reports idle

By waiting until the server reports that things are idle, it's safer
to display this button. (Displaying it early might result in a a user
being considered a majority of just the group of that player alone,
which is not what is desired.)

2 years agoFix to use server-sent state for whether player has answered/judged
Carl Worth [Sun, 14 Jun 2020 22:14:44 +0000 (15:14 -0700)]
Fix to use server-sent state for whether player has answered/judged

Previously we were using a component state Boolean "submitted" for
this information, but that's fundamentally broken since if the client
reloads the page that state is lost, resulting in the user being
presented with the form as to submit a second time (which is not
allowed by the game).

So, now the rendering looks to see whether the current player's name
is in the list of submitted players, and if so, it does not display
the form. This is exactly what we want.

2 years agoCopy several game-state members into client state
Carl Worth [Sun, 14 Jun 2020 22:00:04 +0000 (15:00 -0700)]
Copy several game-state members into client state

The server has been telling us (or trying to at least: see recent bug
fixes with JSON serialization of Set objects) the lists of players who
are in the process of answering or judging within the game-state
object, but the client has been ignoring this.

Without this fix, reloading of a status page could cause names to
disappear from the "still waiting" lists or the "move on" buttons.

2 years agoFix bug preventing a user from being able to "unselect" a word while judging
Carl Worth [Sun, 14 Jun 2020 19:22:54 +0000 (12:22 -0700)]
Fix bug preventing a user from being able to "unselect" a word while judging

Previously, the selection was accidentally "sticky" unless the player
went on to group a word with another. So if the user accidentally
clicked a word there was no way to unselect it without maging a bogus
grouping and then undoing that.

2 years agoAdd (rate-limited) posts to the /answering and /judging endpoints
Carl Worth [Sun, 14 Jun 2020 18:54:42 +0000 (11:54 -0700)]
Add (rate-limited) posts to the /answering and /judging endpoints

This gives all connected clients visibility into people that are
actively filling out information.

2 years agofixup-add-object-entries-map calls
Carl Worth [Sun, 14 Jun 2020 18:54:25 +0000 (11:54 -0700)]
fixup-add-object-entries-map calls

2 years agoDelete some dead (and broken) code.
Carl Worth [Sun, 14 Jun 2020 18:53:02 +0000 (11:53 -0700)]
Delete some dead (and broken) code.

This code would obviously not work, (it wouldn't even compile
cleanly). It also wasn't called anywhere. It's gone now.

2 years agoTweak the error message when submitting results of judging
Carl Worth [Sun, 14 Jun 2020 18:01:18 +0000 (11:01 -0700)]
Tweak the error message when submitting results of judging

I wanted this when debugging a confusing case of this error text
appearing, (and we had the same text in two places). So having unique
text here will help.

In the end, the bug I was dealing with was from my Android browser
having a persistent cache of a stale JavaScript file.

2 years agoFix page title to refer to Empathy, not Empires
Carl Worth [Sun, 14 Jun 2020 18:00:34 +0000 (11:00 -0700)]
Fix page title to refer to Empathy, not Empires

Obviously, this was a leftover copy/paste error from when initially
creating the Empathy game and using Empires as a template.

2 years agoTrack server change renaming "judging" to "judged"
Carl Worth [Sun, 14 Jun 2020 17:21:32 +0000 (10:21 -0700)]
Track server change renaming "judging" to "judged"

There should be no functional change with the server and client just
moving to a new name for this endpoint here.

2 years agoAdd a "Move On" button to the end of both the answering and judging phases
Carl Worth [Sat, 13 Jun 2020 22:02:14 +0000 (15:02 -0700)]
Add a "Move On" button to the end of both the answering and judging phases

These use the same voting style as the prompt voting, and allow the
game to proceed once a majority of players have voted to move on. This
should help avoid the game being locked out just because a single
player has decided not to play anymore, or somehow became disconnected
(which has already happened in practice more than once).

With this change, we're also now displaying the actual names of the
players that have already answered/judged (as opposed to just the
count as we were displaying previously). And we've written code to
also display the list of player names who are still in the
answering/judging process but that list is not yet being populated
(we'll need just a little more plumbing to have the client send an
activity ping to the server when typing/tapping/clicking before
submitting).

2 years agoAdd transform-object-rest-spread to list of Babel plugins
Carl Worth [Sat, 13 Jun 2020 21:44:33 +0000 (14:44 -0700)]
Add transform-object-rest-spread to list of Babel plugins

This allows for using the object spread syntax in the source, such as:

updated_players = {...players, id: {name: "player-name"}}

which babel will transform to something else for us.

2 years agoempathy: Fix judging interface to properly merge two entire groups
Carl Worth [Fri, 12 Jun 2020 00:53:20 +0000 (17:53 -0700)]
empathy: Fix judging interface to properly merge two entire groups

Previously, when selecting an item that was a part of a larger group,
it could get pulled out of that group to be merged with the other
selected item. This was absolutely bewildering to players.

Instead, the right thing is to entirely merge the two groups to which
each of the two selected items belong. That's what we do here, and
using Set objects rather than simply arrays as we had before.

2 years agoAdd clean support for rejecting categories that are too large
Carl Worth [Fri, 12 Jun 2020 00:08:02 +0000 (17:08 -0700)]
Add clean support for rejecting categories that are too large

This is clean in the sense that it prints a message if the server
rejects the submission, but before that it will even do the nice thing
of checking the number on the client side, (and reporting this with
the HTML5 validity API).

2 years agoempathy: Add a comman between player names
Carl Worth [Thu, 11 Jun 2020 23:01:06 +0000 (16:01 -0700)]
empathy: Add a comman between player names

And also simplify the code quite a bit, (using a simple join()
function instead of a map with multiple span and literal {" "}
elements.

2 years agoempathy: Track change in the server's implementation of /judging
Carl Worth [Thu, 11 Jun 2020 23:00:23 +0000 (16:00 -0700)]
empathy: Track change in the server's implementation of /judging

This endpoint now requires the data to have a top-level "word_groups"
property, so here it is.

2 years agoAdd support for judging of equivalent answers
Carl Worth [Thu, 11 Jun 2020 14:25:15 +0000 (07:25 -0700)]
Add support for judging of equivalent answers

This involves receiving a list of unique words that were submitted and
then allowing the user to group them into words that should be scored
as if identical. The interface implemented here uses sequential
clicking, but maybe it would be more intuitive to do drag-and-drop
instead? I may have to experiement with that.

2 years agoUse triple-equals instead of double
Carl Worth [Thu, 11 Jun 2020 14:24:39 +0000 (07:24 -0700)]
Use triple-equals instead of double

Following Richard's rule of "only ever use triple-equals, never double".

2 years agoAvoid unnecessary use of fill(null)
Carl Worth [Thu, 11 Jun 2020 01:04:16 +0000 (18:04 -0700)]
Avoid unnecessary use of fill(null)

Where we can just use a spread-syntax array copy for the same effect,
(namely, ensuring an array has actual items (even if undefined) rather
than "empty" so that map() actually does something).

2 years agoEmpathy: Display player scores at the main screen of the game
Carl Worth [Wed, 10 Jun 2020 16:19:14 +0000 (09:19 -0700)]
Empathy: Display player scores at the main screen of the game

Leaving each off entirely if unset or 0.

2 years agoEmpathy: When receiving a game-state event overwrite all prompts
Carl Worth [Wed, 10 Jun 2020 14:57:08 +0000 (07:57 -0700)]
Empathy: When receiving a game-state event overwrite all prompts

Originally this cod was written to add each received prompt, but that
does the wrong thing when the game-state object is trying to set a
subset of the prompts we already have, (for example, to drop the
prompt we just finished playing when starting a new game).

2 years agoAdd display of scores
Carl Worth [Wed, 10 Jun 2020 04:29:45 +0000 (21:29 -0700)]
Add display of scores

And a not-quite-yet-fully-functional "New Game" button.

I don't know if "New Game" is broken on this side or on the server
side, (this was part of a 90-minute flurry of code).

2 years agoDisplay the number of players who have already submitted answers
Carl Worth [Wed, 10 Jun 2020 03:03:02 +0000 (20:03 -0700)]
Display the number of players who have already submitted answers

With a message that could look like this:

2/5 players have responded

And of course, that dynamically updates.

This lets players at least know that something is happening, or
whether they are still waiting for somebody.

2 years agoEmpathy: Add support for submitting answers to a prompy
Carl Worth [Wed, 10 Jun 2020 02:46:28 +0000 (19:46 -0700)]
Empathy: Add support for submitting answers to a prompy

For this we convert ActivePrompt from a function to a class-based
React component. Then we use the "uncontrolled components" technique
again to arrange for an array to hold the form values.

Finally, when answers are submitted successfully we display a simple,
static message. Eventually, we'll want to display some dynamic updates
as other players vote, (but for that, we'll also need the server to
give us that information).

2 years agoAdd a button to advance from prompt voting to playing the actual game
Carl Worth [Tue, 9 Jun 2020 14:59:41 +0000 (07:59 -0700)]
Add a button to advance from prompt voting to playing the actual game

Once a majority of the players have voted a new button appears (for
everyone) that when pressed tells the server that it's time to start
the game.

Then, when the client receives a "start" event from the server with
the prompt the server chose, the client replaces the entire interface
with a form for entering the responses to the prompt.

The submit button for that form is currently inert.

2 years agoDrop an unneeded function
Carl Worth [Tue, 9 Jun 2020 04:34:00 +0000 (21:34 -0700)]
Drop an unneeded function

It was only one line, and only called once, so better just to inline it.

2 years agoEmpathy: Let React now I'm a good boy and I won't mutate state
Carl Worth [Tue, 9 Jun 2020 02:10:52 +0000 (19:10 -0700)]
Empathy: Let React now I'm a good boy and I won't mutate state

By using React.memo() and PureComponent, React can avoid doing any
re-rendering of components that haven't changed at all.

2 years agoAdd display of votes on top of each prompt's vote button
Carl Worth [Mon, 8 Jun 2020 16:15:00 +0000 (09:15 -0700)]
Add display of votes on top of each prompt's vote button

This is a simple bit of feedback so players can see which options are
being voted on by other players. I won't claim that there's anything
inspired about the stlying or color selection here. Maybe Karen will
have some suggestions to improve this later.

2 years agoRestrict :hover styling to when a media query says hover is fully supported
Carl Worth [Mon, 8 Jun 2020 16:13:43 +0000 (09:13 -0700)]
Restrict :hover styling to when a media query says hover is fully supported

Otherwise, on my phone I was seeing "sticky" hover effects, (after I
clicked a button it stayed looking like it was still being pressed
after I let go which was very confusing).

2 years agoAdd a new color --text-fg-on-accent-bright
Carl Worth [Mon, 8 Jun 2020 16:11:03 +0000 (09:11 -0700)]
Add a new color --text-fg-on-accent-bright

For allowing the designer to select what color text should be when on
a background of --accent-color-bright.

Note: The value for this color happens to match the color of
previously-defined values currently, but that's just me throwing
programmer-art colors in place. That's why we don't reference an
existing variable in the value here, even though the color is
currently identical to a previous one, (we wouldn't want a designer to
think they are necessarily linked).

2 years agoEmpathy: Send prompt suggestions to server and display received prompts
Carl Worth [Mon, 8 Jun 2020 13:54:16 +0000 (06:54 -0700)]
Empathy: Send prompt suggestions to server and display received prompts

The received prompts can come in an initial list as part of the
"game-state" event sent when first connecting, and they can also come
in subsequent "prompt" events when a player submits a category
suggestion. These are all displayed as large buttons.

Clicking a button also sends a vote to the server, but received votes
are not yet displayed in any way.

2 years agostyle: Add a new variable: --text-fg-on-accent
Carl Worth [Mon, 8 Jun 2020 13:51:56 +0000 (06:51 -0700)]
style: Add a new variable: --text-fg-on-accent

This removes a hard-coded "white" from the styling of the
button. Instead, the theme designer can now choose an appropriate
color for text that is displayed against a background of
--accent-color.

2 years agostyle: Apply "box-sizing: border-box" globally
Carl Worth [Mon, 8 Jun 2020 13:48:56 +0000 (06:48 -0700)]
style: Apply "box-sizing: border-box" globally

This is really the only sane way to work. Without this, the behavior
of padding is really hard to use. For example, if I set an element to
"width: 100%" it fills the space like I want. But then, its child
elements might be right up against the left edge, so I had
"padding-left" of some amount. This moves the children from the edge
like I want, but _also_ makes the element grow so that its now larger
than the 100% of its container like I had specified.

That looks to me entirely like a broken default and is something to
just set once, globally to avoid this class of frustration.

2 years agoTake control over the wording of the validation message for category
Carl Worth [Sun, 7 Jun 2020 22:47:36 +0000 (15:47 -0700)]
Take control over the wording of the validation message for category

The "pattern" attribute on the text field was really handy for
triggering HTML5 validation that the input matched a regular
expression. The only real downside is that it gives a truly generic
error message:

Please match the requested format.

That doesn't actually tell the user waht to fix, (in this case, to add
a number). I really wish there existed another attribute to simply
provide the error message that should be provided. If there is, I
couldn't find one.

I did have the title set here, which is close, but with two problems:

  1. The resulting error message isn't _just_ my text, it is:

Please match the requested format:
<My title text here>

     so I don't quite get as much control as I want.

  2. The title text shows up immediately when hovering over the input
     field, (even before the user has ever typed anything). But this
     is an error message that I only want the user to see if they've
     committed an error.

It took me quite a lot of struggling to come up with a solution for
this minor issue that works the way I want. Here it is:

  1. I remove the pattern attribute, (so I don't get any default
     validation of the input format). This is essential or else the
     "Please match the requested format" text will appear at least
     somewhere.

  2. In the subit handler, I validate the input against my regular
     expression and call setCustomValidity on the input field to set
     the text I want to appear.

  3. But _also_ immediately after doing this I _also_ call
     reportVisibility on the form element. Otherwise, the input field
     will still get styled as invalid as I want, but the error message
     won't actually get reported, (unless the user tries submitting
     _again_ while the input is still invalid).

  4. Next I also have to arrange to _clear_ this invalid state. So for
     this I add a new onChange handler (so it will be called for every
     keystroke). For this, a lot of tutorials just call
     setCustomValidity with an empty string here unconditionally. The
     downside of that is that the field will get styled as valid as
     soon as the user makes any change. Instead, I check the regular
     expression here so that the field is only styled as valid once
     the mistake is corrected. (This is consistent with the behavior
     of the default HTML5 validation with the "pattern" attribute.)

So in the end, this gives the behavior that I want. It's a little
wordy, especially here in my explanation!, but also in the code:
Particularly that two different handlers are required: One to set the
error state and one to clear it. As I implemented things here the
regular expression is even duplicated in those two cases, (but that's
a defect that could be addressed---the pattern could be stashed in a
common place if I cared to do it).

Note that it would be possible to set the error state in an 'else'
clause within my onChange handler, (and that would eliminate the
duplication of the regular expression pattern). The reason I don't do
that here is that it would cause the field to be styled with the
angry-red "invalid" styling as soon as the user started typing, rather
than waiting for form submission before validation happens. So that
could be annoying to users (it would drive me crazy) and it would also
be inconsistent with how HTML5 validation happens with the "pattern"
attribute.

2 years agoAdd a submit handler function for our form
Carl Worth [Sun, 7 Jun 2020 22:22:28 +0000 (15:22 -0700)]
Add a submit handler function for our form

This is still a stub that doesn't actually _do_ aything yet.

Note that we're using the "uncontrolled components" React pattern for
the input field here as described here:

https://reactjs.org/docs/uncontrolled-components.html

The alternative, forcing a new call to React's setState on every
keypress seems really silly to me, (I don't care to have React getting
involved on every keypress).

2 years agoConvert CategoryRequest from a function to a class
Carl Worth [Sun, 7 Jun 2020 22:14:10 +0000 (15:14 -0700)]
Convert CategoryRequest from a function to a class

This seems like it will be more convenient for defining additional
methods to get access to from the JSX code (such as a submit handler
function).

2 years agoInitial framework for an Empathy game
Carl Worth [Sun, 7 Jun 2020 18:56:35 +0000 (11:56 -0700)]
Initial framework for an Empathy game

This starts with the generic code, (grabbed from Scribe), for
displaying the game INFO, (with a button for copying the link), and
the list of players that are in the game.

It also provides a form for submitting a category, but that is still
inert for now.

2 years agoDrop unused scribe/game.html
Carl Worth [Sun, 7 Jun 2020 17:23:02 +0000 (10:23 -0700)]
Drop unused scribe/game.html

The server actually has a template file that serves this prupose. So
this static HTML file is entirely unused, (perhaps obviously so since
it has "Tic-Tac-Toe" in its title.

2 years agoScribe: Fix the font size to not depend on page height
Carl Worth [Sun, 7 Jun 2020 00:16:08 +0000 (17:16 -0700)]
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.

2 years agoParameterize the styling of the page width
Carl Worth [Sun, 7 Jun 2020 00:14:31 +0000 (17:14 -0700)]
Parameterize the styling of the page width

Now that I now we can use CSS variables, I can define some top-level
variables to control the page width and then use those for derived
values.

This makes the styling _much_ more maintainable as it's actually
possible to change a single variable and have several related values
change as appopriate.

2 years agoScribe: Increase font size for game elements
Carl Worth [Sat, 6 Jun 2020 19:49:24 +0000 (12:49 -0700)]
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.

2 years agoDon't underline links in headers
Carl Worth [Sat, 6 Jun 2020 19:31:54 +0000 (12:31 -0700)]
Don't underline links in headers

Headers want their own styling and look *terrible* with underlining.

2 years agoAdd a button to copy the game URL for sharing and tighten up text
Carl Worth [Sat, 6 Jun 2020 19:30:23 +0000 (12:30 -0700)]
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.

2 years agoDelay the "Connection lost" message by a second
Carl Worth [Sat, 6 Jun 2020 19:27:57 +0000 (12:27 -0700)]
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.

2 years agoDrop back from fanct UTF to plain ASCII "+" and "o"
Carl Worth [Sat, 6 Jun 2020 18:57:33 +0000 (11:57 -0700)]
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.

2 years agostyle: Force some padding at the bottom of the page.
Carl Worth [Sat, 6 Jun 2020 18:55:09 +0000 (11:55 -0700)]
style: Force some padding at the bottom of the page.

Otherwise the content can run right into the page bottom which looks
quite terrible.

2 years agoScribe: Style the board so there are clear gaps between the mini grids
Carl Worth [Sat, 6 Jun 2020 18:53:44 +0000 (11:53 -0700)]
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.

2 years agoInitial implementation of Scribe
Carl Worth [Sat, 6 Jun 2020 15:55:23 +0000 (08:55 -0700)]
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.

2 years agoRemoving a debugging statement
Carl Worth [Sat, 6 Jun 2020 15:53:44 +0000 (08:53 -0700)]
Removing a debugging statement

I just happened to notice this errant debug message in my browser's
console.

2 years agoRename "opponent" in both the interface and the code
Carl Worth [Sat, 6 Jun 2020 12:02:08 +0000 (05:02 -0700)]
Rename "opponent" in both the interface and the code

The code was incorrect, since what was called "opponent_info" was
really just a list of other players (some of which could be on the
same team rather than an opposing team) so the new name of
"other_players" is more accurate.

In the UI, we also now use "another player" instead of "opponent" to
just be more friendly I suppose.