From 8a943500d97598a0b49ef655dc1b5484fe5e83d8 Mon Sep 17 00:00:00 2001 From: Alexis Hovorka Date: Wed, 2 Feb 2022 00:06:53 -0700 Subject: Initial commit --- public/404.html | 1 + public/500.html | 1 + public/index.html | 127 ++++++++++++++++++++++++++++++++++++++++++++ public/main.js | 12 +++++ public/manifest.webmanifest | 23 ++++++++ public/style.css | 36 +++++++++++++ public/sw1.js | 29 ++++++++++ public/sw2.js | 40 ++++++++++++++ 8 files changed, 269 insertions(+) create mode 100644 public/404.html create mode 100644 public/500.html create mode 100644 public/index.html create mode 100644 public/main.js create mode 100644 public/manifest.webmanifest create mode 100644 public/style.css create mode 100644 public/sw1.js create mode 100644 public/sw2.js (limited to 'public') 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 @@ +

404 Not Found

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 @@ +

500 Internal Server Error

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 @@ + + + + Wordly + + + + + + + + + + + + + + +

+ + + +

Wordly

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

ENTER

BSPC

+ + + + 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) + ) + ) + )); + } +}); -- cgit v1.2.3-70-g09d2