Initial commit

author: Alexis Hovorka <[email protected]> 2022-02-02 00:06:53 -0700
committer: Alexis Hovorka <[email protected]> 2022-02-02 00:06:53 -0700
commit: 8a943500d97598a0b49ef655dc1b5484fe5e83d8 (patch)
tree: 339daf640084d724524c3cfcf92e51f48f7037b0 /public
8 files changed, 269 insertions, 0 deletions
diff --git a/public/404.html b/public/404.html
new file mode 100644
index 0000000..1a43d0a
--- /dev/null
+++ b/public/404.html
@@ -0,0 +1 @@
+<pre>404 Not Found</pre>
diff --git a/public/500.html b/public/500.html
new file mode 100644
index 0000000..ee07335
--- /dev/null
+++ b/public/500.html
@@ -0,0 +1 @@
+<pre>500 Internal Server Error</pre>
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..1c95383
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Wordly</title>
+    <meta charset="UTF-8">
+
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
+
+    <!--link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="apple-touch-icon" href="img/apple-touch-icon-57.png"        sizes="57x57"    >
+    <link rel="apple-touch-icon" href="img/apple-touch-icon-60.png"        sizes="60x60"    >
+    <link rel="apple-touch-icon" href="img/apple-touch-icon-72.png"        sizes="72x72"    >
+    <link rel="apple-touch-icon" href="img/apple-touch-icon-76.png"        sizes="76x76"    >
+    <link rel="apple-touch-icon" href="img/apple-touch-icon-114.png"       sizes="114x114"  >
+    <link rel="apple-touch-icon" href="img/apple-touch-icon-120.png"       sizes="120x120"  >
+    <link rel="apple-touch-icon" href="img/apple-touch-icon-144.png"       sizes="144x144"  >
+    <link rel="apple-touch-icon" href="img/apple-touch-icon-152.png"       sizes="152x152"  >
+    <link rel="apple-touch-icon" href="img/apple-touch-icon-168.png"       sizes="168x168"  >
+    <link rel="apple-touch-icon" href="img/apple-touch-icon-180.png"       sizes="180x180"  >
+    <link rel="apple-touch-startup-image" href="img/apple-splash-2048.png" sizes="2048x2732">
+    <link rel="apple-touch-startup-image" href="img/apple-splash-1668.png" sizes="1668x2224">
+    <link rel="apple-touch-startup-image" href="img/apple-splash-1536.png" sizes="1536x2048">
+    <link rel="apple-touch-startup-image" href="img/apple-splash-1125.png" sizes="1125x2436">
+    <link rel="apple-touch-startup-image" href="img/apple-splash-1242.png" sizes="1242x2208">
+    <link rel="apple-touch-startup-image" href="img/apple-splash-750.png"  sizes="750x1334" >
+    <link rel="apple-touch-startup-image" href="img/apple-splash-640.png"  sizes="640x1136" >
+    <link rel="icon" type="image/png"     href="img/favicon-32.png"        sizes="32x32"    >
+    <link rel="icon" type="image/png"     href="img/favicon-192.png"       sizes="192x192"  ><!- - Maskable:           - ->
+    <link rel="icon" type="image/png"     href="img/favicon-256.png"       sizes="256x256"  ><!- - Safe area is circle - ->
+    <link rel="icon" type="image/png"     href="img/favicon-512.png"       sizes="512x512"  ><!- - with 40% radius     - ->
+    <link rel="icon" type="image/png"     href="img/favicon-96.png"        sizes="96x96"    >
+    <link rel="icon" type="image/png"     href="img/favicon-48.png"        sizes="48x48"    >
+    <link rel="icon" type="image/png"     href="img/favicon-16.png"        sizes="16x16"    >
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
+    <link rel="manifest" href="manifest.webmanifest">
+
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-title" content="Wordly">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="application-name" content="Wordly">
+    <meta name="msapplication-TileColor" content="#000000">
+    <meta name="msapplication-TileImage" content="img/mstile-144.png">
+    <meta name="msapplication-navbutton-color" content="#000000">
+    <meta name="msapplication-tooltip" content="Wordly">
+    <meta name="msapplication-starturl" content="/">
+    <meta name="msapplication-tap-highlight" content="no">
+    <meta name="theme-color" content="#000000"-->
+
+    <link rel="canonical" href="https://wordly.ahov.co/">
+    <meta name="author" content="Alexis Hovorka">
+
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400&display=swap">
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <header>
+      <button id="help-btn">?</button>
+      <button id="settings-btn">%</button>
+      <button id="stats-btn">#</button>
+      <h1>Wordly</h1>
+    </header>
+
+    <div id="board"></div>
+
+    <table id="keyboard">
+      <tr>
+        <td data-key="q" colspan=2>Q</td>
+        <td data-key="w" colspan=2>W</td>
+        <td data-key="e" colspan=2>E</td>
+        <td data-key="r" colspan=2>R</td>
+        <td data-key="t" colspan=2>T</td>
+        <td data-key="y" colspan=2>Y</td>
+        <td data-key="u" colspan=2>U</td>
+        <td data-key="i" colspan=2>I</td>
+        <td data-key="o" colspan=2>O</td>
+        <td data-key="p" colspan=2>P</td>
+      </tr><tr>
+        <td></td>
+        <td data-key="a" colspan=2>A</td>
+        <td data-key="s" colspan=2>S</td>
+        <td data-key="d" colspan=2>D</td>
+        <td data-key="f" colspan=2>F</td>
+        <td data-key="g" colspan=2>G</td>
+        <td data-key="h" colspan=2>H</td>
+        <td data-key="j" colspan=2>J</td>
+        <td data-key="k" colspan=2>K</td>
+        <td data-key="l" colspan=2>L</td>
+        <td></td>
+      </tr><tr>
+        <td data-key="" colspan=3>ENTER</td>
+        <td data-key="z" colspan=2>Z</td>
+        <td data-key="x" colspan=2>X</td>
+        <td data-key="c" colspan=2>C</td>
+        <td data-key="v" colspan=2>V</td>
+        <td data-key="b" colspan=2>B</td>
+        <td data-key="n" colspan=2>N</td>
+        <td data-key="m" colspan=2>M</td>
+        <td data-key="" colspan=3>BSPC</td>
+      </tr><tr>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+      </tr>
+    </table>
+
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/public/main.js b/public/main.js
new file mode 100644
index 0000000..dce51b8
--- /dev/null
+++ b/public/main.js
@@ -0,0 +1,12 @@
+document.addEventListener("DOMContentLoaded", async () => { "use strict";
+
+const $ = (s,c) => (c||document).querySelector(s);
+function $$(x,y,z,a){a=(z||document).querySelectorAll(x);if(typeof y=="function")[].forEach.call(a,y);return a}
+function m(a,b,c){c=document;b=c.createElement(b||"p");b.innerHTML=a.trim();for(a=c.createDocumentFragment();c=b.firstChild;)a.appendChild(c);return a.firstChild}
+
+//if ("serviceWorker" in navigator) {
+//  navigator.serviceWorker.register("sw.js")
+//    .then(() => console.log("Service worker registered"));
+//}
+
+});
diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest
new file mode 100644
index 0000000..70d6329
--- /dev/null
+++ b/public/manifest.webmanifest
@@ -0,0 +1,23 @@
+{
+  "name": "Wordly",
+  "short_name": "Wordly",
+  "description": "A quick PWA clone of Wordle",
+  "categories": ["games"],
+  "lang": "en-US",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#000000",
+  "icons": [
+    {"type": "image/png", "sizes": "48x48",   "src": "img/favicon-48.png" },
+    {"type": "image/png", "sizes": "96x96",   "src": "img/favicon-96.png" },
+    {"type": "image/png", "sizes": "192x192", "src": "img/favicon-192.png", "purpose": "maskable any"},
+    {"type": "image/png", "sizes": "256x256", "src": "img/favicon-256.png", "purpose": "maskable any"},
+    {"type": "image/png", "sizes": "512x512", "src": "img/favicon-512.png", "purpose": "maskable any"},
+
+    {"type": "image/png", "sizes": "72x72",   "src": "img/apple-touch-icon-72.png" },
+    {"type": "image/png", "sizes": "144x144", "src": "img/apple-touch-icon-144.png"},
+    {"type": "image/png", "sizes": "168x168", "src": "img/apple-touch-icon-168.png"}
+  ]
+}
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 0000000..25b35cc
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,36 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Rubik", sans-serif;
+  transition-timing-function: ease-in-out;
+}
+
+body {
+  text-align: center;
+
+          user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+h1 {
+  text-transform: uppercase;
+}
+
+#help-btn { float: left; }
+#settings-btn, #stats-btn { float: right; }
+
+#keyboard {
+  width: 100%;
+  table-layout: fixed;
+  border-spacing: 1vw;
+}
+
+td[data-key] {
+  background: #eee;
+  padding: 0.5em;
+  font-size: 4vw;
+  border-radius: 2vw;
+}
diff --git a/public/sw1.js b/public/sw1.js
new file mode 100644
index 0000000..5bf5a24
--- /dev/null
+++ b/public/sw1.js
@@ -0,0 +1,29 @@
+// https://gist.github.com/adactio/3717b7da007a9363ddf21f584aae34af
+
+// HTML files: try the network first, then the cache.
+// Other files: try the cache first, then the network.
+// Both: cache a fresh version if possible.
+// (beware: the cache will grow and grow; there's no cleanup)
+
+const cacheName = "wordly-cache-v1";
+
+addEventListener("fetch", fetchEvent => {
+  const request = fetchEvent.request;
+  if (request.method !== "GET") return;
+  fetchEvent.respondWith(async () => {
+    const fetchPromise = fetch(request);
+    fetchEvent.waitUntil(async () => {
+      const responseFromFetch = await fetchPromise;
+      const responseCopy = responseFromFetch.clone();
+      const myCache = await caches.open(cacheName);
+      return myCache.put(request, responseCopy);
+    }());
+    if (request.headers.get("Accept").includes("text/html")) {
+      try { return await fetchPromise; }
+      catch(error) { return caches.match(request); }
+    } else {
+      const responseFromCache = await caches.match(request);
+      return responseFromCache || fetchPromise;
+    }
+  }());
+});
diff --git a/public/sw2.js b/public/sw2.js
new file mode 100644
index 0000000..a778887
--- /dev/null
+++ b/public/sw2.js
@@ -0,0 +1,40 @@
+// https://googlechrome.github.io/samples/service-worker/basic/
+
+const PRECACHE = "wordly-precache-v1";
+const RUNTIME = "wordly-runtime";
+
+const PRECACHE_URLS = [
+  "./", // Alias for index.html
+  "index.html",
+  "style.css",
+  "main.js"
+];
+
+self.addEventListener("install", e => e.waitUntil(
+  caches.open(PRECACHE)
+    .then(cache => cache.addAll(PRECACHE_URLS))
+    .then(self.skipWaiting())));
+
+self.addEventListener("activate", e => {
+  const currentCaches = [PRECACHE, RUNTIME];
+  e.waitUntil( // Clean up old caches
+    caches.keys().then(cacheNames =>
+      cacheNames.filter(cacheName => !currentCaches.includes(cacheName))
+    ).then(cachesToDelete => Promise.all(cachesToDelete.map(cacheToDelete =>
+      caches.delete(cacheToDelete)))
+    ).then(() => self.clients.claim())
+  );
+});
+
+self.addEventListener("fetch", e => {
+  if (e.request.url.startsWith(self.location.origin)) {
+    e.respondWith(caches.match(e.request).then(cachedResponse =>
+      cachedResponse? cachedResponse
+      : caches.open(RUNTIME).then(cache =>
+        fetch(e.request).then(res =>
+          cache.put(e.request, res.clone()).then(() => res)
+        )
+      )
+    ));
+  }
+});
author	Alexis Hovorka <[email protected]>	2022-02-02 00:06:53 -0700
committer	Alexis Hovorka <[email protected]>	2022-02-02 00:06:53 -0700
commit	8a943500d97598a0b49ef655dc1b5484fe5e83d8 (patch)
tree	339daf640084d724524c3cfcf92e51f48f7037b0 /public