[feat] Finish basic styles

author: Alexis Hovorka <[email protected]> 2022-02-19 22:56:15 -0700
committer: Alexis Hovorka <[email protected]> 2022-02-19 22:56:15 -0700
commit: 7e41581a34fe4a479dbd32fc44dcbb16f5540493 (patch)
tree: 713f547bd0f5e93198af4bce58254ba38b465cb9
parent: 8a943500d97598a0b49ef655dc1b5484fe5e83d8 (diff)
3 files changed, 122 insertions, 10 deletions
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 @@
   </head>
   <body>
     <header>
-      <button id="help-btn">?</button>
-      <button id="settings-btn">%</button>
-      <button id="stats-btn">#</button>
+      <!--button id="help-btn">?</button-->
+      <!---button id="settings-btn">%</button-->
+      <!--button id="stats-btn">#</button-->
       <h1>Wordly</h1>
     </header>
 
-    <div id="board"></div>
+    <section id="board"></section>
 
     <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="q" colspan=2 class="absent">Q</td>
+        <td data-key="w" colspan=2 class="present">W</td>
+        <td data-key="e" colspan=2 class="found">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>
@@ -89,7 +89,7 @@
         <td data-key="l" colspan=2>L</td>
         <td></td>
       </tr><tr>
-        <td data-key="" colspan=3>ENTER</td>
+        <td data-key="bspc" colspan=3></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>
@@ -97,7 +97,7 @@
         <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>
+        <td data-key="enter" colspan=3></td>
       </tr><tr>
         <td></td>
         <td></td>
@@ -122,6 +122,10 @@
       </tr>
     </table>
 
+    <footer>
+      <p>Copyleft <span style="display:inline-block;transform:rotate(180deg)">&copy;</span> 2022 Alexis Hovorka &mdash; <a href="https://github.com/alexisspacegirl/wordly">GitHub</a></p>
+    </footer>
+
     <script src="main.js"></script>
   </body>
 </html>
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 = "<tr>";
+  for (let j=0;j<6;j++) {
+    o += `<td>&nbsp;</td>`
+  }
+  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 }
+}
author	Alexis Hovorka <[email protected]>	2022-02-19 22:56:15 -0700
committer	Alexis Hovorka <[email protected]>	2022-02-19 22:56:15 -0700
commit	7e41581a34fe4a479dbd32fc44dcbb16f5540493 (patch)
tree	713f547bd0f5e93198af4bce58254ba38b465cb9
parent	8a943500d97598a0b49ef655dc1b5484fe5e83d8 (diff)