Theaninova/DeviceManager
1
0
Fork 0
mirror of https://github.com/CharaChorder/DeviceManager.git synced 2026-01-18 07:52:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

typing challenge prototype

Browse Source
This commit is contained in:
Thea Schöbl
2023-07-10 19:55:58 +02:00
parent 7fdf1cd3b4
commit 110771a2a4
5 changed files with 143 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/lib/components/LayoutCC1.svelte
View File

@@ -4,53 +4,60 @@
let activeLayer = 0
</script>
<fieldset>
{#each [["Numeric Layer", "123", 1], ["Primary Layer", "abc", 0], ["Function Layer", "function", 2]] as [title, icon, value]}
<button {title} class="icon" on:click={() => (activeLayer = value)} class:active={activeLayer === value}>
{icon}
</button>
{/each}
</fieldset>
<div>
<fieldset>
{#each [["Numeric Layer", "123", 1], ["Primary Layer", "abc", 0], ["Function Layer", "function", 2]] as [title, icon, value]}
<button
{title}
class="icon"
on:click={() => (activeLayer = value)}
class:active={activeLayer === value}
>
{icon}
</button>
{/each}
</fieldset>
<div class="col layout" style="gap: 0">
<div class="row" style="gap: 156px">
<div class="row">
<RingInput {activeLayer} keys={{d: 30, e: 31, n: 32, w: 33, s: 34}} type="tertiary" />
<div class="col">
<RingInput {activeLayer} keys={{d: 25, e: 26, n: 27, w: 28, s: 29}} />
<RingInput {activeLayer} keys={{d: 40, e: 41, n: 42, w: 43, s: 44}} type="secondary" />
<div class="col layout" style="gap: 0">
<div class="row" style="gap: 156px">
<div class="row">
<RingInput {activeLayer} keys={{d: 30, e: 31, n: 32, w: 33, s: 34}} type="tertiary" />
<div class="col">
<RingInput {activeLayer} keys={{d: 25, e: 26, n: 27, w: 28, s: 29}} />
<RingInput {activeLayer} keys={{d: 40, e: 41, n: 42, w: 43, s: 44}} type="secondary" />
</div>
<div class="col">
<RingInput {activeLayer} keys={{d: 20, e: 21, n: 22, w: 23, s: 24}} />
<RingInput {activeLayer} keys={{d: 35, e: 36, n: 37, w: 38, s: 39}} type="secondary" />
</div>
<RingInput {activeLayer} keys={{d: 15, e: 16, n: 17, w: 18, s: 19}} />
</div>
<div class="col">
<RingInput {activeLayer} keys={{d: 20, e: 21, n: 22, w: 23, s: 24}} />
<RingInput {activeLayer} keys={{d: 35, e: 36, n: 37, w: 38, s: 39}} type="secondary" />
</div>
<RingInput {activeLayer} keys={{d: 15, e: 16, n: 17, w: 18, s: 19}} />
</div>
<div class="row">
<RingInput {activeLayer} keys={{d: 60, w: 61, n: 62, e: 63, s: 64}} />
<div class="col">
<RingInput {activeLayer} keys={{d: 65, w: 66, n: 67, e: 68, s: 69}} />
<RingInput {activeLayer} keys={{d: 80, w: 81, n: 82, e: 83, s: 84}} />
<div class="row">
<RingInput {activeLayer} keys={{d: 60, w: 61, n: 62, e: 63, s: 64}} />
<div class="col">
<RingInput {activeLayer} keys={{d: 65, w: 66, n: 67, e: 68, s: 69}} />
<RingInput {activeLayer} keys={{d: 80, w: 81, n: 82, e: 83, s: 84}} />
</div>
<div class="col">
<RingInput {activeLayer} keys={{d: 70, w: 71, n: 72, e: 73, s: 74}} />
<RingInput {activeLayer} keys={{d: 85, w: 86, n: 87, e: 88, s: 89}} />
</div>
<RingInput {activeLayer} keys={{d: 75, w: 76, n: 77, e: 78, s: 79}} />
</div>
<div class="col">
<RingInput {activeLayer} keys={{d: 70, w: 71, n: 72, e: 73, s: 74}} />
<RingInput {activeLayer} keys={{d: 85, w: 86, n: 87, e: 88, s: 89}} />
</div>
<RingInput {activeLayer} keys={{d: 75, w: 76, n: 77, e: 78, s: 79}} />
</div>
</div>
<div class="row" style="gap: 48px; margin-top: -32px">
<RingInput {activeLayer} keys={{d: 10, e: 11, n: 12, w: 13, s: 14}} />
<RingInput {activeLayer} keys={{d: 55, w: 56, n: 57, e: 58, s: 59}} />
</div>
<div class="row" style="gap: 160px">
<RingInput {activeLayer} keys={{d: 5, e: 6, n: 7, w: 8, s: 9}} />
<RingInput {activeLayer} keys={{d: 50, w: 51, n: 52, e: 53, s: 54}} />
</div>
<div class="row" style="gap: 320px; margin-top: -12px">
<RingInput {activeLayer} keys={{d: 0, e: 1, n: 2, w: 3, s: 4}} type="secondary" />
<RingInput {activeLayer} keys={{d: 45, w: 46, n: 47, e: 48, s: 49}} type="secondary" />
<div class="row" style="gap: 48px; margin-top: -32px">
<RingInput {activeLayer} keys={{d: 10, e: 11, n: 12, w: 13, s: 14}} />
<RingInput {activeLayer} keys={{d: 55, w: 56, n: 57, e: 58, s: 59}} />
</div>
<div class="row" style="gap: 160px">
<RingInput {activeLayer} keys={{d: 5, e: 6, n: 7, w: 8, s: 9}} />
<RingInput {activeLayer} keys={{d: 50, w: 51, n: 52, e: 53, s: 54}} />
</div>
<div class="row" style="gap: 320px; margin-top: -12px">
<RingInput {activeLayer} keys={{d: 0, e: 1, n: 2, w: 3, s: 4}} type="secondary" />
<RingInput {activeLayer} keys={{d: 45, w: 46, n: 47, e: 48, s: 49}} type="secondary" />
</div>
</div>
</div>

12
src/lib/components/RingInput.svelte
View File

@@ -1,11 +1,11 @@
<script lang="ts">
import {layout} from "$lib/serial/connection"
import type {CharaLayout} from "$lib/serial/connection"
import {highlightActions, layout} from "$lib/serial/connection"
import type {CharaLayout} from "$lib/serialization/layout"
import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
import type {KeyInfo} from "$lib/serial/keymap-codes"
export let activeLayer = 0
export let keys: Record<"d" | "n" | "w" | "e", number>
export let keys: Record<"d" | "s" | "n" | "w" | "e", number>
export let type: "primary" | "secondary" | "tertiary" = "primary"
const layerNames = ["Primary Layer", "Number Layer", "Function Layer"]
@@ -37,7 +37,10 @@
<div class="radial {type}">
{#each [keys.n, keys.e, keys.s, keys.w] as id, quadrant}
{@const actions = getActions(id, $layout)}
<button title={getKeyDescriptions(actions)}>
<button
title={getKeyDescriptions(actions)}
class:active={actions.some(it => it && $highlightActions?.includes(it.code))}
>
{#each actions as keyInfo, layer}
{#if keyInfo}
<span
@@ -136,6 +139,7 @@
mask-image: url("$lib/assets/quater-ring.svg");
mask-size: 100% 100%;
&.active,
&:active {
color: var(--md-sys-color-on-tertiary);
background: var(--md-sys-color-tertiary);

79
src/lib/components/TypingInput.svelte Normal file
View File

@@ -0,0 +1,79 @@
<script lang="ts">
import {tick} from "svelte"
import LayoutCC1 from "$lib/components/LayoutCC1.svelte"
import {chords, highlightActions} from "$lib/serial/connection"
import {KEYMAP_CODES} from "$lib/serial/keymap-codes.js"
$: content = Array.from({length: 10}).map(() => $chords[Math.floor(Math.random() * $chords.length)])
let cursor = [0, 0]
$: {
$highlightActions = content[cursor[0]]?.actions ?? []
}
function keypress(event: KeyboardEvent) {
cursor[1]++
if (cursor[1] >= content[cursor[0]].phrase.length) {
cursor[0]++
cursor[1] = 0
}
}
</script>
<svelte:window on:keypress={keypress} />
<div>
<section>
{#each content as word, i}
{#if word}
<span class="word">
{#each word.phrase as letter, j}
<span class="letter" class:active={i === cursor[0] && j === cursor[1]}
>{KEYMAP_CODES[letter].id}</span
>
{/each}
</span>
{/if}
{/each}
</section>
<LayoutCC1 />
</div>
<style lang="scss">
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
height: 100%;
}
section {
display: flex;
flex-direction: row;
gap: 8px;
font-size: 1.3rem;
font-weight: 500;
}
.letter {
position: relative;
}
.letter.active::before {
content: "";
position: absolute;
top: 50%;
translate: -50% -50%;
width: 2px;
height: 1em;
background: var(--md-sys-color-primary);
}
</style>

2
src/lib/serial/connection.ts
View File

@@ -19,6 +19,8 @@ export const layout = writable<CharaLayout>([[], [], []])
export const unsavedChanges = writable(0)
export const highlightActions: Writable<number[]> = writable([])
export const syncStatus: Writable<"done" | "error" | "downloading" | "uploading"> = writable("done")
let device: CharaDevice // @hmr:keep

5
src/routes/train/[mode]/+page.svelte
View File

@@ -0,0 +1,5 @@
<script>
import TypingInput from "$lib/components/TypingInput.svelte"
</script>
<TypingInput />