From 7e41581a34fe4a479dbd32fc44dcbb16f5540493 Mon Sep 17 00:00:00 2001 From: Alexis Hovorka Date: Sat, 19 Feb 2022 22:56:15 -0700 Subject: [feat] Finish basic styles --- public/index.html | 22 ++++++++------ public/main.js | 22 ++++++++++++++ public/style.css | 88 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 122 insertions(+), 10 deletions(-) (limited to 'public') diff --git a/public/index.html b/public/index.html index 1c95383..0010c06 100644 --- a/public/index.html +++ b/public/index.html @@ -56,19 +56,19 @@

- - - + + +

Wordly

- - - + + + @@ -89,7 +89,7 @@ - + @@ -97,7 +97,7 @@ - + @@ -122,6 +122,10 @@

ENTER

BSPC

+ + diff --git a/public/main.js b/public/main.js index dce51b8..3f7031b 100644 --- a/public/main.js +++ b/public/main.js @@ -4,6 +4,28 @@ 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} +const boardEl = document.createElement("table"); +$("#board").appendChild(boardEl); + +for (let i=0;i<6;i++) { + let o = ""; + for (let j=0;j<6;j++) { + o += ` ` + } + o = m(o, "table"); + boardEl.appendChild(o); +} + +function processKey(key) { + if (!/^([a-z]|enter|bspc)$/.test(key)) return; + console.log(key); +} + +document.addEventListener("keydown", e => + e.ctrlKey || e.altKey || e.metaKey || + processKey(e.key.toLowerCase() + .replace("backspace", "bspc"))); + //if ("serviceWorker" in navigator) { // navigator.serviceWorker.register("sw.js") // .then(() => console.log("Service worker registered")); diff --git a/public/style.css b/public/style.css index 25b35cc..f2113e0 100644 --- a/public/style.css +++ b/public/style.css @@ -6,7 +6,13 @@ transition-timing-function: ease-in-out; } +html, body { + height: 100%; +} + body { + display: flex; + flex-direction: column; text-align: center; user-select: none; @@ -16,21 +22,101 @@ body { } h1 { + padding: .3em; text-transform: uppercase; + font-size: 6vw; } #help-btn { float: left; } #settings-btn, #stats-btn { float: right; } +#board { + flex: 1; + display: flex; + justify-content: center; + align-items: center; +} + +#board table { + table-layout: fixed; + border-spacing: .5vw; + width: 55%; +} + #keyboard { width: 100%; table-layout: fixed; border-spacing: 1vw; } -td[data-key] { +#board td, td[data-key] { background: #eee; padding: 0.5em; font-size: 4vw; border-radius: 2vw; } + +td[data-key] { cursor: pointer } + +td[data-key=enter]::after, +td[data-key=bspc]::after { + content: ""; + display: block; + margin: 0 auto; + width: 0; + height: 0; + border: 1.5vw solid transparent; +} + +td[data-key=enter]::after { + border-left: 2.4vw solid #000; + border-right-width: 0; +} + +td[data-key=bspc]::after { + border-right: 2.4vw solid #000; + border-left-width: 0; +} + +td[data-key]:hover { box-shadow: 0 0 0 3px #0002; } +td.absent { background: #aaa } +td.present { background: #f9c74f } +td.found { background: #90be6d } + +footer p { + padding: 0 0 .6em; + font-size: 3vw; +} + +@media (min-width:701px) { + h1 { font-size: 42px } + + #board table { + width: 385px; + border-spacing: 3.5px; + } + + #keyboard { + width: 700px; + margin: 0 auto; + border-spacing: 7px; + } + #board td, td[data-key] { + font-size: 28px; + border-radius: 14px; + } + td[data-key=enter]::after, + td[data-key=bspc]::after { + border: 10.5px solid transparent; + } + td[data-key=enter]::after { + border-left: 17px solid #000; + border-right-width: 0; + } + td[data-key=bspc]::after { + border-right: 17px solid #000; + border-left-width: 0; + } + + footer p { font-size: 21px } +} -- cgit v1.2.3-70-g09d2