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.

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.

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.

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.

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.

Don't underline links in headers

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

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.

style: Force some padding at the bottom of the page.

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

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.

Removing a debugging statement

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

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.

Subtle refinement of the status message.

This distinguishes the message based on how many opponents are in the
game so there's a different message whether we are waiting for an
opponent to move or else to join in the first place.

Also, we use "either player" if there are two players in the game, or
else "any player" if there are mroe than two players in the game.

Style inline buttons for better appearance

By shrinking the font size within the button just a bit, the entire
button now fits within a line of text, (rather than the text of the
button being the same size as the surrounding text but the button
sticking way out both above and below).

Be more selective about when to display buttons for joining a team

Specifically, before the first move, we never want any buttons,
(instead, the first player will commit to a team by making a move).

After the first move, there are two cases:

1. A player is already on a team:

In this case we want only one button, labeled "Switch" to
change to the other team.

2. A player is just spectating:

This is the only case where we need to display two buttons,
one labeled "Join X" and one labeled "Join O".

Display all players, not just a single component

It's a little trickier to deal with an array (both on the setState
side and when using the map() function to generate React elements) but
it's not too bad.

Thanks for the help, Richard!

Display the opponent's name/team next to our own name/team

This is mostly functional, but has at least two problems:

1. The trailing comma appears when an opponent hasn't joined yet

2. It will only display a single opponent even if additional players
   join the game

Tighten up the display of the PlayerInfo block

Drop the display of the ID value, because that's meaningless to a
user, and then also just put the team into parens after the player (or
omit those parens entirely if the player is not on a team).

And use a single prop for all of this information instead of a
separate prop for each property of the player_info object.

Use an actual space not an &nbsp; entity.

I didn't really want any non-breaking semantics here. I just wanted a
plain-old space but it wasn't obvious to me how to get it for some
reason. The answer is pretty simple: a string literal inside curly
braces.

Allow either player to make the first move.

That is, by having the board be active even if we are not assigned to
a team yet. (Obviously, for this to work, this depends on the server
also permitting us to send a move before we've joined a team.)

When we send a first move this way we append an "assert_first_move"
property which tells the server to reject our move if someone else
beat us to it.

Finally, this commit rewords the message above the game to take into
account the team of the current player.

style: Use a pointer cursor for the button element

This is just another nice cue to the user that the button is something
that can be clicked on.

tictactoe: De-activate board when it's not the player's turn

There's no reason to allow the user to select a square and send the
move to the server when the client can already know that the server is
just going to reject the move because it's not our turn anyway.

Avoid some repeated references to "this.type"

Simpler to just cache this is "state" at the beginning of the function
and then use that throughout.

tictactoe: Improve player-info block for the case of no assigned team

An explicit clause of "not on a team" is more clear than the dangling
"on team: ".

Return null from GameInfo and PlayerInfo if they have no populated props

These info objects get filled in with data that is streamed from the
server "/events" API. While the page is still loading, we don't want
to brifly see the skeleton of these objects drawn with no real data
inside them.

It's much cleaner to return null instead. This gives a clean result
where these sections of the page only appear when fully formed.

Add two buttons to allow the player to choose a team to join

This demonstrates how a "Join Team" button could actually work.

Of course, the notion of teams and being able to switch from one to
the other is a bit much for tic tac toe, (but could actually be useful
for a case of two people playing on a single computer for example).

What we definitely want here is some implicit team membership. Such as
"Either play can make the first move" and then having that assign the
player that moves to Team X.

If we did that, then we could also simplify by having just a single
"Swith Teams" button instead of having one button for each team.

Add a new fetch_put_json

This is very similar to fetch_post_json but with a different request
method. In fact, we share the implementation with a new
fetch_method_json that accepts which method to use.

Add key properties to GameInfo and PlayerInfo blocks

This silences the warning that React gives:

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

Which I seem to get every time I add a new list of elements.

Makefile: Fix downloading of React javascript files

This has not worke since commit b5bcbc45f19ee068478edb73b48bc7194e582da8

There were two things broken in that commit:

  1. It was inserting a "deps/" into the URL for downloading, (which
     doesn't exist---we only have "deps/" in the local filesystem.

  2. It wasn't distinguishing "react-dom@16" from "react@16" in the
     URL, (half of the files we download need one, and half the
     other).

This commit fixes both. The first by using a "substitution reference"
with the $@ variable to remove the "deps/" from its value when
constructing the URL. And the second by splitting the existing rule
into two rules.

Whle here, we also replace the use of the patsubt function in the
SHA512 recipe with the simpler substitution reference exactly as we
are now using it in the line before.

Add a simple player-info div

This is populated by the player-info event that is streamed to us when
we first conenct to /events and should also be updated by any
subsequent player-update events for our specific player.

tictactoe: Add a simple game-info div

This is populated dynamically by the server sending the game-info
event and contains both the game ID as well as the URL.

We're not yet doing any interesting styling here, (it should get
tucked up into the upper-left corner as just a button with the game
ID, and when clicked on it will expand to show the URL to share).

Rename reset_state() to reset_board()

It's not resetting _all_ state, just the board.

In the past, these two notions were basically the same, (since the
board was the only state we hadd), but soon we'll be adding players
and other information outside the board, so this new naming is more
clear.

Rename several internal names from ICantReadThis to much_better_thanks

I'm not entirely sure this is a good idea with the number of library
functions that we're calling that still use camel case, (such as
addEventListener, and perhaps most significantly, onClick), but the
code was even more mixed before, so it's maybe at least more
consistent in its inconsistency now, or something?

Rename stepNumber to step_number

And drop the dead-code jumpTo while we're at it.

I'm gradually rewriting the original tutorial code into my own style.

Add an enum (or an enum-like object) for Team values

We replace the existing xIsNext Boolean in the state with a new
next_to_play property takign a value from this enum.

And we will soon also be using this enum to track the team from whose
point of view the game is being shown.

tictactoe: Don't let the user send an illegal move

The client already knows which squares are occupied, and when the game
is won, so it's pointless to ever send a move we know is going to be
rejected. And in fact, we shouldn't even give the user a hover
indication as if they could move there.

That's all implemented in this commit. The hover highlight and the
pointer cursor are both disabled for squares that are already
occupied, and for all squares once the game is over.

Expect defailed error message from the server when rejecting a move

The server was recently augmented to not simply say 'false' for an
illegal move, but to instead say something like:

{"legal": false, "message": "Square already occupied"}

So we plumb the server-provided message out to the user in the case of
any illegal move.

Rename identifier in the "move" handler from 'square' to 'move'

This is not a functional change, but makes sense given the functional
rename from the previous commit.

tictactoe: Track API change that /move event now has data named "move"

And no longer named "square" as we had it before.

tictactoe: Adapt to new server event type: game-state

Previously, when a client joined a game in progress the server would
send all previous moves as "move" events (just the same as if a player
were making those moves live).

The server was recently changed to instead a single "game-state" event
in this case, (which also does contain the entire move history). So
when we receive that, we reset the game state, then replay the moves
from that history.

empires: Rename "state" to "phase" for game phase transitions

We're freeing up the term "state" for a more generic, and more
complete description of game state.

tictactoe: Increase the size of the board a bit

This is a fixed size, not yet dynamic (and also not yet centered) but
it's something at least.

Change styling to not put game info to the right of the board

Now that we don't have that huge list of buttons, it seems silly to
have the short status message off to the side.

Drop the game history interface.

Not that it's bad to let the user go back and forth to see what
happened, but the interface here was particularly clunky, (both for
being rendered as a list of buttons and also for allowing the user to
fire off new moves wen viewing old history state).

This commit simply guts the rendering of the "moves" list. It doesn't
yet remove the jumpTo code that's now dead.

tictactoe: Implement a minimally-functional multi-player game

Now that there's a server implemented at lmno.games/tictactoe/LMNO/
it's a simple matter to break the call chain at handleClick() to
not do any state updates, but instead hit the /move API, then wait
for data to come back from the /events API and only when the server
returns with that, _then_ to update the state.

So, with multiple clients connected, each client will now seem the
game state updated with each move.

As far as the gameplay of Tic Tac Toe, the only major feature missing
is that players are not yet restricted to play as either X or O but
can instead send events for either player. Obviously, that won't be
hard to fix.

Then, as far as implementation, this code copies the add_message()
function from lmno.js, so we'll want to find a better way to do
that. And there may be some refactoring to be done for event handling
as well, (to reduce code duplication between game implementations).

But this code does use the fetch() API which does seem easier to use
than XMLHttpRequest so that's something we will probably want to
switch to in existing code.

Makefile: Don't remove write permission from .js build artifacts

The intent behind this was to act as a clue to the developer that they
shouldn't edit the .js file, but it caused a problem that subsequent
build would fail because the output files were read-only. So we give
up on this idea.

tictactoe: Put in place the standard top-level page

Specifically, one which allows for hosting a new game, (using the
generic lmno_new function). Meanwhile, the game-specific page is moved
to tictactoe/game.html.

tictactoe: Integrate the standard LMNO styling

Include the LMNO CSS files and add a header. The LMNO button styling
looks better here than I expected. Just required a couple of padding
tweaks to get things looking correct.

Makefile: Change permissions on generated .js files to be read-only

This is a hint to the developer that they shouldn't be eidting these
files, (but instead, should be editing the corresponding .jsx file).

Correct various meta viewport tags

I don't know where this cargo cult started, but the semicolon
separator was just wrong, (should be a comma), and the
maximum-scale=1.0 and user-scalable=0 were really just rude, (if a
user needs to/wants to zoom in on a page for accessibility purposes,
who are we to say they can't or shouldn't?).

Provide any downloaded deps/*.js files to git clone during deployment

This is simply so that the deploy process doesn't need to download
anything that we might already have downloaded. We do explicitly call
"make deps" still to force verification of the checksums of the .js
files (even though we didn't just download them). This ensures that
these resource (which aren't otherwise tracked in git) haven't been
modified.

Teach git to ignore tictactoe.js

We only want to commit source files to git, not the results of the
build.

Rework Makefile to force sha512 verification of downloaded files

We had sha512 checksums here, but no automation was happening for the
verification, (instead there was only a "make checksums" file that
would have to be called manually).

We rework things here so that the checksum is verified on every file
that is downloaded. The rework simplifies the recipe for
download/verification to a single recipe for all dependencies (rather
than 4 recipes with a lot of duplicated logic).

The "make checksums" target is also renamed to "make deps" since it
can be used to force the downloading of all dependencies, (and it is
given the .PHONY treatment so that it always performs checksum
verification even if there is nothing new to download).

Add a simple tictactoe game, implemented with React

This isn't a proper LMNO game, (it's not networked at all), but it's a
starting point for seeing how we might structure a React-based client
(and we can develop this into a proper LMNO game).

In fact, the source code here came directly from the React tutorial
here:

https://reactjs.org/tutorial/tutorial.html

Note that I've not pulled in the 1000+ npm modules that would have
come from using create-react-app as recommended in that tutorial. As
can be seen here, by example, none of them are needed. The only build
tool requireed is something to compile JSX and we've got that working
via the Debian-provided babel packages (as seen in the most recent
commits here).

Make the build quieter by default

Just a simple change to keep the output of make very tidy.

If the user wants to see the complete command output they can use
"make V=1" for that, (and this support is documented in the default
output).

Makefile: Add support to use babel to compile React code using JSX

This is in preparation for starting to use React to implement LMNO
game clients.

In this commit, the previous "make dev" target is now simply "make",
and the previous "make prod" target is now "make LMNO_BUILD=production".
This latter command is definitely annoying to remember, but should
almost never need to be executed manually; instead the developer will
likely invoke "make deploy" which knows how to do a production build.

Extend Makefile with "deps", "dev", and "prod" targets

The "make deps" target downloads 3rd-party JavaScript resources that
are used by the site, (currently React and React-Dom). The "make dev"
installs the development versions locally while "made prod" installs
the production versions.

All three targets verify the integrity of the downloaded files via
SHA512 sums that are added in this commit.

And all three targets are documented in the README file added in this
commit.

Close out li and ul tags

Apparently I never quite finished typing out this page. It's amazing
to me that broswers are as forgiving as they are when fed total
garbage.

Fix padding calculations for intermediate widths

I just noticed that at some intermediate browser widths the page
padding was entirely missing. Fortunately, "git bisect" was very
useful and pointed me to the exact problematic commit:

93245be0a5db82eadd4fb532d27fa4fbea63a2ac

In that commit we were trying to move the range of media block from
620:720 to instead be 720:820 (to account for the change in the
box-sizing parameter now including 100 units of padding).

But that commit was botched in a couple of ways, (applying from
620:820 and also miscalculating everything within that range).

This commit corrects things and is verified to act as desired when
applied to the broken commit mentioned above and when applied at the
current point in the code history.

Add handling for a spectators list in addition to the players list

The model is that when people initially join the game, (providing a
name for themselves), they are a spectator. They then move from the
spectator list to the player list when then they choose a character
name.

The server isn't very clever about this. It has distinct endpoints for
adding/removing players and adding/removing spectators. So in this
code we have to explicitly remove ourselves as a spectator when we add
ourselves as a player.

empires: Construct reliable paths for all game API endpoints

By appending to window.location we can ensure that we're always
hitting an endpoint one level below the game ID, (and not replacing
the game ID), regardless of whether the current path ends in a
trailing slash or not.

empires: Simply game for to require only a character name

Since the palyer's own nickname is now requested earlier (when first
joining the game).

This will hopefully be less confusing for players (who were sometimes
confused about which name was which).

Merge branch 'flempires-repo-merge'

This brings in the files which were originally being tracked at
https://gitlab.com/kworth082/empires.git

Rename flutterempires to flempires

Because its way more nerdy to have a corny name for an app, so
flempires it is (or at least its directory).

Prepare directories for merge into lmno.games

In order to merge this (flutterempires) repo into the lmno.games repo,
it will be much cleaner to have all of the files in the top level
directory named flutterempires in order to avoid conflicts with
top-level files in lmno.games.

Add all linux files generated with flutter create .

Accordingly with this documentation:

    https://flutter.dev/desktop#add-desktop-support-to-an-existing-flutter-project

This commit adds all of the files in the `linux` directory which came
from running `flutter create .` while on the master branch of
flutter-sdk.

Merge branch 'add-macos'

Merge branch 'player-list'

Enable network requests in mac os app

According to documentation here:

    https://flutter.dev/desktop#setting-up-entitlements

this change is needed so that the app can send network requests

Merge branch 'data-models'

Get rid of extra FutureBuilder widgets

Now that the ListView is working correctly, we can get rid of these two
FutureBuilders which were essentially intermediate steps to get to this
point.

Add all macos files generated with flutter create .

According to this documentation:

    https://flutter.dev/desktop#add-desktop-support-to-an-existing-flutter-project

This commit adds all of the files which came from running `flutter
create .` while on the master branch of flutter-sdk.

After this commit (and while still on the flutter-sdk master branch) the
native mac os app can be run with `flutter run -d macOS`.

Change name of Android app to Empires

The generated code lazily made the app name match the package
name, so now Empires is much better than flutterempires.

Clean up some leftover hello flutter code

The hello flutter code has button which increments a number on the
screen and this has just been cluttering things up. This will likely be
a good place to put the logic we'll need for submitting the user's
name and character, so we won't get rid of it completely.

Show text if player list returns empty

Better to show "No players yet" than nothing when the server returns an
empty list.

Merge branch 'families-to-empires'

Rename everything that was initially created with `flutter create flutterfamilies`
so that it is now called "flutterempires" instead

Make space for showing the full list of players

Up to now, the widgets were centered on the screen. With them now moved
up to the top, there is room to show the list of players at the bottom.

Clean up indentation

This commit changes whitespace only, now that the FutureBuilder is
inside the Expanded widget.

Clean up by removing some tutorial text

Removes comments only - no functional code changes

Rename directory flutterfamilies to flutterempires

Originally the flutter app was created in a directory called flutterfamilies
and this should take care of the final references still pointing to that old
directory now that it's renamed to flutterempires

Display total number of players

Setting up a new widget to display the list of players, but for the
time being (for simplicity's sake) it's just displaying the size of the
returned list of players.

Add Expanded to fix the scrollable in a scrollable problem

Since the ListView can't be put into the Column widget, we
instead add an Expanded widget and put the ListView in there.

Fix indentation after adding Container

Changes whitespace only

Rename "Families" to "Empires"

Because the name is better

Add fetchAllPlayers method

This method is really the one we've needed all along and so now we
can display the list of players instead of just the first player.

Move the FutureBuilder into the Column (does not work)

Again, this is a commit to get us back to the broken state before more
properly fixing things.

Add new Container to allow for margin

The Center widget can't have margin, apparently, so we'll put it in
a Container which can.

Rename application id to com.appsiom.empires

Because com.example was no good and so was flutterfamilies

Stop using dart:js in player.dart

This "web only" package was preventing the app from being built on
Android and iOS, so now that we have a method for parsing the player
list, we no longer need to use the (albeit simpler) JsArray type.

See: https://dart-lang.github.io/linter/lints/avoid_web_libraries_in_flutter.html

Put back the Column in main.dart

This is a quasi-revert of e318ede47bc5b8563db84ce2c676c6a9297c860e

...where we took a shortcut by removing a bunch of stuff just to get
things to work, now we're putting it back in the broken state and some
following commits will fix it.

Add README.md

Add method parsePlayers to player.dart

This gives us a convenience method to parse the
json returned from the server into a List<Player> object

Add another screenshot to the README

The README now has two screenshots in order to
demonstrate how the list of players can be updated
(by clicking on the "plus" button).

Add screenshot to root for current progress

Change fetchPlayer to fetchFirstPlayer

Initially I was going to fix the logic in this method to fit the name,
but instead - for the time being - I'll simply make the name more
accurately describe what the method is doing.

Update screenshot for README

The newest screenshot is now showing the game on an Android
emulator with a list of players.

Add some space in between TextFields for aesthetics

Add initState to start the async call to fetch player

initState is a good place to do asynchronous calls that we just
need to happen one time at the beginning.

So, in initStart we fetch the player and put it in a Future, and then
when (each and every time) build gets called, it uses what has
been fetched or shows the spinner if the fetch hasn't completed
successfully yet.