WebTypist v3, proof of concept (#59)

* WebTypist v3: proof of concept * no words, no lesson * quick bugfixes
Nuclear-Squid · Feb 13, 2024 · 7aac763 · 7aac763
1 parent 6ec2501
commit 7aac763
Show file tree

Hide file tree

Showing 8 changed files with 22,952 additions and 1 deletion.
diff --git a/css/demo.css b/css/demo.css
@@ -44,7 +44,8 @@ dialog::backdrop {
   border: 5px solid #fff4;
 }
 
-#demo input {
+#demo input,
+.keyboard input {
   box-sizing: border-box;
   border-radius: 6px;
   width: 100%;
@@ -54,6 +55,35 @@ dialog::backdrop {
   margin-bottom: 1em;
 }
 
+.keyboard #lesson {
+  text-align: left;
+  font-family: monospace;
+  font-size: 2.5em;
+  height: 4em;
+  line-height: 1.2em;
+  margin: 0;
+  padding: 0;
+  text-wrap: break;
+}
+
+.keyboard #lesson { color: #444; }
+.keyboard .done   { color: gray; }
+.keyboard .error  { color: red; }
+.keyboard .space  { display: inline-block; }
+.keyboard .space::before { content: "·"; }
+
+.key_list kbd {
+  font-family: monospace;
+  text-transform: uppercase;
+  display: inline-block;
+  margin: 0 2px;
+  cursor: pointer;
+}
+
+.key_list kbd.inactive {
+  color: gray;
+}
+
 #demo p {
   margin: 1em 0;
   text-align: right;
@@ -73,6 +103,8 @@ dialog::backdrop {
     border: 1px solid #7778;
   }
 
+  .keyboard #lesson { color: white; }
+
   #demo {
     background-color: #222;
     border: 5px solid #0004;

diff --git a/dactylo.html b/dactylo.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta charset="utf-8" />
+  <meta name="description"
+    content="Une disposition de clavier francophone de type Colemak, optimisée pour le français, l’anglais et la programmation" />
+  <title>Ergo‑L</title>
+  <link type="text/css" rel="stylesheet" href="css/layout.css" />
+  <link type="text/css" rel="stylesheet" href="css/demo.css" />
+  <link type="image/svg+xml" rel="icon" href="favicon.svg" sizes="any" />
+  <script src="js/x-keyboard.js" type="module"></script>
+  <script src="js/dactylo.js" type="text/javascript"></script>
+</head>
+<body>
+  <header>
+    <h1 class="key_list">·</h1>
+    <p class="status"> 🦆 </p>
+  </header>
+
+  <div class="keyboard">
+    <input hidden spellcheck="false" />
+    <p id="lesson"></p>
+    <x-keyboard></x-keyboard>
+    <p style="text-align: right;">
+      <span style="float: left;">
+        <select id="layout">
+          <option selected>ergol</option>
+          <!-- <option>erglace</option> -->
+          <option>bepo</option>
+          <option>azerty</option>
+          <option>lafayette</option>
+        </select>
+        <select id="dict">
+          <option selected>french_1k</option>
+          <option>french_10k</option>
+          <option>english_1k</option>
+          <option>english_10k</option>
+        </select>
+      </span>
+      <select id="geometry">
+        <option value="iso" selected> ISO </option>
+        <option value="ansi">        ANSI </option>
+        <option value="ol60">         TMx </option>
+        <option value="ol50">         4×6 </option>
+        <option value="ol40">         3×6 </option>
+      </select>
+    </p>
+  </div>
+
+  <footer>
+    <span style="float: left;"> <small>powered by <a
+          href="https://onedeadkey.github.io/x-keyboard/">x-keyboard</a>,
+        inspired by <a href="">keyzen</a>
+        and <a href="https://github.com/aradzie/keybr.com">keybr</a>
+      </small> </span>
+    <a href="https://github.com/Nuclear-Squid/ErgoL">GitHub</a> |
+    <a href="https://discord.gg/5xR5K3nAFX">Discord</a> |
+    <a href=".">Ergo‑L »</a>
+  </footer>
+</body>
+</html>
diff --git a/dicts/README.md b/dicts/README.md
@@ -0,0 +1,6 @@
+These dictionaries are taken from the [MonkeyType][1] project and are borrowed
+under the GPL-3.0 license.
+
+Currently looking for such dictionaries ordered by frequency…
+
+[1]: https://github.com/monkeytypegame/monkeytype/tree/master/frontend/static/languages