monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-03-10 21:53:13 +08:00
Code Issues Projects Releases Packages Wiki Activity

changed the way keymap style works slightly, added split and split matrix

Browse source
This commit is contained in:
Jack 2020-08-11 23:17:00 +01:00
parent 3493e1b654
commit c70e1f62ea
4 changed files with 197 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

138
public/css/style.scss
View file

@ -1904,7 +1904,8 @@ key {
&.layout,
&.keymapLayout,
&.fontFamily,
&.funbox {
&.funbox,
&.keymapStyle {
grid-template-columns: 2fr 1fr;
grid-template-areas:
"title tabs"
@ -2385,10 +2386,15 @@ key {
}
}
&#KeySpace {
&#KeySpace,
&#KeySpace2 {
width: 100%;
}
&#KeySpace2 {
opacity: 0;
}
&.flash {
animation-name: flashKey;
animation-duration: 1s;
@ -2416,6 +2422,14 @@ key {
opacity: 0;
}
.keymap {
.keymap-split-spacer,
.keymap-stagger-split-spacer,
.keymap-matrix-split-spacer {
display: none;
}
}
.r1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
@ -2439,16 +2453,118 @@ key {
.r5 {
display: grid;
grid-template-columns: 4fr 7.5fr 4fr;
grid-template-columns: 4fr 5.5fr 4fr;
// &.matrixSpace {
// // grid-template-columns: 6.75fr 1.9fr 6.75fr;
// grid-template-columns: 6.9fr 4.6fr 6.9fr; // wider spacebar
// }
// &.splitSpace {
// // grid-template-columns: 6.75fr 1.9fr 6.75fr;
// grid-template-columns: 4fr 7.5fr 4fr;
// }
}
.matrix {
display: flex;
justify-content: left;
margin-left: 4.51rem;
}
// .matrix {
// display: flex;
// justify-content: left;
// margin-left: 4.51rem;
// }
.matrixSpace {
grid-template-columns: 6.75fr 1.9fr 6.75fr;
//grid-template-columns: 6.90fr 4.60fr 6.90fr; // wider spacebar
.keymap {
&.matrix {
.r1,
.r2,
.r3,
.r4 {
display: flex;
justify-content: left;
margin-left: 4.51rem;
}
.r5 {
grid-template-columns: 6.9fr 4.6fr 6.9fr;
}
#KeyLeftBracket {
opacity: 0;
}
#KeyRightBracket {
opacity: 0;
}
#KeyQuote {
opacity: 0;
}
}
&.split {
.keymap-split-spacer {
display: block;
}
.keymap-stagger-split-spacer {
display: block;
}
.r1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
opacity: 0;
}
.r2 {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr;
}
.r3 {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
}
.r4 {
display: grid;
grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2.5fr;
}
.r5 {
grid-template-columns: 5fr 3.5fr 1fr 3.5fr 5fr;
}
#KeySpace2 {
opacity: 1;
}
}
&.split_matrix {
.keymap-split-spacer {
display: block;
width: 2rem;
height: 2rem;
}
.keymap-stagger-split-spacer {
display: none;
}
.keymap-matrix-split-spacer {
display: block;
width: 2rem;
height: 2rem;
}
.r1,
.r2,
.r3,
.r4 {
display: flex;
justify-content: left;
margin-left: 4.51rem;
}
.r5 {
grid-template-columns: 6fr 2fr 1fr 2fr 6fr;
}
#KeyLeftBracket {
opacity: 0;
}
#KeyRightBracket {
opacity: 0;
}
#KeyQuote {
opacity: 0;
}
#KeySpace2 {
opacity: 1;
}
}
}

30
public/index.html
View file

@ -1001,6 +1001,8 @@
<div class="keymap-key inactive hidden-key" id="Key6">
<span class="letter">6</span>
</div>
<div class="keymap-split-spacer"></div>
<div class="keymap-key inactive hidden-key" id="Key7">
<span class="letter">7</span>
</div>
@ -1042,9 +1044,11 @@
<div class="keymap-key" id="KeyT">
<span class="letter">t</span>
</div>
<div class="keymap-matrix-split-spacer"></div>
<div class="keymap-key" id="KeyY">
<span class="letter">y</span>
</div>
<div class="keymap-stagger-split-spacer"></div>
<div class="keymap-key" id="KeyU">
<span class="letter">u</span>
</div>
@ -1087,6 +1091,7 @@
<div class="keymap-key" id="KeyG">
<span class="letter">g</span>
</div>
<div class="keymap-split-spacer"></div>
<div class="keymap-key" id="KeyH">
<span class="letter">h</span>
</div>
@ -1129,6 +1134,7 @@
<div class="keymap-key" id="KeyB">
<span class="letter">b</span>
</div>
<div class="keymap-split-spacer"></div>
<div class="keymap-key" id="KeyN">
<span class="letter">n</span>
</div>
@ -1152,7 +1158,11 @@
<div class="keymap-key hidden-key">
<span class="letter"></span>
</div>
<div class="keymap-key" id="KeySpace">
<div class="keymap-key key-split-space" id="KeySpace">
<span class="letter"></span>
</div>
<div class="keymap-split-spacer"></div>
<div class="keymap-key key-split-space" id="KeySpace2">
<span class="letter"></span>
</div>
<div class="keymap-key hidden-key">
@ -1814,7 +1824,7 @@
</div>
<div class="section keymapStyle">
<h1>keymap style</h1>
<div class="text">Displays the keymap in a different style.</div>
<!-- <div class="text">Displays the keymap in a different style.</div> -->
<div class="buttons">
<div
class="button"
@ -1832,6 +1842,22 @@
>
matrix
</div>
<div
class="button"
keymapStyle="split"
tabindex="0"
onclick="this.blur();"
>
split
</div>
<div
class="button"
keymapStyle="split_matrix"
tabindex="0"
onclick="this.blur();"
>
split matrix
</div>
</div>
</div>
<div class="section keymapLayout">

7
public/js/script.js
View file

@ -1011,6 +1011,10 @@ function flashPressedKeymapKey(key, correct) {
key = `#Key${key.toUpperCase()}`;
}
if (key == "#KeySpace") {
key = ".key-split-space";
}
try {
if (correct) {
$(key)
@ -1102,6 +1106,9 @@ function updateHighlightedKeymapKey() {
}
$(highlightKey).addClass("active-key");
if (highlightKey === "#KeySpace") {
$("#KeySpace2").addClass("active-key");
}
}
function updateCaretPosition() {

47
public/js/userconfig.js
View file

@ -794,20 +794,43 @@ function changeKeymapMode(mode, nosave) {
}
function changeKeymapStyle(style, nosave) {
if (style === "staggered") {
$(".r1, .r2, .r3, .r4").removeClass("matrix");
$(".r5").removeClass("matrixSpace");
$("#KeyLeftBracket").removeClass("hide-key");
$("#KeyRightBracket").removeClass("hide-key");
$("#KeyQuote").removeClass("hide-key");
}
$(".keymap").removeClass("matrix");
$(".keymap").removeClass("split");
$(".keymap").removeClass("split_matrix");
if (style === "matrix") {
$(".r1, .r2, .r3, .r4").addClass("matrix");
$(".r5").addClass("matrixSpace");
$("#KeyLeftBracket").addClass("hide-key");
$("#KeyRightBracket").addClass("hide-key");
$("#KeyQuote").addClass("hide-key");
$(".keymap").addClass("matrix");
} else if (style === "split") {
$(".keymap").addClass("split");
} else if (style === "split_matrix") {
$(".keymap").addClass("split_matrix");
}
// if (style === "staggered") {
// $(".keymap .keymap-split-spacer").addClass("hidden");
// $(".keymap .r1, .r2, .r3, .r4").removeClass("matrix");
// $(".keymap .r5").removeClass("matrixSpace");
// $(".keymap #KeyLeftBracket").removeClass("hide-key");
// $(".keymap #KeyRightBracket").removeClass("hide-key");
// $(".keymap #KeyQuote").removeClass("hide-key");
// }
// if (style === "split") {
// $(".keymap .keymap-split-spacer").removeClass("hidden");
// $(".keymap .r1, .keymap .r2, .keymap .r3, .keymap .r4").removeClass(
// "matrix"
// );
// $(".keymap .r5").removeClass("splitSpace");
// $(".keymap #KeyLeftBracket").removeClass("hide-key");
// $(".keymap #KeyRightBracket").removeClass("hide-key");
// $(".keymap #KeyQuote").removeClass("hide-key");
// }
// if (style === "matrix") {
// $(".keymap .keymap-split-spacer").addClass("hidden");
// $(".keymap .r1, .keymap .r2, .keymap .r3, .keymap .r4").addClass("matrix");
// $(".keymap .r5").addClass("matrixSpace");
// $(".keymap #KeyLeftBracket").addClass("hide-key");
// $(".keymap #KeyRightBracket").addClass("hide-key");
// $(".keymap #KeyQuote").addClass("hide-key");
// }
config.keymapStyle = style;
if (!nosave) saveConfigToCookie();
}