Release 1.0

index.html

@@ -15,7 +15,7 @@
     <link rel="apple-touch-icon" href="images/icons/icon-192x192.png"/>
     <link rel="apple-touch-icon" href="images/icons/icon-512x512.png"/>
     <link rel="apple-touch-icon" href="images/icons/icon-2048x2048.png"/>
-    <meta name="apple-mobile-web-app-status-bar" content="#ffffff"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="theme-color" content="#ffffff"/>
 
     <!-- Halfmoon -->
@@ -40,20 +40,20 @@
     <div class="sticky-alerts"></div>
     <!-- Navbar -->
     <nav class="navbar">
-        <a href="#" class="navbar-brand">
+        <a href="#" class="navbar-brand mr-auto">
             <img src="images/icons/icon-512x512.png" alt="Icon">
             SyncBoard
         </a>
 
-        <div class="d-none d-md-flex ml-auto">
+        <div class="">
             <div class="btn-group" role="group" aria-label="Basic example">
                 <button class="btn" onclick="create()">New</button>
                 <button class="btn" onclick="connect()">Join</button>
                 <button class="btn disabled" id="room">Not Connected</button>
             </div>
         </div>
 
-        <div class="d-none d-md-flex ml-auto">
+        <div class="ml-auto">
             <button class="btn btn-primary">Help</button>
         </div>
     </nav>
@@ -64,14 +64,16 @@
         <canvas id="canvas"></canvas>
     </div>
     <!-- Navbar fixed bottom -->
-    <nav class="navbar navbar-fixed-bottom">
-        <span style="width: 100%; text-align: center">
+    <nav class="navbar navbar-fixed-bottom justify-content-center">
+        <button class="invisible mr-auto btn">Force-Update</button>
+        <div>
             <span id="status">Connecting...</span>
             &nbsp;
             <button class="btn">
                 Server
             </button>
-        </span>
+        </div>
+        <button class="ml-auto btn" onclick="forceUpdate()">Force-Update</button>
     </nav>
 </div>
 

js/app.js

@@ -10,10 +10,14 @@ function connect() {
         action: "join",
         payload: room,
     }));
+    clearCanvas();
+    history = {};
 }
 
 function create() {
     socket.emit("cmd", JSON.stringify({action: "create"}))
+    clearCanvas();
+    history = {};
 }
 
 function status(msg, failed) {
@@ -51,5 +55,54 @@ function resizeCanvas() {
     canvas.height = canvas.offsetHeight;
 }
 
+function getHistory() {
+    let result = [];
+    for (let guid in Object.keys(history))
+        result.push(history[guid]);
+    return result;
+}
+
+function replaceHistory(newHistory) {
+    history = {};
+    for (let line of newHistory)
+        history[line.guid] = line;
+    clearCanvas();
+    paintHistory();
+}
+
+function urlReachable(url, callback) {
+    let request = new XMLHttpRequest;
+    request.open('GET', url, true);
+    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
+    request.setRequestHeader('Accept', '*/*');
+    request.onprogress = function(event) {
+        let status = event.target.status;
+        let statusFirstNumber = (status).toString()[0];
+        switch (statusFirstNumber) {
+            case '2':
+                request.abort();
+                return callback(true);
+            default:
+                request.abort();
+                return callback(false);
+        }
+    }
+    request.send('');
+}
+
+function forceUpdate() {
+    urlReachable(location.toString(), reachable => {
+        if (!reachable) {
+            errorAlert(`URL '${location.toString()}' is unreachable`);
+        } else if (confirm("Are you sure you want to update the page?")) {
+            navigator.serviceWorker.ready.then(registration => {
+                if (registration.active) {
+                    registration.active.postMessage("clear-cache");
+                }
+            }).then(() => window.location.reload());
+        }
+    })
+}
+
 window.addEventListener('resize', resizeCanvas);
 window.addEventListener("load", resizeCanvas);

js/socket.js

@@ -17,7 +17,7 @@ socket.on("cmd", (data) => {
         }
     } else if (data.hasOwnProperty("action")) {
         if (data.action === "sendBoard") {
-            socket.emit("init-sync", history);
+            socket.emit("init-sync", getHistory());
         }
     } else if (data.hasOwnProperty("token")) {
         room = data.token;
@@ -27,7 +27,7 @@ socket.on("cmd", (data) => {
 });
 
 socket.on("init-sync", (data) => {
-    history = data;
+    replaceHistory(data);
 })
 
 socket.on("sync", (data) => {
@@ -43,7 +43,7 @@ socket.on("erase", (data) => {
     for (let guid of data) {
         history[guid] = undefined;
     }
-    clear();
+    clearCanvas();
     paintHistory();
 });
 

js/sync.js

@@ -5,9 +5,9 @@ let history = {};
 
 let currentLine = {
     color: {
-        R: 127,
+        R: 0,
         G: 0,
-        B: 255,
+        B: 0,
         A: 255
     },
     guid: "",
@@ -47,7 +47,7 @@ function guid() {
 function startLine(e) {
     currentLine.guid = guid();
     currentLine.points = [clone(pos)];
-    clear();
+    clearCanvas();
     paintHistory();
 }
 
@@ -56,13 +56,14 @@ function endLine(e) {
     socket.emit("sync", [currentLine]);
     history[currentLine.guid] = clone(currentLine);
     if (e.pointerType !== undefined && e.pointerType === "touch") {
-        clear();
+        clearCanvas();
         paintHistory();
     }
 }
 
 function draw(e) {
     if (e.buttons !== 1) return;
+    if (pos.x < 0 || pos.y < 0 || pos.x > canvas.offsetWidth || pos.y > canvas.offsetHeight) return;
 
     /*
     if (e.pressure !== undefined && e.pressure > 0) {
@@ -87,7 +88,7 @@ function draw(e) {
     ctx.stroke(); // draw it!
 }
 
-function clear() {
+function clearCanvas() {
     ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
 }
 

serviceWorker.js

@@ -16,15 +16,26 @@ const assets = [
 self.addEventListener("install", installEvent => {
     installEvent.waitUntil(
         caches.open(cacheID).then(cache => {
-            cache.addAll(assets)
+            cache.addAll(assets).then();
         })
     )
-})
+});
 
 self.addEventListener("fetch", fetchEvent => {
-    fetchEvent.respondWith(
-        caches.match(fetchEvent.request).then(res => {
-            return res || fetch(fetchEvent.request)
-        })
-    )
-})
+    fetchEvent.respondWith(async function() {
+        try {
+            return await fetch(fetchEvent.request);
+        } catch (err) {
+            return caches.match(fetchEvent.request);
+        }
+    }());
+});
+
+self.addEventListener("message", messageEvent => {
+    if (messageEvent.data === "clear-cache") {
+        caches.keys().then(function (names) {
+            for (let name of names)
+                caches.delete(name).then();
+        });
+    }
+});