Change how ChiptunePlayer loads (autoload audio context), change stylesheet building and add gitignore

8 files changed, 350 insertions, 336 deletions

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..7d62527
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,57 @@
+# Created by https://www.gitignore.io
+
+### Windows ###
+# Windows image file caches
+Thumbs.db
+ehthumbs.db
+
+# Folder config file
+Desktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+
+### Linux ###
+*~
+
+# KDE directory preferences
+.directory
+
+
+### OSX ###
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear on external disk
+.Spotlight-V100
+.Trashes
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+
+### Sass ###
+.sass-cache
+*.css.map
diff --git a/README.md b/README.md
index 95e88c1..eccbc94 100644
--- a/README.md
+++ b/README.md
@@ -39,6 +39,13 @@ If it runs successfully two file will be created inside the `bin` directory.
 1. `libopenmpt.js` is the library you want. You can use it with chiptune2.js.
 2. `libopenmpt_test.js` is the libopenmpt test suite. It is meant to run in nodejs.
 
+### Building Stylesheet
+The stylesheet is build with [SASS+Compass](http://compass-style.org/). To build this yourself, follow the Compass [installation instructions](http://compass-style.org/install/), then cd into the chiptune2.js directory and use this command:
+
+    compass watch
+
+The stylesheet .css file with rebuild every time you make a change to the source file in the `sass` folder.
+
 ## License
 
 All code in this project is MIT (X11) licensed. The only exception are the compiled libopenmpt parts which remain under the OpenMPT project BSD license.
diff --git a/config.rb b/config.rb
new file mode 100644
index 0000000..e6ee0ae
--- /dev/null
+++ b/config.rb
@@ -0,0 +1,21 @@
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "."
+css_dir = "./css"
+sass_dir = "./sass"
+images_dir = "./img"
+javascripts_dir = "./js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+# output_style = compact
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+line_comments = false
+
+preferred_syntax = :sass
diff --git a/css/main.css b/css/main.css
deleted file mode 100644
index bbe5e41..0000000
--- a/css/main.css
+++ /dev/null
@@ -1,322 +0,0 @@
-/* ==========================================================================
-   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
-   ========================================================================== */
-
-html,
-button,
-input,
-select,
-textarea {
-    color: #222;
-}
-
-body {
-    font-size: 1em;
-    line-height: 1.4;
-}
-
-::-moz-selection {
-    background: #b3d4fc;
-    text-shadow: none;
-}
-
-::selection {
-    background: #b3d4fc;
-    text-shadow: none;
-}
-
-hr {
-    display: block;
-    height: 1px;
-    border: 0;
-    border-top: 1px solid #ccc;
-    margin: 1em 0;
-    padding: 0;
-}
-
-img {
-    vertical-align: middle;
-}
-
-fieldset {
-    border: 0;
-    margin: 0;
-    padding: 0;
-}
-
-textarea {
-    resize: vertical;
-}
-
-.chromeframe {
-    margin: 0.2em 0;
-    background: #ccc;
-    color: #000;
-    padding: 0.2em 0;
-}
-
-
-/* ==========================================================================
-   Author's custom styles
-   ========================================================================== */
-@font-face {
-    font-family: amiga;
-    src: url('../fonts/amiga4ever_pro2.ttf');
-    font-weight:400;
-}
-
-* {
-	-webkit-user-select: none;
-  cursor: default;
-}
-
-body {
-	background-color: #FF5C00;
-	font-family: amiga;
-  overflow: hidden;
-}
-
-#headphones {
-	margin: 0 auto;
-	position: relative;
-	top: 40px;
-	width: 45em;
-	height: 45em;
-	background-image: url('../img/headphones.svg');
-	background-repeat: no-repeat;
-	background-size: 100%;
-}
-
-#content {
-	position: relative;
-	top: -45em;
-}
-
-#headline {
-	position: relative;
-	top: 0.5em;
-	font-size: 5em;
-	background-color: white;
-	padding-left: 0.5em;
-	text-align: center;
-}
-
-#controls {
-	position: relative;
-	top: 14em;
-	text-align: center;
-}
-
-#info {
-  background-color: rgba(0,0,0,0.8);
-  color: white;
-  padding: 1em;
-  font-size: 16px;
-}
-
-.control {
-	width: 5em;
-	height: 5em;
-	border-radius: 2.5em;
-	background-color: rgb(80,80,80);
-	display: inline-block;
-	box-shadow: 0px 9px 0px rgba(50,50,50,1), 0px 9px 25px rgba(0,0,0,.7);
-	transition: all .1s ease;
-	cursor: pointer;
-}
-
-.control:active, .control.pressed {
-	box-shadow: 0px 3px 0px rgba(50,50,50,1), 0px 3px 6px rgba(0,0,0,.7);
-}
-
-#play {
-	background-image: url('../img/play.svg');
-	background-size: 75%;
-	background-position: 16px 9px;
-	background-repeat: no-repeat;
-}
-
-#pause {
-	background-image: url('../img/pause.svg');
-	background-size: 75%;
-	background-position: center;
-	background-repeat: no-repeat;
-}
-
-#loop {
-  display: none;
-}
-
-#loop + label {
-	background-image: url('../img/loop.svg');
-	background-size: 75%;
-	background-position: center;
-	background-repeat: no-repeat;
-}
-
-#loop:checked + label {
-  box-shadow: 0px 3px 0px rgba(50,50,50,1), 0px 3px 6px rgba(0,0,0,.7);
-}
-
-#demosong {
-  font-size: 75%;
-  text-align: center;
-}
-
-#demosong a {
-  border-bottom: 1px solid black;
-}
-
-#demosong a:hover {
-  color: white;
-  border-color: white;
-  cursor: pointer;
-}
-
-/* ==========================================================================
-   Media Queries
-   ========================================================================== */
-
-@media only screen and (min-width: 35em) {
-
-}
-
-@media print,
-       (-o-min-device-pixel-ratio: 5/4),
-       (-webkit-min-device-pixel-ratio: 1.25),
-       (min-resolution: 120dpi) {
-
-}
-
-/* ==========================================================================
-   Helper classes
-   ========================================================================== */
-
-.ir {
-    background-color: transparent;
-    border: 0;
-    overflow: hidden;
-    *text-indent: -9999px;
-}
-
-.ir:before {
-    content: "";
-    display: block;
-    width: 0;
-    height: 150%;
-}
-
-.hidden {
-    display: none !important;
-    visibility: hidden;
-}
-
-.visuallyhidden {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
-
-.visuallyhidden.focusable:active,
-.visuallyhidden.focusable:focus {
-    clip: auto;
-    height: auto;
-    margin: 0;
-    overflow: visible;
-    position: static;
-    width: auto;
-}
-
-.invisible {
-    visibility: hidden;
-}
-
-.clearfix:before,
-.clearfix:after {
-    content: " ";
-    display: table;
-}
-
-.clearfix:after {
-    clear: both;
-}
-
-.clearfix {
-    *zoom: 1;
-}
-
-/* ==========================================================================
-   Print styles
-   ========================================================================== */
-
-@media print {
-    * {
-        background: transparent !important;
-        color: #000 !important; /* Black prints faster: h5bp.com/s */
-        box-shadow: none !important;
-        text-shadow: none !important;
-    }
-
-    a,
-    a:visited {
-        text-decoration: underline;
-    }
-
-    a[href]:after {
-        content: " (" attr(href) ")";
-    }
-
-    abbr[title]:after {
-        content: " (" attr(title) ")";
-    }
-
-    /*
-     * Don't show links for images, or javascript/internal links
-     */
-
-    .ir a:after,
-    a[href^="javascript:"]:after,
-    a[href^="#"]:after {
-        content: "";
-    }
-
-    pre,
-    blockquote {
-        border: 1px solid #999;
-        page-break-inside: avoid;
-    }
-
-    thead {
-        display: table-header-group; /* h5bp.com/t */
-    }
-
-    tr,
-    img {
-        page-break-inside: avoid;
-    }
-
-    img {
-        max-width: 100% !important;
-    }
-
-    @page {
-        margin: 0.5cm;
-    }
-
-    p,
-    h2,
-    h3 {
-        orphans: 3;
-        widows: 3;
-    }
-
-    h2,
-    h3 {
-        page-break-after: avoid;
-    }
-}
diff --git a/css/screen.css b/css/screen.css
new file mode 100644
index 0000000..e9dc775
--- /dev/null
+++ b/css/screen.css
@@ -0,0 +1,125 @@
+@font-face {
+  font-family: amiga;
+  src: url("../fonts/amiga4ever_pro2.ttf");
+  font-weight: 400;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff5c00), color-stop(100%, #ff5a00));
+  background: -webkit-linear-gradient(#ff5c00, #ff5a00);
+  background: -moz-linear-gradient(#ff5c00, #ff5a00);
+  background: -o-linear-gradient(#ff5c00, #ff5a00);
+  background: linear-gradient(#ff5c00, #ff5a00);
+}
+
+.bg {
+  width: 100%;
+  width: calc(100% - 4rem);
+  height: 100%;
+  height: calc(100% - 4rem);
+  position: absolute;
+  top: 2rem;
+  left: 2rem;
+  z-index: -90;
+}
+.bg.bg1 {
+  background-image: url("../img/headphones.svg");
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+}
+
+.banner {
+  width: 100%;
+  font-family: amiga, sans-serif;
+}
+.banner + .banner {
+  margin-top: 2.4rem;
+}
+
+#headline, #demosong, #controls, #choosefile {
+  text-align: center;
+}
+
+#info {
+  max-width: calc(100% - 2.6rem);
+  padding: 1.25rem 1.3rem;
+  background: rgba(20, 20, 20, 0.86);
+  color: #f9f9f9;
+}
+
+#headline {
+  max-width: calc(100% - 2rem);
+  padding: 1.2rem 1rem;
+  background: white;
+  color: #232323;
+}
+#headline h1 {
+  margin: 0;
+}
+@media only screen and (max-width: 45rem) {
+  #headline h1 {
+    font-size: 3rem;
+  }
+}
+@media only screen and (min-width: 45rem) {
+  #headline h1 {
+    font-size: 4.5rem;
+  }
+}
+
+#demosong {
+  margin-top: 3.6rem;
+}
+#demosong a {
+  color: #232323;
+  font-size: 0.8rem;
+}
+
+#controls, #choosefile {
+  margin-top: 1.7rem;
+}
+
+.control {
+  width: 5rem;
+  height: 5rem;
+  margin-top: 1.6rem;
+  border-radius: 2.5rem;
+  background-color: #505050;
+  display: inline-block;
+  box-shadow: 0px 9px 0px #323232, 0px 9px 25px rgba(0, 0, 0, 0.7);
+  transition: all 0.1s ease;
+  cursor: pointer;
+}
+.control:active, .control.pressed {
+  box-shadow: 0px 3px 0px #323232, 0px 3px 6px rgba(0, 0, 0, 0.7);
+}
+.control#play {
+  background-image: url("../img/play.svg");
+  background-size: 75%;
+  background-position: 16px 9px;
+  background-repeat: no-repeat;
+}
+.control#pause {
+  background-image: url("../img/pause.svg");
+  background-size: 75%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.control#loop {
+  display: none;
+}
+.control#loop + label {
+  background-image: url("../img/loop.svg");
+  background-size: 75%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.control#loop:checked + label {
+  box-shadow: 0px 3px 0px #323232, 0px 3px 6px rgba(0, 0, 0, 0.7);
+}
diff --git a/index.html b/index.html
index 9ad4a33..a550eab 100644
--- a/index.html
+++ b/index.html
@@ -8,19 +8,20 @@
     <meta name="viewport" content="width=device-width">
 
     <link rel="stylesheet" href="css/normalize.min.css">
-    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/screen.css">
 
     <script type="text/javascript" src="js/libopenmpt.js"></script>
     <script type="text/javascript" src="js/chiptune2.js"></script>
     <script type="text/javascript">
       var player;
-      var context = new AudioContext();
 
       function init() {
-        if (player != undefined) {
+        if (player == undefined) {
+          player = new ChiptuneJsPlayer(new ChiptuneJsConfig(1));
+        }
+        else {
           player.stop();
         }
-        player = new ChiptuneJsPlayer(context, new ChiptuneJsConfig(1));
       }
 
       function loadURL(path) {
@@ -56,20 +57,26 @@
     </script>
   </head>
   <body>
-    <div id="headphones"></div>
+    <div class="bg bg1"></div>
     <div id="content">
-      <div id="info">
+      <div id="info" class="banner">
         <p>Usage: Drop any module file (.mod, .xm, .it, etc.) on this page and hit play!</p>
       </div>
-      <div id="headline"><span>chiptune.js</span></div>
-      <div id="controls">
+      <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="controls" class="banner">
         <span class="loadedfile">nothing loaded</span><br>
         <a onclick="player.togglePause()" id="pause" class="control"></a>
       </div>
-      <div id="demosong"><a onclick="loadURL('tunes/mysteristerium.mod')" href="#">Load demo song<br>(mysterysterium by maktone)</a>
-      <br/>
-      <br /><input type="file" id="files" name="files" onchange="loadFile(this.files[0])"/>
-      <br/>
+      <div id="choosefile" class="banner">
+        <br/>
+        <br /><input type="file" id="files" name="files" onchange="loadFile(this.files[0])"/>
+        <br/>
       </div>
     </div>
   </body>
diff --git a/js/chiptune2.js b/js/chiptune2.js
index db7589e..4d5bf09 100644
--- a/js/chiptune2.js
+++ b/js/chiptune2.js
@@ -1,9 +1,14 @@
+// audio context
+ChiptuneAudioContext = AudioContext || webkitAudioContext;
+
+// config
 function ChiptuneJsConfig(repeatCount) {
   this.repeatCount = repeatCount;
 }
 
-function ChiptuneJsPlayer(context, config) {
-  this.context = context;
+// player
+function ChiptuneJsPlayer(config) {
+  this.context = new ChiptuneAudioContext;
   this.config = config;
   this.currentPlayingNode = null;
 }
diff --git a/sass/screen.sass b/sass/screen.sass
new file mode 100644
index 0000000..2cd4c30
--- /dev/null
+++ b/sass/screen.sass
@@ -0,0 +1,114 @@
+// chiptune2.js css
+
+@import compass
+
+// responsive design
+$mobile-width: 45rem
+
+@mixin respond-to($media)
+    @if $media == desktop
+        @media only screen and (min-width: $mobile-width)
+            @content
+    @else if $media == mobile
+        @media only screen and (max-width: $mobile-width)
+            @content
+
+// font
+@font-face
+    font-family: amiga
+    src: url('../fonts/amiga4ever_pro2.ttf')
+    font-weight: 400
+
+// our design
+html, body
+    width: 100%
+    height: 100%
+
+body
+    @include background(linear-gradient(#FF5C00, #FF5A00))
+
+.bg
+    width: 100%
+    width: calc(100% - 4rem)
+    height: 100%
+    height: calc(100% - 4rem)
+    position: absolute
+    top: 2rem
+    left: 2rem
+    z-index: -90
+    &.bg1
+        background-image: url('../img/headphones.svg')
+        background-repeat: no-repeat
+        background-size: contain
+        background-position: center
+
+.banner
+    width: 100%
+    font-family: amiga, sans-serif
+    + .banner
+        margin-top: 2.4rem
+
+#headline, #demosong, #controls, #choosefile
+    text-align: center
+
+#info
+    max-width: calc(100% - 2.6rem)
+    padding: 1.25rem 1.3rem
+    background: rgba(20, 20, 20, 0.86)
+    color: #f9f9f9
+
+#headline
+    max-width: calc(100% - 2rem)
+    padding: 1.2rem 1rem
+    background: #fff
+    color: #232323
+    h1
+        margin: 0
+        @include respond-to(mobile)
+            font-size: 3rem
+        @include respond-to(desktop)
+            font-size: 4.5rem
+
+#demosong
+    margin-top: 3.6rem
+    a
+        color: #232323
+        font-size: 0.8rem
+#controls, #choosefile
+    margin-top: 1.7rem
+
+.control
+    width: 5rem
+    height: 5rem
+    margin-top: 1.6rem
+    border-radius: 2.5rem
+    background-color: rgb(80,80,80)
+    display: inline-block
+    box-shadow: 0px 9px 0px rgba(50,50,50,1), 0px 9px 25px rgba(0,0,0,.7)
+    transition: all .1s ease
+    cursor: pointer
+
+    &:active, &.pressed
+        box-shadow: 0px 3px 0px rgba(50,50,50,1), 0px 3px 6px rgba(0,0,0,.7)
+
+    &#play
+        background-image: url('../img/play.svg')
+        background-size: 75%
+        background-position: 16px 9px
+        background-repeat: no-repeat
+
+    &#pause
+        background-image: url('../img/pause.svg')
+        background-size: 75%
+        background-position: center
+        background-repeat: no-repeat
+
+    &#loop
+        display: none
+        + label
+            background-image: url('../img/loop.svg')
+            background-size: 75%
+            background-position: center
+            background-repeat: no-repeat
+        &:checked + label
+            box-shadow: 0px 3px 0px rgba(50,50,50,1), 0px 3px 6px rgba(0,0,0,.7)