Added keyboard controls and fading

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

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<string, Word>()
 
 		// 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")
 	}

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)
 		}
 	}

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() {

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

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<string, Word>
 	static wordSets: Array<Set<string>>
 	static user: User