Improve Demo Songs, add a few more

6 files changed, 79 insertions, 12 deletions

diff --git a/css/screen.css b/css/screen.css
index 95eb968..c88a235 100644
--- a/css/screen.css
+++ b/css/screen.css
@@ -96,6 +96,42 @@ body {
   margin-top: 1.9rem;
 }
 
+#demos {
+  text-align: center;
+}
+#demos > div {
+  display: inline-block;
+  margin: 0 auto;
+  text-align: left;
+  border-radius: 0.35rem;
+  border: 1px solid rgba(215, 99, 34, 0.78);
+  padding: 1rem;
+  background: white;
+}
+#demos > div h2 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.3rem;
+}
+#demos > div .song {
+  display: block;
+  text-decoration: none;
+  color: #4c4cbd;
+}
+#demos > div .song + .song {
+  margin-top: 0.65rem;
+}
+#demos > div .song .size {
+  vertical-align: super;
+  font-size: 0.6rem;
+  margin-left: 0.3rem;
+}
+#demos > div .song .size:before {
+  content: "(";
+}
+#demos > div .song .size:after {
+  content: ")";
+}
+
 .control {
   width: 5rem;
   height: 5rem;
diff --git a/index.html b/index.html
index 4d53291..0848a85 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@
         }
         else {
           player.stop();
-          pausePauseButton();
+          playPauseButton();
         }
       }
 
@@ -47,7 +47,7 @@
         player.load(path, function(buffer) {
           player.play(buffer);
           setMetadata(path);
-          playPauseButton();
+          pausePauseButton();
         });
       }
 
@@ -56,7 +56,7 @@
         player.load(file, function(buffer) {
           player.play(buffer);
           setMetadata(file.name);
-          playPauseButton();
+          pausePauseButton();
         });
       }
 
@@ -103,6 +103,7 @@
         player.load(file, function(buffer) {
           player.play(buffer);
           setMetadata(file.name);
+          pausePauseButton();
         });
       }
 
@@ -117,22 +118,24 @@
         <p>Usage: Drop any module file (.mod, .xm, .it, etc.) on this page and hit play!</p>
       </div>
       <div id="headline" class="banner"><h1>chiptune.js</h1></div>
-      <div id="demosong" class="banner">
-        <a onclick="loadURL('tunes/mysteristerium.mod')" href="#">
-          Load demo song<br>
-          (mysterysterium by maktone)
-        </a>
-      </div>
       <div id="metadata" class="banner">
         <span id="title">nothing loaded</span>
         <span id="artist"></span>
       </div>
+      <div id="controls" class="banner">
+        <a onclick="pauseButton()" id="play" class="control"></a>
+      </div>
       <div id="choosefile" class="banner">
         <input type="file" id="files" name="files" onchange="loadFile(this.files[0])"/>
       </div>
-      <div id="controls" class="banner">
-        <a onclick="pauseButton()" id="pause" class="control"></a>
-      </div>
+      <div id="demos" class="banner"><div>
+        <h2>Demo Songs</h2>
+        <a class="song" onclick="loadURL('tunes/mysteristerium.mod')" href="#">mysterysterium by maktone<span class="size">23kb</span></a>
+        <a class="song" onclick="loadURL('tunes/rfchip001.xm')" href="#">RF chip #001 by Dubmood and Bliss<span class="size">31kb</span></a>
+        <a class="song" onclick="loadURL('tunes/cydonian sky.xm')" href="#">Cydonian Sky by Dubmood<span class="size">31kb</span></a>
+        <a class="song" onclick="loadURL('tunes/chipsounds.mod')" href="#">Chipsounds by 4-Mat<span class="size">18kb</span></a>
+        <!-- <a class="song" onclick="loadURL('tunes/')" href="#"> by </a> -->
+      </div></div>
     </div>
   </body>
 </html>
diff --git a/sass/screen.sass b/sass/screen.sass
index 4a9bde8..5656c67 100644
--- a/sass/screen.sass
+++ b/sass/screen.sass
@@ -87,6 +87,34 @@ body
 
 #choosefile, #controls
     margin-top: 1.9rem
+
+#demos
+    text-align: center
+    > div
+        display: inline-block
+        margin: 0 auto
+        text-align: left
+        border-radius: 0.35rem
+        border: 1px solid rgba(215, 99, 34, 0.78)
+        padding: 1rem
+        background: #fff
+        h2
+            margin: 0 0 0.5rem 0
+            font-size: 1.3rem
+        .song
+            display: block
+            text-decoration: none
+            color: #4C4CBD
+            + .song
+                margin-top: 0.65rem
+            .size
+                vertical-align: super
+                font-size: 0.6rem
+                margin-left: 0.3rem
+                &:before
+                    content: "("
+                &:after
+                    content: ")"
     
 
 .control
diff --git a/tunes/chipsounds.mod b/tunes/chipsounds.mod
new file mode 100644
index 0000000..95b731c
--- /dev/null
+++ b/tunes/chipsounds.mod
diff --git a/tunes/cydonian sky.xm b/tunes/cydonian sky.xm
new file mode 100644
index 0000000..57f0988
--- /dev/null
+++ b/tunes/cydonian sky.xm
diff --git a/tunes/rfchip001.xm b/tunes/rfchip001.xm
new file mode 100644
index 0000000..b60cefe
--- /dev/null
+++ b/tunes/rfchip001.xm