Utilizador:Jak Atackka/JavascriptProject

A UESPWiki – Sua fonte de The Elder Scrolls desde 1995

This is the code for a 3D book reader I'm working on. It's written in Javascript. It's the first program I've written in Javascript, ever - because of that, it's poorly written :). The best way to see the results of this is to go here, copying the code below, pasting it in the text box, and clicking "show the output". Due to the volatile nature of this, this code will constantly be updated.

I feel like I should say this: I'm not trying to be all self-important and I'm not writing this page just to give myself an ego boost. I'm writing this because this is a large project and I need, among other things, a place to back up my code in case my computer crashes, as well as a place to organize my thoughts.

Checklist

The following are roughly listed in order of importance. Critical features are bolded. This project, due to the size and scope of it, will most likely have numerous stable and complete versions, all in an effort to (possibly) make it site-ready.

Features
Images for books and notes 20%
Dynamically load text
Dynamically convert text
In-app search function
Animated page-flipping
Small app size (<500kb) ~6kb
Correct font 1Yes
Sound effects
Intuitive page scrolling 1Yes
Background images
Page titles 1Yes
  I am definitely going to need help with this.
  There are a few ways of going about this, ranging in accuracy and difficulty. I'm saving this one for later.

As you can see, I have quite a bit of work to do. As far as the small app size, if people use this I don't want to tax the server's bandwidth too much. This is part of the reason why I want to include a search function. If I do a good enough job with this, people will use it, which will make minimizing the tax on the server more important.

Code

<html>
<head>
<script type="text/javascript"><!--  // All of the Javascript code

var i = 0;
var type = "book";
var subtype = "testbook";
var title = "Wabbajack";
var backgroundurl = "";

var pages = new Array();
pages[0]="";
pages[1]="<br><br><center>Wabbajack</center>";
pages[2]="<font face=\"Lucida Blackletter\" size=64pt>L</font>ittle boys shouldn't summon up the forces of eternal darkness unless they have an adult supervising, I know, I know. But on that sunny night on the 5th of First Seed, I didn't want an adult. I wanted Hermaeus Mora, the daedra of knowledge, learning, gums, and varnishes. You see, I was told by a beautiful, large breasted man who lived under";
pages[3]="the library in my home town that the 5th of First Seed was Hermaeus Mora's night. And if I wanted the Oghma Infinium, the book of knowledge, I had to summon him. When you're the new king of Solitude, every bit of knowledge helps.<br><br>Normally, you need a witches coven, or a mages guild, or at least matching pillow case and sheets to invoke a prince of Oblivion. The Man Under";
pages[4]="the Library showed me how to do it myself. He told me to wait until the storm was at its height before shaving the cat. I've forgotten the rest of the ceremony. It doesn't matter.<br><br>Someone appeared who I thought was Hermaeus Mora. The only thing that made me somewhat suspicious was Hermaeus Mora, from what I read, was a big blobby multi-eyed clawed monstrosity, and";
pages[5]="this guy looked like a waistcoated banker. Also, he kept calling himself Sheogorath, not Hermaeus Mora. Still, I was so happy to have successfully summoned Hermaeus Mora, these inconsistencies did not bother me. He had me do some things that didn't make any sense to me (beyond the mortal scope, breadth, and ken, I suppose), and then his servant happily gave me something he called the";
pages[6]="Wabbajack. Wabbajack. Wabbajack.<br><br>Wabbajack.<br><br>Wabbajack. Wabbajack. Wabbajack. Wabbajack. Wabbajack. Wabbajack.<br><br>Maybe the Wabbajack is the Book of Knowledge. Maybe I'm smarter because I know cats can be bats can be rats can be hats can be gnats can be thats can be thises. And";
pages[7]="that doors can be boars can be snores can be floors can be roars can be spores can be yours can be mine. I must be smart, for the interconnective system is very clear to me. Then why, or wherefore do people keep calling me mad? Wabbajack. Wabbajack. Wabbajack.";

function onPageLoad() {
 document.getElementById("title").innerHTML = title;
 loadFormat();
 changeContent('0');
 // if(type == "book") { listPages(); }
 loadButtons();
}

function changeContent(q,r) {
 if((q >= 0) && (q < pages.length)) {
  i=q;
  if( r != "r" ) {
   document.getElementById("page1").innerHTML = pages[i];
   i++;
  }
  if(type == "book") {
   if( r != "l" ) {
    document.getElementById("page2").innerHTML = pages[i];
   }
  }
 }
}

function listPages() {
 var br = "";
 for(q=0;q<pages.length;q+=2) {
  if(q==0) {br="";} else {br="<br>";}
  document.getElementById("pageLinks").innerHTML = document.getElementById("pageLinks").innerHTML + br + "<a href='javascript:changeContent(" + q + ")'>" + q + "</a>";
 }
}


function checkKey() {
 if (type == "book") {
  if (window.event.keyCode == 37) {
   changeContent(i-3);
  }
  if (window.event.keyCode == 39) {
   changeContent(i+1);
  }
 }
 if (type == "note") {
  if (window.event.keyCode == 38) {
   changeContent(i-2);
  }
  if (window.event.keyCode == 40) {
   changeContent(i);
  }
 }
}

function loadFormat() {
 switch(subtype) {
  case "sealed":
   backgroundurl = "http://i.imgur.com/Zf0G0.png"; break;
  case "testbook":
   backgroundurl = "http://images.uesp.net/2/29/SR-object-The-Book-of-Fate.jpg";
 }
 if(type == "book") {
  document.getElementById("allContent").innerHTML = "<table id=\"book\" border=0 cellspacing=3 width=1024 height=640><tr style=\"background-image: url(" + backgroundurl + "); \"><td><table width=100% height=100%><tr><td width=500 onClick=\"javascript:changeContent(i-3)\"><table><tr><td width=100></td><td id=\"leftpage\" height=500 width=380 valign=\"top\"><div id=\"page1\" style=\"margin-top:-10px;\"></div></td><td width=25></td></tr></table></td><td width=500 onClick=\"javascript:changeContent(i+1)\"><table><tr><td width=30></td><td height=500 width=380 valign=\"top\"><div id=\"page2\" style=\"margin-top:-10px;\"></div></td><td width=90></td></tr></table></tr></table></td></tr></table><div id=\"Info\">To turn the pages, use the arrow keys or click on the page.</div>";
 }
 else if(type == "note") {
  document.getElementById("allContent").innerHTML = "<table width=520 border=0 cellpadding=52 id=\"note\"><tr><td id=\"page1\" width=100% onClick=\"javascript:changeContent(i)\" height=640 style=\"background-image: url(" + backgroundurl + "); background-repeat: no-repeat;\" valign=top></td></table><div id=\"Info\">To scroll through the note, use the arrow keys or click on the note.</div>";
 }
}

function loadButtons() {
 document.getElementById("allContent").innerHTML = document.getElementById("allContent").innerHTML + "<br><form><input type=\"button\" value=\"Example Note\" onClick=\"javascript:loadExampleNote()\" /><input type=\"button\" value=\"Example Book\" onClick=\"javascript:loadExampleBook()\" /><input type=\"button\" value=\"Example Book with Pictures\" onClick=\"javascript:loadExampleBookWithImages()\" /></form>";
}

function loadExampleNote() {
 type="note";
 subtype="sealed";
 title="Alethius's Notes";
 pages.length=0;
 pages[0]="Salonia<br><br>We've been saddled with some researchers who can't go four steps without examining somethings and they fight about as well as you'd think... probably worse. Stromm at least has some magical competence but none of them can swing a sword. Erj and Krag seem up to something so I'll have to keep an eye on them, but Staubs assures me they're trustworthy.";
 pages[1]="Alethius";
 onPageLoad();
}

function loadExampleBook() {
 type="book";
 subtype="testbook";
 title="Wabbajack";
 pages.length=0;
 pages[0]="";
 pages[1]="<br><br><center>Wabbajack</center>";
 pages[2]="<font face=\"Lucida Blackletter\" size=64pt>L</font>ittle boys shouldn't summon up the forces of eternal darkness unless they have an adult supervising, I know, I know. But on that sunny night on the 5th of First Seed, I didn't want an adult. I wanted Hermaeus Mora, the daedra of knowledge, learning, gums, and varnishes. You see, I was told by a beautiful, large breasted man who lived under";
 pages[3]="the library in my home town that the 5th of First Seed was Hermaeus Mora's night. And if I wanted the Oghma Infinium, the book of knowledge, I had to summon him. When you're the new king of Solitude, every bit of knowledge helps.<br><br>Normally, you need a witches coven, or a mages guild, or at least matching pillow case and sheets to invoke a prince of Oblivion. The Man Under";
 pages[4]="the Library showed me how to do it myself. He told me to wait until the storm was at its height before shaving the cat. I've forgotten the rest of the ceremony. It doesn't matter.<br><br>Someone appeared who I thought was Hermaeus Mora. The only thing that made me somewhat suspicious was Hermaeus Mora, from what I read, was a big blobby multi-eyed clawed monstrosity, and";
 pages[5]="this guy looked like a waistcoated banker. Also, he kept calling himself Sheogorath, not Hermaeus Mora. Still, I was so happy to have successfully summoned Hermaeus Mora, these inconsistencies did not bother me. He had me do some things that didn't make any sense to me (beyond the mortal scope, breadth, and ken, I suppose), and then his servant happily gave me something he called the";
 pages[6]="Wabbajack. Wabbajack. Wabbajack.<br><br>Wabbajack.<br><br>Wabbajack. Wabbajack. Wabbajack. Wabbajack. Wabbajack. Wabbajack.<br>Maybe the Wabbajack is the Book of Knowledge. Maybe I'm smarter because I know cats can be bats can be rats can be hats can be gnats can be thats can be thises. And";
 pages[7]="that doors can be boars can be snores can be floors can be roars can be spores can be yours can be mine. I must be smart, for the interconnective system is very clear to me. Then why, or wherefore do people keep calling me mad? Wabbajack. Wabbajack. Wabbajack.";
 onPageLoad();
}

function loadExampleBookWithImages() {
 type="book";
 subtype="testbook";
 title="Herbalist's Guide to Skyrim";
 pages.length=0;
 pages[0]="";
 pages[1]="Herbalist's guide to Skyrim<br><br>Agneta Falia";
 pages[2]="Those avoiding this northern province due to claims of barbarism or concerns over climate are doing themselves a disservice; in fact, Skyrim has a wealth of materials that every Alchemist would do well to avail himself of. I have traveled extensively throughout this land, and here are but a few of my findings.";
 pages[3]="<img src=\"http://images.uesp.net/3/34/SR-book-Bleedingcrown.png\" width=260 height=320>";
 pages[4]="Bleeding Crown<br>The caps of these mushrooms do indeed appear smeared with blood, though it is often hard to see in the dark, damp places in which they grow. Not uncommonly found in Skyrim, their abundance is countered by the difficulty in acquiring them. As any experienced herbalist knows, the darkest of caves often conceal far more than mere mushrooms. Nonetheless, these potent";
 pages[5]="fungi, when combined with certain powdered antlers, produce a mixture rendering one quite susceptible to poison. Their usefulness is also quite apparent when mixed with Lavender, creating a substance highly resistant to magic.";
 pages[6]="<img src=\"http://images.uesp.net/9/9b/SR-book-Deathbell.png\" width=200 height=300>";
 pages[7]="Deathbell<br>Folklore abounds about this flower found in the swamps of Hjaalmarch. Some stories claim it grows where unfortunate deaths have taken place, others insist it grows first and then lures unsuspecting people and animals to their doom. I have found no direct evidence to support these stories; indeed I found the flowers difficult to locate at all. While it is most well-known for its use in";
 pages[8]="poisons, it would be remiss to overlook that the blooms of the Deathbell are very effective in mixtures for boosting one Alchemy skill.";
 pages[9]="<img src=\"http://images.uesp.net/b/b5/SR-book-Dragonfly.png\" width=311 height=200>";
 pages[10]="Dragonfly<br>A surprising number of insects survive in Skyrim's climate, many thriving in the lower, southern areas of the province. Dragonflies can be found in a great many places, and while catching them can be a daunting prospect, the reward is well worth the effort. It was beyond the scope of my research to determine whether the orange and blue dragonflies are fully different breeds or merely";
 pages[11]="simple color variations, but through experimentation I found that the orange dragonfly, when combined with the very hardy barnacles found along the coast, transfer some of their flighty nature, giving the herbalist some very nimble fingers.";
 pages[12]="<img src=\"http://images.uesp.net/8/8f/SR-book-Hagravenclaw.png\" width=222 height=300>";
 pages[13]="Hagraven Claw<br>The claws of a hagraven are best obtained in shops; it is inadvisable to suggest one collects them oneself. These creatures have traded in their humanity for access to powerful magics, and the transformations they undergo infuse their entire beings with some element of that power. Ingesting the powdered claws makes one more resistant to magic, but an especially curious property of the claws";
 pages[14]="is revealed when mixed with snowberries (often found in Skyrim's higher elevations). I found myself capable of comprehending enchantments I had believed mystifying after ingesting the mixture, and have passed this knowledge on to several court wizards who were grateful for the knowledge.";
 pages[15]="<img src=\"http://images.uesp.net/d/d1/SR-book-Jazbay.png\" width=282 height=280>";
 pages[16]="Jazbay<br><br>There was a time when it would be considered treason to pick one of these grapes without express permission from the Emperor himself. It is my understanding that although growers in Skyrim were successful in improving the fruit's survivability, it came at the cost of flavor. No longer is it quite the prize it once was. And yet, growing amidst the volcanic tundra of";
 pages[17]="Eastmarch, it is still immensely useful for concocting potions. Mages value it highly as it can be combined with simple garlic to enhance the regeneration of magicka. While no longer against the law, picking these grapes in large amounts is best kept to oneself.";
 pages[18]="<img src=\"http://images.uesp.net/9/96/SR-book-Mothwing.png\" width=165 height=380>";
 pages[19]="Luna Moth Wing<br><br>As with the dragonflies, I was taken aback by the number of butterflies, moths, and other insects that manage to thrive in Skyrim. The Luna moth is especially beautiful; its thin, almost ephemeral wings seem too delicate to hoist anything into the air, giving them an almost magical appearance. Indeed, that sense extends to the properties they exhibit when";
 pages[20]="crushed and distilled (an action I admit was difficult to perform at first, no matter my resolve to discover all that Skyrim has to offer. These creatures are simply that beautiful!) While they can be used for creating poisons that damage magicka, I feel that would be a waste of their potential. Do not be alarmed if, when the wings are broken down almost completely, they appear to almost disappear";
 pages[21]="under your mortar. That very quality makes the wings quite effective in potions of invisibility!";
 pages[22]="<img src=\"http://images.uesp.net/3/3b/SR-book-Tundracotton.png\" width=180 height=380>";
 pages[23]="Tundra Cotton<br><br>Not all Nords are savages wrapped in animal skins, howling at the moon. There are a wide variety of fabrics worn throughout the land, thanks in no small part to the stubborn Tundra Cotton plant. It soaks up what rain it can in the plains west of Whiterun, and blooms frequently. While it does not exhibit any of the more striking alchemical properties,";
 pages[24]="it is a staple in potions for not only fortifying magicka, but for resisting spells as well. I wonder if that quality is what allows it to have adapted so well to this climate.";
 pages[25]="<img src=\"http://images.uesp.net/a/a4/SR-book-Wolfsbane.png\" width=106 height=380>";
 pages[26]="Nightshade<br><br>The name and shape of this plant are known to all; long understood to be one of the more potent components in many poisons, the average Nord keeps his distance from the bright purple flowers nestled among dark leaves. It is exceedingly effective as a pure poison, but can also be combined with other compounds to stiffen joints as well. It is thus favored";
 pages[27]="amongst those who wish to disable their opponents in battle, and can be found coating the blades of many of the more unsavory characters in Skyrim.";
 onPageLoad();
}

//--> If you are reading this then you need to enable Javascript.
</script>


<style type="text/css">


#book
{
font-family: "SkyrimBooks_Gaelic", "Baskerville", "Lucida Calligraphy";
}
#leftpage
{
transform:skew(172deg,174.5deg);
-ms-transform:skew(178deg,174.5deg); /* IE 9 */
-moz-transform:skew(178deg,174.5deg); /* Firefox */
-webkit-transform:skew(178deg,174.5deg); /* Safari and Chrome */
-o-transform:skew(178deg,174.5deg); /* Opera */
}
#page1
{
font-size:19pt;
}
#page2
{
margin-top:2px;
font-size:19pt;
}
#note
{
font-family: "SkyrimBooks_Handwritten_Bold", "Viner Hand ITC", "Lucida Calligraphy";
font-size:18pt;
}
#info
{
font-size:18pt;
}

</style>

<title>Interactive 3D Book Reader</title>
</head>


<body onload="onPageLoad()" onKeyDown="checkKey()">

<h1 id="title">If you are reading this then something is wrong</h1>

<a id="allContent"></a>

</body>

</html>