cleanup

changelog.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<updates>
+   <update>
+      <date>Oct 16, 2017</date>
+      <change>Updated descriptions for incompatible codes.</change>
+   </update>
+   <update>
+      <date>Oct 15, 2017</date>
+      <change>Fixed download for Firefox</change>
+   </update>
+   <update>
+      <date>Oct 14, 2017</date>
+      <change>Added Fast Any% for JP &amp; PAL</change>
+   </update>
+   <update>
+      <date>Oct 11, 2017</date>
+      <change>Added Stage Randomizer (Experimental) for NTSC-U</change>
+   </update>
+</updates>

gctGenerator.js

@@ -0,0 +1,147 @@
+if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1) {
+    HTMLElement.prototype.click = function() {
+        var evt = this.ownerDocument.createEvent("MouseEvents");
+        evt.initMouseEvent("click", true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
+        this.dispatchEvent(evt);
+    }
+}
+
+var xmlData;
+function fillChecklist(i) {
+    if (i < xmlData.length) {
+        var li = document.createElement("li");
+        var desc = xmlData[i].getElementsByTagName("title")[0].textContent;
+        var t = document.createTextNode(desc);
+        li.appendChild(t);
+        li.setAttribute("data-codeName", xmlData[i].getElementsByTagName("title")[0].textContent);
+        li.setAttribute("data-codeAuthor", xmlData[i].getElementsByTagName("author")[0].textContent);
+        li.setAttribute("data-codeDesc", xmlData[i].getElementsByTagName("description")[0].textContent);
+        li.setAttribute("data-codeVersion", xmlData[i].getElementsByTagName("version")[0].textContent);
+        li.setAttribute("data-codeDate", xmlData[i].getElementsByTagName("date")[0].textContent);
+        li.setAttribute("data-codeSrc", xmlData[i].getElementsByTagName("source")[0].textContent.replace(/[\s\n\r\t]+/gm, ""));
+        li.setAttribute("onmouseover", "updateDescription(this)");
+        document.getElementById("checkList").appendChild(li);
+        i++;
+        setTimeout(function() {
+            fillChecklist(i)
+        }, 16);
+    } else {
+        setTimeout(function() {
+            button = document.getElementById("downloadButton");
+            button.style.transitionDuration = "1s";
+            button.style.opacity = "1";
+            button.disabled = false;
+            document.getElementById("gameID").disabled = false;
+        }, 24);
+    }
+}
+
+function parseXML(name) {
+    var xml = new XMLHttpRequest();
+    var file = "codes/" + name + ".xml";
+    xml.onload = function() {
+        if (this.status == 200 && this.responseXML != null) {
+            xmlData = xml.responseXML;
+            xmlData = (new DOMParser()).parseFromString(xml.responseText, "text/xml");
+            xmlData = xmlData.getElementsByTagName("code");
+
+            fillChecklist(0);
+        }
+    };
+    xml.open("GET", file);
+    xml.send();
+}
+
+function downloadGCT(data, filename) {
+    var rawData = new Uint8Array(data.length / 2);
+
+    for (var x = 0; x < rawData.length; x++) {
+        rawData[x] = parseInt(data.substr(x * 2, 2), 16);
+    }
+
+    var file = new Blob([rawData], {
+        type: "application/octet-stream"
+    });
+
+    if (window.navigator.msSaveOrOpenBlob)
+        window.navigator.msSaveOrOpenBlob(file, filename);
+    else {
+        var a = document.createElement("a"),
+            url = window.URL.createObjectURL(file);
+        a.href = url;
+        a.download = filename;
+        a.click();
+        setTimeout(function() {
+            window.URL.revokeObjectURL(url);
+        }, 500);
+    }
+}
+
+function generateGCT() {
+
+    if (document.getElementById("gameID").value === "Choose Version") {
+        alert("Select the game version!");
+        return;
+    }
+    var data = "00D0C0DE00D0C0DE";
+    var codeList = document.getElementById("checkList").getElementsByTagName("li");
+    var valueSelected = false;
+    for (var i = 0; i < codeList.length; i++) {
+        if (codeList[i].className === "checked") {
+            data += codeList[i].getAttribute("data-codeSrc");
+            valueSelected = true;
+        }
+    }
+
+    if (valueSelected) {
+        data += "FF00000000000000";
+
+        downloadGCT(data, document.getElementById("gameID").value + ".gct");
+    } else {
+        alert("No cheat(s) selected!");
+    }
+}
+
+function updateCodelist() {
+    resetDescription();
+    document.getElementById("gameID").disabled = true;
+    button = document.getElementById("downloadButton");
+    button.style.visibility = "visible";
+    button.style.transitionDuration = "0s";
+    button.style.opacity = "0";
+	button.disabled = true;
+    document.getElementById("checkList").innerHTML = "";
+    var gameVersion = document.getElementById("gameID").value;
+    parseXML(gameVersion);
+}
+
+function updateDescription($this) {
+    document.getElementById("descriptionBox").innerHTML = "<p><h2>" +
+        $this.getAttribute("data-codeName") + "</h2></p><p><i>Author(s): " +
+        $this.getAttribute("data-codeAuthor") + "<br />Version: " +
+        $this.getAttribute("data-codeVersion") + " (" +
+        $this.getAttribute("data-codeDate") + ")</i></p>" + "<p>Description:<br />" +
+        $this.getAttribute("data-codeDesc") + "</p>";
+}
+
+function resetDescription() {
+    document.getElementById("descriptionBox").innerHTML = "<p><h3>Select your codes from the list...</h3></p>";
+}
+
+function updateChangelog() {
+    var xml = new XMLHttpRequest();
+    var file = "changelog.xml";
+    xml.onload = function() {
+        if (this.status == 200 && this.responseXML != null) {
+            var changelogData = xml.responseXML;
+            changelogData = (new DOMParser()).parseFromString(xml.responseText, "text/xml");
+            changelogData = changelogData.getElementsByTagName("update");
+
+            for (var i = 0; i < changelogData.length; i++) {
+                document.getElementById("changelog").innerHTML += "<i>" + changelogData[i].getElementsByTagName("date")[0].textContent + ":</i> " + changelogData[i].getElementsByTagName("change")[0].textContent + "<br />";
+            }
+        };
+    }
+    xml.open("GET", file);
+    xml.send();
+}

guide.html

@@ -7,7 +7,7 @@
       <title>SMS GCT Generator</title>
    </head>
    <body>
-      <div style="width: 50%; min-width:300px; position:absolute; left:50%; transform:translate(-50%, 0);">
+      <div style="width: 50%; min-width:600px; position:absolute; left:50%; transform:translate(-50%, 0);">
          <div id="guide_content">
             <h1 align="center">How to install and use practice codes</h1>
             <p align="center">This page is a simple guide to explain the recommended way to install practice codes on your Nintendo Wii.</p>

index.html

@@ -6,128 +6,33 @@
     <link rel="stylesheet" href="style/style.css">
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
     <title>SMS GCT Generator</title>
-    <script language="javascript">
+    <script language="javascript" src="gctGenerator.js"></script>
-        if(navigator.userAgent.toLowerCase().indexOf("firefox") > -1) {
-            HTMLElement.prototype.click = function() {
-            var evt = this.ownerDocument.createEvent("MouseEvents");
-            evt.initMouseEvent("click", true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
-            this.dispatchEvent(evt);
-            }
-        }
-
-        function parseXML(name) {
-            var xml = new XMLHttpRequest();
-            var file = "codes/" + name + ".xml";
-            xml.onload = function() {
-                if (this.status == 200 && this.responseXML != null) {
-                    var xmlData = xml.responseXML;
-                    xmlData = (new DOMParser()).parseFromString(xml.responseText, "text/xml");
-                    xmlData = xmlData.getElementsByTagName("code");
-
-                    for (var i = 0; i < xmlData.length; i++) {
-                        var li = document.createElement("li");
-                        var desc = xmlData[i].getElementsByTagName("title")[0].textContent;
-                        var t = document.createTextNode(desc);
-                        li.appendChild(t);
-                        li.setAttribute("data-codeName", xmlData[i].getElementsByTagName("title")[0].textContent);
-                        li.setAttribute("data-codeAuthor", xmlData[i].getElementsByTagName("author")[0].textContent);
-                        li.setAttribute("data-codeDesc", xmlData[i].getElementsByTagName("description")[0].textContent);
-                        li.setAttribute("data-codeVersion", xmlData[i].getElementsByTagName("version")[0].textContent);
-                        li.setAttribute("data-codeDate", xmlData[i].getElementsByTagName("date")[0].textContent);
-                        li.setAttribute("data-codeSrc", xmlData[i].getElementsByTagName("source")[0].textContent.replace(/[\s\n\r\t]+/gm, ""));
-                        li.setAttribute("onmouseover", "updateDescription(this)");
-                        document.getElementById("checkList").appendChild(li);
-                    }
-                }
-            };
-            xml.open("GET", file);
-            xml.send();
-        }
-
-        function downloadGCT(data, filename) {
-            var rawData = new Uint8Array(data.length / 2);
-
-            for (var x = 0; x < rawData.length; x++) {
-                rawData[x] = parseInt(data.substr(x * 2, 2), 16);
-            }
-
-            var file = new Blob([rawData], {
-                type: "application/octet-stream"
-            });
-
-            if (window.navigator.msSaveOrOpenBlob)
-                window.navigator.msSaveOrOpenBlob(file, filename);
-            else {
-                var a = document.createElement("a"),
-                    url = window.URL.createObjectURL(file);
-                a.href = url;
-                a.download = filename;
-                a.click();
-                window.URL.revokeObjectURL(url);
-            }
-        }
-
-        function generateGCT() {
-
-            if (document.getElementById("gameID").value === "Choose Version") {
-                alert("Select the game version!");
-                return;
-            }
-            var data = "00D0C0DE00D0C0DE";
-            var codeList = document.getElementById("checkList").getElementsByTagName("li");
-            var valueSelected = false;
-            for (var i = 0; i < codeList.length; i++) {
-                if (codeList[i].className === "checked") {
-                    data += codeList[i].getAttribute("data-codeSrc");
-                    valueSelected = true;
-                }
-            }
-
-            if (valueSelected) {
-                //data = data.replace(/[\s\n\r\t]+/gm, "");
-                data += "FF00000000000000";
-
-                downloadGCT(data, document.getElementById("gameID").value + ".gct");
-            } else {
-                alert("No cheat(s) selected!");
-            }
-        }
-
-        function updateCodelist() {
-            document.getElementById("downloadButton").style.visibility = "visible";
-            document.getElementById("checkList").innerHTML = "";
-            var gameVersion = document.getElementById("gameID").value;
-            parseXML(gameVersion);
-        }
-
-        function updateDescription($this) {
-            document.getElementById("descriptionBox").style.visibility = "visible";
-            var description = "<p><h2>" + $this.getAttribute("data-codeName") + "</h2></p><p><i>Author: " + $this.getAttribute("data-codeAuthor") + "<br />Version: " + $this.getAttribute("data-codeVersion") + " (" + $this.getAttribute("data-codeDate") + ")</i></p>" + "<p>Description:<br />" + $this.getAttribute("data-codeDesc") + "</p>";
-            document.getElementById("descriptionBox").innerHTML = description;
-        }
-
-        function hideDescription() {
-            document.getElementById("descriptionBox").style.visibility = "hidden";
-        }
-    </script>
 </head>
 
-<body>
+<body onload="updateChangelog()">
     <div style="width: 100%; overflow: hidden;">
-        <h2>Mario Sunshine Cheatfile Generator (<a href="guide.html">Guide</a>) <span style="font-size:12px;font-style:italic;">by <a href="https://twitter.com/psychonauter">Psy</a> & <a href="https://twitter.com/srlMilk">Milk</a></span></h2>
         <div style="width: 510px; float: left;">
-            <select id="gameID" class="selectionHeader" onchange="updateCodelist()">
+            <select id="gameID" class="selectionHeader" onchange="updateCodelist()" autocomplete="off">
                 <option selected disabled hidden>Choose Version</option>
                 <option value="GMSE01">GMSE01 (NTSC-U)</option>
                 <option value="GMSJ01">GMSJ01 (NTSC-J 1.0)</option>
                 <option value="GMSP01">GMSP01 (PAL)</option>
             </select>
-            <ul id="checkList" onmouseleave="hideDescription()">
+            <ul id="checkList">
             </ul>
             <button id="downloadButton" onclick="generateGCT()" style="visibility:hidden;">Download</button>
         </div>
         <div style="margin-left: 530px;">
-            <div id="descriptionBox" class="framed" style="visibility:hidden;">
+            <div id="descriptionBox" class="framed">
+                <p>
+                    <h2>Mario Sunshine Cheatfile Generator</h2>
+                </p>
+                <p><i>Authors: <a href="https://twitter.com/psychonauter">Psy</a> & <a href="https://twitter.com/srlmilk">Milk</a><br />
+				      Last Updated: Oct 18, 2017</i></p>
+                <p>Description:<br /> This is a cheatfile generator for SMS Speedrun practice. A guide on how to use the generator and cheatfiles on your Wii can be found here: <a href="guide.html">Guide</a>
+                </p>
+                <h4>Changelog:</h4>
+                <p id="changelog"></p>
             </div>
         </div>
     </div>

style/style.css

@@ -24,6 +24,11 @@ body button {
     cursor: pointer;
     margin-top: 10px;
     outline: none;
+    -webkit-transition: all 0s ease-out 0s;
+    -moz-transition: all 0s ease-out 0s;
+    -ms-transition: all 0s ease-out 0s;
+    -o-transition: all 0s ease-out 0s;
+    transition: all 0s ease-out 0s;
 }
 img {
     border-radius: 4px;
@@ -47,8 +52,13 @@ ul li {
     -ms-user-select: none;
     user-select: none;
     outline: none;
+    -webkit-animation: fadein .8s;
+    -moz-animation: fadein .8s;
+    -ms-animation: fadein .8s;
+    -o-animation: fadein .8s;
+    animation: fadein .8s;
 }
-ul li::before  {
+ul li::before {
     content: '';
     position: absolute;
     border-color: #a6a6a6;
@@ -60,10 +70,10 @@ ul li::before  {
     height: 15px;
     width: 15px;
 }
-ul li:nth-child(odd)  {
+ul li:nth-child(odd) {
     background: #fdfdfd;
 }
-ul li:hover  {
+ul li:hover {
     /*background: #ddd;*/
     
     background: #565656;
@@ -101,28 +111,88 @@ ul li.checked::before {
     outline: none;
 }
 .framed {
-    margin: 30px 0 10px 0;
+    margin: 10px 0px 10px 0;
     padding: 0px 12px 12px 12px;
+    background-color: #111;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 18px;
     border-color: #fff;
     border-style: solid;
     border-width: 1px;
     border-radius: 4px;
     width: 500px;
-    /*min-height: 300px;*/
+    min-height: 150px;
+    -webkit-animation: fadein 1s;
+    -moz-animation: fadein 1s;
+    -ms-animation: fadein 1s;
+    -o-animation: fadein 1s;
+    animation: fadein 1s;
 }
 #guide_content {
-	clear:both; 
+    clear: both;
-	background-color:#111; 
+    background-color: #111;
-	width:100%; 
+    width: 100%;
-	max-width:960px; 
+    max-width: 960px;
-	overflow:hidden; 
+    overflow: hidden;
-	border:1px solid #333; 
+    border: 1px solid #333;
     margin: 30px 0 10px 0;
-	padding: 0px 12px 12px 12px;
+    padding: 0px 12px 12px 12px;
-	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-	font-size: 14px;
+    font-size: 14px;
-	line-height: 22px;
+    line-height: 22px;
+}
+.hidden {
+    opacity: 0;
 }
 a {
-	color: pink;
+    color: pink;
+}
+@keyframes fadein {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+/* Firefox < 16 */
+
+@-moz-keyframes fadein {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+/* Safari, Chrome and Opera > 12.1 */
+
+@-webkit-keyframes fadein {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+/* Internet Explorer */
+
+@-ms-keyframes fadein {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+/* Opera < 12.1 */
+
+@-o-keyframes fadein {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }