From 2c8ae463ed7beff98da922132fc23f13207cc673 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Mon, 11 Jun 2018 08:03:38 +0900 Subject: [PATCH] Added keyboard controls and fading --- elements/app-view/app-view.scarlet | 2 +- elements/app-view/app-view.ts | 10 ++++++ elements/main-menu/main-menu.ts | 4 ++- .../multiple-choice-test.ts | 32 +++++++++++++++--- makefile | 33 +++++++++++++++++++ scripts/State.ts | 2 ++ 6 files changed, 76 insertions(+), 7 deletions(-) create mode 100644 makefile diff --git a/elements/app-view/app-view.scarlet b/elements/app-view/app-view.scarlet index 74f1cb0..3da15a0 100644 --- a/elements/app-view/app-view.scarlet +++ b/elements/app-view/app-view.scarlet @@ -1,9 +1,9 @@ app-view vertical + default-transition flex 1 padding 1rem opacity 1 - transition opacity 500ms ease [loading] opacity 0.5 diff --git a/elements/app-view/app-view.ts b/elements/app-view/app-view.ts index 2f0155d..dfe5cd7 100644 --- a/elements/app-view/app-view.ts +++ b/elements/app-view/app-view.ts @@ -6,6 +6,7 @@ export default class AppView extends HTMLElement { mainMenu: MainMenu connectedCallback() { + State.app = this State.words = new Map() // Main menu @@ -16,6 +17,15 @@ export default class AppView extends HTMLElement { this.loading = false } + fade(callback: Function) { + this.classList.add("fade-out") + + setTimeout(() => { + callback() + this.classList.remove("fade-out") + }, 250) + } + get loading() { return this.hasAttribute("loading") } diff --git a/elements/main-menu/main-menu.ts b/elements/main-menu/main-menu.ts index f57a502..ffd43cb 100644 --- a/elements/main-menu/main-menu.ts +++ b/elements/main-menu/main-menu.ts @@ -18,7 +18,9 @@ export default class MainMenu extends HTMLElement { for(let wordSet of State.wordSets) { let button = document.createElement("button") button.innerText = [...wordSet.values()].join("、") - button.addEventListener("click", () => this.testWordSet(wordSet)) + button.addEventListener("click", () => { + State.app.fade(() => this.testWordSet(wordSet)) + }) this.appendChild(button) } } diff --git a/elements/multiple-choice-test/multiple-choice-test.ts b/elements/multiple-choice-test/multiple-choice-test.ts index 94bfa49..15a6743 100644 --- a/elements/multiple-choice-test/multiple-choice-test.ts +++ b/elements/multiple-choice-test/multiple-choice-test.ts @@ -23,7 +23,6 @@ export default class MultipleChoiceTest extends HTMLElement { } async connectedCallback() { - this.appView = document.getElementsByTagName("app-view")[0] as AppView this.statusMessages = document.getElementsByTagName("status-messages")[0] as StatusMessages this.initDOM() @@ -32,11 +31,14 @@ export default class MultipleChoiceTest extends HTMLElement { // Touch controller this.touchController = new TouchController() - this.touchController.leftSwipe = () => this.onLeftSwipe() + this.touchController.leftSwipe = () => this.tryNext() + + requestAnimationFrame(() => this.classList.remove("fade-out")) } disconnectedCallback() { this.touchController.unregister() + document.removeEventListener("keydown", this.onKeyDown) } initDOM() { @@ -54,6 +56,26 @@ export default class MultipleChoiceTest extends HTMLElement { } this.question.addEventListener("click", e => this.onQuestionClicked(e)) + + document.addEventListener("keydown", e => this.onKeyDown(e)) + } + + onKeyDown(e: KeyboardEvent) { + // 1-4: Answer buttons + if(e.keyCode >= 49 && e.keyCode <= 52) { + this.answers[e.keyCode - 49].click() + e.stopPropagation() + e.preventDefault() + return + } + + // Space or Return: Next button + if(e.keyCode === 32 || e.keyCode === 13) { + this.tryNext() + e.stopPropagation() + e.preventDefault() + return + } } startTest() { @@ -80,7 +102,7 @@ export default class MultipleChoiceTest extends HTMLElement { this.nextQuestion() } - onLeftSwipe() { + tryNext() { if(!this.solved) { return } @@ -92,7 +114,7 @@ export default class MultipleChoiceTest extends HTMLElement { this.questionIndex++ if(this.questionIndex >= this.questionsInTest.length) { - this.onFinishTest() + State.app.fade(() => this.onFinishTest()) return } @@ -104,7 +126,7 @@ export default class MultipleChoiceTest extends HTMLElement { onFinishTest() { this.parentElement.removeChild(this) - this.appView.mainMenu.activated = true + State.app.mainMenu.activated = true } clearAnswers() { diff --git a/makefile b/makefile new file mode 100644 index 0000000..2c17611 --- /dev/null +++ b/makefile @@ -0,0 +1,33 @@ +# Makefile for Konna Kanji + +IPTABLES=@sudo iptables +IP6TABLES=@sudo ip6tables + +# Determine the name of the platform +OSNAME= + +ifeq ($(OS),Windows_NT) + OSNAME = WINDOWS +else + UNAME_S := $(shell uname -s) + ifeq ($(UNAME_S),Linux) + OSNAME = LINUX + endif + ifeq ($(UNAME_S),Darwin) + OSNAME = OSX + endif +endif + +# Build targets: +ports: +ifeq ($(OSNAME),LINUX) + $(IPTABLES) -t nat -A OUTPUT -o lo -p tcp --dport 80 -j REDIRECT --to-port 4000 + $(IPTABLES) -t nat -A OUTPUT -o lo -p tcp --dport 443 -j REDIRECT --to-port 4001 + $(IP6TABLES) -t nat -A OUTPUT -o lo -p tcp --dport 80 -j REDIRECT --to-port 4000 + $(IP6TABLES) -t nat -A OUTPUT -o lo -p tcp --dport 443 -j REDIRECT --to-port 4001 +endif +ifeq ($(OSNAME),OSX) + @echo "rdr pass inet proto tcp from any to any port 443 -> 127.0.0.1 port 4001" | sudo pfctl -ef - +endif + +.PHONY: ports diff --git a/scripts/State.ts b/scripts/State.ts index 57b2c08..8d198c7 100644 --- a/scripts/State.ts +++ b/scripts/State.ts @@ -1,7 +1,9 @@ import Word from "./Word" import User from "./User" +import AppView from "elements/app-view/app-view" export default class State { + static app: AppView static words: Map static wordSets: Array> static user: User