Kevin Worth [Sun, 3 May 2020 19:31:41 +0000 (15:31 -0400)]
Add a FutureBuilder widget to hold a fetched player
Rather than doing a fetch within this build method (which gets called repeatedly),
we use a FutureBuilder to show a spinner until the player has finished being
fetched asynchronously.
Kevin Worth [Fri, 8 May 2020 15:01:21 +0000 (11:01 -0400)]
Rip out column and just show player list view
This was the easiest thing to do quickly, because a list view does not
play nicely inside of a column widget (can't put a scrollable inside of
a scrollable, sort of thing...)
Eventually, we need to combine the views or make separate screens for
each one.
Carl Worth [Sat, 23 May 2020 13:00:25 +0000 (06:00 -0700)]
lmno.js: Drop the lmno_login and lmno_login_loadend functions
These were supporting some code in a separate repository (lmno-server)
but that repository has now gotten smart enough to host its own
JavaScript code so this is currently serving no purpose here.
Carl Worth [Thu, 21 May 2020 17:14:55 +0000 (10:14 -0700)]
Use absolute references for CSS and JS files
I wouldn't expect this to have a behavioral change, but I recently got
a bug report from some users who where unable to get these resources,
(their browser was trying to fetch them from
https://lmno.games/game.css instead of
https://lmno.games/epires/game.css).
Carl Worth [Tue, 19 May 2020 15:44:34 +0000 (08:44 -0700)]
Actually make the top-level "join game" button work.
Embarrassingly enough, when I first implemented the handling of this
form, I only tested that it gave a proper error message for an invalid
ID. Somehow I totally neglected to even test (let alone implement!)
the handling of a valid ID.
Fortunately, the missing implementation is _very_ easy. Just send the
browser to the URL for the game ID that was entered.
Carl Worth [Sun, 17 May 2020 22:37:32 +0000 (15:37 -0700)]
empirs: Switch to using local server to handle all game events
The local server is now much more capable than the old one at
https://families.cworth.org/api (since the local one can now
handle multiple simultaneous games each with a different ID).
Carl Worth [Sun, 17 May 2020 22:13:24 +0000 (15:13 -0700)]
empires: Fix references to "local" CSS and JS files
While it's tempting to just treat these as coming from the current
directory, in practice this HTMl page will be served from a dynamic
path that includes the game ID as a path component. So we have to
look up one directory to find these resources.
Carl Worth [Sun, 17 May 2020 22:10:08 +0000 (15:10 -0700)]
empires: Add a top-level static page for the Empires game
This has a basic description of the game along with a button to host a
new instance of the game.
There is a tiny bit of JavaScript added to support the new button,
(simply calling the server API to generate a new game and then
redirecting to the new game ID or else generating an error message).
Carl Worth [Sun, 17 May 2020 16:39:05 +0000 (09:39 -0700)]
empires: Fix indentation of game.html
There were a couple of misguided attempts to keep content closer to
the left column here, but were in fact just inconsistent
indentation. Fix things up to be consistently indented according to
the actual document structure.
Carl Worth [Sun, 17 May 2020 16:35:43 +0000 (09:35 -0700)]
empires: Rename all files (html, js, and css) to game.*
These are all the files for manipulating a single instance of a
game. We're moving this away from index.html so that we can have a
separate page at index.html for giving game instructions and allowing
users to host a new game.
So, along with the new name of game.html, we also rename supporting
files to game.css and game.js to be consistent.
Carl Worth [Sun, 17 May 2020 16:13:37 +0000 (09:13 -0700)]
make deploy: Go back to deleting any pre-existing files on the server
We stopped doing this back in commit 0bce98367c70c43eaa425aad101e15ed3db612a8 specifically because I was
concerned about a deployment of the top-level "lmno.games" content
obliterating lower-level content (such as that deployed by the
"empires-html" repository).
But now, I've switched to hosting the empires HTML content in this
same repository where it will be deployed together. And that's my plan
going forward, to house all static HTML content here in this
lmno.games repository. So in this commit we start passing the --delete
flag to rsync again.
The one exception is the "flempires" directory where Kevin is
currently experimenting. In the future, we'll likely incorporate that
content into this repository as well. But for now, we simply
explicitly exclude it so that deployments here won't destroy anything
he has deployed there.
Carl Worth [Sun, 17 May 2020 15:58:04 +0000 (08:58 -0700)]
Add some comments on the CSS for styling the empires client
At this point, all of the generic styling, (for paragraphs, forms,
etc.), has been moved up to the top level. So the only styling left at
the level of the empires directory are things to set very
empires-specific things, (such as showing/hiding elements for
particular game states).
Carl Worth [Sun, 17 May 2020 15:56:54 +0000 (08:56 -0700)]
Use named color to set the character of the character-reveal element
This makes me so happy! With these named colors, a low-level style
file like this one now has no explicit color values in it, but instead
simply inherits the defined, named colors from the theme above.
Carl Worth [Sun, 17 May 2020 15:52:25 +0000 (08:52 -0700)]
Move input sizing from empires to top-level
There's no reason the empires client should be overriding the size of
input fields. These should be consistent across all games.
And we choose the size of 40 that the empires client had, which is
slightly smaller than what we were getting otherwise, (which looked
just a tiny bit, comically large).
Carl Worth [Sun, 17 May 2020 15:47:54 +0000 (08:47 -0700)]
Apply our selected text color to haeaders (h1 and h2)
This was previously happening in the empires client, but now we move
this up to the top-level.
Note that we don't use the selected text color at minimal font sizes
(such as in the "body" element in general). This is because we want a
high contrast there for maximal legibility. So we introduce an
additional named --text-fo-color-max-contrast which is set to pure
black.
Carl Worth [Sun, 17 May 2020 15:43:19 +0000 (08:43 -0700)]
Use CSS custom properties to define named colors
Hurrah! I've only wanted this feature for decades.
Thanks to Richard for pointing out that it's now been well-supported
long enough that I can reliably use it. This will really help so that
I can change colors in one place and have the entire style follow the
scheme.
Carl Worth [Sun, 17 May 2020 15:30:32 +0000 (08:30 -0700)]
Insert a line break before the "Players in the game" section
It would be more semantic to have actual "sections" in the content and
some styling that sets proper spacing between sections. But that feels
like overkill given the current simplicity of the page, and the
current problem that there was just too little space at this one
point.
If we do make the page more complex in the future, we can certainly
add semantic sections.
Carl Worth [Sun, 17 May 2020 15:25:06 +0000 (08:25 -0700)]
Fix the page width to allow the content to be a full 720px wide
The code that was written here with numeric values of 720px was
assuming that the page interior would be as wide as 720px and that
padding would not be counted in that. But when we brought this code to
lmno we violated that assumption by using "box-sizing: border-box" on
the page, (making the padding be counted in computing the width of the
page.
The result of that was that the actual content of the page was only
620px and with actual paragraphs of text included now as part of the
empires client, it's clear that that was narrower than we really want.
So, in this commit, we account for the border-box semantics by using a
maximum page width of 820px (padding inclusive) so that the actual
page contents can be as wide as 720px.
Carl Worth [Sun, 17 May 2020 15:23:41 +0000 (08:23 -0700)]
Tweak the line-height down a bit
Now that we've added some actual paragraphs of text, (with the empires
client), it's plain to see that a line spacing of 1.5 is just a bit
too much. It just looks better a bit smaller like this.
Carl Worth [Sun, 17 May 2020 15:15:45 +0000 (08:15 -0700)]
empires: Adapt HTML to use 'form-field' instead of 'form-row' class
The top-level style.css uses this slightly different (but more
accurate) class naming. By adapting to it here, we also simplify the
empires-specific CSS file to not need to define its own form layout.
Carl Worth [Sun, 17 May 2020 15:13:02 +0000 (08:13 -0700)]
empires: Defer to top-level style sheet for as much as possible
Most of the top-level lmno style.css was originally copied from the
style.css file from empires-html in the first place. So there was a
lot od fuplication in these files.
In this commit, we reference the top-level style.css from the empires
HTML file and drop from the empires style.css file all directives that
already exist above.
Going forward, we can develop the empires client within a
sub-directory of the lmno.games content (so they can share common
resources such as reset.css and style.css, etc.).
Carl Worth [Sun, 17 May 2020 14:01:33 +0000 (07:01 -0700)]
Populate the name fields in site.webmanifest
It's odd that the realfavicongenerator.net site doesn't ask for these
names. If it's going to go to the trouble of creating this resource it
might as well ask for the information it needs to create it correctly.
Carl Worth [Sun, 17 May 2020 01:13:21 +0000 (18:13 -0700)]
Remove percentage units from grid column sizing
Richard recommends against using percentages here as it can be
surprising which size the percentage is computed against. This usage
of fr and em units should likely do what we want. (Note: We're not
actually exercising this currently, so we'll need to revisit this once
we add any 2-column field inputs.)
Carl Worth [Sat, 16 May 2020 22:38:02 +0000 (15:38 -0700)]
Refine the Game ID input field
Here we restrict it to 4 characters, force the input to uppercase,
disable autocomplete (since we don't expect intentional reuse of game
ID codes), and provide some instruction in the placeholder.
Carl Worth [Sat, 16 May 2020 22:06:50 +0000 (15:06 -0700)]
Add some responsive layout for the page itself
This is designed to use all the space available on a small device
(such as a phone) but then to smoothly allow some distinctly-colored
background to be visbile on a large device while maxing out the page
width at a reasoable maximum width.
This styling change does introduce a new containing "page" div around
the content.
Carl Worth [Sat, 16 May 2020 20:54:52 +0000 (13:54 -0700)]
Add styling for some mobile-friendly forms and form fields
These fields will reponsively decide whether to layout in 1 or 2
columns depending on whether the fields are declared as "small",
"medium", or "large" and the width of the browser's screen.
Carl Worth [Sat, 16 May 2020 20:21:30 +0000 (13:21 -0700)]
Add a reset CSS stylesheet
This eliminates basically all browser default styling (which differs
from browser to browser anyway). So this does not give any _nice_
styling but it does give a consistent baseline to start with.
Thanks to Eric Meyer for this stylesheet which was obtained (public
domain) from his website at:
Carl Worth [Sat, 16 May 2020 20:05:43 +0000 (13:05 -0700)]
Add a simple Makefile with a "make deploy" target
This doesn't do any deleting of pre-existing files, (to avoid deleting
any web content from sub directories that aren't being maintained in
this repository). We'll need to eventually sort out a better solution
for that.
Carl Worth [Tue, 12 May 2020 01:22:04 +0000 (18:22 -0700)]
Fix the gear toggle to work the first time it is clicked
Apparently, the first time this condition is executed, the
host_tools.style.display attribute is not "none" but is instead some
sort of empty value. With the old code, this made a first click on the
gear do nothing, (setting it to "none" but not toggling visibility)
and then a second click would make the host tools appear.
With this change to reverse the logic to look for an explicit value of
"block" (which is set only after the first click) the gear button
works reliably on every click including the first.
Carl Worth [Mon, 11 May 2020 23:48:04 +0000 (16:48 -0700)]
Implement a very simple toolbar for the host to use
This is a small clickable gear at the upper-right, that when clicked
will toggle the display of some buttons for controlling the game
state.
This is not as clever as it could be. For example, only one of REVEAL
and START buttons need to be displayed at any given time, (depending
on the game state).
But this should work for everything the game host needs (other than
hiding players that have been captured).
Carl Worth [Mon, 11 May 2020 23:11:49 +0000 (16:11 -0700)]
Style the revealed character names extra large
These are an essential element of the game. They should basically fill
the content area of the screen.
(I think ideally, the game would size the text so the largest name
_does_ fill the screen and then use a consistent font size for all of
them, but this will do for now.)
Carl Worth [Mon, 11 May 2020 23:06:53 +0000 (16:06 -0700)]
Drop the message-area notifications for new players joining
The names are consistently added to the players list below, so we
don't really need messages here, (plus, the messages got distracting
in later phases of the game such as "reveal" unless the player
manually cleared them away).
Carl Worth [Mon, 11 May 2020 23:06:01 +0000 (16:06 -0700)]
Use a white background on the body element for a narrow screen
This avoids some ugly-looking dark area at the bottom of the screen,
(since our page content doesn't always fill the screen). So things
look better like this.
Carl Worth [Mon, 11 May 2020 22:45:22 +0000 (15:45 -0700)]
Don't show the "Players in the game" header when there are no players
It looks really broken to see this header with nothing below it. So we
still it as not displayed at first, and then only display it once a
player is added.
Carl Worth [Sun, 10 May 2020 22:51:59 +0000 (15:51 -0700)]
Implement support for the "game-state" and "character-reveal" events
We had classes here named show-state-<STATE> and hide-state-<STATE>
for elements that should be shown only in a specific state
(show-state-<STATE>) or that should be hidden in a specific state
(hide-state-<STATE>).
For example, the new loading screen saying "contacting server" is only
shown in the "none" state (show-state-none), before getting any events
back from the server. Similarly the list of players is hidden during
the reveal state (hide-state-reveal) so that it is visible in all
other states.
In response to the game-state event, the code finds all relevant
elements with appropriate classed from both the old and new states of
the transition and hides or shows them as appropriate.
Also, we now support the "character-reveal" event by inserting the
revealed character name into an element where it can be seen.
Carl Worth [Sun, 10 May 2020 22:50:11 +0000 (15:50 -0700)]
Move the message area outside of the pre-game div
The message area information is intended to be available regardleess
of the game state, (while the pre-game content is only intended to be
displayed while players are joining the game).
Carl Worth [Sun, 10 May 2020 17:06:07 +0000 (10:06 -0700)]
Add messages to message area when a player joins or leaves the game
This replaces code we had previously for adding a message to the
message area when we completed sending a register request. The new
code is more reliable in the sense that a message is added _only_
after the server reports the event for a new player. (Previously, if
the server was offline, a message would still appear saying "Player is
now in the game!" which would be false and confusing if there was no
server responding to the register request at all.)
Carl Worth [Sun, 10 May 2020 15:43:59 +0000 (08:43 -0700)]
Disable autocomplete on the character field
This is intended to prevent multiple players (using a single browser)
from accidentally seeing a name that a previous player entered when
the browser offers it up for autocompletion.
Carl Worth [Mon, 4 May 2020 00:18:21 +0000 (17:18 -0700)]
Add event listening to the HTML client
Specifically, displaying a list of all players. This captures both the
existing players at the time the client connects, as well as adding
any additional players that register.
Carl Worth [Sun, 3 May 2020 17:54:57 +0000 (10:54 -0700)]
Use an actual "submit" input element instead of a "button"
This has the advantage of allowing the user to just press the Enter
key on any field of the form in order to submit it. For this we move
the invocation of our javascript handler for the form submission from
onclick() of the button to onsubmit() of the form itself. Finally, we
have to reutnr false from our new onsubmit() handler so that the
browser doesn't reload the page (which would clear the message that
results from a new player being added).