5 files changed, 180 insertions, 0 deletions
diff --git a/client/components/App.jsx b/client/components/App.jsx
new file mode 100644
index 0000000..0b1557f
--- /dev/null
+++ b/client/components/App.jsx
@@ -0,0 +1,24 @@
+import { h, Component } from 'preact'
+import { isMobile } from '../util'
+import db from '../db'
+import { Link, withRouter } from 'react-router-dom'
+
+import Header from './Header.jsx'
+
+class App extends Component {
+  constructor(props) {
+    super()
+    this.state = {
+    }
+  }
+  render() {
+    return (
+      <div>
+        <Header />
+      </div>
+    )
+  }
+}
+
+export default withRouter(App)
+
diff --git a/client/components/Header.jsx b/client/components/Header.jsx
new file mode 100644
index 0000000..b8c5fd4
--- /dev/null
+++ b/client/components/Header.jsx
@@ -0,0 +1,18 @@
+import { h, Component } from 'preact'
+import { Link } from 'react-router-dom'
+
+export default class Header extends Component {
+  constructor(props) {
+    super()
+    this.state = {
+    }
+  }
+  render() {
+    return (
+      <div class='header'>
+        ding dong
+      </div>
+    )
+  }
+}
+
diff --git a/client/index.js b/client/index.js
new file mode 100644
index 0000000..b78c5ea
--- /dev/null
+++ b/client/index.js
@@ -0,0 +1,12 @@
+import { h, render } from 'preact'
+import App from './components/App.jsx'
+import { BrowserRouter } from 'react-router-dom'
+
+const app = (
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
+)
+
+render(app, document.getElementById('container'))
+
diff --git a/client/vendor/Loader.js b/client/vendor/Loader.js
new file mode 100644
index 0000000..1cacece
--- /dev/null
+++ b/client/vendor/Loader.js
@@ -0,0 +1,103 @@
+module.exports = (function(){
+  function Loader (readyCallback, view){
+    this.assets = {};
+    this.images = [];
+    this.readyCallback = readyCallback || function(){};
+    this.count = 0
+    this.view = view
+    this.loaded = false
+  }
+  
+  Loader.prototype.onReady = function(readyCallback){
+    this.readyCallback = readyCallback || function(){};
+  }
+
+  // Register an asset as loading
+  Loader.prototype.register = function(s){
+    this.assets[s] = false;
+    this.count += 1
+  }
+
+  // Signal that an asset has loaded
+  Loader.prototype.ready = function(s){
+    window.debug && console.log("ready >> " + s);
+
+    this.assets[s] = true;
+    if (this.loaded) return;
+    
+    this.view && this.view.update( this.percentRemaining() )
+    
+    if (! this.isReady()) return;
+
+    this.loaded = true;
+    if (this.view) {
+      this.view && this.view.finish(this.readyCallback)
+    }
+    else {
+      this.readyCallback && this.readyCallback();
+    }
+  }
+
+  // (boolean) Is the loader ready?
+  Loader.prototype.isReady = function(){
+    for (var s in this.assets) {
+      if (this.assets.hasOwnProperty(s) && this.assets[s] != true) {
+        return false;
+      }
+    }
+    return true;
+  }
+  
+  // (float) Percentage of assets remaining
+  Loader.prototype.percentRemaining = function(){
+    return this.remainingAssets() / this.count 
+  }
+
+  // (int) Number of assets remaining
+  Loader.prototype.remainingAssets = function(){
+    var n = 0;
+    for (var s in this.assets) {
+      if (this.assets.hasOwnProperty(s) && this.assets[s] != true) {
+        n++;
+        // console.log('remaining: ' + s);
+      }
+    }
+    return n;
+  }
+
+  // Preload the images in config.images
+  Loader.prototype.preloadImages = function(images){
+    this.register("preload");
+    for (var i = 0; i < images.length; i++) {
+      this.preloadImage(images[i]);
+    }
+    this.ready("preload");
+  }
+  Loader.prototype.preloadImage = function(src, register, cb){
+    if (! src || src == "none") return;
+    var _this = this;
+    if (! cb && typeof register === "function") {
+      cb = register
+      register = null
+    }
+    if (register) {
+      this.register(src);
+    }
+    var img = new Image(), loaded = false;
+    img.onload = function(){
+      if (loaded) return
+      loaded = true
+      if (cb) {
+        cb(img);
+      }
+      if (register) {
+        _this.ready(src);
+      }
+    }
+    img.src = src;
+    if (img.complete) img.onload();
+    _this.images.push(img);
+  }
+
+  return Loader;
+})();
diff --git a/client/vendor/util.js b/client/vendor/util.js
new file mode 100644
index 0000000..5d51c34
--- /dev/null
+++ b/client/vendor/util.js
@@ -0,0 +1,23 @@
+const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
+const isIpad = (navigator.userAgent.match(/iPad/i))
+const isAndroid = (navigator.userAgent.match(/Android/i))
+const isMobile = isIphone || isIpad || isAndroid
+const isDesktop = ! isMobile
+
+document.body.classList.add(isMobile ? 'mobile' : 'desktop')
+
+const browser = { isIphone, isIpad, isAndroid, isMobile, isDesktop }
+
+function clamp(n,a,b){ return n<a?a:n<b?n:b }
+function mod(n,m){ return n-(m * Math.floor(n/m)) }
+function choice (a){ return a[ randint(a.length) ] }
+function randint(n){ return  Math.floor(Math.random() * n) }
+function randrange(a,b) { return Math.random() * (b-a) + a }
+function firstTouch(f){ return e => { e.preventDefault(); f(e.touches[0]) }}
+
+export {
+  browser,
+  clamp, mod,
+  choice, randint, randrange,
+  firstTouch,
+}