Bookworm is simple enough, it is designed to display and create documents. That doesn't sound very exciting, because it isn't. It is, however, the foundation for a lot of more advanced programs/ options. To open a document you need to be able to open a file from the user's computer, to edit or create it you need to be able to organize all that data and write it to the user's computer. To read it you need to show and hide text. All of which also needs to be done in a program like, say, Twine - where you load and save the stories you're working on, and then show and hide the document as the reader plays the story. So while Bookworm is not going to earn me any "cred" as a game developer, it's going to have a lot of code that I'm going to be using for the more interesting programs I work on down the road.
There are 5 main things Bookworm needs to be able to do:
- Load
- Display
- Annotate
- Edit/Create
- Save
Load
The first thing a book reader needs to do is load a book to read, right? So how do we load a file from the user's computer? Well, i actually fond a really cool blog called "This Could Be Better" (I love his blog's name too) that has a post here with some working code to load and save text files. The system I'm planning has 3 steps:
First, save the document as HTML, using <div>s and IDs around the content, but not as a full webpage (so no <head> or <body> tags).
Second, load the file using the code from the site above (which uses the HTML <input type="file"> element, and then creates a hidden link to that file).
Third, append the contents of that file into a <div> or other holder element.
I've actually got some code that mostly works for this, just a few bugs to iron out and it'll be ready to rock - super huge thanks to the blogger above (didn't see his/her name anywhere on the site) for giving me most of the code I needed.
Display
Once we've loaded the document, we need to display it. This is really, really easy. I'm going to use the code I posted before to show and hide text. The only trick is getting the click handlers to see the added text (usually the function that adds the handlers runs when the document loads, so it doesn't "see" the file after it's loaded). I think I can fix that.
I'd also like to have a Table of Contents, Index, and let the user create bookmarks of their own, all of which is going to complicate things - but should be fairly do-able.
Annotate
Besides just showing the document, I want the reader to be able to make notes. I'm thinking of 2 levels of notes, for the whole document (that would always be visible) and for each specific passage (that would only show up when that passage was displayed, naturally). This is slightly tricky, but not too hard, the simple way is to add some <textarea>s to hold the plain text notes. Ideally I'd like "rich text" notes that could be in different colors and fonts, and even to apply a "highlighter-effect" to color the document text. For a rich text editor I'm going to have to find somebody else's code (that's a concept over my head right now) so I think that'll be a feature for down the road. I'm not sure how to do the highlighter, I don't want to change the original document. That one is a very far down the road possibility.
Edit/Create
Besides reading existing files, I also want to be able to create new ones, using the right format so they'll display correctly (since I'm using the "data-goto" attribute for links, which lines up to the "id" attribute of the text to show - so those two attributes need to line up, which can be tricky when you have 400 of them - in something like an Interactive Narrative story). I have some ideas for HTML forms in a jQuery-ui Accordion wrapper that I think will work, but there's a lot to track and figure out for this one.
Save
Lastly, you need to save all this information. That means I need a separate file (I want to keep the original un-touched) with all the notes and stuff, or to create a whole new file. That's actually kind of tricky. The documents are going to be plain HTML, but the notes and such will likely need to be saved in another format. Right now I'm looking at JavaScript Object Notation (or JSON) which is really easy for JavaScript to natively read/write.
It doesn't seem like much, but it's going to be enough to keep me busy for a while. I did a quick mock-up that is surprisingly workable, and depressingly buggy :) Still, it looks like something I can do, and it's all code that I'm sure will be re-used in other projects down the line.
So that's the overview, next week I'll start posting my code and you can see what it looks like. Until then!
No comments:
Post a Comment