Reword Coda's final message

Just to get the word "middle" in there to help with the final, final puzzle.

Disable the art-generation form when the puzzle hunt is over

Like Coda says, the AI has been rendered inert at this point.

Add an endgame to the hunt

When the last target image is found, the following things will now
happen (after a 10-second delay):

  1. Coda will comment on all of the target images noting that Zombo
     is weak, (this will bring them to the top on the next refresh).

  2. A new image will appear of Coda in a non-apocalyptic future

  3. Coda will comment on that final image, wishing the boys luck.

Set bus timer to 30 seconds

Since I'm about to send this puzzle out to the boys

Make any code execution errors visible to the users

By sending them to the clients and having them render it in red
monospace with pre-wrapped whitespace.

This should allow the players to debug things when they don't work.

Add Zombo's corruptions to the Magic School Bus artwork

Of course, with excess fingers, mouths, and eyes.

Assign different default code to each boy

Also, draw the solution text in white on top, (so if they generate
their picture frequently, they can just make out the letters and
numbers).

Drop unneeded semicolons from python code

Apparently, the javascript has been getting into my head the past few days.

Also, make the default drawing only hit the upper-left quadrant.

Add bus object to default state

Not that we're ever using the default state object these days, but
still, try to at least keep things clean around here.

Add some convenience functions with implicit cairo context

Just to make the code easier to use. So it can look like:

circle(x, y, radius);
fill();

rather than:

cr.arc(x, y, radius, 0, 2 * math.pi);
cr.fill();

Also, provide a set_color() function that accepts a color name as a
string, (using that classic list of color names from X11 I believe).

Hook the code panel up to actually execute something

And switch from SvgTurtle to Cairo instead, since I actually wrote
that and all.

There's no puzzle here yet, but it does have all the interactivity
necessary to do something that's hopefully interesting.

Add initial structure of a Magic School Bus puzzle

This has the same sort of introduction as the TARDIS puzzle (zooming
into the time machine), but this time it's the Magic School Bus, not
the TARDIS, of course.

Then, there's an interactive form for making some turtle art, and an
image showing the result. Currently, the result is hard-coded inside
the script, but it should be simple to make it consume the form input,
(which is already being sent to the server at least).

Add an error page if the user has no name set

Since we're keying off of the name to make sure everyone gets
different words, we need to force them to set a name before playing
the game.

Shrink the font size a bit for the word prompts

The long words weren't fully fitting on some phones I tested on.

Add a closing message and make the reboot button functional

Also fix a bunch of state transitions, (joining the game in-progress,
rebooting from anywhere, reloading from anywhere).

With the sloppy DOM-manipulation approach I'm using it's pretty
painful to get all of those right, (could have used React or
something, but that has its own set of problems), so I won't promise
that everything is perfect, but I think it's pretty close.

Add answer checking and level advancement

This is now very close to a complete puzzle.

All that's really missing is the final message from the Doctor and an
implementation of the reset button.

Implement the logic for sending one word at a time to each boy

And for the boy's devices to fade each word out.

We're cueing off the first letter of each boy's name to ensure they
end up in different rooms. (So if people join the game with a name
whose first letter is other than 'C', 'H', 'A', or 'S' they will be
put into a random room.)

There isn't any answer checking yet, so currently the game will be
stuck in the first level, (even though the content for the other
levels _is_ available in the server).

Add a welcome stage to the TARDIS

This gives a 30 second countdown before entering the TARDIS along with
a display of how many companions are present. Finally, it ends with a
zoom into the TARDIS itself.

Next, we just need the puzzle itself.

Use a single function for the tardis app

Whether or not there's a trailing slash on it.

Commit some structure for the Doctor's puzzle/game

The actual puzzle content isn't here, (and won't be ever, really).

Instead, the next step is to develop the server to send out puzzle
content over the socket.io connection.

But this commit includes the basics of the HTML and CSS structure
we'll hang things off of.

Extend maxAge of cookies to be a full week

The other cookie properties set in this commit are the defaults.

We want a long cookie age so that sessions are as persistent as possible.

The default maxAge is unset, but apparently instead of that meaning
"never expire" it is interpeted by agents as meaning the cookie is
non-peristent (and the agent may delete the cookie on browser close).

Set session to be "rolling"

That is, the expiration of the session should be extended on every
request, (making the session last much longer as long as the user is
interacting with it).

This should help with any workaround I put in place for username
tweaking on the backend, (since Hyrum's iPhone is having trouble
setting his name).

Make ZomboCom's random number generator degrade even more

By appearing 1 in 4 times rather than 1 in 6, hopefully this
misbehavior will be even more apparent.

Implement code to detect target image prompts with target seeds

When a user enters any of the 8 target prompts with the correct
corresponding seed, the server will now send the pre-generated image
for this.

Also, the server will immediately send a comment from ZomboCom,
(imitating the style of either HAL or GLaDOS to some extent), giving
the boys some indication that they are on the right track.

Route /tardis to another page

The page is just a placeholder for now, but later we'll put an actual
puzzle here.

Add support for an image that contains a link

This will be a sort of Easter Egg for hiding a link to a
puzzle. Hopefully this one goes smoothly!

Make the censored images more obvious in the stream

By hiding the image and caption still, but leaving the comments
(including the explanation of censorship) still visibile.

Hide images with a censored attribute

Which will allow for a message to be hidden in the set of which images
are censored by ZomboCom.

Make the server generate a non-random random seed occasionally

As often as every 6th image, (but only if a random seed is requested
and the word "dice" does not appear in the prompt), Zombocom will
generate a very-much not random seed of 319630254. This is precisely
the seed needed to generate the target image for the prompt that
includes dice in it.

Merge remote-tracking branch 'origin/main'

Only generate a figcaption if image has both prompt and code

Up until now, every image of course has had both a prompt and a code.

But we're about to start introducting updates from Coda into the image
stream. We still want these to have support for comments, but they
shouldn't have a caption or a reuse button.

Perform a complete round trip when setting a name

So a newly-set name ends up on the client (and the client knows the
server has it).

Add empty comments array when creating a new image

Otherwise things would just break.

Bring newly-commented images up to the top of the feed

This won't disrupt any current clients, (which would be super
annoying), but for any refreshes or new visits to the page, they will
see the most-recently-commented images at the top of the feed.

Rework the state structure so comments live as part of images, not separately

This is the obvious structure to have and will help with doing things
like reordering images (and having the comments move with them).

Tell server a name at first connection

If there is a name in local storage, that is.

Fix name tracking to be persistent

By adding both a variable to record in the client what the server has
told us the name is, and also adding localStorage storage of the name
so it persists between browser starts.

Revert "Don't show any images until the user generates a new one"

This reverts commit 94706668717da57af5def7f4153e35baa434224c.

This behavior had some negative side effects. Most notably, it meant
that when reloading the website a user would see nothing until
generating a new image, (perhaps doing so for no other reason than to
see the history).

Another problem was that a spectator, (like Carl or Stacy), couldn't
silently watch along, but had to also create an image.

Meanwhile, the intent of this behavior was just to ensure each of the
boys saw a blank history on their first encounter with the web
site. Now that at least 3 boys have seen the site, there's not much
remaining need for this.

Validate numeric code before form is submitted

The image generation script will reject any non-numeric seed as well
as any value larger than 2**32-1. So enforcing this up front at the
form will give the user a better experience.

Log the user name when generating an image

So I can more easily track that all the boys are staying involved

Expand the safety-prompt possibilities a bit

Just to keep the variety up

Don't show any images until the user generates a new one

This way, every new user will have a similar initial experience and
get forced to figure out the image-generation form before seeing
anything else on the page.

Add a reuse button

To allow for easily reusing cool prompts to make similar images.

Fix replay of comments by putting them after replay of images

Since the elements we want to append comments to are only created by
the images.

Fix some overloaded use of "name" variable

Which was causing some excess prompting for a user name.

Make a separate comments section for each image

Rather than a global one. So these comments elements are created
dynamically, each with their own unique id.

Fix class of comments element

So the new stlying actually works.

Remove the cancel button from the profile dialog

Previously, both buttons were behaving identically, so there's really
no reason to have the cancel button.

Send along the user's name with each comment made

So we can actually tell who said what in the chat.

Add a new profile button that lives at the upper-right of the page

Specifically, to allow the user to change their name.

Add a save of the session object when name is set

Also add some debugging prints for name messages.

Add dialog for setting the user's name

And force it to be shown when clicking the comment field, (if the name
has not been set previously).

Add a new 'reset' event from server to client before replay

This handles the case of a client that persists across a server
restart, (or various other disconnect/reconnect scenarios).

Prior to this commit, the client could end up with multiple copies of
images through the following sequence:

1. A client is chugging along with the server and has a set of images

2. The server is stopped and restarted

3. When the server comes up again it sees the client connect and so it
   replays all images

Boom. The client now has multiple copies of any image it already had.

To fix this, the server now sends a 'reset' event prior to sending any
replay of images. When the client gets this, it clears out all images
it has.

Add infrastructure for doing proper sessions

The sessions are stored server-side and in a persistent file store.

Add dependencies on express-session and session-file-store

Again, this auto-commit was created with:

npm install express-session
        npm install session-file-store

Make the safety prompt dynamic

And significantly more interesting, I think.

Fix bug in clearing the spinner after image generation is done

The function is clearTimeout, not cancelTimeout.

Add exception handling to execution of image generation script

So that if the script fails for some reason, the server doesn't crash.

Timeout on image generation after 60 seconds

If the image doesn't come back, just hide the spinner and bring back
the form so they can try again.

Display spinner while image is being generated

And hide it again when that's over.

Prepend images as they are generated

So that the most-recently-generated image is always there at the top,
without requiring a big scroll to reach it.

Hide image-generation form while generation is happening

Giving the user a queue that something is happening (and helping to
avoid queueing the generation of multiple identical images).

Put the safety-prompt button up by the label of the textarea it controls

Hopefully this is both more intuitive and lays out better.

Allow user to zoom

Which can be important to be able to see an image more clearly.

Limit generated filename to something not crazy

Since otherwise, with a crazy-long prompt, we could exceed the limit
of the filesystem, (which I think is 255 characters for what I'm using
for the server currently). In this commit, we don't use more than 200
characters from the prompt itself, to which we could add 10 from the
seed and another handful for separators and a file extension, so that
should be good.

Switch to new 2.1 model of Stable Diffusion and also 768x768 pixels

That's a slightly more expensive mode to run in, but should still give
up to 1000 images for only $10.

Generate new structure for images

Using both a figure and a figcaption for each image. This allows for
more structured styling.

Fix a mix-up of "code" vs. "seed"

The UI at the top-level facing the users uses "code", but the API down
deep uses "seed" so there has to be a switch at some point, which
wasn't quite correct before this fix.

Fix DOM code so that prompt and code appear for each image

The DOM really does make things so painful!

Replay previous images to a client when it first connects

so that the images are just as persistent as the comments

Client: Add received images to the DOM

Nothing fancy here for stlying yet, but it should be functional at least.

Hook the server up to actually generate images

And the images are even being sent back to the clients, (but they are
just ignoring those events for now).

Add generate_image.py script

Which uses the dreamstudio interface to Stable Diffusion to generate
images from a text prompt. This does require an API key and has non-zero
cost, but I'm willing to do this for now, (and fortunately, the Stable
Diffusion code itself is entirely open-source so I could switch to my
own hardware when I decide to).

Add code to submit image generation instructions to the server

Though the server is just printing them on the console for now, and not
actually doing any image generation yet.

Fix typo

Zombocom, not Zombcom

Shift flex layout down into a new div below form-row

Since flex was interfering with the grid we had working before.

Drop explicit size from numeric code text input

We're using CSS and flex to let this grow instead.

Simple reword of "Numeric code" placeholder text

Trying to make it more clear (and ensure it fits).

And now read in saved comments at server start

So we should now have persistent messages across server restarts.

Write comments out to disk when the server exits

Which is half of what we need for fully persistent messages, (will
need to also load them at startup).

Add peristence of comments

The server saves every message it receives, and replays them to each
new client when it joins.

Note: The server is only holding messages in memory, so there's not
yet any persistence across server restarts.

Add the second half necessary for functional comments

The server emits the comment back to all clients and the client appends
to a <ul> item (through simple DOM manipulations).

Add a (half)-functional comment field

This sends the comment from the client to the server (but not back again).

The server process simply prints the comment out on its console.

Make a socket connection from client to server

Nothing useful yet, just a print on the server side to prove it's working.

Add socket.io as a dependency

This commit was made with:

npm install socket.io

Float the "safety prompt" button to the right.

Starting to get this form to look like what I want.

Allow the generate button to get its own styling

This needs to the be the equivalent of a "big red button" (even if not red).

Restrict code input field to 10 characters

It really shouldn't need to be longer than that.

Make the prompt a textarea to fit more text into it.

Helping to suggest that this can be a rather long input.

Make the "Safety Prompt" button actually do something.

Eventually it will be a bit more dynamic than this.

Move some padding from every p to a new "content" div

Trying to bring sanity to this mess styling.

Add some labels to the form fields

To make it a little more clear what is going on.

Fix the mute toggle

Which we broke by dropping its id in the previous commit.

Add a "volume" class to the volume button

Since we recently added other buttons that shouldbe styled differently.

Add a simple form to the main page

To allow for submitting a prompt to generate, (not that it does anything yet).

Rewrite primary path as /index.html

Since that's what we have Apache configured to look for.

Add a simple express server

And an HTML file for it to serve, (copied in from the zombocom-static
repository I made earlier today).

Add express4 as a dependency

The changes here were made by running:

npm install express@4

And then adding the package-locj.json file (containing frozen versions
of all dependencies) and also ignoring the node_modules directory.

Add initial packages.json

Just declaring a name, version, and description for this package.

Note: This is from following the tutorial at:

    https://socket.io/get-started/chat