commit c68d951cbe384c42a6510ae93b3aabfb6eb0aeeb
parent 57072538f95c3c37ddc806c22de9adb743f543e8
Author: tongong <tongong@gmx.net>
Date: Thu, 13 Jan 2022 09:56:48 +0100
added navigation & about page
Diffstat:
6 files changed, 163 insertions(+), 38 deletions(-)
diff --git a/src/components/layout.js b/src/components/layout.js
@@ -0,0 +1,14 @@
+const m = require("mithril");
+
+module.exports = () => {
+ return {
+ view: (vnode) => ( m("div",
+ m(".header", vnode.attrs.pages.map(p =>
+ m("div", {
+ class: (m.route.get() == "/" + p)? "bold" : ""
+ }, m(m.route.Link, {href: "/" + p}, p))
+ )),
+ m(".main-content", m("div", vnode.children))
+ ))
+ }
+}
diff --git a/src/components/page-about.js b/src/components/page-about.js
@@ -0,0 +1,20 @@
+const m = require("mithril");
+
+module.exports = () => {
+ return {
+ view: () => m("div",
+ m("h1", "sleepykeeb"),
+ m("p", "This is an experimental idea for a keyboard layout / input method with only three keys."),
+ m("h2", "inspiration"),
+ m("p", "The main inspiration for this project stems from these two findings on hackernews:"),
+ m("ul",
+ m("li", m("a",
+ {href: "https://github.com/taylorconor/threeboard"},
+ "threeboard")),
+ m("li", m("a",
+ {href: "https://news.ycombinator.com/item?id=29853731"},
+ "this hackernews thread"))
+ )
+ )
+ }
+};
diff --git a/src/components/page-input.js b/src/components/page-input.js
@@ -0,0 +1,31 @@
+const m = require("mithril");
+
+// maybe add a configuration option for this later
+const keys = ["j", "k", "l"];
+
+module.exports = () => {
+ let active = [false, false, false];
+ return {
+ oncreate: () => {
+ document.onkeydown = (e) => {
+ if (!e.repeat && keys.indexOf(e.key) != -1) {
+ active[keys.indexOf(e.key)] = true;
+ m.redraw();
+ }
+ }
+ document.onkeyup = (e) => {
+ if (keys.indexOf(e.key) != -1) {
+ active[keys.indexOf(e.key)] = false;
+ m.redraw();
+ }
+ }
+ },
+ view: () => {
+ return m(".keyBoxWrap", [0, 1, 2].map(
+ i => m(".keyBox", {
+ class: active[i] ? "keyBoxHighlight" : ""
+ })
+ ));
+ }
+ }
+};
diff --git a/src/components/page-trainer.js b/src/components/page-trainer.js
@@ -0,0 +1,9 @@
+const m = require("mithril");
+
+module.exports = () => {
+ return {
+ view: () => {
+ return m("p", "will be added later");
+ }
+ }
+};
diff --git a/src/main.js b/src/main.js
@@ -1,33 +1,37 @@
const m = require("mithril");
+const layout = require("./components/layout.js");
+const pageInput = require("./components/page-input.js");
+const pageTrainer = require("./components/page-trainer.js");
+const pageAbout = require("./components/page-about.js");
-// maybe add a configuration option for this later
-const keys = ["j", "k", "l"];
-
-function main() {
- let active = [false, false, false];
- return {
- oncreate: function() {
- document.onkeydown = (e) => {
- if (!e.repeat && keys.indexOf(e.key) != -1) {
- active[keys.indexOf(e.key)] = true;
- m.redraw();
- }
- }
- document.onkeyup = (e) => {
- if (keys.indexOf(e.key) != -1) {
- active[keys.indexOf(e.key)] = false;
- m.redraw();
- }
- }
- },
- view: function() {
- return m(".keyBoxWrap", [0, 1, 2].map(
- i => m(".keyBox", {
- class: active[i] ? "keyBoxHighlight" : ""
- })
- ));
+// ugly workaround to fix scrolling on route change
+// https://github.com/MithrilJS/mithril.js/issues/1655
+m.mount(
+ // Don't attach to the document
+ document.createDocumentFragment(),
+ {
+ // We need a valid view for Mithril to behave
+ view : () => '',
+ // Will execute on the DOM ready phase of every draw
+ onupdate(){
+ const route = m.route.get();
+ if (route != this.route) scrollTo(0, 0);
+ this.route = route;
}
}
-};
+)
+
+let resolver = (component) => ({
+ onmatch: () => {
+ return component;
+ },
+ render: (vnode) => {
+ return m(layout, {pages: ["input", "trainer", "about"]}, vnode);
+ }
+});
-m.mount(document.body, main);
+m.route(document.body, "/input", {
+ "/input": resolver(pageInput),
+ "/trainer": resolver(pageTrainer),
+ "/about": resolver(pageAbout)
+});
diff --git a/src/styles.css b/src/styles.css
@@ -1,14 +1,63 @@
+/* GLOBAL */
+html {
+ width: 100vw;
+ overflow-x: hidden;
+}
body {
height: 100%;
width: 100%;
- margin: 0;
- background-color: #eee;
- color: #444;
- font-family: "sans-serif";
- font-size: 18px;
+ font-family: monospace, monospace;
+ background-color: #222;
+ color: #EEE;
line-height: 1.6em;
+ font-size: 18px;
+ margin: 0;
}
+a {
+ text-decoration: underline;
+ color: #f08700;
+}
+a:hover {
+ cursor: pointer;
+}
+.bold {
+ font-weight: bold;
+}
+h1 {
+ text-align: center;
+ line-height: 1.1em;
+}
+
+/* LAYOUT */
+.header {
+ margin: 0 auto;
+ height: 70px;
+ width: 90%;
+ max-width: 650px;
+ display: flex;
+ flex-direction: row;
+}
+.header > div {
+ flex: 1;
+ text-align: center;
+ line-height: 65px;
+}
+.main-content {
+ height: calc(100vh - 70px);
+ overflow-y: hidden;
+ overflow-x: hidden;
+}
+.main-content > div {
+ height: calc(100vh - 90px);
+ margin: 20px auto;
+ margin-bottom: 0px;
+ width: 90%;
+ max-width: 1000px;
+}
+
+
+/* key visualization boxes */
.keyBoxWrap {
height: 100%;
width: 100%;
@@ -16,15 +65,13 @@ body {
justify-content: center;
align-items: center;
}
-
.keyBox {
- height: 200px;
- width: 200px;
- margin: 50px;
+ height: 100px;
+ width: 100px;
+ margin: 20px;
border-radius: 10px;
transition: background-color 0.1s
}
-
.keyBoxHighlight {
background-color: #f08700;
}