4 files changed, 89 insertions, 0 deletions
diff --git a/client/components/App.jsx b/client/components/App.jsx
new file mode 100644
index 0000000..e478ea0
--- /dev/null
+++ b/client/components/App.jsx
@@ -0,0 +1,41 @@
+import { h, Component } from 'preact'
+import db from '../db'
+
+export default class App extends Component {
+  constructor() {
+    super()
+    this.state = {
+      data: db.backupDB,
+    }
+    db.fetch( data => this.setState({ data }) )
+  }
+  render() {
+    const paintings = this.state.data.painting.map( (painting, i) => {
+      return (
+        <div class='cell' key={i}>
+          <div class='painting'>
+            <div class='image' style={'background-image: url(' + painting.image.uri + ')'} />
+          </div>
+          <div class='about'>
+            <div class='medium'>
+              <div class='title'>
+                {painting.title}
+              </div>
+              {painting.medium}<br/>
+              {painting.date}<br/>
+              {painting.image.caption}<br/>
+            </div>
+          </div>
+        </div>
+      )
+    })
+    return (
+      <div>
+        <div class='header'>Procedural Paintings by Pepper</div>
+        <div class='scroller'>
+          {paintings}
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/client/db.js b/client/db.js
new file mode 100644
index 0000000..8c3a6b5
--- /dev/null
+++ b/client/db.js
@@ -0,0 +1,33 @@
+function fetchDB(cb) {
+  let raw_db;
+  fetch('/db.json', {
+    method: 'GET'
+  }).then(res => {
+    if (res.status !== 200) {
+      return null
+    }
+    return res.json()
+  }).then(json => {
+    if (json) {
+      raw_db = parse(json)
+    }
+    cb(raw_db)  
+  }).catch((err) => {
+    console.warn(err)
+  })
+}
+
+function parse(db) {
+  Object.keys(db).forEach(key => {
+    db[key] = db[key]
+      .filter((el) => ! el.disabled)
+      .sort((a,b) => a.__index<b.__index?-1:a.__index===b.__index?0:1)
+  })
+  return db
+}
+
+const backupDB = {
+  painting: [],
+}
+
+export default { fetch: fetchDB, backupDB }
diff --git a/client/index.jsx b/client/index.jsx
new file mode 100644
index 0000000..ea3a726
--- /dev/null
+++ b/client/index.jsx
@@ -0,0 +1,5 @@
+import { h, render } from 'preact'
+import App from './components/App.jsx'
+import { BrowserRouter } from 'react-router-dom'
+
+render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('container'))
diff --git a/client/util.js b/client/util.js
new file mode 100644
index 0000000..fe8ec35
--- /dev/null
+++ b/client/util.js
@@ -0,0 +1,10 @@
+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(isDesktop ? 'desktop' : 'mobile')
+
+export default { isIphone, isIpad, isAndroid, isMobile, isDesktop }
+