diff --git a/Makefile b/Makefile
index 9fd9273..8dd4985 100644
--- a/Makefile
+++ b/Makefile
@@ -1,4 +1,4 @@
-JS=HuesCanvas.js HuesCore.js HuesSettings.js HuesUI.js ResourceManager.js ResourcePack.js SoundManager.js
+JS=HuesCanvas.js HuesCore.js HuesSettings.js HuesUI.js HuesInfo.js ResourceManager.js ResourcePack.js SoundManager.js
YUI=yuicompressor-2.4.8.jar
all: minify pack
diff --git a/index-min.html b/index-min.html
index b7fca7d..74267d9 100644
--- a/index-min.html
+++ b/index-min.html
@@ -53,50 +53,13 @@
-
0x40 Hues of JS, v1.0
+
0x40 Hues of JS,
Web-ified by mon
With help from Kepstin
-
-
-
Beat glossary
-
- - x Vertical blur (snare)
- - o Horizontal blur (bass)
- - - No blur
- - + Blackout
- - | Short blackout
- - : Color only
- - * Image only
- - X Vertical blur only
- - O Horizontal blur only
- - ~ Fade color
- - = Fade and change image
- - i Invert all colours
- - I Invert & change image
-
-
-
-
Keyboard shortcuts
-
- - ↑↓ Change song
- - ←→ Change image
- - [SHIFT] Random song
- - -+ Change volume
- - [M] Toggle mute
- - [F] Toggle automode
- - [H] Toggle UI hide
- - [C] Character list
- - [S] Song list
- - [W] Toggle window
- - [R] Resource packs
- - [O] Options
- - [I] Information
- - [1-5] Change UI
-
-
-
+
+
diff --git a/index.html b/index.html
index 4d30bcc..2e7e6da 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,7 @@
+
@@ -64,50 +65,13 @@
-
0x40 Hues of JS, v1.0
+
0x40 Hues of JS,
Web-ified by mon
With help from Kepstin
-
-
-
Beat glossary
-
- - x Vertical blur (snare)
- - o Horizontal blur (bass)
- - - No blur
- - + Blackout
- - | Short blackout
- - : Color only
- - * Image only
- - X Vertical blur only
- - O Horizontal blur only
- - ~ Fade color
- - = Fade and change image
- - i Invert all colours
- - I Invert & change image
-
-
-
-
Keyboard shortcuts
-
- - ↑↓ Change song
- - ←→ Change image
- - [SHIFT] Random song
- - -+ Change volume
- - [M] Toggle mute
- - [F] Toggle automode
- - [H] Toggle UI hide
- - [C] Character list
- - [S] Song list
- - [W] Toggle window
- - [R] Resource packs
- - [O] Options
- - [I] Information
- - [1-5] Change UI
-
-
-
+
+
diff --git a/js/HuesCore.js b/js/HuesCore.js
index c85b11a..c75f775 100644
--- a/js/HuesCore.js
+++ b/js/HuesCore.js
@@ -115,6 +115,7 @@ function HuesCore(defaults) {
}.bind(this);
console.log("0x40 Hues - start your engines!");
+ populateHuesInfo(this.version);
this.colours = this.oldColours;
this.uiArray = [];
this.lastSongArray = [];
diff --git a/js/HuesInfo.js b/js/HuesInfo.js
new file mode 100644
index 0000000..07a9dd1
--- /dev/null
+++ b/js/HuesInfo.js
@@ -0,0 +1,102 @@
+/* Copyright (c) 2015 William Toohey
+ * Portions Copyright (c) 2015 Calvin Walton
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+
+ /* HuesInfo.js populates the beat glossary, shortcut list, and version string.
+ * This means the HTML should rarely need to be updated.
+ * If the element IDs are not present, the DOM is not modified. If you would
+ * like a custom info page, simply leave them out.
+ */
+
+var huesInfo = {
+ versionID: "versionText",
+ referenceID: "reference",
+ referenceClass: "info-ref"
+};
+
+var beatGlossary = [
+ "x Vertical blur (snare)",
+ "o Horizontal blur (bass)",
+ "- No blur",
+ "+ Blackout",
+ "| Short blackout",
+ ": Color only",
+ "* Image only",
+ "X Vertical blur only",
+ "O Horizontal blur only",
+ "~ Fade color",
+ "= Fade and change image",
+ "i Invert all colours",
+ "I Invert & change image"
+];
+
+var shortcuts = [
+ "↑↓ Change song",
+ "←→ Change image",
+ "[SHIFT] Random song",
+ "-+ Change volume",
+ "[M] Toggle mute",
+ "[F] Toggle automode",
+ "[H] Toggle UI hide",
+ "[C] Character list",
+ "[S] Song list",
+ "[W] Toggle window",
+ "[R] Resource packs",
+ "[O] Options",
+ "[I] Information",
+ "[1-5] Change UI"
+];
+
+function populateHuesInfo(version) {
+ var versionInt = parseInt(version);
+
+ var versionElem = document.getElementById(huesInfo.versionID);
+ if(versionElem) {
+ versionElem.textContent = "v" + (versionInt/10).toFixed(1);
+ }
+
+ addInfo("Beat glossary", beatGlossary);
+ addInfo("Keyboard shortcuts", shortcuts);
+};
+
+var addInfo = function(titleText, list) {
+ var refElem = document.getElementById(huesInfo.referenceID);
+ if(!refElem) {
+ return;
+ }
+
+ var info = document.createElement("div");
+ info.className = huesInfo.referenceClass;
+ refElem.appendChild(info);
+
+ var title = document.createElement("h3");
+ title.textContent = titleText;
+ info.appendChild(title);
+
+ var listElem = document.createElement("ul");
+ list.forEach(function(elem) {
+ var item = document.createElement("li");
+ item.textContent = elem;
+ listElem.appendChild(item);
+ });
+ info.appendChild(listElem);
+};
\ No newline at end of file