initial commit

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+db.level

incdec.js

@@ -0,0 +1,75 @@
+const express = require("express")
+const expressWs = require("express-ws")
+const _ = require("lodash")
+
+const db = require("level")("./db.level", {
+    valueEncoding: "json"
+})
+
+const getWithDefault = async (key, def) => {
+    try {
+        return await db.get(key)
+    } catch(e) {
+        if (e.notFound) {
+            return def
+        } else {
+            throw e
+        }
+    }
+}
+
+let counter = 0
+setImmediate(async () => {
+    counter = await getWithDefault("counter", 0)
+})
+
+setInterval(() => {
+    console.log("Counter:", counter)
+    db.put("counter", counter)
+}, 10000)
+
+const app = express()
+const wss = expressWs(app)
+
+app.get("/", (req, res) => {
+    res.sendFile(__dirname + "/index.html")
+})
+
+const sendCounter = (ws, x) => ws.send(JSON.stringify({
+    type: "value",
+    value: x
+}))
+
+const transmitCounterUpdate = _.throttle(newValue => {
+    wss.getWss().clients.forEach(ws => sendCounter(ws, newValue))
+}, 50)
+
+app.ws("/api", (ws, req) => {
+    console.log("Connected")
+    sendCounter(ws, counter)
+    ws.on("message", async data => {
+        const msg = JSON.parse(data)
+        if (msg.type === "increment") {
+            counter++
+            transmitCounterUpdate(counter)
+        } else if (msg.type === "decrement") {
+            counter--
+            transmitCounterUpdate(counter)
+        }
+    })
+})
+
+app.post("/inc", (req, res) => {
+    counter++
+    transmitCounterUpdate(counter)
+    res.send(counter.toString())
+})
+app.post("/dec", (req, res) => {
+    counter--
+    transmitCounterUpdate(counter)
+    res.send(counter.toString())
+})
+
+const port = parseInt(process.env.PORT) || 3709
+
+app.listen(port, () => console.log("Listening on", port))

index.html

@@ -0,0 +1,79 @@
+<meta name="viewport" content="user-scalable=0"> 
+<noscript>JavaScript is required for this.</noscript>
+<style>
+    body {
+        margin: 0;
+    }
+
+    #container {
+        width: 100%;
+        min-height: 100vh;
+        font-family: sans-serif;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    #container button {
+        width: 3em;
+        height: 3em;
+        font-size: 2em;
+        margin: 1em;
+        background-color: black;
+        color: white;
+        border: none;
+        z-index: 1;
+    }
+
+    #container #value {
+        font-size: 4em;
+    }
+
+    @media(orientation: portrait) {
+        #container { flex-direction: column; }
+        #container button { width: calc(100% - 2em); }
+    }
+</style>
+<div id="container">
+    <button id="up" onclick="increment()">+</button>
+    <div id="value">Loading...</div>
+    <button id="down" onclick="decrement()">-</button>
+</div>
+<script>
+    var output = document.querySelector("#value")
+    window.onerror = function(err) {
+        output.innerText = err
+        output.style.color = "red"
+    }
+
+    var url = (window.location.href + "api").replace("http", "ws")
+    console.log("connecting", url)
+    var socket = new WebSocket(url)
+    
+    function display(text) {
+        output.innerText = text
+    }
+
+    function send(obj) {
+        socket.send(JSON.stringify(obj))
+    }
+
+    socket.onmessage = function(ev) {
+        var msg = JSON.parse(ev.data)
+        if (msg.type === "value") {
+            display(msg.value.toString())
+        }
+    }
+
+    function increment() {
+        send({
+            type: "increment"
+        })
+    }
+
+    function decrement() {
+        send({
+            type: "decrement"
+        })
+    }
+</script>

package.json

@@ -0,0 +1,13 @@
+{
+  "name": "incdec",
+  "version": "1.0.0",
+  "description": "The thrilling game of increments and decrements.",
+  "main": "incdec.js",
+  "license": "MIT",
+  "dependencies": {
+    "express": "^4.17.1",
+    "express-ws": "^4.0.0",
+    "level": "^6.0.1",
+    "lodash": "^4.17.21"
+  }
+}