From 181e40fccd6219a356b5d6e0a079dfeb74cc8d09 Mon Sep 17 00:00:00 2001
From: Matej Dedina <gameplay.nano@gmail.com>
Date: Thu, 20 Jun 2024 21:35:49 +0200
Subject: [PATCH] minor changes to keyboard game mode

---
 hiravrt/Views/Pages/Game/Keyboard.razor | 253 +++++++++++++++---------
 hiravrt/wwwroot/css/game/Keyboard.css   |  34 ++++
 2 files changed, 194 insertions(+), 93 deletions(-)

diff --git a/hiravrt/Views/Pages/Game/Keyboard.razor b/hiravrt/Views/Pages/Game/Keyboard.razor
index 5fbc874..4920e12 100644
--- a/hiravrt/Views/Pages/Game/Keyboard.razor
+++ b/hiravrt/Views/Pages/Game/Keyboard.razor
@@ -3,7 +3,8 @@
 @using hiravrt.Controllers
 @using hiravrt.Controllers.Nav
 @using hiravrt.Models.Game
-@using System.Text.RegularExpressions;
+@using System.Text.RegularExpressions
+@using System.Text
 
 @rendermode InteractiveServer
 @inject MainController mc
@@ -15,6 +16,10 @@
 
 @code {
 	enum SyllableState { UNSET, CORRECT, INTERMEDIATE, WRONG, }
+
+	enum KeyboardType  { GRID_LATIN, TRUE_LATIN, }
+	private KeyboardType currentKeyboard = KeyboardType.GRID_LATIN;
+
 	private bool isDigraph = false;
 	private bool isDiacritic = false;
 
@@ -63,12 +68,6 @@
 		ratioBefore = ratioAfter = (wrong, correct);
 	}
 
-	private void ResetSyllableStates() {
-		foreach (string s in SyllableStates.Keys) {
-			SyllableStates[s] = SyllableState.UNSET;
-		}
-	}
-
 	protected override void OnInitialized() {
 		base.OnInitialized();
 		ResetProgressBar();
@@ -87,7 +86,13 @@
 		isDiacritic = !isDiacritic;
 	}
 
-	async Task checkClick(string syllable) {
+	private void ResetSyllableStates() {
+		foreach (string s in SyllableStates.Keys) {
+			SyllableStates[s] = SyllableState.UNSET;
+		}
+	}
+
+	protected async Task checkClick(string syllable) {
 		if (!SyllableStates.ContainsKey(syllable)) throw new ArgumentException(syllable + " is not a valid syllable.");
 		if (IsChecking) return;
 
@@ -129,7 +134,7 @@
 		IsChecking = false;
 	}
 
-	private async void HandleKeypress(KeyboardEventArgs input) {
+	protected async void HandleKeypress(KeyboardEventArgs input) {
 		string setInput = input.Key.ToUpper();
 
 		if (monographVowels.Contains(setInput)) {
@@ -152,9 +157,8 @@
 			StateHasChanged();
 			return;
 		}
-
-		if (input.Key == "q") OnReset();
 	}
+
 }
 
 @{
@@ -177,6 +181,10 @@
 		if (ratio.Item1 + ratio.Item2 == 0) return "0%";
 		return (100.0 / (ratio.Item1 + ratio.Item2) * ratio.Item2).ToString().Replace(",", ".") + "%";
 	}
+
+	string getKeyboardTypeState(KeyboardType type) {
+		return type == currentKeyboard ? "on" : "off";
+	}
 }
 
 <article class="article-page" id="keyboard-gamemode-sub-article" tabindex="0" @onkeydown="HandleKeypress" @ref="gameDiv">
@@ -242,91 +250,150 @@
 
 		<p lang="ja" id="KEYBOARDP" style="font-family: @(mc.SettingsC.fontsModel.FontIDFontName[mc.SettingsC.fontsModel.CurrentFont])">@mc.GameC.KeyboardModel.CorrectSyllable</p>
 
-		<div id="upperkeyboard">
-			@if (isDigraph) {
-				<button class="toggle" @onclick="handleGraphToggle">G:</button>
-
-				<button class='@(getButtonType("YA"))' @onclick='async () => await checkClick("YA")'>YA</button>
-				<button class="unset">I</button>
-				<button class='@(getButtonType("YU"))' @onclick='async () => await checkClick("YU")'>YU</button>
-				<button class="unset">E</button>
-				<button class='@(getButtonType("YO"))' @onclick='async () => await checkClick("YO")'>YO</button>
-			} else {
-				<button class="toggle" @onclick="handleGraphToggle">g:</button>
-
-				<button class='@(getButtonType("A"))' @onclick='async () => await checkClick("A")'>A</button>
-				<button class='@(getButtonType("I"))' @onclick='async () => await checkClick("I")'>I</button>
-				<button class='@(getButtonType("U"))' @onclick='async () => await checkClick("U")'>U</button>
-				<button class='@(getButtonType("E"))' @onclick='async () => await checkClick("E")'>E</button>
-				<button class='@(getButtonType("O"))' @onclick='async () => await checkClick("O")'>O</button>				
+		<nav id="keyboard-types">
+			<a class="keyboard-types-section-@(getKeyboardTypeState(KeyboardType.GRID_LATIN))" @onclick="() => currentKeyboard = KeyboardType.GRID_LATIN">GRID</a>
+			<a class="keyboard-types-section-@(getKeyboardTypeState(KeyboardType.TRUE_LATIN))" @onclick="() => currentKeyboard = KeyboardType.TRUE_LATIN">TRUE</a>
+		</nav>
+
+        <div id="upperkeyboard">
+            @if (isDigraph) {
+                <button class="toggle" @onclick="handleGraphToggle">G:</button>
+
+                <button class='@(getButtonType("YA"))' @onclick='async () => await checkClick("YA")'>YA</button>
+                <button class="unset">I</button>
+                <button class='@(getButtonType("YU"))' @onclick='async () => await checkClick("YU")'>YU</button>
+                <button class="unset">E</button>
+                <button class='@(getButtonType("YO"))' @onclick='async () => await checkClick("YO")'>YO</button>
+            } else {
+                <button class="toggle" @onclick="handleGraphToggle">g:</button>
+
+                <button class='@(getButtonType("A"))' @onclick='async () => await checkClick("A")'>A</button>
+                <button class='@(getButtonType("I"))' @onclick='async () => await checkClick("I")'>I</button>
+                <button class='@(getButtonType("U"))' @onclick='async () => await checkClick("U")'>U</button>
+                <button class='@(getButtonType("E"))' @onclick='async () => await checkClick("E")'>E</button>
+                <button class='@(getButtonType("O"))' @onclick='async () => await checkClick("O")'>O</button>
+            }
+        </div>
+
+        <hr>
+
+		@switch (currentKeyboard) {
+			case KeyboardType.GRID_LATIN : {
+				@if (isDiacritic) {
+					<div class="lower" id='first-lower-row'>
+						<button class="toggle" @onclick="handleDiacriticToggle">D:</button>
+
+						<button class='@getButtonType("G")' @onclick='async () => await checkClick("G")'>G</button>
+						<button class='@getButtonType("Z")' @onclick='async () => await checkClick("Z")'>Z</button>
+						<button class='@getButtonType("D")' @onclick='async () => await checkClick("D")'>D</button>
+						<button class="unset">N</button>
+						<button class='@getButtonType("B")' @onclick='async () => await checkClick("B")'>B</button>
+					</div>
+
+					<div class="lower" id='second-lower-row'>
+						<button class="empty"></button>
+						<button class='@getButtonType("P")' @onclick='async () => await checkClick("P")'>P</button>
+						<button class="unset">M</button>
+						<button class="unset">Y</button>
+						<button class="unset">R</button>
+						<button class="unset">W</button>
+					</div>
+				} else {
+					<div class="lower" id='first-lower-row'>
+						<button class="toggle" @onclick="handleDiacriticToggle">d:</button>
+
+						<button class='@getButtonType("K")' @onclick='async () => await checkClick("K")'>K</button>
+						<button class='@getButtonType("S")' @onclick='async () => await checkClick("S")'>S</button>
+						<button class='@getButtonType("T")' @onclick='async () => await checkClick("T")'>T</button>
+						<button class='@getButtonType("N")' @onclick='async () => await checkClick("N")'>N</button>
+						<button class='@getButtonType("H")' @onclick='async () => await checkClick("H")'>H</button>
+					</div>
+
+					<div class="lower" id='second-lower-row'>
+						<button class="empty"></button>
+						<button class="unset">P</button>
+						<button class='@getButtonType("M")' @onclick='async () => await checkClick("M")'>M</button>
+
+						@if (isDigraph) {
+							<button class="unset">Y</button>
+							<button class='@getButtonType("R")' @onclick='async () => await checkClick("R")'>R</button>
+							<button class="unset">W</button>
+						} else {
+							<button class='@getButtonType("Y")' @onclick='async () => await checkClick("Y")'>Y</button>
+							<button class='@getButtonType("R")' @onclick='async () => await checkClick("R")'>R</button>
+							<button class='@getButtonType("W")' @onclick='async () => await checkClick("W")'>W</button>
+						}
+					</div>
+				}
+				break;
 			}
-		</div>
-
-		<hr>
-
-		@if (isDiacritic) {
-			<div class="lower" id='first-lower-row'>
-				<button class="toggle" @onclick="handleDiacriticToggle">D:</button>
-
-				<button class='@getButtonType("G")' @onclick='async () => await checkClick("G")'>G</button>
-				<button class='@getButtonType("Z")' @onclick='async () => await checkClick("Z")'>Z</button>
-				<button class='@getButtonType("D")' @onclick='async () => await checkClick("D")'>D</button>
-				<button class="unset">N</button>
-				<button class='@getButtonType("B")' @onclick='async () => await checkClick("B")'>B</button>
-			</div>
-
-			<div class="lower" id='second-lower-row'>
-				<button class="empty"></button>
-				<button class='@getButtonType("P")' @onclick='async () => await checkClick("P")'>P</button>
-				<button class="unset">M</button>
-				<button class="unset">Y</button>
-				<button class="unset">R</button>
-				<button class="unset">W</button>
-			</div>
-
-			<div class="lower" id='third-lower-row'>
-				<button class="empty"></button>
-				<button class="empty"></button>
-				<button class='unset'>C</button>
-				<button class='unset'>F</button>
-				<button class='@getButtonType("J")' @onclick='async () => await checkClick("J")'>J</button>
-				<button class="empty"></button>
-			</div>
-		} else {
-			<div class="lower" id='first-lower-row'>
-				<button class="toggle" @onclick="handleDiacriticToggle">d:</button>
-
-				<button class='@getButtonType("K")' @onclick='async () => await checkClick("K")'>K</button>
-				<button class='@getButtonType("S")' @onclick='async () => await checkClick("S")'>S</button>
-				<button class='@getButtonType("T")' @onclick='async () => await checkClick("T")'>T</button>
-				<button class='@getButtonType("N")' @onclick='async () => await checkClick("N")'>N</button>
-				<button class='@getButtonType("H")' @onclick='async () => await checkClick("H")'>H</button>
-			</div>
-
-			<div class="lower" id='second-lower-row'>
-				<button class="empty"></button>
-				<button class="unset">P</button>
-				<button class='@getButtonType("M")' @onclick='async () => await checkClick("M")'>M</button>
-
-				@if (isDigraph) {
-					<button class="unset">Y</button>
-					<button class='@getButtonType("R")' @onclick='async () => await checkClick("R")'>R</button>
-					<button class="unset">W</button>
+			case KeyboardType.TRUE_LATIN: {
+				@if (isDiacritic) {
+					<div class="lower" id='first-lower-row'>
+						<button class="toggle" @onclick="handleDiacriticToggle">D:</button>
+
+						<button class='@getButtonType("G")' @onclick='async () => await checkClick("G")'>G</button>
+						<button class='@getButtonType("Z")' @onclick='async () => await checkClick("Z")'>Z</button>
+						<button class='@getButtonType("D")' @onclick='async () => await checkClick("D")'>D</button>
+						<button class="unset">N</button>
+						<button class='@getButtonType("B")' @onclick='async () => await checkClick("B")'>B</button>
+					</div>
+
+					<div class="lower" id='second-lower-row'>
+						<button class="empty"></button>
+						<button class='@getButtonType("P")' @onclick='async () => await checkClick("P")'>P</button>
+						<button class="unset">M</button>
+						<button class="unset">Y</button>
+						<button class="unset">R</button>
+						<button class="unset">W</button>
+					</div>
+
+					<div class="lower" id='third-lower-row'>
+						<button class="empty"></button>
+						<button class="empty"></button>
+						<button class='unset'>C</button>
+						<button class='unset'>F</button>
+						<button class='@getButtonType("J")' @onclick='async () => await checkClick("J")'>J</button>
+						<button class="empty"></button>
+					</div>
 				} else {
-					<button class='@getButtonType("Y")' @onclick='async () => await checkClick("Y")'>Y</button>
-					<button class='@getButtonType("R")' @onclick='async () => await checkClick("R")'>R</button>
-					<button class='@getButtonType("W")' @onclick='async () => await checkClick("W")'>W</button>
+					<div class="lower" id='first-lower-row'>
+						<button class="toggle" @onclick="handleDiacriticToggle">d:</button>
+
+						<button class='@getButtonType("K")' @onclick='async () => await checkClick("K")'>K</button>
+						<button class='@getButtonType("S")' @onclick='async () => await checkClick("S")'>S</button>
+						<button class='@getButtonType("T")' @onclick='async () => await checkClick("T")'>T</button>
+						<button class='@getButtonType("N")' @onclick='async () => await checkClick("N")'>N</button>
+						<button class='@getButtonType("H")' @onclick='async () => await checkClick("H")'>H</button>
+					</div>
+
+					<div class="lower" id='second-lower-row'>
+						<button class="empty"></button>
+						<button class="unset">P</button>
+						<button class='@getButtonType("M")' @onclick='async () => await checkClick("M")'>M</button>
+
+						@if (isDigraph) {
+							<button class="unset">Y</button>
+							<button class='@getButtonType("R")' @onclick='async () => await checkClick("R")'>R</button>
+							<button class="unset">W</button>
+						} else {
+							<button class='@getButtonType("Y")' @onclick='async () => await checkClick("Y")'>Y</button>
+							<button class='@getButtonType("R")' @onclick='async () => await checkClick("R")'>R</button>
+							<button class='@getButtonType("W")' @onclick='async () => await checkClick("W")'>W</button>
+						}
+					</div>
+
+					<div class="lower" id='third-lower-row'>
+						<button class="empty"></button>
+						<button class="empty"></button>
+						<button class='@getButtonType("C")' @onclick='async () => await checkClick("C")'>C</button>
+						<button class='@getButtonType("F")' @onclick='async () => await checkClick("F")'>F</button>
+						<button class="unset">J</button>
+						<button class="empty"></button>
+					</div>
 				}
-			</div>
-
-			<div class="lower" id='third-lower-row'>
-				<button class="empty"></button>
-				<button class="empty"></button>
-				<button class='@getButtonType("C")' @onclick='async () => await checkClick("C")'>C</button>
-				<button class='@getButtonType("F")' @onclick='async () => await checkClick("F")'>F</button>
-				<button class="unset">J</button>
-				<button class="empty"></button>
-			</div>
+				break;
+			}
 		}
 	</section>
 </article>
\ No newline at end of file
diff --git a/hiravrt/wwwroot/css/game/Keyboard.css b/hiravrt/wwwroot/css/game/Keyboard.css
index 74be3ba..15a1bfc 100644
--- a/hiravrt/wwwroot/css/game/Keyboard.css
+++ b/hiravrt/wwwroot/css/game/Keyboard.css
@@ -168,3 +168,37 @@ article#keyboard-gamemode-sub-article:focus {
 	border: none;
 	outline: none;
 }
+
+nav#keyboard-types {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	margin-top: 0.5em;
+	margin-bottom: 0.5em;
+	margin-left: 2px;
+	margin-right: 2px;
+	grid-column-start: 1;
+	grid-column-end: -1;
+}
+
+a.keyboard-types-section-off, a.keyboard-types-section-on {
+	user-select: none;
+	display: grid;
+	align-content: center;
+	height: 2.5em;
+	cursor: pointer;
+	text-align: center;
+}
+
+a.keyboard-types-section-on {
+	background-color: #353535;
+	color: #D9D9D9;
+}
+
+a.keyboard-types-section-off {
+	background-color: #D9D9D9;
+	color: #353535;
+}
+
+a.keyboard-types-section-off:hover, a.keyboard-types-section-on:hover {
+	text-decoration: underline;
+}