[projectaon] A responsive web app for the Lone Wolf gamebooks with offline capabilities
- From: P van Zyl <pvanzyl@xxxxxxxxxxxxxxxxxx>
- To: projectaon@xxxxxxxxxxxxx
- Date: Thu, 13 Jun 2013 21:35:44 +0100
Hello,
I stumbled on Project Aon a while back, and I've been working on a web
interface for the Lone Wolf gamebooks that would be responsive, i.e. work
on mobiles, tablets and desktops, and that would be available when not
connected to the internet.
I hope the mailing list is the right place to mention this. I actually have
a question about the XML further down. Apologies in advance if I'm asking
in the wrong place.
Here is a sneak peak at the web app, still a work in progress:
http://lonewolf.liquidstateltd.com/
It contains the content of the first 8 books, and only uses illustrations
by Gary Chalk. I wanted to showcase the illustrations, so I used some of
these in the user interface, but only after a user agrees to the terms. The
home view, for example, uses an image of a key as icon to load an existing
game, a small illustration from the first book. Other than that, the only
real design element is the font, Fell Great Primer. Details on the font can
be found here:
http://iginomarini.com/fell/the-revival-fonts/
The app uses HTML5's application cache to store content on a user's
computer or handheld device, making offline play possible. Here's the
technical details in case you're interested:
- All resources to be downloaded to a users's offline application cache
is listed in a cache manifest file.
- Initially only the base application files (the HTML, JavaScript and
CSS files etc.) are included in the manifest.
- Once the user agrees to the terms of the Project Aon License, a cookie
is set. The next time the app requests the manifest, the cookie is sent
along with the request, and when the server receives a request for the
manifest along with the cookie indicating that the user has agreed to the
terms, the manifest file is updated server-side to include resource files
from projectaon.org. So when the user accepts the terms and the download
view is displayed, the app requests the manifest with the cookie and the
manifest now includes references to projectoan.org, and the user's
browser starts downloading all the files.
- The download is pretty quick over broadband but can take a couple of
minutes over 3G. A user can skip the download and continue to set up a
player and start a game if they're connected to the internet. Depending on
the browser used, the resources will continue to download in the
background. A user can check the status of the download by following the
"Download status" link in the app footer. The status indicator is not
entirely accurate: There is no way to know how many files have already been
downloaded, so there may actually be resources already downloaded that are
not included in the count. However the app can detect when all resources
have been downloaded completely and the indicator is updated accordingly
when that happens.
- This has been tested in Chrome, Safari and Internet Explorer 10 on the
desktop (IE 9 or previous versions does not support HTML5 application
cache), and in iOS Safari and iOS Chrome, and Android Browser and Android
Chrome. There is an issue in Firefox that I haven't managed to resolve yet.
This is a JavaScript web app, so most everything runs in the user's browser
or on their device (aside from the offline application cache manifest file
update described earlier, that happens server-side). The app uses
Backbone.js <http://backbonejs.org/> and RequireJS
<http://requirejs.org/>for structure and
Foundation <http://foundation.zurb.com/> for layout.
There's still a lot on my list of things to do. Filling out the action
chart, combat, and selecting a number from the random number table, is all
currently done manually by the user. I don't want to over-automate it as I
want to keep the experience as close to the original gamebooks as possible,
but I still want to have the user's rank update automatically when they
complete an adventure, for example.
Currently I'm ironing out a couple of issues, and I have a question please:
I noticed an unusual tag in the XML for sections, a <poetry> tag (book 4
section 57, found here http://projectaon.org/data/trunk/en/xml/04tcod.xml),
and because it's unexpected it's not included in the app currently. Right
now, the app finds all immediate child elements of <section><data>... and
displays it if it's one of the following:
- p: Displays a paragraph
- ul: Displays a list
- li: Displays a list
- ol: Displays a list (These are all standard HTML tags up to this point)
- choice: Gives the user the option to make a choice
- illustration: Displays an illustration
- combat: Displays an enemy title and their Endurance Points and Combat
Skill.
I am going to update the app to display <poetry> sections, and to display
quotes (another little bug at the moment), but wanted to find out if
there's a definitive list of tags, specifically for the section content
(not so much for the front matter etc.)?
Thanks
Petrus
Other related posts:
