index.html.in: ten-minute expiry for commuter bus tickets

index.html.in: begin the menu process

The page should begin as a form that lets you select a ticket. Only
when that form is submitted should we display the ticket. This commit
starts the transition.

fixup set_service_name

index.html.in: support changing the service name via querystring

index.html.in: support changing the service id via querystring

index.html.in: rename serviceletter -> serviceid

Makefile.am,tableau.svg: rename serviceletter -> serviceid

index.html.in: finally get the code-centering right

There's a conversion between SVG and client coordinates that needs to
happen. With that done, it goes to the center in one try.

index.html.in: don't re-center the security code on window resize

It just doesn't seem to be necessary.

index.html.in: center the security code even harder

Doing it five times works better than two (obviously).

doc/TODO: remove; the code-centering issue is solved enough

index.html.in: add workaround for the code-centering issue

index.html.in: whitespace/comment cleanup

doc/TODO: all (well, almost) transform attributes are gone

The few remaining are horizontal flips that make the front of the tram
out of its back. Inkscape doesn't seem to want to forget those after
an un/regrouping.

tableau.svg: start the bus all the way at the right end

Now that the bus moves right-to-left, it makes sense to align it
with the right-hand edge of the scene.

index.html.in: the bus moves right-to-left

This probably should have become clear when I was drawing the front of
the bus?

doc/TODO: remove the tram/train display glitch item

Now that I've eliminated all of the "transform" attributes, the tram
and train don't actually overlap. The display glitch is no longer
relevant.

tableau.svg: eliminate a bunch of "transform" attributes

index.html.in: make the service letter bold with CSS

index.html.in: remove references to tspans within text elements

The new XSL processing step removes them.

doc/TODO: mention that code centering is weird in multiple browsers

doc/TODO: eliminate "transform" attributes

.gitignore: ignore the new optimized output file tableau.min.min.svg

Makefile.am: add another SVG pre-optimization step using svgclean.xsl

Makefile.am: update sfd2woff -> sfd2woff.ff

sfd2woff: rename to sfd2woff.ff

The ".ff" extension lets FontForge guess which scripting language (the
legacy one) the script uses. Without it, FontForge with python support
will guess wrong and throw errors.

configure.ac: fix all AC_PATH_PROG checks

The third argument to AC_PATH_PROG is a value to set, not an action to
perform, when the test fails. So all of the existing checks were wrong
and failed to fail when the program is missing. I do this for a
living.

doc/README: document the new "xsltproc" build requirement

configure.ac: check for the "xsltproc" program

We'll need this to process our new svgclean.xsl stylesheet that cleans
up the tableau.

svgclean.xsl: new XSL stylesheet to help clean up our inkscape mess

There are a few more cleanup/minimization opportunities left in our
SVG, even after it has been scoured. For example, inkscape wraps all
of its text in redundant <tspan> elements, even when the parent <text>
has the same style as the sole <tspan>. We'd like to remove those, to
simplify the code and save space.

XSLT can do this. This new stylesheet can do this. We add it now, in
preparation for yet another SVG processing phase.

index.html.in: use name "hdelta" consistently for delta-x

index.html.in: fix a mis-indented javascript comment

index.html.in: move a comment up two lines

doc/TODO: new list to keep track of bugs

index.html.in: fall back to sans-serif if webfonts don't work

The serifs are OBVIOUSLY wrong.

index.html.in: use the right font for the security code

index.html.in: javascript cleanup

Encapsulate everything into functions and kick them off with event
listeners. This _mostly_ fixes the centering of the security code.

There is however a slight centering glitch visible upon page load when
the code is (for example) "WW". Resizing the page correctly re-centers
it; leaving only the mystery of why it was not centered to begin with;
we supposedly center it once when the page loads.

index.html.in: center the security code in its container

This is mostly working and just needs some code cleanup. And to be
called when the window resizes. I found an easy solution completely
by accident, so that's nice.

Makefile.am: preserve the "codebg" id

We'll need it to center the security code within its red box.

index.html.in: support random and user-specified security codes

The security code will now be set at page-load to a random two digit
string with characters taken from the set [0-9A-Z]. I've never
actually seen two consecutive digits (zero through nine) in the
official app; but it's good enough for now.

What's better is that you can pass ?code=YO via URL paramaters to set
the code to "YO". Since the code only changes once every day, a
one-way ticket revealing the code now essentially gets you a day pass.

Note: The resulting codes are not usually centered properly (yet).

Makefile.am: don't strip the "codetext" id

We'll need it to change the security code.

index.html.in: do javascript tricks in order of importance

For example, centering the ticket is probably most important. Being
able to tap the screen to switch it to night mode the least.

tableau.svg: rename the "hash" to "securitycode" and group it

That's what Moovel calls it and how I'll reference it.

tableau.svg: unhide the tram

Whoops.

configure.ac: update day.svg -> tableau.svg

.gitignore: update day.svg -> tableau.svg

Makefile.am: update day.svg -> tableau.svg

day.svg: rename to tableau.svg because it's important to be fancy

index.html.in: don't blink the expiration date/time after 10 minutes

I'm pretty sure this is when CharmPass stops blinking.

index.html.in: set ticket expiration to 90 minutes

This is what CharmPass does for one-way tickets, and the expiration
date/time only blinks for about ten minutes after you use a ticket in
the official app. This is a tiny detail (and we could always ditch the
blinking to make the display accurate with an expiration of 1h) but
it's easy enough to get completely right, so why not?

.gitignore: ignore the two woff2 output files

GNU Make automatically removes these "intermediate files," but
ignoring them is The Right Thing to do.

Makefile.am: add rule to build woff2 fonts from sfd sources

doc/README: document the new fontforge requirement

configure.ac: check for the fontforge program

We'll need this to convert our sfd source files to woff2 webfonts.

sfd2woff: new script to convert sfd source files to woff2 webfonts

CharmBypass-{Bold,Regular}.woff2: remove

These can now be created from the sfd source files.

src/CharmBypass-{Bold,Regular}.sfd: move up out of src

These are the last remaining files in the src/ directory. Move them to
the top level with everything else so that we can simplify the build
rules a bit.

Makefile.am,configure.ac,.gitignore: update for day.svg rename

Since we're moving the source day.svg to where the built day.svg
previously lived, a rename is also in order. We now name the optimized
output file day.min.svg.

src/day.svg: move out of src

Makefile.am: update for new index.html.in location

src/index.html.in: move out of src

Makefile.am: use double-suffix rule to build base64 from woff2

src/CharmBypass-{Bold,Regular}.woff2: move up out of src

Relocate the woff2 fonts to the top level. This will allow us to use a
simpler "double suffix" rule to build their base64-encodings.

src/CharmBypass-{Bold,Regular}.sfd: new font source files

Include the FontForge source files for the "CharmBypass-Bold" and
"CharmBypass-Regular" fonts. This will eventually allow us to build
the woff2 fonts on-the-fly.

These fonts were created from the letterforms used in the CharmPass
app. Copyright law in the United States generally does not protect
typefaces themselves; it protects only fonts, which are a particular
programmatic digital representation of a typeface. Since I have copied
only the letterforms, distributing the fonts (which are my own
creation) should not run afoul of the law. But as always when it comes
to legal matters: IANAL, YOLO, IDGAF.

doc/LICENSE: add AGPL-3 license

src/day.svg: move the bus down a tiny bit so that it overlaps the road

src/index.html.in: auto-center the ticket in the viewport

src/index.html.in: add a "const" to a javascript variable

Makefile.am: retain the "ticket" id so it can be centered

doc/README: document that we want "scour" and not "xmllint"

Makefile.am: use scour to optimize the SVG as part of the build

And since scour can also strip the XML prologue, there's no longer any
need for xmllint (or the corresponding build step).

configure.ac: check for scour instead of xmllint

I'm about to switch to a more involved SVG pre-processing step using
scour,

  https://github.com/scour-project/scour

instead of xmllint.

src/day.svg: add a few more trees

src/day.svg: undo/redo cloudscopy grouping to fix the animation

src/index.html.in: add the city skyline animation

src/day.svg: make all of the proportions accurate

src/day.svg: finish the last few city buildings

src/day.svg: add the city skyline

It's not quite done, but it's there -- all three layers.

.gitignore: update with the new font filenames

Makefile.am,src: replace the existing ticket font with two new ones

Using separate regular and bold fonts on the ticket lets us more
accurately mimic the official app. For example, the "service letter"
looks a lot better in bold. This commit replaces tickettext.woff2 by
CharmBypass-Regular.woff2 and CharmBypass-Bold.woff2.

src/day.svg: drop all font-family inline styles

These only get in the way when we use an external (to the SVG, at
least) stylesheet to style all of its text.

src/day.svg: add the QR code

src/index.html.in: reduce the LCM of the bus/tram/train loops

Using prime numbers for these ensures that they won't all "reset" to
x=0 at the same time for a much longer time.

src/index.html.in: animate the train

src/day.svg: finish the train

src/day.svg: finish the back of the train

src/day.svg: continue to work on the train

src/day.svg: start the train

src/index.html.in: animate the trees

src/day.svg: duplicate the trees so that they can be animated

src/index.html.in: prefer translateX(x) to translate(x,0)

src/index.html.in: add the cloud animation

src/day.svg: change cloud group spacing

Even though the clouds scroll right-to-left, the translation
coordinates are based on the groups' left-hand edges. As a result,
everything will be easier if I "left align" the clouds initially.

Revert "src/day.svg: re-center the ticket"

This reverts commit 752909532a84da904746162a20e20f4d254b54dc.

With the clouds scrolling in from the right, it will actually be
easier if our "window" containing the ticket is on the left side
of the scene.

src/day.svg: duplicate the clouds layer

src/day.svg: space out the clouds a bit more

src/day.svg: re-center the ticket

src/day.svg: double the width of the document

This is in preparation for an "infinite scroll" animation that I'm
going to try to implement by having two copies of the thing that
scrolls: one on-screen, and one off-screen. And for now at least I
actually want to be able to see the off-screen bits.

src/day.svg: rename clouds from left to right

src/index.html.in: slow down the bus and the tram a bit