mdn · stephaniehobson · Aug 31, 2016 · Aug 26, 2016 · Aug 26, 2016 · Aug 26, 2016
diff --git a/README.md b/README.md
@@ -74,6 +74,10 @@ The site is deployed to staging and production using Docker and Deis, and you ca
   * useful for testing nginx.conf changes
 * `make serve`: run the nginx deployment image
   * listens on port 8000 by doefault, override with the SERVE_PORT environment variable
+* `make generate-cert`: create a self signed cert for localhost
+* `make serve-https`: run the nginx deployment image but force https
+  * does not use port number
+  * generate a cert first
 * `make curl`: run curl with the "X-Forwarded-Proto: https" header to bypass the http>https redirect
 * `make sh`: run an interactive shell in a "build" container
   * useful for debugging new build dependencies

diff --git a/build.js b/build.js
@@ -51,6 +51,7 @@ metalsmith(__dirname)
     // Define some global values that will be accessible in metadata anywhere.
     .use(define({
         date_format: 'j F, Y',
+        version_date: new Date().toISOString(),
     }))
     // Add debug messages to terminal. Dev-only.
     .use(devonly(debug, {}))
@@ -90,7 +91,7 @@ metalsmith(__dirname)
         }))
         // Minimize and concatenate js files. Must be above fingerprint.
         .use(uglify({
-            pattern: 'js/*.js',
+            filter: 'js/*.js',
             sourceMap: true,
             concat: 'js/main.js',
         }))
@@ -106,7 +107,7 @@ metalsmith(__dirname)
         // Process template files in the source dir using specified engine.
         .use(inplace({
             engine: 'swig',
-            pattern: '**/*.html',
+            pattern: ['**/*.html', 'worker.js'],
             autoescape: false,
         }))
         // Apply layouts to (certain) source files using specified engine.
@@ -134,6 +135,7 @@ metalsmith(__dirname)
                 'indent-spaces': 4,
                 'quote-ampersand': false,
                 'coerce-endtags': false,
+                'drop-empty-elements': false,
                 'new-blocklevel-tags': ['svg', 'defs', 'path', 'polyline', 'line', 'polygon',],
             },
         }))

diff --git a/layouts/includes/tic.html b/layouts/includes/tic.html
@@ -0,0 +1,20 @@
+<div id="tic" class="tic">
+    <table class="tic_board">
+        <tr>
+            <td><button type="button"></button></td>
+            <td><button type="button"></button></td>
+            <td><button type="button"></button></td>
+        </tr>
+        <tr>
+            <td><button type="button"></button></td>
+            <td><button type="button"></button></td>
+            <td><button type="button"></button></td>
+        </tr>
+        <tr>
+            <td><button type="button"></button></td>
+            <td><button type="button"></button></td>
+            <td><button type="button"></button></td>
+        </tr>
+    </table>
+    <input id="tic_restart" type="reset" value="Restart">
+</div>
diff --git a/nginx-ssl.conf b/nginx-ssl.conf
@@ -32,6 +32,7 @@ http {
             index index.html index.htm;
         }
 
+
         location ~* \.(?:css|gif|ico|jpe?g|js|png|svg|ttf|woff2?)$ {
             expires max;
             add_header Cache-Control "public";
@@ -64,6 +65,11 @@ http {
           index index.html index.htm;
       }
 
+      # worker.js always needs to be fresh
+      location = /worker.js {
+          expires 0;
+      }
+
       location ~* \.(?:css|gif|ico|jpe?g|js|png|svg|ttf|woff2?)$ {
           expires max;
           add_header Cache-Control "public";

diff --git a/nginx.conf b/nginx.conf
@@ -32,6 +32,11 @@ http {
             index index.html;
         }
 
+        # service worker.js always needs to be fresh
+        location = worker\.js {
+            expires off;
+        }
+
         location ~* \.(?:css|gif|ico|jpe?g|js|png|svg|ttf|woff2?)$ {
             expires max;
             add_header Cache-Control "public";

diff --git a/source/js/00_global.js b/source/js/00_global.js
@@ -6,4 +6,10 @@
     // signal site js loaded
     html.classList.add('js-site');
 
+    if (navigator.serviceWorker) {
+        navigator.serviceWorker.register('/worker.js', {
+            scope: '/'
+        });
+    }
+
 })();
diff --git a/source/js/newsletter.js b/source/js/newsletter.js
@@ -96,6 +96,11 @@
 
         xhr.onload = function(r) {
             if (r.target.status >= 200 && r.target.status < 300) {
+                // response is null if handled by service worker
+                if(response === null ) {
+                    newsletterError(new Error());
+                    return;
+                }
                 var response = r.target.response;
                 if (response.success === true) {
                     newsletterForm.style.display = 'none';

diff --git a/source/js/tic.js b/source/js/tic.js
@@ -0,0 +1,110 @@
+(function() {
+    'use strict';
+    var count = 0;
+    var winner = false;
+
+    var x = 'X';
+    var o = 'O';
+
+    var buttons = document.querySelectorAll('#tic button');
+
+    if(buttons.length < 1) { return; }
+
+    Array.prototype.forEach.call(buttons, function(button, i) {
+        button.addEventListener('click', function() {
+            play(button);
+        }, false);
+    });
+
+    function turn(i) {
+        return (i % 2) ? x : o;
+    }
+
+    function play(button) {
+        // check count
+        if(count > 8 || winner) { return; }
+
+        // check button not in use
+        if(button.hasChildNodes()) { return; }
+
+        // play x or o based on odd or even
+        button.appendChild(document.createTextNode(turn(count)));
+        button.classList.add('tic_' + turn(count));
+
+        count ++;
+
+        // check for end of game
+        check();
+    }
+
+    function check() {
+        // check each victory condition
+        var i;
+        // check for matching in 3s
+        for(i = 0; i < 9; i += 3) {
+            matches(buttons.item(i), buttons.item(i+1), buttons.item(i+2));
+        }
+        // check for matching at % 3
+        for(i = 0; i < 3; i += 1) {
+            matches(buttons.item(i), buttons.item(i+3), buttons.item(i+6));
+        }
+        // check for matching at 1,5,9
+        matches(buttons.item(0), buttons.item(4), buttons.item(8));
+        // check for matching at 3,5,7
+        matches(buttons.item(2), buttons.item(4), buttons.item(6));
+        // might be end of game anyway.
+        if(count == 9) {
+            end();
+            return;
+        }
+    }
+
+    function matches(first, second, third) {
+        if(first.textContent === '') {
+            return false;
+        } else if (first.textContent === second.textContent && second.textContent === third.textContent) {
+        // end game
+        end();
+            // if we find a winner, add the winning classes
+            first.classList.add('tic_winner');
+            window.setTimeout(function(){second.classList.add('tic_winner');}, 50);
+            window.setTimeout(function(){third.classList.add('tic_winner');}, 100);
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    function end() {
+        winner = true;
+        // disable buttons
+        Array.prototype.forEach.call(buttons, function(button, i) {
+            button.setAttribute('disabled', 'disabled');
+        });
+    }
+
+    function restart() {
+        // reset count and winner
+        count = 0;
+        winner = false;
+        Array.prototype.forEach.call(buttons, function(button, i) {
+            // remove all classes
+            button.className = '';
+            // remove all text
+            while (button.firstChild) {
+                button.removeChild(button.firstChild);
+            }
+            // enable buttons
+            button.removeAttribute('disabled');
+        });
+    }
+
+    var restart_button = document.getElementById('tic_restart');
+
+    restart_button.addEventListener('click', function() {
+        restart();
+    }, false);
+
+})();
+
+
diff --git a/source/manifest.json b/source/manifest.json
@@ -1,5 +1,10 @@
 {
 	"name": "View Source 2016",
+    "short_name": "View Source",
+    "start_url": "/berlin-2016/schedule/",
+    "display": "browser",
+    "background_color": "#fff",
+    "theme_color": "#b93c5a",
 	"icons": [
 		{
 			"src": "\/android-chrome-36x36.png?v=2016",

diff --git a/source/offline.html b/source/offline.html
@@ -0,0 +1,15 @@
+{% extends "layouts/common.html" %}
+{% block title %}{% parent %}Offline{% endblock %}
+
+{% block body %}
+<section class="section">
+    <div class="section_body">
+
+        <h1>Offline.</h1>
+        <p>It looks like there was a problem with the network connection. Were you looking for <a href="/berlin-2016/schedule/">the schedule</a>?</p>
+        <p>Or maybe a quick game of tic-tac-toe with the person next to you?</p>
+        {% include "layouts/includes/tic.html" %}
+
+    </div>
+</section>
+{% endblock %}
diff --git a/source/stylesheets/base/elements/forms.styl b/source/stylesheets/base/elements/forms.styl
@@ -23,6 +23,7 @@ input[type="submit"]::-moz-focus-inner,
 input[type="reset"]::-moz-focus-inner {
     padding: 0 !important;
     border: 0 none !important;
+    cursor: pointer;
 }
 
 $placeholder-color = #B1B1B1;

diff --git a/source/stylesheets/components/tic.styl b/source/stylesheets/components/tic.styl
@@ -0,0 +1,87 @@
+.tic {
+    text-align: center;
+}
+
+.tic_board {
+    margin: 0 auto;
+}
+
+.tic button {
+    position: relative;
+    height: 20vh;
+    width: 20vh;
+    min-width: 0;
+    margin: 1vh;
+    padding: 0;
+    border: 2px solid #B93C5A;
+    background-color: #F79B72;
+    color: #B93C5A;
+    font-size: 10vh;
+    font-weight: bold;
+    line-height: calc(20vh - 4px);
+    transition: opacity 0.3s;
+}
+
+.tic button[disabled] {
+    opacity: 0.2;
+}
+
+.tic_X,
+.tic_O {
+    border-color: #F79B72;
+}
+
+.tic_winner {
+    animation-duration: 0.3s;
+    animation-name: happy;
+
+    button[disabled]& {
+        opacity: 1;
+    }
+}
+
+@keyframes happy {
+    from {
+        top: 0;
+    }
+
+    10% {
+        top: -2vh;
+    }
+
+    60% {
+        transform: rotate(2deg);
+    }
+
+    80% {
+        transform: rotate(-2deg);
+    }
+
+    to {
+        top: 0;
+    }
+}
+
+#tic_restart {
+    margin: 1vh;
+    border: 2px solid #B93C5A;
+    padding: 10px 20px;
+    background-color: #F79B72;
+    color: #B93C5A;
+    font-size: 10vh;
+}
+
+@media screen and (max-aspect-ratio: 1/1) {
+    .tic button {
+        height: 20vw;
+        width: 20vw;
+        margin: 1vw;
+        font-size: 10vw;
+        line-height: calc(20vw - 4px);
+    }
+
+    #tic_restart {
+        margin: 1vw;
+        font-size: 10vw;
+    }
+}
diff --git a/source/stylesheets/style.styl b/source/stylesheets/style.styl
@@ -56,3 +56,4 @@ BEM inspired naming please:
 @require 'components/sponsors';
 @require 'components/sponsorship';
 @require 'components/strip';
+@require 'components/tic';