Add a gallery, deploy to Firebase.

fdb · fdb · commit 17807b23b6e1 · 2017-12-19T12:55:46.000+01:00
diff --git a/.firebaserc b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "emrg-pcg"
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 .DS_Store
+*.log
diff --git a/README.md b/README.md
@@ -15,4 +15,7 @@ The app runs as a single-page application, so we use [serve](https://www.npmjs.c
 
 ## Deploy
 
-    surge -d pcg .
+    npm install -g firebase-tools
+    firebase login
+    firebase init
+    firebase deploy
diff --git a/css/style.css b/css/style.css
@@ -4,6 +4,10 @@
     box-sizing: border-box;
 }
 
+img {
+    max-width: 100%;
+}
+
 html,
 body {
     width: 100%;
@@ -89,19 +93,63 @@ a {
     justify-self: flex-end;
 }
 
+.header__nav .button.unsaved {
+    background: #6a6;
+}
+
 /* Page */
 
 .page {
     flex: 1;
-    xbackground: radial-gradient(circle farthest-corner at 50%, #444, #000);
     background: linear-gradient(0deg, #000, #222);
-
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     color: white;
 }
 
+.page h1 {
+    font-weight: 200;
+    margin-bottom: 1rem;
+}
+
+.page a {
+    padding-bottom: 2px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.page a:hover {
+    border-bottom-color: rgba(255, 255, 255, 0.9);
+}
+
+/* Gallery */
+
+.gallery {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.gallery__thumb {
+    width: 250px;
+    height: 250px;
+    margin: 10px;
+}
+
+.gallery__img {
+    border-radius: 3px;
+}
+
+.gallery__link {
+    display: inline-block;
+    border: 0 !important;
+}
+
+.gallery__link:active {
+    transform: translateY(2px);
+}
+
+
 /* Editor */
 
 .editor {
diff --git a/firebase.json b/firebase.json
@@ -0,0 +1,13 @@
+{
+    "hosting": {
+        "public": ".",
+        "ignore": [
+            "firebase.json",
+            "**/.*"
+        ],
+        "rewrites": [{
+            "source": "**",
+            "destination": "/index.html"
+        }]
+    }
+}
diff --git a/gallery/-L0iXXTIHpU3fd0hXiEo.png b/gallery/-L0iXXTIHpU3fd0hXiEo.png
diff --git a/gallery/-L0ibWrnaptySlFrOniw.png b/gallery/-L0ibWrnaptySlFrOniw.png
diff --git a/index.html b/index.html
@@ -3,24 +3,24 @@
 <head>
     <meta charset="UTF-8">
     <title>PCG</title>
-    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="/css/style.css">
 </head>
 <body>
-<!--     <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
     <script>
       const config = {
-        apiKey: "AIzaSyAN0gHQS-9LpMozdRCHKFqcyZ2x6b17o9I",
-        authDomain: "emrgpcg.firebaseapp.com",
-        databaseURL: "https://emrgpcg.firebaseio.com",
-        projectId: "emrgpcg",
-        storageBucket: "emrgpcg.appspot.com",
-        messagingSenderId: "670989392506"
+        apiKey: "AIzaSyCplihRW4j3gUo7uvpndnyXAYfQgPRtTn4",
+        authDomain: "emrg-pcg.firebaseapp.com",
+        databaseURL: "https://emrg-pcg.firebaseio.com",
+        projectId: "emrg-pcg",
+        storageBucket: "emrg-pcg.appspot.com",
+        messagingSenderId: "972956794987"
       };
       firebase.initializeApp(config);
-    </script> -->
-    <script src="third_party/preact.min.js"></script>
-    <script src="third_party/preact-router.min.js"></script>
-    <script src="js/pcg.js"></script>
-    <script src="js/editor.js"></script>
+    </script>
+    <script src="/third_party/preact.min.js"></script>
+    <script src="/third_party/preact-router.min.js"></script>
+    <script src="/js/pcg.js"></script>
+    <script src="/js/editor.js"></script>
 </body>
 </html>
diff --git a/js/editor.js b/js/editor.js
@@ -1,5 +1,5 @@
 const { h, render, Component } = preact;
-const { Router, Link } = preactRouter;
+const { route, Router, Link } = preactRouter;
 
 const INITIAL_TEXT = `root:
 - Dear {{ giver }}, thank you for the {{ object }}.
@@ -16,6 +16,11 @@ object:
 - dishwasher
 `;
 
+const GALLERY = [
+    '-L0iXXTIHpU3fd0hXiEo',
+    '-L0ibWrnaptySlFrOniw'
+];
+
 let gApp;
 
 class Header extends Component {
@@ -29,21 +34,38 @@ class Header extends Component {
 
 class Home extends Component {
     render(props, state) {
+        const thumbs = GALLERY.map(id => this.renderThumb(id));
+        console.log(thumbs);
         return h('div', {class: 'app'},
             h(Header, {},
                 h(Link, {class: 'button', href: '/sketch'}, 'Create')
             ),
             h('div', {class: 'page'},
-                h('h1', {}, 'Click the "create" button to create a new sketch.')
+                h('h1', {}, 'Gallery'),
+                h('div', {class: 'gallery'},
+                    thumbs
+                )
+            )
+        );
+    }
+
+    renderThumb(id) {
+        return h('div', {class: 'gallery__thumb'},
+            h(Link, {class: 'gallery__link', href: `/sketch/${id}`},
+                h('img', {class: 'gallery__img', src: `/gallery/${id}.png`})
             )
         );
     }
 }
 
 class Sketch extends Component {
-    constructor() {
-        super();
-        this.state = { source: INITIAL_TEXT, debug: true, debugOutput: '', result: '' };
+    constructor(props) {
+        super(props);
+        if (!props.id) {
+            this.state = { source: INITIAL_TEXT, debug: true, debugOutput: '', result: '', unsaved: false };
+        } else {
+            this.state = { loading: true, source: '', debug: true, debugOutput: '', result: '', unsaved: false };
+        }
         gApp = this;
     }
 
@@ -59,30 +81,58 @@ class Sketch extends Component {
     }
 
     componentDidMount() {
-        this.generate();
+        if (!this.props.id) {
+            this.generate();
+        } else {
+            console.log('loading from database', this.props.id);
+            firebase.database().ref(`sketch/${this.props.id}`).once('value', snap => {
+                const sketch = { key: this.props.id, ...snap.val() };
+                this.setState({ loading: false, source: sketch.source });
+                this.generate();
+            });
+        }
+
+        window.addEventListener('beforeunload', (e) => {
+            let confirm = null;
+            if (this.state.unsaved) {
+                confirm = 'You have unsaved changes.';
+                (e || window.event).returnValue = confirm;
+            }
+            return confirm;
+        });
     }
 
     onInput(e) {
         const source = e.target.value;
-        this.setState({ source: e.target.value });
+        this.setState({ unsaved: true, source });
         this.generate();
     }
 
     onSave() {
-        // FIXME: save the content
+        if (this.state.saving) return;
+        this.setState({ saving: true });
+        const ref = firebase.database().ref('sketch').push();
+        ref.set({
+            source: this.state.source
+        }, () => {
+            this.setState({ saving: false, unsaved: false });
+            route(`/sketch/${ref.key}`);
+        });
     }
 
     render(props, state) {
         const debugView = h('pre', { className: 'debug' }, this.state.debugOutput);
+        const source = state.loading ? 'Loading...' : state.source;
+        let saveLabel = state.saving ? 'Saving...' : 'Save';
         return h('div', {class: 'app'},
             h(Header, {},
-                h('button', {class: 'button', onClick: this.onSave.bind(this)}, 'Save')
+                h('button', {class: 'button' + (state.unsaved ? ' unsaved' : ''), onClick: this.onSave.bind(this), disabled: state.saving}, saveLabel)
             ),
             h('div', { className: 'editor' },
                 h('div', { className: 'editor__toolbar' }, h('button', { class: 'button', onClick: this.generate.bind(this) }, 'Generate')),
                 h('div', { className: 'editor__panels'},
                     h('div', { className: 'editor__source' },
-                        h('textarea', { className: 'editor__area', value: state.source, onInput: this.onInput.bind(this) }),
+                        h('textarea', { className: 'editor__area', value: source, onInput: this.onInput.bind(this), readonly: state.loading }),
                         debugView
                     ),
                     h('div', { className: 'editor__viewer' },
@@ -99,7 +149,8 @@ class NotFound extends Component {
         return h('div', {class: 'app'},
             h(Header, {}),
             h('div', {class: 'page'},
-                h('h1', {}, 'Page not found.')
+                h('h1', {}, 'Page not found.'),
+                h(Link, {href: '/'}, 'Go Back Home')
             )
         );
     }
@@ -110,6 +161,7 @@ class App extends Component {
         return h(Router, {},
                 h(Home, { path: '/' }),
                 h(Sketch, { path: '/sketch' }),
+                h(Sketch, { path: '/sketch/:id' }),
                 h(NotFound, { type: '404', default: true })
         );
     }
