Skip to content

Commit

Permalink
minor changes to keyboard game mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheGAzed
TheGAzed committed Jun 20, 2024
1 parent 5fb3371 commit 181e40f
Show file tree
Hide file tree
Showing 2 changed files with 194 additions and 93 deletions.
253 changes: 160 additions & 93 deletions hiravrt/Views/Pages/Game/Keyboard.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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;

Expand Down Expand Up @@ -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();
Expand All @@ -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;

Expand Down Expand Up @@ -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)) {
Expand All @@ -152,9 +157,8 @@
StateHasChanged();
return;
}

if (input.Key == "q") OnReset();
}

}

@{
Expand All @@ -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">
Expand Down Expand Up @@ -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>
34 changes: 34 additions & 0 deletions hiravrt/wwwroot/css/game/Keyboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

0 comments on commit 181e40f

Please sign in to comment.