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

feat: cv2

Browse Source
This commit is contained in:
Thea Schöbl
2026-01-16 18:13:51 +01:00
parent 7d7c432bb2
commit 662a5f8e9d
42 changed files with 1042 additions and 3447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
icons.config.js
View File

@@ -6,6 +6,7 @@ const config = {
icons: [
"rocket_launch",
"deployed_code_update",
"difference",
"adjust",
"add",
"piano",

2
package.json
View File

@@ -25,6 +25,7 @@
"build:tauri": "tauri build",
"tauri": "tauri",
"test": "vitest run --coverage",
"test:chord-sync": "vitest chord-sync",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"minify-icons": "node src/tools/minify-icon-font.js",
@@ -41,6 +42,7 @@
"@codemirror/language": "^6.12.1",
"@codemirror/lint": "^6.9.2",
"@codemirror/merge": "^6.11.2",
"@codemirror/search": "^6.6.0",
"@codemirror/state": "^6.5.3",
"@codemirror/view": "^6.39.9",
"@fontsource-variable/material-symbols-rounded": "^5.2.30",

11
pnpm-lock.yaml generated
View File

@@ -29,6 +29,9 @@ importers:
'@codemirror/merge':
specifier: ^6.11.2
version: 6.11.2
'@codemirror/search':
specifier: ^6.6.0
version: 6.6.0
'@codemirror/state':
specifier: ^6.5.3
version: 6.5.3
@@ -759,8 +762,8 @@ packages:
'@codemirror/merge@6.11.2':
resolution: {integrity: sha512-NO5EJd2rLRbwVWLgMdhIntDIhfDtMOKYEZgqV5WnkNUS2oXOCVWLPjG/kgl/Jth2fGiOuG947bteqxP9nBXmMg==}
'@codemirror/search@6.5.6':
resolution: {integrity: sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==}
'@codemirror/search@6.6.0':
resolution: {integrity: sha512-koFuNXcDvyyotWcgOnZGmY7LZqEOXZaaxD/j6n18TCLx2/9HieZJ5H6hs1g8FiRxBD0DNfs0nXn17g872RmYdw==}
'@codemirror/state@6.5.3':
resolution: {integrity: sha512-MerMzJzlXogk2fxWFU1nKp36bY5orBG59HnPiz0G9nLRebWa0zXuv2siH6PLIHBvv5TH8CkQRqjBs0MlxCZu+A==}
@@ -5270,7 +5273,7 @@ snapshots:
'@lezer/highlight': 1.2.3
style-mod: 4.1.2
'@codemirror/search@6.5.6':
'@codemirror/search@6.6.0':
dependencies:
'@codemirror/state': 6.5.3
'@codemirror/view': 6.39.9
@@ -6259,7 +6262,7 @@ snapshots:
'@codemirror/commands': 6.10.1
'@codemirror/language': 6.12.1
'@codemirror/lint': 6.9.2
'@codemirror/search': 6.5.6
'@codemirror/search': 6.6.0
'@codemirror/state': 6.5.3
'@codemirror/view': 6.39.9

16
src/lib/backup/backup.ts
View File

@@ -6,15 +6,9 @@ import type {
CharaSettingsFile,
} from "$lib/share/chara-file.js";
import type { Change } from "$lib/undo-redo.js";
import {
changes,
ChangeType,
chords,
layout,
settings,
} from "$lib/undo-redo.js";
import { changes, ChangeType, layout, settings } from "$lib/undo-redo.js";
import { get } from "svelte/store";
import { activeProfile, serialPort } from "../serial/connection";
import { activeProfile, deviceChords, serialPort } from "../serial/connection";
import { csvLayoutToJson, isCsvLayout } from "$lib/backup/compat/legacy-layout";
import { isCsvChords, csvChordsToJson } from "./compat/legacy-chords";
@@ -60,7 +54,7 @@ export function createChordBackup(): CharaChordFile {
return {
charaVersion: 1,
type: "chords",
chords: get(chords).map((it) => [it.actions, it.phrase]),
chords: get(deviceChords).map((it) => [it.actions, it.phrase]),
};
}
@@ -168,7 +162,9 @@ export function restoreFromFile(
export function getChangesFromChordFile(file: CharaChordFile) {
const changes: Change[] = [];
const existingChords = new Set(
get(chords).map(({ phrase, actions }) => JSON.stringify([actions, phrase])),
get(deviceChords).map(({ phrase, actions }) =>
JSON.stringify([actions, phrase]),
),
);
for (const [input, output] of file.chords) {
if (existingChords.has(JSON.stringify([input, output]))) {

149
src/lib/chord-editor/ChangesPanel.svelte Normal file
View File

@@ -0,0 +1,149 @@
<script lang="ts">
import {
serialPort,
sync,
syncProgress,
syncStatus,
} from "$lib/serial/connection";
import type { ParseResult } from "./parse-meta";
import { actionTooltip } from "$lib/title";
import LL from "$i18n/i18n-svelte";
import ProgressButton from "$lib/ProgressButton.svelte";
import type { EditorView } from "codemirror";
import { createSaveTask } from "./save-chords";
import { goto } from "$app/navigation";
let { parsed, view }: { parsed: ParseResult; view: EditorView } = $props();
$inspect(parsed);
let added = $derived(
parsed.chords.reduce(
(acc, chord) =>
acc +
(chord.phrase && chord.phrase.originalValue === undefined ? 1 : 0),
0,
),
);
let changed = $derived(
parsed.chords.reduce(
(acc, chord) =>
acc +
(chord.phrase?.originalValue !== undefined &&
chord.phrase.originalValue !== chord.phrase.value
? 1
: 0),
0,
),
);
let error: Error | undefined = $state(undefined);
async function save() {
const port = $serialPort;
if (!view || !port) return;
error = undefined;
const task = createSaveTask(view);
const total = task.remove.length + task.set.length;
$syncStatus = "uploading";
$syncProgress = { current: 0, max: total };
let progressCount = 0;
for (const input of task.remove) {
try {
await port.deleteChord({ actions: input });
} catch (e) {
error = e as Error;
}
progressCount++;
$syncProgress = { current: progressCount, max: total };
}
for (const [input, phrase] of task.set) {
try {
await port.setChord({ actions: input, phrase });
} catch (e) {
error = e as Error;
}
progressCount++;
$syncProgress = { current: progressCount, max: total };
}
if (error !== undefined) {
goto("/terminal");
}
await sync();
}
let removed = $derived(parsed.removed.length);
</script>
<div class="container">
{#if added + changed + removed !== 0 || $syncStatus === "uploading" || $syncStatus === "error"}
<div {@attach actionTooltip($LL.saveActions.SAVE())}>
<ProgressButton
disabled={$syncStatus !== "done"}
working={$syncStatus === "uploading" || $syncStatus === "downloading"}
progress={$syncProgress && $syncStatus === "uploading"
? $syncProgress.current / $syncProgress.max
: 0}
style="--height: 36px"
error={error !== undefined
? (error.message ?? error.toString())
: undefined}
onclick={save}
>
<span class="icon">save</span>
{$LL.saveActions.SAVE()}
</ProgressButton>
</div>
{/if}
<div>
{#if added}
<span class="added">+{added}</span>
{/if}
{#if changed}
<span class="changed">~{changed}</span>
{/if}
{#if removed}
<span class="removed">-{removed}</span>
{/if}
</div>
{#if parsed.aliases.size > 0}
<div class="section">
<span class="icon">content_copy</span>
<span>{parsed.aliases.size}</span>
</div>
{/if}
</div>
<style lang="scss">
.icon {
font-size: 16px;
}
.container {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 32px;
}
.section {
display: flex;
align-items: center;
gap: 8px;
}
.added {
color: var(--md-sys-color-success);
}
.changed {
color: var(--md-sys-color-warning);
}
.removed {
color: var(--md-sys-color-error);
}
</style>

21
src/lib/chord-editor/action-linter.ts
View File

@@ -128,6 +128,27 @@ export function actionLinter(config?: Parameters<typeof linter>[1]) {
message: `Phrase changed`,
});
}
if (chord.aliases) {
diagnostics.push({
from: chord.phrase.range[0],
to: chord.phrase.range[1],
severity: "warning",
markClass: "chord-alias",
message: `Alias of ${chord.aliases.length} chord(s)`,
actions: chord.aliases.map((alias) => ({
name: `Go to ${view.state.doc.sliceString(alias.range[0], alias.input?.range[1] ?? alias.range[1])}`,
apply(view) {
view.dispatch({
selection: {
anchor: alias.range[0],
},
scrollIntoView: true,
});
},
})),
});
}
}
}
return diagnostics;

313
src/lib/chord-editor/action-serializer.ts
View File

@@ -1,8 +1,5 @@
import { KEYMAP_CODES, type KeyInfo } from "$lib/serial/keymap-codes";
import type { KeyInfo } from "$lib/serial/keymap-codes";
import type { CharaChordFile } from "$lib/share/chara-file";
import { syntaxTree } from "@codemirror/language";
import type { EditorState } from "@codemirror/state";
import { get } from "svelte/store";
import {
composeChordInput,
hasConcatenator,
@@ -15,25 +12,13 @@ import type {
MetaRange,
ParseResult,
} from "./parse-meta";
import type { Tree } from "@lezer/common";
export function canUseIdAsString(info: KeyInfo): boolean {
return !!info.id && /^[^>\n]+$/.test(info.id);
}
export function actionToValue(action: number | KeyInfo) {
const info =
typeof action === "number" ? get(KEYMAP_CODES).get(action) : action;
if (info && info.id?.length === 1)
return /^[<>|\\\s]$/.test(info.id) ? `\\${info.id}` : info.id;
if (!info || !canUseIdAsString(info))
return `<0x${(info?.code ?? action).toString(16).padStart(2, "0")}>`;
return `<${info.id}>`;
}
export function parseChordMeta(
data: EditorState,
function parseChordMeta(
tree: Tree,
ids: Map<string, KeyInfo>,
codes: Map<number, KeyInfo>,
sliceString: (from: number, to: number) => string,
): ChordMeta[] {
console.time("parseChordTree");
const result: ChordMeta[] = [];
@@ -42,124 +27,118 @@ export function parseChordMeta(
let actions: ActionMeta[] = [];
let actionRange: MetaRange | undefined = undefined;
syntaxTree(data)
.cursor()
.iterate(
(node) => {
if (node.name === "Action") {
actionRange = [node.from, node.to];
} else if (node.name === "ChordPhrase") {
current.phrase = {
range: [node.from, node.to],
value: [],
valid: true,
actions: [],
hasConcatenator: false,
};
} else if (node.name === "Chord") {
current = { range: [node.from, node.to], valid: false };
} else if (node.name === "ActionString") {
actions = [];
} else if (node.name === "HexNumber") {
const hexString = data.doc.sliceString(node.from, node.to);
const code = Number.parseInt(hexString, 16);
const parentNode = node.node.parent;
if (parentNode?.type.name === "CompoundLiteral") {
current.compounds ??= [];
current.compounds.push({
range: [parentNode.from, parentNode.to],
value: code,
actions: [],
valid: true, // TODO: validate compound literal
});
} else {
const valid = !(Number.isNaN(code) || code < 0 || code > 1023);
actions.push({
code,
info: codes.get(code),
explicit: true,
valid,
range: actionRange!,
});
}
} else if (
node.name === "ActionId" ||
node.name === "SingleLetter" ||
node.name === "EscapedLetter"
) {
const id = data.doc.sliceString(node.from, node.to);
const info = ids.get(id);
const value: ActionMeta = {
code: info?.code ?? Number.NaN,
info,
valid: info !== undefined,
range: actionRange!,
};
if (node.name === "ActionId") {
value.explicit = true;
}
actions.push(value);
}
},
(node) => {
if (node.name === "Chord") {
result.push(current);
if (current.phrase) {
current.phrase.actions = actions;
current.phrase.value = actions.map(({ code }) => code);
current.phrase.valid = actions.every(({ valid }) => valid);
current.phrase.hasConcatenator = hasConcatenator(
current.phrase.value,
codes,
);
}
current.valid =
(current.phrase?.valid ?? false) && (current.input?.valid ?? false);
if (!current.valid) {
current.disabled = true;
}
} else if (node.name === "CompoundInput") {
const lastCompound = current.compounds?.at(-1);
tree.cursor().iterate(
(node) => {
if (node.name === "Action") {
actionRange = [node.from, node.to];
} else if (node.name === "ChordPhrase") {
current.phrase = {
range: [node.from, node.to],
value: [],
valid: true,
actions: [],
hasConcatenator: false,
};
} else if (node.name === "Chord") {
current = { range: [node.from, node.to], valid: false };
} else if (node.name === "ActionString") {
actions = [];
} else if (node.name === "HexNumber") {
const hexString = sliceString(node.from, node.to);
const code = Number.parseInt(hexString, 16);
const parentNode = node.node.parent;
if (parentNode?.type.name === "CompoundLiteral") {
current.compounds ??= [];
current.compounds.push({
range: [node.from, node.to],
value: hashChord(
composeChordInput(
actions.map(({ code }) => code),
lastCompound?.value,
),
),
actions,
valid:
willBeValidChordInput(
actions.length,
lastCompound !== undefined,
) && actions.every(({ valid }) => valid),
range: [parentNode.from, parentNode.to],
value: code,
actions: [],
valid: true, // TODO: validate compound literal
});
} else if (node.name === "ChordInput") {
const lastCompound = current.compounds?.at(-1);
current.input = {
range: [node.from, node.to],
value: composeChordInput(
} else {
const valid = !(Number.isNaN(code) || code < 0 || code > 1023);
actions.push({
code,
info: codes.get(code),
explicit: true,
valid,
range: actionRange!,
});
}
} else if (
node.name === "ActionId" ||
node.name === "SingleLetter" ||
node.name === "EscapedLetter"
) {
const id = sliceString(node.from, node.to);
const info = ids.get(id);
const value: ActionMeta = {
code: info?.code ?? Number.NaN,
info,
valid: info !== undefined,
range: actionRange!,
};
if (node.name === "ActionId") {
value.explicit = true;
}
actions.push(value);
}
},
(node) => {
if (node.name === "Chord") {
result.push(current);
if (current.phrase) {
current.phrase.actions = actions;
current.phrase.value = actions.map(({ code }) => code);
current.phrase.valid = actions.every(({ valid }) => valid);
current.phrase.hasConcatenator = hasConcatenator(
current.phrase.value,
codes,
);
}
current.valid =
(current.phrase?.valid ?? false) && (current.input?.valid ?? false);
if (!current.valid) {
current.disabled = true;
}
} else if (node.name === "CompoundInput") {
const lastCompound = current.compounds?.at(-1);
current.compounds ??= [];
current.compounds.push({
range: [node.from, node.to],
value: hashChord(
composeChordInput(
actions.map(({ code }) => code),
lastCompound?.value,
),
valid:
willBeValidChordInput(
actions.length,
lastCompound !== undefined,
) && actions.every(({ valid }) => valid),
actions,
};
}
},
);
),
actions,
valid:
willBeValidChordInput(actions.length, lastCompound !== undefined) &&
actions.every(({ valid }) => valid),
});
} else if (node.name === "ChordInput") {
const lastCompound = current.compounds?.at(-1);
current.input = {
range: [node.from, node.to],
value: composeChordInput(
actions.map(({ code }) => code),
lastCompound?.value,
),
valid:
willBeValidChordInput(actions.length, lastCompound !== undefined) &&
actions.every(({ valid }) => valid),
actions,
};
}
},
);
console.timeEnd("parseChordTree");
return result;
}
function resolveChordOverrides(chords: ChordMeta[]) {
function resolveChordOverrides(chords: ChordMeta[]): Map<string, ChordMeta> {
console.time("resolveOverrides");
const seen = new Map<string, ChordMeta>();
for (const info of chords) {
@@ -176,9 +155,10 @@ function resolveChordOverrides(chords: ChordMeta[]) {
}
}
console.timeEnd("resolveOverrides");
return seen;
}
function resolveChordAliases(chords: ChordMeta[]) {
function resolveChordAliases(chords: ChordMeta[]): Map<string, ChordMeta[]> {
console.time("resolveAliases");
const aliases = new Map<string, ChordMeta[]>();
for (const info of chords) {
@@ -188,17 +168,20 @@ function resolveChordAliases(chords: ChordMeta[]) {
list.push(info);
aliases.set(key, list);
}
for (const aliasList of aliases.values()) {
if (aliasList.length > 1) {
for (const info of aliasList) {
info.aliases = aliasList.filter((i) => i !== info);
for (const [key, value] of aliases) {
if (value.length <= 1) {
aliases.delete(key);
} else {
for (const info of value) {
info.aliases = value.filter((i) => i !== info);
}
}
}
console.timeEnd("resolveAliases");
return aliases;
}
function resolveCompoundParents(chords: ChordMeta[]) {
function resolveCompoundParents(chords: ChordMeta[]): Map<number, ChordMeta> {
console.time("resolveCompoundParents");
const compounds = new Map<number, ChordMeta>();
for (const chord of chords) {
@@ -222,31 +205,32 @@ function resolveCompoundParents(chords: ChordMeta[]) {
}
}
console.timeEnd("resolveCompoundParents");
return compounds;
}
export function resolveChanges(
chords: ChordMeta[],
inputs: Map<string, ChordMeta>,
deviceChords: CharaChordFile["chords"],
): CharaChordFile["chords"] {
): [CharaChordFile["chords"], Map<string, ChordMeta>] {
console.time("resolveChanges");
const removed: CharaChordFile["chords"] = [];
const info = new Map<string, ChordMeta>();
const exact = new Map<string, ChordMeta>();
for (const chord of chords) {
if (chord.input && chord.phrase && !chord.disabled) {
info.set(
exact.set(
JSON.stringify([chord.input.value, chord.phrase?.value ?? []]),
chord,
);
info.set(JSON.stringify(chord.input.value), chord);
}
}
for (const deviceChord of deviceChords) {
const exact = info.get(JSON.stringify(deviceChord));
if (exact) {
exact.phrase!.originalValue = exact.phrase!.value;
const exactMatch = exact.get(JSON.stringify(deviceChord));
if (exactMatch) {
exactMatch.phrase!.originalValue = exactMatch.phrase!.value;
continue;
}
const byInput = info.get(JSON.stringify(deviceChord[0]));
const byInput = inputs.get(JSON.stringify(deviceChord[0]));
if (byInput) {
byInput.phrase!.originalValue = deviceChord[1];
continue;
@@ -255,54 +239,25 @@ export function resolveChanges(
}
console.timeEnd("resolveChanges");
return removed;
return [removed, exact];
}
export function parseCharaChords(
data: EditorState,
tree: Tree,
ids: Map<string, KeyInfo>,
codes: Map<number, KeyInfo>,
deviceChords: CharaChordFile["chords"],
sliceString: (from: number, to: number) => string,
): ParseResult {
console.time("parseTotal");
const chords = parseChordMeta(data, ids, codes);
resolveChordOverrides(chords);
resolveChordAliases(chords);
resolveCompoundParents(chords);
const removed = resolveChanges(chords, deviceChords);
/*for (let i = 0; i < metas.length; i++) {
const [, compound] = splitCompound(chords[i]![0]);
if (
compound !== undefined &&
(!compoundInputs.has(compound) || orphanCompounds.has(compound))
) {
metas[i]!.orphan = true;
}
}
const removed: CharaChordFile["chords"] = [];
for (let deviceChord of deviceChords) {
const key = JSON.stringify(deviceChord[0]);
if (!keys.has(key)) {
removed.push(deviceChord);
} else {
const index = keys.get(key)!;
const meta = metas[index]!;
if (
JSON.stringify(deviceChord[1]) !==
JSON.stringify(chords[keys.get(key)!]![1])
) {
meta.originalPhrase = deviceChord[1];
} else {
meta.unchanged = true;
}
}
}*/
const chords = parseChordMeta(tree, ids, codes, sliceString);
const inputs = resolveChordOverrides(chords);
const aliases = resolveChordAliases(chords);
const compounds = resolveCompoundParents(chords);
const [removed, exact] = resolveChanges(chords, inputs, deviceChords);
console.timeEnd("parseTotal");
console.log(chords);
return { chords, removed };
return { chords, removed, aliases, compounds, inputs, exact };
}

23
src/lib/chord-editor/changes-decorations-plugin.ts
View File

@@ -1,23 +0,0 @@
import { EditorView, Decoration, type DecorationSet } from "@codemirror/view";
import { StateField } from "@codemirror/state";
import { parsedChordsEffect } from "./parsed-chords-plugin";
const changedMark = Decoration.mark({ class: "cm-changed" });
const chordMetaMark = StateField.define<DecorationSet>({
create() {
return Decoration.none;
},
update(decorations, tr) {
const newChords = tr.effects.findLast((e) => e.is(parsedChordsEffect));
if (!newChords) {
return decorations.map(tr.changes);
}
return newChords.value.meta.map(meta => {
if (meta.originalPhrase) {
return underlineMark.range(meta.from, meta.to);
}
});
},
provide: (f) => EditorView.decorations.from(f),
});

44
src/lib/chord-editor/changes-panel.svelte.ts Normal file
View File

@@ -0,0 +1,44 @@
import { EditorView, showPanel, type Panel } from "@codemirror/view";
import { parsedChordsField } from "./parsed-chords-plugin";
import { mount, unmount } from "svelte";
import ChangesPanel from "./ChangesPanel.svelte";
function changesPanelFunc(view: EditorView): Panel {
let dom = document.createElement("div");
dom.style.display = "contents";
let viewState = $state.raw(view);
let parsed = $state.raw(view.state.field(parsedChordsField));
let component: {};
return {
dom,
mount() {
component = mount(ChangesPanel, {
target: dom,
props: {
get parsed() {
return parsed;
},
get view() {
return viewState;
},
},
});
},
update: (update) => {
if (
update.startState.field(parsedChordsField) !==
update.state.field(parsedChordsField)
) {
console.log("update changes panel");
parsed = update.state.field(parsedChordsField);
}
},
destroy() {
unmount(component);
},
};
}
export function changesPanel() {
return showPanel.of(changesPanelFunc);
}

39
src/lib/chord-editor/changes-panel.ts
View File

@@ -1,39 +0,0 @@
import type { EditorState } from "@codemirror/state";
import { EditorView, showPanel, type Panel } from "@codemirror/view";
import { parsedChordsField } from "./parsed-chords-plugin";
function getChanges(state: EditorState): string {
const parsed = state.field(parsedChordsField);
const added = parsed.chords.reduce(
(acc, chord) =>
acc + (chord.phrase && chord.phrase.originalValue === undefined ? 1 : 0),
0,
);
const changed = parsed.chords.reduce(
(acc, chord) =>
acc +
(chord.phrase &&
chord.phrase.originalValue &&
chord.phrase.originalValue !== chord.phrase.value
? 1
: 0),
0,
);
const removed = parsed.removed.length;
return `+${added} ~${changed} -${removed} (${parsed.chords.length} total)`;
}
function wordCountPanel(view: EditorView): Panel {
let dom = document.createElement("div");
dom.textContent = getChanges(view.state);
return {
dom,
update(update) {
dom.textContent = getChanges(update.state);
},
};
}
export function changesPanel() {
return showPanel.of(wordCountPanel);
}

34
src/lib/chord-editor/chord-sync-plugin.ts
View File

@@ -1,28 +1,40 @@
import type { CharaChordFile } from "$lib/share/chara-file";
import { StateEffect, StateField } from "@codemirror/state";
import { actionMetaPlugin } from "./action-meta-plugin";
import { syncCharaChords } from "./chord-sync";
import type { EditorView } from "@codemirror/view";
export const chordSyncEffect = StateEffect.define<CharaChordFile["chords"]>();
const chordSyncEffect = StateEffect.define<CharaChordFile["chords"]>();
export function editorSyncChords(
view: EditorView,
newDeviceChords: CharaChordFile["chords"],
) {
const { ids, codes } = view.state.field(actionMetaPlugin.field);
const oldDeviceChords = view.state.field(deviceChordField);
const changes = syncCharaChords(
oldDeviceChords,
newDeviceChords,
ids,
codes,
view.state.doc.toString(),
);
view.dispatch({
effects: chordSyncEffect.of(newDeviceChords),
changes,
});
}
export const deviceChordField = StateField.define<CharaChordFile["chords"]>({
create() {
return [];
},
update(value, transaction) {
// save initial device chords
// compare new device chords with initial device chords
// take changed/new/removed chords
// compare current editor chords with initial device chords
// compare two change sets
// apply removals if the chord didn't change on either end
// apply
return (
transaction.effects.findLast((it) => it.is(chordSyncEffect))?.value ??
value
);
},
compare(a, b) {
return JSON.stringify(a) === JSON.stringify(b);
},
toJSON(value) {
return value;
},

135
src/lib/chord-editor/chord-sync.spec.ts Normal file
View File

@@ -0,0 +1,135 @@
import type { KeyInfo } from "$lib/serial/keymap-codes";
import type { CharaChordFile } from "$lib/share/chara-file";
import { describe, it, expect } from "vitest";
import { parseCharaChords } from "./action-serializer";
import { parser } from "./chords.grammar";
import { syncCharaChords } from "./chord-sync";
import { Text } from "@codemirror/state";
const asciiInfo: KeyInfo[] = Array.from(
{ length: 0x7f - 0x20 },
(_, i) =>
({
code: i + 0x20,
id: String.fromCharCode(i + 0x20),
}) satisfies KeyInfo,
);
const asciiCodes = new Map<number, KeyInfo>(
asciiInfo.map((info) => [info.code, info]),
);
const asciiIds = new Map<string, KeyInfo>(
asciiInfo.map((info) => [info.id!, info]),
);
function chords(...strings: string[]): string {
return strings.join("\n");
}
function backup(doc: string): CharaChordFile["chords"] {
const tree = parser.parse(doc);
const result = parseCharaChords(tree, asciiIds, asciiCodes, [], (from, to) =>
doc.slice(from, to),
);
return result.chords
.filter((chord) => !chord.disabled)
.map((chord) => [chord.input?.value ?? [], chord.phrase?.value ?? []]);
}
function expectSync(options: {
org: string[];
mod: string[];
cur: string[];
exp: string[];
}) {
expect(
syncCharaChords(
backup(chords(...options.org)),
backup(chords(...options.mod)),
asciiIds,
asciiCodes,
chords(...options.cur),
)
.apply(Text.of(options.cur))
.toString()
.replace(/\n$/, ""),
).toEqual(chords(...options.exp));
}
describe("chord sync", function () {
it("should not do anything when no changes happened", function () {
expectSync({
org: ["abc=>def", "def=>ghi", "jkl=>mno"],
mod: ["abc=>def", "def=>ghi", "jkl=>mno"],
cur: ["abc=>def", "def=>ghi", "jkl=>mno"],
exp: ["abc=>def", "def=>ghi", "jkl=>mno"],
});
});
it("should not touch the doc if device chords are unchanged", function () {
expectSync({
org: ["abc=>def", "def=>ghi", "jkl=>mno"],
mod: ["abc=>def", "def=>ghi", "jkl=>mno"],
cur: ["ab=>def", "def=>gh"],
exp: ["ab=>def", "def=>gh"],
});
});
it("should apply removals to unchanged chords only", function () {
expectSync({
org: ["abc=>def", "def=>ghi", "jkl=>mno", "mno=>pqr"],
mod: ["abc=>def"],
cur: ["abc=>def", "def=>ghij", "jkl=>mno", "mno=>pqr"],
exp: ["abc=>def", "def=>ghij"],
});
});
it("should keep user modifications over device modifications", function () {
expectSync({
org: ["abc=>def", "def=>ghi", "jkl=>mno", "mno=>pqr"],
mod: ["abc=>def", "def=>ghijk", "jkl=>mnop", "mno=>pqr"],
cur: ["abc=>def", "def=>ghij", "jkl=>mno", "mno=>pqr"],
exp: ["abc=>def", "def=>ghij", "jkl=>mnop", "mno=>pqr"],
});
});
it("should handle complex changes", function () {
expectSync({
org: [
"unchanged=>unchanged",
"usermod=>usermod",
"devmod=>devmod",
"userremoval=>userremoval",
"devremoval=>devremoval",
"devremusermod=>devremusermod",
],
mod: [
"unchanged=>unchanged",
"devadd=>devadd",
"usermod=>usermod",
"userremoval=>userremoval",
"devmod=>devmod1",
"sameadd=>sameadd",
],
cur: [
"useradd1=>useradd1",
"unchanged=>unchanged",
"usermod=>use",
"devremusermod=>xyz",
"devmod=>devmod",
"sameadd=>sameadd",
"devremoval=>devremoval",
"useradd=>useradd",
],
exp: [
"devadd=>devadd",
"useradd1=>useradd1",
"unchanged=>unchanged",
"usermod=>use",
"devremusermod=>xyz",
"devmod=>devmod1",
"sameadd=>sameadd",
"useradd=>useradd",
],
});
});
});

130
src/lib/chord-editor/chord-sync.ts Normal file
View File

@@ -0,0 +1,130 @@
import type { KeyInfo } from "$lib/serial/keymap-codes";
import { ChangeSet, type ChangeSpec } from "@codemirror/state";
import { parseCharaChords } from "./action-serializer";
import { parser } from "./chords.grammar";
import type { CharaChordFile } from "$lib/share/chara-file";
import { splitCompound } from "$lib/serial/chord";
function canUseIdAsString(info: KeyInfo): boolean {
return !!info.id && /^[^>\n]+$/.test(info.id);
}
export function actionToValue(code: number, info?: KeyInfo) {
if (info && info.id?.length === 1)
return /^[<>|\\\s]$/.test(info.id) ? `\\${info.id}` : info.id;
if (!info || !canUseIdAsString(info))
return `<0x${code.toString(16).padStart(2, "0")}>`;
return `<${info.id}>`;
}
function canonicalInputSorting(input: number[], phrase: number[]): number[] {
const tail = [...input];
const prefix = phrase.filter((code) => {
const index = tail.indexOf(code);
if (index !== -1) {
tail.splice(index, 1);
return true;
}
return false;
});
return [...prefix, ...tail];
}
export interface ChangeType {
from: number;
to: number;
insert: string;
}
export function syncCharaChords(
originalDeviceChords: CharaChordFile["chords"],
newDeviceChords: CharaChordFile["chords"],
ids: Map<string, KeyInfo>,
codes: Map<number, KeyInfo>,
doc: string,
): ChangeSet {
const tree = parser.parse(doc);
const result = parseCharaChords(
tree,
ids,
codes,
originalDeviceChords,
(from, to) => doc.slice(from, to),
);
const exactChords = new Map<string, number>();
for (const chord of originalDeviceChords) {
const key = JSON.stringify(chord);
const count = exactChords.get(key) ?? 0;
exactChords.set(key, count + 1);
}
const changes: ChangeType[] = [];
const inputModified = new Set<string>();
for (const chord of newDeviceChords) {
const key = JSON.stringify(chord);
const count = exactChords.get(key) ?? 0;
if (count > 0) {
exactChords.set(key, count - 1);
continue;
}
const inputKey = JSON.stringify(chord[0]);
inputModified.add(inputKey);
const byInput = result.inputs.get(inputKey);
if (byInput) {
if (
byInput.phrase?.originalValue &&
byInput.phrase.originalValue === byInput.phrase.value
) {
changes.push({
from: byInput.phrase.range[0],
to: byInput.phrase.range[1],
insert: chord[1]
.map((code) => actionToValue(code, codes.get(code)))
.join(""),
});
}
} else {
const [inputs, compound] = splitCompound(chord[0]);
const sortedInput = canonicalInputSorting(inputs, chord[1]);
changes.push({
from: 0,
to: 0,
insert:
(compound ? `|0x${compound.toString(16)}|` : "") +
sortedInput
.map((code) => actionToValue(code, codes.get(code)))
.join("") +
"=>" +
chord[1]
.map((code) => actionToValue(code, codes.get(code)))
.join("") +
"\n",
});
}
}
changes.push(
...exactChords
.entries()
.filter(([, count]) => count > 0)
.map(([key]) => result.exact.get(key))
.filter((chord) => chord !== undefined)
.filter(
(chord) =>
chord.input && !inputModified.has(JSON.stringify(chord.input.value)),
)
.map(
(chord) =>
({
from: chord.range[0],
to: chord.range[1],
insert: "",
}) satisfies ChangeSpec,
),
);
return ChangeSet.of(changes, doc.length);
}

4
src/lib/chord-editor/parse-meta.ts
View File

@@ -132,6 +132,10 @@ export function mapChordMeta(chord: ChordMeta, change: ChangeDesc): ChordMeta {
export interface ParseResult {
chords: ChordMeta[];
removed: CharaChordFile["chords"];
aliases: Map<string, ChordMeta[]>;
compounds: Map<number, ChordMeta>;
inputs: Map<string, ChordMeta>;
exact: Map<string, ChordMeta>;
}
export function mapParseResult(

12
src/lib/chord-editor/parsed-chords-plugin.ts
View File

@@ -10,6 +10,10 @@ export const parsedChordsField = StateField.define<ParseResult>({
return {
chords: [],
removed: [],
aliases: new Map(),
compounds: new Map(),
inputs: new Map(),
exact: new Map(),
};
},
update(value, transaction) {
@@ -23,7 +27,13 @@ export const parsedChordsField = StateField.define<ParseResult>({
codes !== transaction.startState.field(actionMetaPlugin.field).codes ||
deviceChords !== transaction.startState.field(deviceChordField)
) {
return parseCharaChords(transaction.state, ids, codes, deviceChords);
return parseCharaChords(
syntaxTree(transaction.state),
ids,
codes,
deviceChords,
(from, to) => transaction.state.doc.sliceString(from, to),
);
}
return mapParseResult(value, transaction.changes);
},

88
src/lib/chord-editor/persistent-state-plugin.ts
View File

@@ -27,11 +27,8 @@ import { syntaxHighlighting } from "@codemirror/language";
import { deviceChordField } from "./chord-sync-plugin";
import { actionMetaPlugin } from "./action-meta-plugin";
import { parsedChordsField } from "./parsed-chords-plugin";
import { changesPanel } from "./changes-panel";
import {
parseCompressed,
stringifyCompressed,
} from "$lib/serial/serialization";
import { changesPanel } from "./changes-panel.svelte";
import { searchKeymap } from "@codemirror/search";
const serializedFields = {
history: historyField,
@@ -44,11 +41,8 @@ export interface EditorConfig {
autocomplete(query: string | undefined): void;
}
export async function loadPersistentState(
params: EditorConfig,
): Promise<EditorState> {
const stored = localStorage.getItem(params.storeName);
const config = {
export function createConfig(params: EditorConfig) {
return {
extensions: [
actionMetaPlugin.plugin,
deviceChordField,
@@ -86,14 +80,20 @@ export async function loadPersistentState(
borderColor: "var(--md-sys-color-on-surface)",
},
}),
keymap.of([...standardKeymap, ...historyKeymap]),
keymap.of([...standardKeymap, ...historyKeymap, ...searchKeymap]),
],
} satisfies EditorStateConfig;
}
export async function loadPersistentState(
params: EditorConfig,
): Promise<EditorState> {
const stored = await getState(params.storeName);
const config = createConfig(params);
if (stored) {
try {
const parsed = await parseCompressed(new Blob([stored]));
return EditorState.fromJSON(parsed, config, serializedFields);
return EditorState.fromJSON(stored, config, serializedFields);
} catch (e) {
console.error("Failed to parse persistent state:", e);
}
@@ -109,13 +109,10 @@ export function persistentStatePlugin(storeName: string) {
.pipe(
debounceTime(500),
mergeMap(() =>
stringifyCompressed(this.view.state.toJSON(serializedFields)),
storeState(storeName, this.view.state.toJSON(serializedFields)),
),
mergeMap((blob) => blob.text()),
)
.subscribe((value) => {
localStorage.setItem(storeName, value);
});
.subscribe(() => {});
constructor(readonly view: EditorView) {}
@@ -131,3 +128,58 @@ export function persistentStatePlugin(storeName: string) {
},
);
}
const dbName = "chord-state";
const dbVersion = 1;
const storeName = "state";
async function openDb(): Promise<IDBDatabase> {
const dbRequest = indexedDB.open(dbName, dbVersion);
return new Promise<IDBDatabase>((resolve, reject) => {
dbRequest.onsuccess = () => resolve(dbRequest.result);
dbRequest.onerror = () => reject(dbRequest.error);
dbRequest.onupgradeneeded = () => {
const db = dbRequest.result;
if (!db.objectStoreNames.contains(storeName)) {
db.createObjectStore(storeName);
}
};
});
}
async function getState<T>(name: string): Promise<T | undefined> {
const db = await openDb();
try {
const readTransaction = db.transaction([storeName], "readonly");
const store = readTransaction.objectStore(storeName);
const itemRequest = store.get(name);
const result = await new Promise<T | undefined>((resolve) => {
itemRequest.onsuccess = () => resolve(itemRequest.result);
itemRequest.onerror = () => resolve(undefined);
});
return result;
} catch (e) {
console.error(e);
return undefined;
} finally {
db.close();
}
}
async function storeState<T>(name: string, state: T): Promise<void> {
const db = await openDb();
try {
const putTransaction = db.transaction([storeName], "readwrite");
const putStore = putTransaction.objectStore(storeName);
const putRequest = putStore.put(state, name);
await new Promise<void>((resolve, reject) => {
putRequest.onsuccess = () => resolve();
putRequest.onerror = () => reject(putRequest.error);
});
putTransaction.commit();
} catch (e) {
console.error(e);
} finally {
db.close();
}
}

58
src/lib/chord-editor/save-chords.ts Normal file
View File

@@ -0,0 +1,58 @@
import type { EditorView } from "@codemirror/view";
import { parser } from "./chords.grammar";
import { parseCharaChords } from "./action-serializer";
import { actionMetaPlugin } from "./action-meta-plugin";
import { deviceChordField } from "./chord-sync-plugin";
import type { CharaChordFile } from "$lib/share/chara-file";
export interface SaveChordsTask {
remove: number[][];
set: [number[], number[]][];
}
export function createSaveTask(view: EditorView): SaveChordsTask {
const tree = parser.parse(view.state.doc.toString());
const { ids, codes } = view.state.field(actionMetaPlugin.field);
const deviceChords = view.state.field(deviceChordField);
const result = parseCharaChords(tree, ids, codes, deviceChords, (from, to) =>
view.state.doc.sliceString(from, to),
);
return {
remove: result.removed.map((chord) => chord[0]),
set: result.chords
.filter(
(chord) =>
!chord.disabled &&
(!chord.phrase ||
chord.phrase?.originalValue !== chord.phrase?.value),
)
.map((chord) => [chord.input?.value ?? [], chord.phrase?.value ?? []]),
};
}
export function applySaveTask(
backup: CharaChordFile["chords"],
task: SaveChordsTask,
): CharaChordFile["chords"] {
const newBackup = [...backup];
for (const input of task.remove) {
const index = newBackup.findIndex((chord) => {
return JSON.stringify(chord[0]) === JSON.stringify(input);
});
if (index !== -1) {
newBackup.splice(index, 1);
}
}
for (const [input, phrase] of task.set) {
const index = newBackup.findIndex((chord) => {
return JSON.stringify(chord[0]) === JSON.stringify(input);
});
if (index !== -1) {
newBackup[index] = [input, phrase];
} else {
newBackup.push([input, phrase]);
}
}
return newBackup;
}

2
src/lib/components/layout/ActionList.svelte
View File

@@ -14,7 +14,7 @@
import type { KeymapCategory } from "$lib/meta/types/actions";
import Action from "../Action.svelte";
import { isVerbose } from "../verbose-action";
import { actionToValue } from "$lib/chord-editor/action-serializer";
import { actionToValue } from "$lib/chord-editor/chord-sync";
let {
currentAction = undefined,

101
src/lib/learn/chords.ts
View File

@@ -1,101 +0,0 @@
import { osLayout } from "$lib/os-layout";
import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
import { persistentWritable } from "$lib/storage";
import { type ChordInfo, chords } from "$lib/undo-redo";
import { derived } from "svelte/store";
export const words = derived(
[chords, osLayout, KEYMAP_CODES],
([chords, layout, KEYMAP_CODES]) =>
new Map<string, ChordInfo>(
chords
.map((chord) => ({
chord,
output: chord.phrase.map((action) =>
layout.get(KEYMAP_CODES.get(action)?.keyCode ?? ""),
),
}))
.filter(({ output }) => output.every((it) => !!it))
.map(({ chord, output }) => [output.join("").trim(), chord] as const),
),
);
interface Score {
lastTyped: number;
score: number;
total: number;
}
export const scores = persistentWritable<Record<string, Score>>("scores", {});
export const learnConfigDefault = {
maxScore: 3,
minScore: -3,
scoreBlend: 0.5,
weakRate: 0.8,
weakBoost: 0.5,
maxWeak: 3,
newRate: 0.3,
initialNewRate: 0.9,
initialCount: 10,
};
export const learnConfigStored = persistentWritable<
Partial<typeof learnConfigDefault>
>("learn-config", {});
export const learnConfig = derived(learnConfigStored, (config) => ({
...learnConfigDefault,
...config,
}));
let lastWord: string | undefined;
function shuffle<T>(array: T[]): T[] {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j]!, array[i]!];
}
return array;
}
function randomLog2<T>(array: T[], max = array.length): T | undefined {
return array[
Math.floor(Math.pow(2, Math.log2(Math.random() * Math.log2(max))))
];
}
export const nextWord = derived(
[words, scores, learnConfig],
([words, scores, config]) => {
const values = Object.entries(scores).filter(([it]) => it !== lastWord);
values.sort(([, a], [, b]) => a.score - b.score);
const weakCount =
(values.findIndex(([, { score }]) => score > 0) + 1 ||
values.length + 1) - 1;
const weak = randomLog2(values, weakCount);
if (weak && Math.random() / weakCount < config.weakRate) {
lastWord = weak[0];
return weak[0];
}
values.sort(([, { lastTyped: a }], [, { lastTyped: b }]) => a - b);
const recent = randomLog2(values);
const newRate =
values.length < config.initialCount
? config.initialNewRate
: config.newRate;
if (
recent &&
(Math.random() < Math.min(1, Math.max(0, weakCount / config.maxWeak)) ||
Math.random() > newRate)
) {
lastWord = recent[0];
return recent[0];
}
const newWord = shuffle(Array.from(words.keys())).find((it) => !scores[it]);
const word = newWord || recent?.[0] || weak?.[0];
lastWord = word;
return word;
},
);

11
src/lib/learn/stats.ts
View File

@@ -1,11 +0,0 @@
import { persistentWritable } from "$lib/storage";
interface ChordStats {
level: number;
lastUprank: number;
}
export const chordStats = persistentWritable<Record<string, ChordStats>>(
"chord-stats",
{},
);

115
src/lib/undo-redo.ts
View File

@@ -1,16 +1,9 @@
import { persistentWritable } from "$lib/storage";
import { derived } from "svelte/store";
import { hashChord, type Chord } from "$lib/serial/chord";
import {
deviceChords,
deviceLayout,
deviceSettings,
} from "$lib/serial/connection";
import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
import { deviceLayout, deviceSettings } from "$lib/serial/connection";
export enum ChangeType {
Layout,
Chord,
Setting,
}
@@ -22,14 +15,6 @@ export interface LayoutChange {
profile?: number;
}
export interface ChordChange {
type: ChangeType.Chord;
deleted?: true;
id: number[];
actions: number[];
phrase: number[];
}
export interface SettingChange {
type: ChangeType.Setting;
id: number;
@@ -42,20 +27,18 @@ export interface ChangeInfo {
isCommitted?: boolean;
}
export type Change = LayoutChange | ChordChange | SettingChange;
export type Change = LayoutChange | SettingChange;
export const changes = persistentWritable<Change[][]>("changes", []);
export interface Overlay {
layout: Array<Array<Map<number, number> | undefined> | undefined>;
chords: Map<string, Chord & { deleted: boolean }>;
settings: Array<Map<number, number> | undefined>;
}
export const overlay = derived(changes, (changes) => {
const overlay: Overlay = {
layout: [],
chords: new Map(),
settings: [],
};
@@ -71,13 +54,6 @@ export const overlay = derived(changes, (changes) => {
change.action,
);
break;
case ChangeType.Chord:
overlay.chords.set(JSON.stringify(change.id), {
actions: change.actions,
phrase: change.phrase,
deleted: change.deleted ?? false,
});
break;
case ChangeType.Setting:
change.profile ??= 0;
overlay.settings[change.profile] ??= new Map();
@@ -113,90 +89,3 @@ export const layout = derived([overlay, deviceLayout], ([overlay, profiles]) =>
),
),
);
export type ChordInfo = Chord &
ChangeInfo & {
phraseChanged: boolean;
actionsChanged: boolean;
sortBy: string;
} & {
id: number[];
deleted: boolean;
};
export const chords = derived(
[overlay, deviceChords, KEYMAP_CODES],
([overlay, chords, codes]) => {
const newChords = new Set(overlay.chords.keys());
const changedChords = chords.map<ChordInfo>((chord) => {
const id = JSON.stringify(chord.actions);
if (overlay.chords.has(id)) {
newChords.delete(id);
const changedChord = overlay.chords.get(id)!;
return {
id: chord.actions,
// use the old phrase for stable editing
sortBy: chord.phrase.map((it) => codes.get(it)?.id ?? it).join(),
actions: changedChord.actions,
phrase: changedChord.phrase,
actionsChanged: id !== JSON.stringify(changedChord.actions),
phraseChanged:
JSON.stringify(chord.phrase) !==
JSON.stringify(changedChord.phrase),
isApplied: false,
deleted: changedChord.deleted,
};
} else {
return {
id: chord.actions,
sortBy: chord.phrase.map((it) => codes.get(it)?.id ?? it).join(),
actions: chord.actions,
phrase: chord.phrase,
phraseChanged: false,
actionsChanged: false,
isApplied: true,
deleted: false,
};
}
});
for (const id of newChords) {
const chord = overlay.chords.get(id)!;
changedChords.push({
sortBy: "",
isApplied: false,
actionsChanged: true,
phraseChanged: false,
deleted: chord.deleted,
id: JSON.parse(id),
phrase: chord.phrase,
actions: chord.actions,
});
}
return changedChords.sort(({ sortBy: a }, { sortBy: b }) =>
a.localeCompare(b),
);
},
);
export const duplicateChords = derived(chords, (chords) => {
const duplicates = new Set<string>();
const seen = new Set<string>();
for (const chord of chords) {
const key = JSON.stringify(chord.actions);
if (seen.has(key)) {
duplicates.add(key);
} else {
seen.add(key);
}
}
return duplicates;
});
export const chordHashes = derived(
chords,
(chords) =>
new Map(chords.map((chord) => [hashChord(chord.actions), chord] as const)),
);

9
src/routes/(app)/PageTransition.svelte
View File

@@ -13,14 +13,7 @@
let isNavigating = $state(false);
const routeOrder = [
"/config",
"/learn",
"/docs",
"/editor",
"/chat",
"/plugin",
];
const routeOrder = ["/config", "/docs", "/editor", "/chat", "/plugin"];
function routeIndex(route: string | undefined): number {
return routeOrder.findIndex((it) => route?.startsWith(it));

7
src/routes/(app)/Sidebar.svelte
View File

@@ -39,7 +39,12 @@
[
{ href: "/editor", icon: "edit_document", title: "Editor", wip: true },
{ href: "/chat", icon: "chat", title: "Chat", wip: true },
{ href: "/learn", icon: "school", title: "Learn", wip: true },
{
href: "https://adventure.charachorder.io/",
icon: "school",
title: "Learn",
external: true,
},
],
/*[
{ href: "/plugin", icon: "code", title: "Plugin", wip: true },

125
src/routes/(app)/config/EditActions.svelte
View File

@@ -6,18 +6,15 @@
layout,
overlay,
settings,
duplicateChords,
} from "$lib/undo-redo";
import type { Change, ChordChange } from "$lib/undo-redo";
import type { Change } from "$lib/undo-redo";
import { fly } from "svelte/transition";
import { actionTooltip } from "$lib/title";
import {
deviceChords,
deviceLayout,
deviceSettings,
serialLog,
serialPort,
sync,
syncProgress,
syncStatus,
} from "$lib/serial/connection";
@@ -106,115 +103,7 @@
return true;
}
async function safeDeleteChord(actions: number[]): Promise<boolean> {
const port = $serialPort;
if (!port) return false;
try {
await port.deleteChord({ actions });
return true;
} catch (e) {
console.error(e);
try {
if ((await port.getChordPhrase(actions)) === undefined) {
return true;
}
} catch (e) {
console.error(e);
}
}
return false;
}
async function saveChords(progress: () => void): Promise<boolean> {
const port = $serialPort;
if (!port) return false;
let ok = true;
const empty = new Set<string>();
for (const [id, chord] of $overlay.chords) {
if (chord.actions.length === 0 || chord.phrase.length === 0) {
empty.add(id);
}
}
changes.update((changes) => {
changes.push([
...empty.keys().map(
(id) =>
({
type: ChangeType.Chord,
id: JSON.parse(id),
deleted: true,
actions: [],
phrase: [],
}) satisfies ChordChange,
),
]);
return changes;
});
await tick();
const deleted = new Set<string>();
const changed = new Map<string, number[]>();
for (const [id, chord] of $overlay.chords) {
if (!chord.deleted) continue;
if (await safeDeleteChord(JSON.parse(id))) {
deleted.add(id);
} else {
ok = false;
}
progress();
}
deviceChords.update((chords) =>
chords.filter((chord) => !deleted.has(JSON.stringify(chord.actions))),
);
deleted.clear();
await tick();
for (const [id, chord] of $overlay.chords) {
if (chord.deleted) continue;
if ($duplicateChords.has(JSON.stringify(chord.actions))) {
ok = false;
} else {
let skip = false;
if (id !== JSON.stringify(chord.actions)) {
if (await safeDeleteChord(JSON.parse(id))) {
deleted.add(id);
} else {
skip = true;
ok = false;
}
}
if (!skip) {
try {
await port.setChord({
actions: chord.actions,
phrase: chord.phrase,
});
deleted.add(JSON.stringify(chord.actions));
changed.set(JSON.stringify(chord.actions), chord.phrase);
} catch (e) {
console.error(e);
ok = false;
}
} else {
ok = false;
}
}
progress();
}
deviceChords.update((chords) => {
chords.filter((chord) => !deleted.has(JSON.stringify(chord.actions)));
for (const [id, phrase] of changed) {
chords.push({ actions: JSON.parse(id), phrase });
}
return chords;
});
await tick();
return ok;
}
async function save() {
let needsSync = false;
try {
const port = $serialPort;
if (!port) {
@@ -235,10 +124,8 @@
(acc, profile) => acc + (profile?.size ?? 0),
0,
);
const chordChanges = $overlay.chords.size;
needsSync = chordChanges > 0;
const needsCommit = settingChanges > 0 || layoutChanges > 0;
const progressMax = layoutChanges + settingChanges + chordChanges;
const progressMax = layoutChanges + settingChanges;
let progressCurrent = 0;
@@ -261,11 +148,9 @@
layoutSuccess = false;
}
}
let chordsSuccess = await saveChords(updateProgress);
if (layoutSuccess && settingsSuccess && chordsSuccess) {
if (layoutSuccess && settingsSuccess) {
changes.set([]);
needsSync = true;
} else {
throw new Error("Some changes could not be saved.");
}
@@ -280,10 +165,6 @@
} finally {
$syncStatus = "done";
}
if (needsSync) {
await sync();
}
}
let progressPopover: HTMLElement | undefined = $state();

644
src/routes/(app)/config/chords/+page.svelte
View File

@@ -1,468 +1,278 @@
<script lang="ts">
import { KEYMAP_CODES, type KeyInfo } from "$lib/serial/keymap-codes";
import FlexSearch, { type Index } from "flexsearch";
import LL from "$i18n/i18n-svelte";
import { actionTooltip } from "$lib/title";
import { onDestroy, onMount, setContext, tick } from "svelte";
import { changes, ChangeType, chords } from "$lib/undo-redo";
import type { ChordChange, ChordInfo } from "$lib/undo-redo";
import { derived, writable } from "svelte/store";
import ChordEdit from "./ChordEdit.svelte";
import { crossfade, fly } from "svelte/transition";
import ChordActionEdit from "./ChordActionEdit.svelte";
import { browser } from "$app/environment";
import { expoOut } from "svelte/easing";
import { osLayout } from "$lib/os-layout";
import randomTips from "$lib/assets/random-tips/en.json";
import { deviceMeta } from "$lib/serial/connection";
import { restoreFromFile } from "$lib/backup/backup";
import { EditorView } from "codemirror";
import "$lib/chord-editor/chords.grammar";
import { persistentWritable } from "$lib/storage";
import ActionList from "$lib/components/layout/ActionList.svelte";
import {
createConfig,
loadPersistentState,
} from "$lib/chord-editor/persistent-state-plugin";
import { parsedChordsField } from "$lib/chord-editor/parsed-chords-plugin";
import type { CharaChordFile } from "$lib/share/chara-file";
import { EditorState } from "@codemirror/state";
import { deviceChords } from "$lib/serial/connection";
import { editorSyncChords } from "$lib/chord-editor/chord-sync-plugin";
const resultSize = 38;
let results: HTMLElement;
const pageSize = writable(0);
let resizeObserver: ResizeObserver;
let queryFilter: string | undefined = $state(undefined);
let abortIndexing: (() => void) | undefined;
let progress = $state(0);
const rawCode = persistentWritable("chord-editor-raw-code", false);
const showEdits = persistentWritable("chord-editor-show-edits", true);
const denseSpacing = persistentWritable("chord-editor-spacing", false);
onMount(() => {
resizeObserver = new ResizeObserver(() => {
pageSize.set(Math.floor(results.clientHeight / resultSize));
});
pageSize.set(Math.floor(results.clientHeight / resultSize));
resizeObserver.observe(results);
});
let editor: HTMLDivElement | undefined = $state(undefined);
let view: EditorView | undefined = $state(undefined);
onDestroy(() => {
resizeObserver?.disconnect();
});
let index = new FlexSearch.Index();
let searchIndex = writable<Index | undefined>(undefined);
$effect(() => {
abortIndexing?.();
progress = 0;
buildIndex($chords, $osLayout, $KEYMAP_CODES).then(searchIndex.set);
});
function encodeChord(
chord: ChordInfo,
osLayout: Map<string, string>,
codes: Map<number, KeyInfo>,
onlyPhrase: boolean = false,
) {
const plainPhrase: string[] = [""];
const tags = new Set<string>();
const extraActions = new Set<string>();
const extraCodes = new Set<string>();
for (const actionCode of chord.phrase ?? []) {
const action = codes.get(actionCode);
if (!action) {
extraCodes.add(`0x${actionCode.toString(16)}`);
continue;
}
const osCode = action.keyCode && osLayout.get(action.keyCode);
const token = osCode?.length === 1 ? osCode : action.display || action.id;
if (!token) {
extraCodes.add(`0x${action.code.toString(16)}`);
continue;
}
if (
(token === "SPACE" || /^\s$/.test(token)) &&
plainPhrase.at(-1) !== ""
) {
plainPhrase.push("");
} else if (token.length === 1) {
plainPhrase[plainPhrase.length - 1] =
plainPhrase[plainPhrase.length - 1] + token;
} else {
extraActions.add(token);
}
}
if (chord.phrase?.[0] === 298) {
tags.add("suffix");
}
if (
["ARROW_LT", "ARROW_RT", "ARROW_UP", "ARROW_DN"].some((it) =>
extraActions.has(it),
)
) {
tags.add("cursor warp");
}
if (
["CTRL", "ALT", "GUI", "ENTER", "TAB"].some((it) => extraActions.has(it))
) {
tags.add("macro");
}
if (chord.actions[0] !== 0) {
tags.add("compound");
}
const input = chord.actions
.slice(chord.actions.lastIndexOf(0) + 1)
.map((it) => {
const info = codes.get(it);
if (!info) return `0x${it.toString(16)}`;
const osCode = info.keyCode && osLayout.get(info.keyCode);
const result = osCode?.length === 1 ? osCode : info.id;
return result ?? `0x${it.toString(16)}`;
});
if (onlyPhrase) {
return plainPhrase.join(" ");
}
return [
...plainPhrase,
`+${input.join("+")}`,
...tags,
...extraActions,
...extraCodes,
].join(" ");
}
async function buildIndex(
chords: ChordInfo[],
osLayout: Map<string, string>,
codes: Map<number, KeyInfo>,
): Promise<Index> {
if (chords.length === 0 || !browser) return index;
index = new FlexSearch.Index({
tokenize: "full",
encode(phrase: string) {
return phrase.split(/\s+/).flatMap((it) => {
if (/^[A-Z_]+$/.test(it)) {
return it;
}
if (it.startsWith("+")) {
return it
.slice(1)
.split("+")
.map((it) => `+${it}`);
}
return it.toLowerCase();
});
if (!editor) return;
const viewPromise = loadPersistentState({
rawCode: $rawCode,
storeName: "chord-editor-state-storage",
autocomplete(query) {
queryFilter = query;
},
});
let abort = false;
abortIndexing = () => {
abort = true;
};
const batchSize = 200;
const batches = Math.ceil(chords.length / batchSize);
for (let b = 0; b < batches; b++) {
if (abort) return index;
const start = b * batchSize;
const end = Math.min((b + 1) * batchSize, chords.length);
const batch = chords.slice(start, end);
const promises = batch.map((chord, i) => {
const chordIndex = start + i;
progress = chordIndex + 1;
if ("phrase" in chord) {
const encodedChord = encodeChord(chord, osLayout, codes);
return index.addAsync(chordIndex, encodedChord);
}
return Promise.resolve();
});
await Promise.all(promises);
}
return index;
}
const searchFilter = writable<number[] | undefined>(undefined);
let currentSearchQuery = $state("");
async function search(index: Index, event: Event) {
const query = (event.target as HTMLInputElement).value;
currentSearchQuery = query;
searchFilter.set(
query && searchIndex
? ((await index.searchAsync(query)) as number[])
: undefined,
}).then(
(state) =>
new EditorView({
parent: editor,
state,
}),
);
page = 0;
}
viewPromise.then((it) => (view = it));
return () => viewPromise.then((it) => it.destroy());
});
// Re-run search when chords change to fix stale indices
$effect(() => {
if (currentSearchQuery && $searchIndex) {
search($searchIndex, { target: { value: currentSearchQuery } } as any);
console.log("Syncing chords to editor");
if (view) {
editorSyncChords(
view,
$deviceChords.map((chord) => [chord.actions, chord.phrase] as const),
);
}
});
function insertChord(actions: number[]) {
const id = JSON.stringify(actions);
if ($chords.some((it) => JSON.stringify(it.actions) === id)) {
alert($LL.configure.chords.DUPLICATE());
return;
}
changes.update((changes) => {
changes.push([
{
type: ChangeType.Chord,
id: actions,
actions,
phrase: [],
},
]);
return changes;
});
}
function downloadVocabulary() {
const vocabulary = new Set(
$chords.map((it) =>
"phrase" in it
? encodeChord(it, $osLayout, $KEYMAP_CODES, true).trim()
: "",
function regenerate() {
if (!view) return;
view.setState(
EditorState.create(
createConfig({
rawCode: $rawCode,
storeName: "chord-editor-state-storage",
autocomplete(query) {
queryFilter = query;
},
}),
),
);
vocabulary.delete("");
const blob = new Blob([Array.from(vocabulary).join("|")], {
type: "text/plain",
editorSyncChords(
view,
$deviceChords.map((chord) => [chord.actions, chord.phrase] as const),
);
}
function downloadBackup() {
if (!view) return;
const backup: CharaChordFile = {
charaVersion: 1,
type: "chords",
chords: view.state
.field(parsedChordsField)
.chords.map((chord) => [
chord.input?.value ?? [],
chord.phrase?.value ?? [],
]),
};
const blob = new Blob([JSON.stringify(backup)], {
type: "application/json",
});
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "vocabulary.txt";
a.download = "chord-backup.json";
a.click();
URL.revokeObjectURL(url);
}
function clearChords() {
changes.update((changes) => {
changes.push(
$chords.map<ChordChange>((it) => ({
type: ChangeType.Chord,
id: it.id,
actions: it.actions,
phrase: it.phrase,
deleted: true,
})),
);
return changes;
});
}
const items = derived(
[searchFilter, chords],
([filter, chords]) =>
filter?.map((it) => [chords[it], it] as const) ??
chords.map((it, i) => [it, i] as const),
);
const lastPage = derived(
[items, pageSize],
([items, pageSize]) => Math.ceil((items.length + 1) / pageSize) - 1,
);
setContext("cursor-crossfade", crossfade({}));
let page = $state(0);
</script>
<svelte:head>
<title>Chord Manager - CharaChorder Device Manager</title>
<meta name="description" content="Manage your chords" />
</svelte:head>
<div class="search-container">
<input
type="search"
placeholder={$LL.configure.chords.search.PLACEHOLDER(progress)}
value={currentSearchQuery}
oninput={(event) => $searchIndex && search($searchIndex, event)}
class:loading={progress !== $chords.length}
/>
<div class="paginator">
{#if $lastPage !== -1}
{page + 1} / {$lastPage + 1}
{:else}
- / -
{/if}
<div class="vertical">
<div style:display="flex">
<label><input type="checkbox" bind:checked={$rawCode} />Edit as code</label>
<!--<label><input type="checkbox" bind:checked={$showEdits} />Show edits</label>-->
<label
><input type="checkbox" bind:checked={$denseSpacing} />Dense Spacing</label
>
<button onclick={regenerate}>Reset</button>
<!--<button onclick={largeFile}>Create Huge File</button>-->
<button onclick={downloadBackup}>Download Backup</button>
</div>
<div class="split">
<div
class="editor"
class:hide-edits={!$showEdits}
class:raw={$rawCode}
class:dense-spacing={$denseSpacing}
bind:this={editor}
></div>
<ActionList {queryFilter} ignoreIcon={$rawCode} />
</div>
<button
class="icon"
onclick={() => (page = Math.max(page - 1, 0))}
{@attach actionTooltip("", "ctrl+left")}>navigate_before</button
>
<button
class="icon"
onclick={() => (page = Math.min(page + 1, $lastPage))}
{@attach actionTooltip("", "ctrl+right")}>navigate_next</button
>
</div>
<section bind:this={results}>
<!-- fixes some unresponsiveness -->
{#await tick() then}
<div class="results">
<table transition:fly={{ y: 48, easing: expoOut }}>
{#if $lastPage !== -1}
<tbody>
{#if page === 0}
<tr
><th class="new-chord"
><ChordActionEdit
onsubmit={(action) => insertChord(action)}
/></th
><td></td><td></td></tr
>
{/if}
{#each $items.slice(page * $pageSize - (page === 0 ? 0 : 1), (page + 1) * $pageSize - 1) as [chord]}
{#if chord}
<ChordEdit {chord} onduplicate={() => (page = 0)} />
{/if}
{/each}</tbody
>
{:else}
<caption>{$LL.configure.chords.search.NO_RESULTS()}</caption>
{/if}
</table>
</div>
<div class="sidebar">
<textarea
placeholder={$LL.configure.chords.TRY_TYPING() +
"\n\nDid you know? " +
randomTips[Math.floor(randomTips.length * Math.random())]}
></textarea>
<button onclick={clearChords}
><span class="icon">delete_sweep</span>
Clear Chords</button
>
<div>
{#each Object.entries($deviceMeta?.factoryDefaults?.chords ?? {}) as [title, library]}
<button onclick={() => restoreFromFile(library)}
><span class="icon">library_add</span>{title}</button
>
{/each}
</div>
<button onclick={downloadVocabulary}
><span class="icon">download</span>
{$LL.configure.chords.VOCABULARY()}</button
>
</div>
{/await}
</section>
<style lang="scss">
.search-container {
display: flex;
justify-content: center;
align-items: center;
}
.paginator {
display: flex;
justify-content: flex-end;
min-width: 8ch;
}
.sidebar {
.vertical {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
> button {
padding-inline-start: 0;
.split {
display: flex;
flex-grow: 1;
flex-shrink: 1;
width: calc(min(100%, 1400px));
min-height: 0;
> :global(*) {
flex: 1;
}
}
textarea {
flex: 1;
transition: outline-color 250ms ease;
margin: 2px;
outline: 2px solid transparent;
outline-offset: -1px;
border: 1px dashed var(--md-sys-color-outline);
border-radius: 4px;
background: none;
padding: 8px;
color: inherit;
&:focus {
outline-color: var(--md-sys-color-primary);
}
.editor :global(.cm-deletedChunk) {
opacity: 0.2;
}
@keyframes pulse {
0% {
opacity: 0.4;
}
50% {
opacity: 1;
}
100% {
opacity: 0.4;
}
}
input[type="search"] {
transition: all 250ms ease;
margin-block-start: 16px;
border: 0 solid var(--md-sys-color-surface-variant);
border-bottom-width: 1px;
background: none;
padding-inline: 16px;
padding-block: 8px;
width: 512px;
color: inherit;
.editor {
height: 100%;
font-size: 16px;
@media (prefers-contrast: more) {
border-style: dashed;
border-color: var(--md-sys-color-outline);
}
&::placeholder {
opacity: 0.8;
:global(.cm-tooltip) {
border: none;
border-radius: 4px;
background-color: var(--md-sys-color-surface-variant);
color: var(--md-sys-color-on-surface-variant);
:global(ul) {
font-family: inherit !important;
}
:global(li[role="option"][aria-selected="true"]) {
border-radius: 4px;
background-color: var(--md-sys-color-primary);
color: var(--md-sys-color-on-primary);
}
:global(completion-section) {
margin-block: 8px;
border-bottom: none !important;
}
}
&:focus {
&:not(.raw) :global(.cm-line) {
columns: 2;
text-align: center;
}
&.dense-spacing :global(.cm-line) {
padding-block: 0;
}
:global(.cm-line) {
padding-block: 8px;
width: 100%;
text-wrap: wrap;
white-space: pre-wrap;
word-break: break-word;
> :global(*) {
break-before: avoid;
break-after: avoid;
break-inside: avoid;
}
}
:global(.cm-panels) {
border-top: none;
background-color: var(--md-sys-color-surface);
color: var(--md-sys-color-on-surface);
}
:global(.chord-ignored) {
opacity: 0.5;
background-image: none;
text-decoration: line-through;
}
:global(.chord-child) {
background-image: none;
text-decoration: underline;
}
:global(.chord-invalid) {
color: var(--md-sys-color-error);
text-decoration-color: var(--md-sys-color-error);
}
:global(.change-button) {
height: 24px;
font-size: 16px;
}
:global(.cm-deletedLineGutter) {
background-color: var(--md-sys-color-error);
}
:global(.cm-changedLineGutter) {
background-color: var(--md-sys-color-success);
}
:global(.cm-changedText) {
background: linear-gradient(
var(--md-sys-color-primary),
var(--md-sys-color-primary)
)
bottom / 100% 1px no-repeat;
}
:global(.cm-gutters) {
border-color: transparent;
background-color: transparent;
}
&.raw :global(.cm-gutters) {
border-color: var(--md-sys-color-surface-variant);
background-color: var(--md-sys-color-surface);
}
:global(.cm-editor) {
outline: none;
border-style: solid;
border-color: var(--md-sys-color-primary);
height: 100%;
}
&.loading {
opacity: 0.4;
:global(.cm-changedLine) {
background-color: color-mix(
in srgb,
var(--md-sys-color-primary) 5%,
transparent
) !important;
}
}
section {
display: flex;
position: relative;
:global(.cm-activeLine),
:global(.cm-line:hover) {
--auto-space-show: 1;
}
border-radius: 16px;
padding-inline: 8px;
:global(.cm-activeLine) {
border-bottom: 1px solid var(--md-sys-color-surface-variant);
height: 100%;
&:not(.cm-changedLine) {
background-color: transparent !important;
}
}
overflow: hidden;
}
.results {
min-width: min(90vw, 20cm);
height: 100%;
}
table {
transition: all 1s ease;
height: fit-content;
overflow-y: hidden;
:global(::selection),
:global(.cm-selectionBackground) {
background-color: var(--md-sys-color-surface-variant) !important;
}
}
</style>

240
src/routes/(app)/config/chords/ChordActionEdit.svelte
View File

@@ -1,240 +0,0 @@
<script lang="ts">
import type { ChordInfo } from "$lib/undo-redo";
import { SvelteSet } from "svelte/reactivity";
import { changes, chordHashes, ChangeType } from "$lib/undo-redo";
import LL from "$i18n/i18n-svelte";
import ActionString from "$lib/components/ActionString.svelte";
import { selectAction } from "./action-selector";
import { serialPort } from "$lib/serial/connection";
import { get } from "svelte/store";
import { inputToAction } from "./input-converter";
import { hashChord, type Chord } from "$lib/serial/chord";
let {
chord = undefined,
onsubmit,
interactive = true,
}: {
chord?: ChordInfo;
interactive?: boolean;
onsubmit: (actions: number[]) => void;
} = $props();
let pressedKeys = new SvelteSet<number>();
let editing = $state(false);
function compare(a: number, b: number) {
return a - b;
}
function makeChordInput(...actions: number[]) {
const compound = compoundInputs[0]
? hashChord(compoundInputs[0].actions)
: 0;
return [
...Array.from(
{
length: 12 - actions.length,
},
(_, i) => (compound >> (i * 10)) & 0x3ff,
),
...actions.toSorted(compare),
];
}
function edit() {
pressedKeys.clear();
editing = true;
}
function keydown(event: KeyboardEvent) {
// This is obviously a tradeoff
if (event.key === "Tab" || event.key === "Escape") return;
if (!editing) return;
event.preventDefault();
const input = inputToAction(event, get(serialPort)?.device === "X");
if (input == undefined) {
alert("Invalid key");
return;
}
pressedKeys.add(input);
}
function keyup() {
if (!editing) return;
editing = false;
if (pressedKeys.size < 1) return;
if (!chord) return onsubmit(makeChordInput(...pressedKeys));
changes.update((changes) => {
changes.push([
{
type: ChangeType.Chord,
id: chord!.id,
actions: makeChordInput(...pressedKeys),
phrase: chord!.phrase,
},
]);
return changes;
});
return undefined;
}
function addSpecial(event: MouseEvent) {
event.stopPropagation();
selectAction(event, (action) => {
if (!chord) return onsubmit([action]);
changes.update((changes) => {
changes.push([
{
type: ChangeType.Chord,
id: chord!.id,
actions: makeChordInput(...chordActions!, action),
phrase: chord!.phrase,
},
]);
return changes;
});
});
}
function* resolveCompound(chord?: ChordInfo) {
if (!chord) return;
let current: Chord = chord;
for (let i = 0; i < 10; i++) {
if (current.actions[3] !== 0) return;
const compound = current.actions
.slice(0, 3)
.reduce((a, b, i) => a | (b << (i * 10)));
if (compound === 0) return;
const next = $chordHashes.get(compound);
if (!next) {
return null;
}
current = next;
yield next;
}
return;
}
let chordActions = $derived(
chord?.actions.slice(chord.actions.lastIndexOf(0) + 1).toSorted(compare),
);
let compoundInputs = $derived([...resolveCompound(chord)].reverse());
</script>
<button
class:deleted={chord && chord.deleted}
class:edited={chord && chord.actionsChanged}
class:invalid={chord &&
chordActions &&
(chordActions.length < 2 ||
chordActions.some((it, i) => chordActions[i] !== it))}
class="chord"
onclick={edit}
onkeydown={keydown}
onkeyup={keyup}
onblur={keyup}
disabled={!interactive}
>
{#if editing && pressedKeys.size === 0}
<span>{$LL.configure.chords.HOLD_KEYS()}</span>
{:else if !editing && !chord}
<span>{$LL.configure.chords.NEW_CHORD()}</span>
{/if}
{#if !editing}
{#each compoundInputs as compound}
<sub
><ActionString
display="keys"
actions={compound.actions.slice(compound.actions.lastIndexOf(0) + 1)}
></ActionString>
</sub>
<span>&rarr;</span>
{/each}
{/if}
<ActionString
display="keys"
actions={editing ? [...pressedKeys].sort(compare) : (chordActions ?? [])}
/>
<sup>•</sup>
<div role="button" class="icon add" onclick={addSpecial}>add_circle</div>
</button>
<style lang="scss">
span {
opacity: 0.5;
@media (prefers-contrast: more) {
opacity: 0.8;
}
}
sup {
translate: 0 -60%;
opacity: 0;
transition: opacity 250ms ease;
}
.add {
opacity: 0;
height: 20px;
font-size: 18px;
--icon-fill: 1;
}
.chord:hover .add {
opacity: 1;
}
.chord {
display: inline-flex;
position: relative;
gap: 4px;
margin-inline: 4px;
height: 32px;
&:focus-within {
outline: none;
}
}
.chord::after {
position: absolute;
top: 50%;
transform-origin: center left;
translate: -20px 0;
scale: 0 1;
transition:
scale 250ms ease,
color 250ms ease;
background: currentcolor;
width: calc(100% - 60px);
height: 1px;
content: "";
}
.edited {
color: var(--md-sys-color-primary);
& > sup {
opacity: 1;
}
}
.invalid {
color: var(--md-sys-color-error);
}
.deleted {
color: var(--md-sys-color-error);
&::after {
scale: 1;
}
}
</style>

172
src/routes/(app)/config/chords/ChordEdit.svelte
View File

@@ -1,172 +0,0 @@
<script lang="ts">
import { changes, ChangeType, chords } from "$lib/undo-redo.js";
import type { ChordInfo } from "$lib/undo-redo.js";
import ChordPhraseEdit from "./ChordPhraseEdit.svelte";
import ChordActionEdit from "./ChordActionEdit.svelte";
import type { Chord } from "$lib/serial/chord";
import { slide } from "svelte/transition";
import { charaFileToUriComponent } from "$lib/share/share-url";
import SharePopup from "../SharePopup.svelte";
import tippy from "tippy.js";
import { mount, unmount } from "svelte";
let { chord, onduplicate }: { chord: ChordInfo; onduplicate: () => void } =
$props();
function remove() {
changes.update((changes) => {
changes.push([
{
type: ChangeType.Chord,
id: chord.id,
actions: chord.actions,
phrase: chord.phrase,
deleted: true,
},
]);
return changes;
});
}
function isSameChord(a: Chord, b: Chord) {
return (
a.actions.length === b.actions.length &&
a.actions.every((it, i) => it === b.actions[i])
);
}
function restore() {
changes.update((changes) =>
changes
.map((it) =>
it.filter(
(it) => !(it.type === ChangeType.Chord && isSameChord(it, chord)),
),
)
.filter((it) => it.length > 0),
);
}
function duplicate() {
const id = [...chord.id];
id.splice(id.indexOf(0), 1);
id.push(0);
while ($chords.some((it) => JSON.stringify(it.id) === JSON.stringify(id))) {
id[id.length - 1] = id[id.length - 1]! + 1;
}
changes.update((changes) => {
changes.push([
{
type: ChangeType.Chord,
id,
actions: [...chord.actions],
phrase: [...chord.phrase],
},
]);
return changes;
});
onduplicate();
}
async function share(event: Event) {
const url = new URL(window.location.href);
url.searchParams.set(
"import",
await charaFileToUriComponent({
charaVersion: 1,
type: "chords",
chords: [[chord.actions, chord.phrase]],
}),
);
await navigator.clipboard.writeText(url.toString());
let shareComponent = {};
tippy(event.target as HTMLElement, {
onCreate(instance) {
const target = instance.popper.querySelector(".tippy-content")!;
shareComponent = mount(SharePopup, { target });
},
onHidden(instance) {
instance.destroy();
},
onDestroy(_instance) {
unmount(shareComponent);
},
}).show();
}
</script>
<tr>
<th>
<ChordActionEdit {chord} onsubmit={() => {}} />
</th>
<td class="phrase-edit">
<ChordPhraseEdit {chord} />
</td>
<td>
<div class="table-buttons">
{#if !chord.deleted}
<button transition:slide class="icon compact" onclick={remove}
>delete</button
>
{:else}
<button transition:slide class="icon compact" onclick={restore}
>restore_from_trash</button
>
{/if}
<button disabled={chord.deleted} class="icon compact" onclick={duplicate}
>content_copy</button
>
<button
class="icon compact"
class:disabled={chord.isApplied}
onclick={restore}>undo</button
>
<div class="separator"></div>
<button class="icon compact" onclick={share}>share</button>
</div>
</td>
</tr>
<style lang="scss">
.separator {
display: inline-flex;
opacity: 0.2;
background: currentcolor;
width: 1px;
height: 24px;
}
button {
transition: opacity 75ms ease;
}
.phrase-edit {
position: relative;
}
tr {
position: relative;
}
.table-buttons {
position: absolute;
top: 0;
right: 0;
transform: translate(100%, -50%);
opacity: 0;
transition: opacity 75ms ease;
background: var(--md-sys-color-surface-variant);
}
.icon {
font-size: 18px;
}
tr:hover .table-buttons {
opacity: 1;
}
</style>

376
src/routes/(app)/config/chords/ChordPhraseEdit.svelte
View File

@@ -1,376 +0,0 @@
<script lang="ts">
import { KEYMAP_CODES, KEYMAP_IDS } from "$lib/serial/keymap-codes";
import { onMount, tick } from "svelte";
import { changes, ChangeType } from "$lib/undo-redo";
import type { ChordInfo } from "$lib/undo-redo";
import { scale } from "svelte/transition";
import { selectAction } from "./action-selector";
import { inputToAction } from "./input-converter";
import { deviceMeta, serialPort } from "$lib/serial/connection";
import { get } from "svelte/store";
import semverGte from "semver/functions/gte";
import Action from "$lib/components/Action.svelte";
import AutospaceSelector from "$lib/chord-editor/AutospaceSelector.svelte";
let { chord }: { chord: ChordInfo } = $props();
const JOIN_ACTION = 574;
const NO_CONCATENATOR_ACTION = 256;
onMount(() => {
if (chord.phrase.length === 0) {
box?.focus();
}
});
function keypress(event: KeyboardEvent) {
console.log(event);
if (!event.shiftKey && event.key === "ArrowUp") {
addSpecial(event);
} else if (!event.shiftKey && event.key === "ArrowLeft") {
moveCursor(cursorPosition - 1, true);
} else if (!event.shiftKey && event.key === "ArrowRight") {
moveCursor(cursorPosition + 1, true);
} else if (event.key === " " && $KEYMAP_IDS.has("HYPERSPACE")) {
insertAction(cursorPosition, $KEYMAP_IDS.get("HYPERSPACE")!.code);
tick().then(() => moveCursor(cursorPosition + 1));
} else if (event.key === "Backspace") {
deleteAction(cursorPosition - 1, 1, true);
moveCursor(cursorPosition - 1, true);
} else if (event.key === "Delete") {
deleteAction(cursorPosition, 1, true);
} else {
if (event.key === "Shift" || event.key === "Meta") return;
const action = inputToAction(event, get(serialPort)?.device === "X");
if (action !== undefined) {
insertAction(cursorPosition, action);
tick().then(() => moveCursor(cursorPosition + 1));
}
}
}
function moveCursor(to: number, user = false) {
if (!box) return;
cursorPosition = Math.max(
user ? chord.phrase.findIndex((it, i, arr) => !isHidden(it, i, arr)) : 0,
Math.min(
to,
user
? chord.phrase.findLastIndex((it, i, arr) => !isHidden(it, i, arr)) +
1 || chord.phrase.length
: chord.phrase.length,
),
);
const item = box.children.item(cursorPosition) as HTMLElement;
cursorOffset = item.offsetLeft + item.offsetWidth;
}
function deleteAction(at: number, count = 1, user = false) {
if (user && isHidden(chord.phrase[at]!, at, chord.phrase)) return;
if (!(at in chord.phrase)) return;
changes.update((changes) => {
changes.push([
{
type: ChangeType.Chord,
id: chord.id,
actions: chord.actions,
phrase: chord.phrase.toSpliced(at, count),
},
]);
return changes;
});
}
function insertAction(at: number, action: number) {
changes.update((changes) => {
changes.push([
{
type: ChangeType.Chord,
id: chord.id,
actions: chord.actions,
phrase: chord.phrase.toSpliced(at, 0, action),
},
]);
return changes;
});
}
function clickCursor(event: MouseEvent) {
if (box === undefined || event.target === button) return;
const distance = (event as unknown as { layerX: number }).layerX;
let i = 0;
for (const child of box.children) {
const { offsetLeft, offsetWidth } = child as HTMLElement;
if (distance < offsetLeft + offsetWidth / 2) {
moveCursor(i - 1, true);
return;
}
i++;
}
moveCursor(i - 1, true);
}
function addSpecial(event: MouseEvent | KeyboardEvent) {
selectAction(
event,
(action) => {
insertAction(cursorPosition, action);
tick().then(() => moveCursor(cursorPosition + 1));
},
() => box?.focus(),
);
}
function resolveAutospace(autospace: boolean) {
if (autospace) {
if (chord.phrase.at(-1) === JOIN_ACTION) {
if (
chord.phrase.every(
(action, i, arr) =>
$KEYMAP_CODES.get(action)?.printable || i === arr.length - 1,
)
) {
deleteAction(chord.phrase.length - 1);
moveCursor(cursorPosition, true);
} else {
return;
}
} else {
if (isPrintable) {
return;
} else if (chord.phrase.at(-1) === NO_CONCATENATOR_ACTION) {
deleteAction(chord.phrase.length - 1);
moveCursor(cursorPosition, true);
} else {
insertAction(chord.phrase.length, JOIN_ACTION);
moveCursor(cursorPosition, true);
}
}
} else {
if (chord.phrase.at(-1) === JOIN_ACTION) {
deleteAction(chord.phrase.length - 1);
moveCursor(cursorPosition, true);
} else {
if (chord.phrase.at(-1) === NO_CONCATENATOR_ACTION) {
if (
chord.phrase.every(
(action, i, arr) =>
$KEYMAP_CODES.get(action)?.printable || i === arr.length - 1,
)
) {
return;
} else {
deleteAction(chord.phrase.length - 1);
moveCursor(cursorPosition, true);
}
} else {
insertAction(chord.phrase.length, NO_CONCATENATOR_ACTION);
moveCursor(cursorPosition, true);
}
}
}
}
let button: HTMLButtonElement | undefined = $state();
let box: HTMLDivElement | undefined = $state();
let cursorPosition = 0;
let cursorOffset = $state(0);
let hasFocus = $state(false);
let isPrintable = $derived(
chord.phrase.every(
(action) => $KEYMAP_CODES.get(action)?.printable === true,
),
);
let supportsAutospace = $derived(
semverGte($deviceMeta?.version ?? "0.0.0", "2.1.0"),
);
let hasAutospace = $derived(
isPrintable || chord.phrase.at(-1) === JOIN_ACTION,
);
function isHidden(action: number, index: number, array: number[]) {
return (
(index === 0 && action === JOIN_ACTION) ||
(index === array.length - 1 &&
(action === JOIN_ACTION || action === NO_CONCATENATOR_ACTION))
);
}
</script>
<!-- svelte-ignore a11y_interactive_supports_focus -->
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div
role="textbox"
class="wrapper"
class:edited={!chord.deleted && chord.phraseChanged}
onclick={() => {
box?.focus();
}}
>
{#if supportsAutospace}
<AutospaceSelector
variant="start"
value={chord.phrase[0] === JOIN_ACTION}
onchange={async (event) => {
const autospace = hasAutospace;
if ((event.target as HTMLInputElement).checked) {
if (chord.phrase[0] === JOIN_ACTION) {
deleteAction(0, 1);
await tick();
moveCursor(cursorPosition - 1, true);
}
} else {
if (chord.phrase[0] !== JOIN_ACTION) {
insertAction(0, JOIN_ACTION);
moveCursor(cursorPosition + 1, true);
}
}
await tick();
resolveAutospace(autospace);
}}
/>
{/if}
<div
onkeydown={keypress}
onmousedown={clickCursor}
role="textbox"
tabindex="0"
bind:this={box}
onfocusin={() => (hasFocus = true)}
onfocusout={(event) => {
if (event.relatedTarget !== button) hasFocus = false;
}}
>
{#if hasFocus}
<div transition:scale class="cursor" style:translate="{cursorOffset}px 0">
<button class="icon" bind:this={button} onclick={addSpecial}>add</button
>
</div>
{:else}
<div></div>
<!-- placeholder for cursor placement -->
{/if}
{#each chord.phrase as action, i}
{#if isHidden(action, i, chord.phrase)}
<span style:display="none"></span>
{:else}
<Action display="inline-keys" {action} />
{/if}
{/each}
</div>
{#if supportsAutospace}
<AutospaceSelector
variant="end"
value={!hasAutospace}
onchange={(event) =>
resolveAutospace((event.target as HTMLInputElement).checked)}
/>
{/if}
<sup>•</sup>
</div>
<style lang="scss">
sup {
translate: 0 -40%;
opacity: 0;
transition: opacity 250ms ease;
}
.cursor {
position: absolute;
transform: translateX(-50%);
translate: 0 0;
transition: translate 50ms ease;
background: var(--md-sys-color-on-secondary-container);
width: 2px;
height: 100%;
button {
position: absolute;
top: -24px;
left: 0;
border: 2px solid currentcolor;
border-radius: 12px 12px 12px 0;
background: var(--md-sys-color-secondary-container);
padding: 0;
height: 24px;
color: var(--md-sys-color-on-secondary-container);
}
}
.edited {
color: var(--md-sys-color-primary);
sup {
opacity: 1;
}
}
.wrapper {
display: flex;
position: relative;
align-items: center;
padding-block: 4px;
height: 1em;
&::after,
&::before {
position: absolute;
bottom: -4px;
opacity: 0;
transition:
opacity 150ms ease,
scale 250ms ease;
background: currentcolor;
width: calc(100% - 8px);
height: 1px;
content: "";
}
&::after {
scale: 0 1;
transition-duration: 250ms;
}
&:hover {
--auto-space-show: 1;
&::before {
opacity: 0.3;
}
}
&:has(> :focus-within)::after {
scale: 1;
opacity: 1;
}
}
[role="textbox"] {
display: flex;
position: relative;
align-items: center;
cursor: text;
white-space: pre;
&:focus-within {
outline: none;
}
}
</style>

56
src/routes/(app)/config/chords/action-selector.ts
View File

@@ -1,56 +0,0 @@
import ActionSelector from "$lib/components/layout/ActionSelector.svelte";
import { mount, unmount, tick } from "svelte";
export function selectAction(
event: MouseEvent | KeyboardEvent,
select: (action: number) => void,
dismissed?: () => void,
) {
const component = mount(ActionSelector, {
target: document.body,
props: {
onclose: () => closed(),
onselect: (action: number) => {
select(action);
closed();
},
},
});
const dialog = document.querySelector("dialog > div") as HTMLDivElement;
const backdrop = document.querySelector("dialog") as HTMLDialogElement;
const dialogRect = dialog.getBoundingClientRect();
const groupRect = (event.target as HTMLElement).getBoundingClientRect();
const scale = 0.5;
const dialogScale = `${
1 - scale * (1 - groupRect.width / dialogRect.width)
} ${1 - scale * (1 - groupRect.height / dialogRect.height)}`;
const dialogTranslate = `${scale * (groupRect.x - dialogRect.x)}px ${
scale * (groupRect.y - dialogRect.y)
}px`;
const duration = 150;
const options = { duration, easing: "ease" };
const dialogAnimation = dialog.animate(
[
{ scale: dialogScale, translate: dialogTranslate },
{ translate: "0 0", scale: "1" },
],
options,
);
const backdropAnimation = backdrop.animate(
[{ opacity: 0 }, { opacity: 1 }],
options,
);
async function closed() {
dialogAnimation.reverse();
backdropAnimation.reverse();
await dialogAnimation.finished;
unmount(component);
await tick();
dismissed?.();
}
}

16
src/routes/(app)/config/chords/input-converter.ts
View File

@@ -1,16 +0,0 @@
import { KEYMAP_IDS, KEYMAP_KEYCODES } from "$lib/serial/keymap-codes";
import { get } from "svelte/store";
export function inputToAction(
event: KeyboardEvent,
useKeycodes?: boolean,
): number | undefined {
if (useKeycodes) {
return get(KEYMAP_KEYCODES).get(event.code);
} else {
return (
get(KEYMAP_IDS).get(event.key)?.code ??
get(KEYMAP_KEYCODES).get(event.code)
);
}
}

7
src/routes/(app)/config/chords/will-my-compound-break/+page.svelte
View File

@@ -1,7 +1,5 @@
<script lang="ts">
import { serializeActions } from "$lib/serial/chord";
import { chords } from "$lib/undo-redo";
import ChordEdit from "../ChordEdit.svelte";
export function hashChord(actions: number[]) {
const chord = new Uint8Array(16);
@@ -17,7 +15,8 @@
}
const broken = $derived(
$chords.filter((it) => (hashChord(it.actions) & 0xff) === 0xff),
[],
// $chords.filter((it) => (hashChord(it.actions) & 0xff) === 0xff),
);
</script>
@@ -35,7 +34,7 @@
>, your library might have been corrupted.
</p>
{#each broken as chord}
<ChordEdit {chord} onduplicate={() => {}} />
<!--<ChordEdit {chord} onduplicate={() => {}} />-->
{/each}
{:else}
<p>No problematic chords found</p>

356
src/routes/(app)/config/cv2/+page.svelte
View File

@@ -1,356 +0,0 @@
<script lang="ts">
import { chords } from "$lib/undo-redo";
import { EditorView } from "codemirror";
import { actionToValue } from "$lib/chord-editor/action-serializer";
import "$lib/chord-editor/chords.grammar";
import { persistentWritable } from "$lib/storage";
import ActionList from "$lib/components/layout/ActionList.svelte";
import {
composeChordInput,
hashChord,
splitCompound,
} from "$lib/serial/chord";
import { loadPersistentState } from "$lib/chord-editor/persistent-state-plugin";
import { parsedChordsField } from "$lib/chord-editor/parsed-chords-plugin";
import type { CharaChordFile } from "$lib/share/chara-file";
import { chordSyncEffect } from "$lib/chord-editor/chord-sync-plugin";
import { KEYMAP_IDS, type KeyInfo } from "$lib/serial/keymap-codes";
let queryFilter: string | undefined = $state(undefined);
const rawCode = persistentWritable("chord-editor-raw-code", false);
const showEdits = persistentWritable("chord-editor-show-edits", true);
const denseSpacing = persistentWritable("chord-editor-spacing", false);
let editor: HTMLDivElement | undefined = $state(undefined);
let view: EditorView;
$effect(() => {
if (!editor) return;
const viewPromise = loadPersistentState({
rawCode: $rawCode,
storeName: "chord-editor-state-storage",
autocomplete(query) {
queryFilter = query;
},
}).then(
(state) =>
new EditorView({
parent: editor,
state,
}),
);
viewPromise.then((it) => (view = it));
return () => viewPromise.then((it) => it.destroy());
});
function regenerate() {
const doc = $chords
.map((chord) => {
const [actions, compound] = splitCompound(chord.actions);
return (
(compound ? "|0x" + compound.toString(16) + "|" : "") +
actions.map((it) => actionToValue(it)).join("") +
"=>" +
chord.phrase.map((it) => actionToValue(it)).join("")
);
})
.join("\n");
view.dispatch({
changes: { from: 0, to: view.state.doc.length, insert: doc },
effects: chordSyncEffect.of(
$chords.map((chord) => [chord.actions, chord.phrase] as const),
),
});
}
function largeFile() {
const chordCount = 100000;
const maxPhraseLength = 100;
const maxInputLength = 8;
const compoundChance = 0.05;
const actions = [...$KEYMAP_IDS.values()];
function randomAction(): KeyInfo {
return actions[Math.floor(actions.length * Math.random())]!;
}
const backup: [KeyInfo[][], KeyInfo[]][] = Array.from(
{ length: chordCount },
() =>
[
[
Array.from(
{ length: Math.floor(Math.random() * maxInputLength) + 1 },
randomAction,
),
],
Array.from(
{
length: Math.floor(Math.log(Math.random() * maxPhraseLength)) + 1,
},
randomAction,
),
] as const,
);
for (const chord of backup) {
if (Math.random() < compoundChance) {
chord[0] = [
...backup[Math.floor(backup.length * Math.random())]![0],
...chord[0],
];
}
}
const doc = backup
.map(([inputs, phrase]) => {
return (
inputs
.map((input) => input.map((it) => actionToValue(it)).join(""))
.join("|") +
"=>" +
phrase.map((it) => actionToValue(it)).join("")
);
})
.join("\n");
view.dispatch({
changes: { from: 0, to: view.state.doc.length, insert: doc },
effects: chordSyncEffect.of(
$chords.map((chord) => [chord.actions, chord.phrase] as const),
),
});
}
function loadBackup(event: Event) {
const input = event.target as HTMLInputElement;
if (!input.files || input.files.length === 0) return;
const file = input.files[0];
const reader = new FileReader();
reader.onload = (e) => {
try {
const content = e.target?.result as string;
const backup: CharaChordFile = JSON.parse(content);
const doc = backup.chords
.map((chord) => {
const [actions, compound] = splitCompound(chord[0]);
return (
(compound
? "<0x" + compound.toString(16).padStart(8, "0") + ">"
: "") +
actions.map((it) => actionToValue(it)).join("") +
"=>" +
chord[1].map((it) => actionToValue(it)).join("")
);
})
.join("\n");
view.dispatch({
changes: { from: 0, to: view.state.doc.length, insert: doc },
});
} catch (err) {
alert("Failed to load backup: " + err);
}
};
reader.readAsText(file);
}
function downloadBackup() {
const backup: CharaChordFile = {
charaVersion: 1,
type: "chords",
chords: view.state.field(parsedChordsField).result,
};
console.log(JSON.stringify(backup));
const blob = new Blob([JSON.stringify(backup)], {
type: "application/json",
});
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "chord-backup.json";
a.click();
URL.revokeObjectURL(url);
}
</script>
<div class="vertical">
<div style:display="flex">
<label><input type="checkbox" bind:checked={$rawCode} />Edit as code</label>
<!--<label><input type="checkbox" bind:checked={$showEdits} />Show edits</label>-->
<label
><input type="checkbox" bind:checked={$denseSpacing} />Dense Spacing</label
>
<button onclick={regenerate}>Regenerate from current chords</button>
<!--<button onclick={largeFile}>Create Huge File</button>-->
<button onclick={downloadBackup}>Download Backup</button>
<input
type="file"
accept="application/json"
onchange={loadBackup}
style="margin-left: 1rem"
/>
</div>
<div class="split">
<div
class="editor"
class:hide-edits={!$showEdits}
class:raw={$rawCode}
class:dense-spacing={$denseSpacing}
bind:this={editor}
></div>
<ActionList {queryFilter} ignoreIcon={$rawCode} />
</div>
</div>
<style lang="scss">
.vertical {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.split {
display: flex;
flex-grow: 1;
flex-shrink: 1;
width: calc(min(100%, 1400px));
min-height: 0;
> :global(*) {
flex: 1;
}
}
.editor :global(.cm-deletedChunk) {
opacity: 0.2;
}
.editor {
height: 100%;
font-size: 16px;
:global(.cm-tooltip) {
border: none;
border-radius: 4px;
background-color: var(--md-sys-color-surface-variant);
color: var(--md-sys-color-on-surface-variant);
:global(ul) {
font-family: inherit !important;
}
:global(li[role="option"][aria-selected="true"]) {
border-radius: 4px;
background-color: var(--md-sys-color-primary);
color: var(--md-sys-color-on-primary);
}
:global(completion-section) {
margin-block: 8px;
border-bottom: none !important;
}
}
&:not(.raw) :global(.cm-line) {
columns: 2;
text-align: center;
}
&.dense-spacing :global(.cm-line) {
padding-block: 0;
}
:global(.cm-line) {
padding-block: 8px;
width: 100%;
text-wrap: wrap;
white-space: pre-wrap;
word-break: break-word;
> :global(*) {
break-before: avoid;
break-after: avoid;
break-inside: avoid;
}
}
:global(.chord-ignored) {
opacity: 0.5;
background-image: none;
text-decoration: line-through;
}
:global(.chord-child) {
background-image: none;
text-decoration: underline;
}
:global(.chord-invalid) {
color: var(--md-sys-color-error);
text-decoration-color: var(--md-sys-color-error);
}
:global(.change-button) {
height: 24px;
font-size: 16px;
}
:global(.cm-deletedLineGutter) {
background-color: var(--md-sys-color-error);
}
:global(.cm-changedLineGutter) {
background-color: var(--md-sys-color-success);
}
:global(.cm-changedText) {
background: linear-gradient(
var(--md-sys-color-primary),
var(--md-sys-color-primary)
)
bottom / 100% 1px no-repeat;
}
:global(.cm-gutters) {
border-color: transparent;
background-color: transparent;
}
&.raw :global(.cm-gutters) {
border-color: var(--md-sys-color-surface-variant);
background-color: var(--md-sys-color-surface);
}
:global(.cm-editor) {
outline: none;
height: 100%;
}
:global(.cm-changedLine) {
background-color: color-mix(
in srgb,
var(--md-sys-color-primary) 5%,
transparent
) !important;
}
:global(.cm-activeLine),
:global(.cm-line:hover) {
--auto-space-show: 1;
}
:global(.cm-activeLine) {
border-bottom: 1px solid var(--md-sys-color-surface-variant);
&:not(.cm-changedLine) {
background-color: transparent !important;
}
}
:global(::selection),
:global(.cm-selectionBackground) {
background-color: var(--md-sys-color-surface-variant) !important;
}
}
</style>

24
src/routes/(app)/learn/+page.svelte
View File

@@ -1,24 +0,0 @@
<script lang="ts">
</script>
<ul>
<li><a href="/learn/layout/">Layout</a></li>
<li><a href="/learn/chords/">Chords</a></li>
<li><a href="/learn/sentence/">Sentences</a></li>
</ul>
<style lang="scss">
ul {
display: flex;
gap: 16px;
margin: 16px;
padding: 0;
list-style-type: none;
}
a {
border: 1px solid var(--md-sys-color-outline);
width: 128px;
height: 128px;
}
</style>

232
src/routes/(app)/learn/chords/+page.svelte
View File

@@ -1,232 +0,0 @@
<script lang="ts">
import CharRecorder from "$lib/charrecorder/CharRecorder.svelte";
import { ReplayRecorder } from "$lib/charrecorder/core/recorder";
import {
words,
nextWord,
scores,
learnConfigDefault,
learnConfig,
learnConfigStored,
} from "$lib/learn/chords";
import { fade } from "svelte/transition";
import ChordActionEdit from "../../config/chords/ChordActionEdit.svelte";
import TrackChords from "$lib/charrecorder/TrackChords.svelte";
import type { InferredChord } from "$lib/charrecorder/core/types";
let recorder = $derived(new ReplayRecorder($nextWord));
let start = performance.now();
$effect(() => {
start = recorder && performance.now();
});
let chords: InferredChord[] = $state([]);
function onkeyboard(event: KeyboardEvent) {
recorder.next(event);
}
function lerp(a: number, b: number, t: number) {
return a + (b - a) * t;
}
$effect(() => {
const [chord] = chords;
if (!chord) return;
console.log(chord);
if (chord.output.trim() === $nextWord) {
scores.update((scores) => {
const score = Math.max(
$learnConfig.minScore,
$learnConfig.maxScore - (performance.now() - start) / 1000,
);
if (!scores[$nextWord]) {
scores[$nextWord] = {
score,
lastTyped: performance.now(),
total: 1,
};
return scores;
}
const oldScore = scores[$nextWord].score;
scores[$nextWord].score = lerp(
score,
oldScore,
$learnConfig.scoreBlend,
);
scores[$nextWord].lastTyped = performance.now();
scores[$nextWord].total += 1;
return scores;
});
}
});
function skip() {
button?.blur();
scores.update((scores) => {
return scores;
});
}
let button = $state<HTMLButtonElement>();
</script>
<h2>WIP</h2>
<svelte:window onkeydown={onkeyboard} onkeyup={onkeyboard} />
{#key $nextWord}
<h3>
{$nextWord}
{#if $scores[$nextWord!] === undefined}
<sup class="new-word">new</sup>
{:else if ($scores[$nextWord!]?.score ?? 0) < 0}
<sup class="weak">weak</sup>
{/if}
</h3>
<div class="chord" in:fade>
<CharRecorder replay={recorder.player} cursor={true}>
<TrackChords bind:chords />
</CharRecorder>
</div>
{/key}
{#key $nextWord}
<div class="hint" in:fade={{ delay: 2000, duration: 500 }}>
<ChordActionEdit chord={$words.get($nextWord!)} onsubmit={() => {}} />
</div>
{/key}
<button onclick={skip} bind:this={button}>skip</button>
<section class="stats">
<table>
<thead>
<tr><th>Weak</th></tr>
</thead>
<tbody>
{#each Object.entries($scores)
.sort(([, a], [, b]) => a.score - b.score)
.splice(0, 10) as [word, score]}
<tr class="decay">
<td>{word}</td>
<td><i>{score.score.toFixed(2)}</i></td>
</tr>
{/each}
</tbody>
</table>
<table>
<thead>
<tr><th>Strong</th></tr>
</thead>
<tbody>
{#each Object.entries($scores)
.sort(([, a], [, b]) => b.score - a.score)
.splice(0, 10) as [word, score]}
<tr class="decay">
<td>{word}</td>
<td><i>{score.score.toFixed(2)}</i></td>
</tr>
{/each}
</tbody>
</table>
<table>
<thead>
<tr><th>Rehearse</th></tr>
</thead>
<tbody>
{#each Object.entries($scores)
.sort(([, a], [, b]) => b.lastTyped - a.lastTyped)
.splice(0, 10) as [word, _score]}
<tr class="decay">
<td>{word}</td>
</tr>
{/each}
</tbody>
</table>
</section>
<details>
<summary>Settings</summary>
<button onclick={() => ($scores = {})}>Reset</button>
<table>
<tbody>
{#each Object.entries(learnConfigDefault) as [key, value]}
<tr>
<th>{key}</th>
<td
><input
type="number"
value={$learnConfig[key as keyof typeof $learnConfig] ?? value}
step="0.1"
oninput={(event) =>
($learnConfigStored[key as keyof typeof $learnConfig] = (
event.target as HTMLInputElement
).value as any)}
/>
</td>
<td>
<button
disabled={!$learnConfigStored[key as keyof typeof $learnConfig]}
onclick={() =>
($learnConfigStored[key as keyof typeof $learnConfigStored] =
undefined)}>⟲</button
>
</td>
</tr>
{/each}
</tbody>
</table>
</details>
<style lang="scss">
@use "sass:math";
input {
border: none;
background: none;
width: 5ch;
color: inherit;
font: inherit;
text-align: right;
}
div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1ch;
min-width: 20ch;
}
.stats {
display: flex;
gap: 3em;
}
sup {
font-weight: normal;
font-size: 0.8em;
&.new-word {
color: var(--md-sys-color-primary);
}
&.weak {
color: var(--md-sys-color-error);
}
}
@for $i from 1 through 10 {
tr.decay:nth-child(#{$i}) {
opacity: 1 - math.div($i, 10);
}
}
</style>

124
src/routes/(app)/learn/layout/+page.svelte
View File

@@ -1,124 +0,0 @@
<script lang="ts">
import { setContext } from "svelte";
import Layout from "$lib/components/layout/Layout.svelte";
import type { VisualLayoutConfig } from "$lib/components/layout/visual-layout";
import { writable, derived } from "svelte/store";
import { layout } from "$lib/undo-redo";
import Action from "$lib/components/Action.svelte";
import { serialPort } from "$lib/serial/connection";
let hasStarted = $state(false);
setContext<VisualLayoutConfig>("visual-layout-config", {
scale: 50,
inactiveScale: 0.5,
inactiveOpacity: 0.4,
strokeWidth: 1,
margin: 5,
fontSize: 9,
iconFontSize: 14,
});
const actions = derived(layout, (layout) => {
const result = new Set<number>();
for (const layer of layout) {
for (const key of layer) {
result.add(key[0].action);
}
}
return [...result];
});
const currentAction = writable(0);
const expected = derived(
[layout, currentAction],
([layout, currentAction]) => {
const result: Array<{ layer: number; key: number }> = [];
for (let layer = 0; layer <= layout.length; layer++) {
const layerArr = layout[layer];
if (layerArr === undefined) {
continue;
}
for (let key = 0; key <= layerArr.length; key++) {
if (layerArr[key]?.[0].action === currentAction) {
result.push({ layer, key });
}
}
}
return result;
},
);
const highlight = derived(
expected,
(expected) => new Set(expected.map(({ key }) => key)),
);
const highlightAction = derived(
currentAction,
(currentAction) => new Set([currentAction]),
);
const currentLayer = writable(0);
setContext("highlight", highlight);
setContext("highlight-action", highlightAction);
setContext("active-layer", currentLayer);
async function next() {
console.log("Next");
const nextAction = $actions[Math.floor(Math.random() * $actions.length)];
if (nextAction !== undefined) {
currentAction.set(nextAction);
currentLayer.set($expected[0]?.layer ?? 0);
const key = await $serialPort?.queryKey();
if ($expected.some(({ key: expectedKey }) => expectedKey === key)) {
console.log("Correct", key);
} else {
console.log("Incorrect", key);
}
next();
}
}
$effect(() => {
if ($serialPort && $layout[0]?.[0] && !hasStarted) {
hasStarted = true;
next();
}
});
</script>
<section>
<div class="challenge">
<Action display="inline-keys" action={$currentAction}></Action>
</div>
<Layout />
</section>
<style lang="scss">
.challenge {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100px;
font-size: 24px;
}
section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
</style>

652
src/routes/(app)/learn/sentence/+page.svelte
View File

@@ -1,652 +0,0 @@
<script lang="ts">
import { page } from "$app/stores";
import { SvelteMap } from "svelte/reactivity";
import CharRecorder from "$lib/charrecorder/CharRecorder.svelte";
import debounce from "$lib/util/debounce";
import { ReplayRecorder } from "$lib/charrecorder/core/recorder";
import { shuffleInPlace } from "$lib/util/shuffle";
import { fade, fly, slide } from "svelte/transition";
import TrackChords from "$lib/charrecorder/TrackChords.svelte";
import ChordHud from "$lib/charrecorder/ChordHud.svelte";
import type { InferredChord } from "$lib/charrecorder/core/types";
import TrackText from "$lib/charrecorder/TrackText.svelte";
import { browser } from "$app/environment";
import { expoOut } from "svelte/easing";
import { goto } from "$app/navigation";
import { untrack } from "svelte";
import {
type PageParam,
SENTENCE_TRAINER_PAGE_PARAMS,
} from "./configuration";
import {
AVG_WORD_LENGTH,
MILLIS_IN_SECOND,
SECONDS_IN_MINUTE,
} from "./constants";
import { pickNextWord } from "./word-selector";
/**
* Resolves parameter from search URL or returns default
* @param param {@link PageParam} generic parameter that can be provided
* in search url
* @return Value of the parameter converted to its type or default value
* if parameter is not present in the URL.
*/
function getParamOrDefault<T>(param: PageParam<T>): T {
if (browser) {
const value = $page.url.searchParams.get(param.key);
if (null !== value) {
return param.parse ? param.parse(value) : (value as unknown as T);
}
}
return param.default;
}
function viaLocalStorage<T>(key: string, initial: T) {
try {
return JSON.parse(localStorage.getItem(key) ?? "");
} catch {
return initial;
}
}
// Delay to ensure cursor is visible after focus is set.
// it is a workaround for conflict between goto call on sentence update
// and cursor focus when next word is selected.
const CURSOR_FOCUS_DELAY_MS = 10;
let masteryThresholds: [slow: number, fast: number, title: string][] = $state(
viaLocalStorage("mastery-thresholds", [
[1500, 1050, "Words"],
[3000, 2500, "Pairs"],
[5000, 3500, "Trios"],
]),
);
function reset() {
localStorage.removeItem("mastery-thresholds");
localStorage.removeItem("idle-timeout");
window.location.reload();
}
const inputSentence = $derived(
getParamOrDefault(SENTENCE_TRAINER_PAGE_PARAMS.sentence),
);
const wpmTarget = $derived(
getParamOrDefault(SENTENCE_TRAINER_PAGE_PARAMS.wpm),
);
const devTools = $derived(
getParamOrDefault(SENTENCE_TRAINER_PAGE_PARAMS.showDevTools),
);
let chordInputContainer: HTMLDivElement | null = null;
let sentenceWords = $derived(inputSentence.trim().split(/\s+/));
let inputSentenceLength = $derived(inputSentence.length);
let msPerChar = $derived(
(1 / ((wpmTarget / SECONDS_IN_MINUTE) * AVG_WORD_LENGTH)) *
MILLIS_IN_SECOND,
);
let totalMs = $derived(inputSentenceLength * msPerChar);
let msPerWord = $derived(
(inputSentenceLength * msPerChar) / sentenceWords.length,
);
let currentWord = $state("");
let wordStats = new SvelteMap<string, number[]>();
let wordMastery = new SvelteMap<string, number>();
let text = $state("");
let level = $state(0);
let bestWPM = $state(0);
let wpm = $state(0);
let chords: InferredChord[] = $state([]);
let recorder = $state(new ReplayRecorder());
let idle = $state(true);
let idleTime = $state(viaLocalStorage("idle-timeout", 100));
let idleTimeout: ReturnType<typeof setTimeout> | null = null;
$effect(() => {
if (wpm > bestWPM) {
bestWPM = wpm;
}
});
$effect(() => {
if (browser && $page.url.searchParams) {
selectNextWord();
}
});
$effect(() => {
localStorage.setItem("idle-timeout", idleTime.toString());
});
$effect(() => {
localStorage.setItem(
"mastery-thresholds",
JSON.stringify(masteryThresholds),
);
});
let words = $derived.by(() => {
const words = sentenceWords;
switch (level) {
case 0: {
shuffleInPlace(words);
return words;
}
case 1: {
const pairs = [];
for (let i = 0; i < words.length - 1; i++) {
pairs.push(`${words[i]} ${words[i + 1]}`);
}
shuffleInPlace(pairs);
return pairs;
}
case 2: {
const trios = [];
for (let i = 0; i < words.length - 2; i++) {
trios.push(`${words[i]} ${words[i + 1]} ${words[i + 2]}`);
}
shuffleInPlace(trios);
return trios;
}
default: {
return [inputSentence];
}
}
});
$effect(() => {
for (const [word, speeds] of wordStats.entries()) {
const level = word.split(" ").length - 1;
const masteryThreshold = masteryThresholds[level];
if (masteryThreshold === undefined) continue;
const averageSpeed = speeds.reduce((a, b) => a + b) / speeds.length;
wordMastery.set(
word,
1 -
Math.min(
1,
Math.max(
0,
(averageSpeed - masteryThreshold[1]) /
(masteryThreshold[0] - masteryThreshold[1]),
),
),
);
}
});
let progress = $derived(
level === masteryThresholds.length
? Math.min(1, Math.max(0, bestWPM / wpmTarget))
: words.length > 0
? words.reduce((a, word) => a + (wordMastery.get(word) ?? 0), 0) /
words.length
: 0,
);
let mastered = $derived(
words.length > 0
? words.filter((it) => wordMastery.get(it) === 1).length / words.length
: 0,
);
$effect(() => {
if (progress === 1 && level < masteryThresholds.length) {
level++;
}
});
function selectNextWord() {
const nextWord = pickNextWord(
words,
wordMastery,
untrack(() => currentWord),
);
currentWord = nextWord;
recorder = new ReplayRecorder(nextWord);
setTimeout(() => {
chordInputContainer?.focus();
}, CURSOR_FOCUS_DELAY_MS);
}
function checkInput() {
if (recorder.player.stepper.challenge.length === 0) return;
const replay = recorder.finish(false);
const elapsed = replay.finish - replay.start! - idleTime;
if (elapsed < masteryThresholds[level]![0]) {
const prevStats = wordStats.get(currentWord) ?? [];
prevStats.push(elapsed);
wordStats.set(currentWord, prevStats.slice(-10));
}
text = "";
setTimeout(() => {
selectNextWord();
});
}
$effect(() => {
if (!idle || !text) return;
if (text.trim() !== currentWord.trim()) return;
if (level === masteryThresholds.length) {
const replay = recorder.finish();
const elapsed = replay.finish - replay.start!;
text = "";
recorder = new ReplayRecorder(currentWord);
console.log(elapsed, totalMs);
wpm = (totalMs / elapsed) * wpmTarget;
} else {
checkInput();
}
});
function onkey(event: KeyboardEvent) {
if (idleTimeout) {
clearTimeout(idleTimeout);
}
idle = false;
recorder.next(event);
idleTimeout = setTimeout(() => {
idle = true;
}, idleTime);
}
function updateSentence(event: Event) {
const params = new URLSearchParams(window.location.search);
params.set(
SENTENCE_TRAINER_PAGE_PARAMS.sentence.key,
(event.target as HTMLInputElement).value,
);
goto(`?${params.toString()}`);
}
const debouncedUpdateSentence = debounce(
updateSentence,
getParamOrDefault(SENTENCE_TRAINER_PAGE_PARAMS.textAreaDebounceInMillis),
);
function handleInputAreaKeyDown(event: KeyboardEvent) {
if (event.key === "Enter" && !event.shiftKey) {
event.preventDefault(); // Prevent new line.
debouncedUpdateSentence.cancel(); // Cancel any pending debounced update
updateSentence(event); // Update immediately
}
}
</script>
<div>
<h1>Sentence Trainer</h1>
<textarea
rows="7"
cols="80"
oninput={debouncedUpdateSentence}
onkeydown={handleInputAreaKeyDown}>{untrack(() => inputSentence)}</textarea
>
<div class="levels">
{#each masteryThresholds as [, , title], i}
<button
class:active={level === i}
class:mastered={i < level || progress === 1}
class="threshold"
onclick={() => {
level = i;
selectNextWord();
}}
>
{title}
</button>
{/each}
<button
class:active={level === masteryThresholds.length}
class:mastered={masteryThresholds.length < level || progress === 1}
class="threshold"
onclick={() => {
level = masteryThresholds.length;
selectNextWord();
}}
>
{wpmTarget} WPM
</button>
{#each masteryThresholds as _, i}
<div
class="progress"
style:--progress="{-100 *
(1 - (level === i ? progress : i < level ? 1 : 0))}%"
style:--mastered="{-100 *
(1 - (level === i ? mastered : i < level ? 1 : 0))}%"
class:active={level === i}
></div>
{/each}
<div
class="progress"
style:--progress="-100%"
style:--mastered="{-100 *
(1 -
(level === masteryThresholds.length
? progress
: masteryThresholds.length < level
? 1
: 0))}%"
class:active={level === masteryThresholds.length}
></div>
</div>
<div class="sentence">
{#each sentenceWords as _, i}
{#if i !== sentenceWords.length - 1}
{@const word = sentenceWords.slice(i, i + 2).join(" ")}
{@const mastery = wordMastery.get(word) ?? 0}
<div
class="arch"
class:mastered={mastery === 1}
style:opacity={mastery}
style:grid-row={(i % 2) + 1}
style:grid-column="{i + 1} / span 2"
style:border-bottom="none"
></div>
{/if}
{/each}
{#each sentenceWords as word, i}
{@const mastery = wordMastery.get(word)}
<div
class="word"
class:mastered={mastery === 1}
style:opacity={mastery ?? 0}
style:grid-row={3}
style:grid-column={i + 1}
>
{word}
</div>
{/each}
{#each sentenceWords as _, i}
{#if i < sentenceWords.length - 2}
{@const word = sentenceWords.slice(i, i + 3).join(" ")}
{@const mastery = wordMastery.get(word) ?? 0}
<div
class="arch"
class:mastered={mastery === 1}
style:opacity={mastery}
style:grid-row={(i % 3) + 4}
style:grid-column="{i + 1} / span 3"
style:border-top="none"
></div>
{/if}
{/each}
</div>
{#if level === masteryThresholds.length}
{@const maxDigits = 4}
{@const indices = Array.from({ length: maxDigits }, (_, i) => i)}
{@const wpmString = Math.floor(bestWPM).toString().padStart(maxDigits, " ")}
<div class="finish" transition:slide>
<div
class="wpm"
style:grid-template-columns="repeat({maxDigits}, 1ch) 1ch auto"
style:opacity={progress}
style:font-size="3rem"
style:color="var(--md-sys-color-{progress === 1
? 'primary'
: 'on-background'})"
style:scale={(progress + 0.5) / 2}
>
{#each indices as i}
{@const char = wpmString[i]}
{#key char}
<div
style:grid-column={i + 1}
in:fly={{ y: 20, duration: 1000, easing: expoOut }}
out:fly={{ y: -20, duration: 1000, easing: expoOut }}
>
{char}
</div>
{/key}
{/each}
<div style:grid-column={maxDigits + 3} style:justify-self="start">
WPM
</div>
</div>
<div
class="wpm"
style:grid-template-columns="4ch 1ch auto"
style:font-size="1.5rem"
>
{#key wpm}
<div
style:grid-column={1}
style:justify-self="end"
transition:fade={{ duration: 200 }}
>
{Math.floor(wpm)}
</div>
{/key}
<div style:grid-column={3} style:justify-self="start">WPM</div>
</div>
</div>
{/if}
<ChordHud {chords} />
<div class="container">
<div
bind:this={chordInputContainer}
class="input-section"
onkeydown={onkey}
onkeyup={onkey}
tabindex="0"
role="textbox"
>
{#key recorder}
<div class="input" transition:fade={{ duration: 200 }}>
<CharRecorder replay={recorder.player} cursor={true} keys={true}>
<TrackText bind:text />
<TrackChords bind:chords />
</CharRecorder>
</div>
{/key}
</div>
</div>
{#if devTools}
<div>Dev Tools</div>
<button onclick={reset}>Reset</button>
<label>Idle Time <input bind:value={idleTime} /></label>
<table>
<tbody>
<tr>
<th>Total</th>
<td
><span style:color="var(--md-sys-color-tertiary)"
>{Math.round(totalMs)}</span
>ms
</td>
</tr>
<tr>
<th>Char</th>
<td
><span style:color="var(--md-sys-color-tertiary)"
>{Math.round(msPerChar)}</span
>ms
</td>
</tr>
<tr>
<th>Word</th>
<td
><span style:color="var(--md-sys-color-tertiary)"
>{Math.round(msPerWord)}</span
>ms
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
{#each masteryThresholds as _, i}
<tr>
<th>L{i + 1}</th>
<td><input bind:value={masteryThresholds[i]![0]} /></td>
<td><input bind:value={masteryThresholds[i]![1]} /></td>
<td><input bind:value={masteryThresholds[i]![2]} /></td>
</tr>
{/each}
</tbody>
</table>
<table>
<tbody>
{#each wordStats.entries() as [word, stats]}
{@const mastery = wordMastery.get(word) ?? 0}
<tr>
<th>{word}</th>
<td
style:color="var(--md-sys-color-{mastery === 1
? 'primary'
: 'tertiary'})"
>{Math.round(mastery * 100)}%
</td>
{#each stats as stat}
<td>{stat}</td>
{/each}
</tr>
{/each}
</tbody>
</table>
{/if}
</div>
<style lang="scss">
.levels {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
button {
margin: 0;
font-size: 1rem;
}
}
.wpm {
display: grid;
transition: scale 0.2s ease;
width: min-content;
* {
grid-row: 1;
}
}
.finish {
display: grid;
grid-template-rows: repeat(2, 1fr);
align-items: center;
justify-items: center;
font-weight: bold;
}
.sentence {
display: grid;
grid-template-rows: repeat(4, auto);
gap: 4px 1ch;
margin-block: 1rem;
width: min-content;
.word,
.arch {
transition: opacity 0.2s ease;
&.mastered {
border-color: var(--md-sys-color-primary);
color: var(--md-sys-color-primary);
}
}
.arch {
border: 2px solid var(--md-sys-color-outline);
height: 8px;
}
}
.progress {
position: relative;
grid-row: 2;
border: none;
background: var(--md-sys-color-outline-variant);
width: auto;
height: 1rem;
overflow: hidden;
&::before,
&::after {
display: block;
position: absolute;
transition: transform 0.2s;
width: 100%;
height: 100%;
content: "";
}
&::before {
transform: translateX(var(--progress));
background: var(--md-sys-color-outline);
}
&::after {
transform: translateX(var(--mastered));
background: var(--md-sys-color-primary);
}
}
.threshold {
grid-row: 1;
justify-self: center;
opacity: 0.5;
transition: opacity 0.2s;
width: auto;
&.mastered,
&.active {
opacity: 1;
}
&.mastered {
color: var(--md-sys-color-primary);
}
}
.input-section {
display: grid;
cursor: text;
:global(.cursor) {
opacity: 0;
}
}
.input {
display: flex;
grid-row: 1;
grid-column: 1;
transition:
outline 0.2s ease,
border-radius 0.2s ease;
margin-block: 1rem;
outline: 2px dashed transparent;
border-radius: 0.25rem;
padding: 1rem;
max-width: 16cm;
font-size: 1.5rem;
}
.input-section:focus-within {
outline: none;
.input {
outline-color: var(--md-sys-color-primary);
border-radius: 1rem;
}
:global(.cursor) {
opacity: 1;
}
}
</style>

32
src/routes/(app)/learn/sentence/configuration.ts
View File

@@ -1,32 +0,0 @@
export interface PageParam<T> {
key: string;
default: T;
parse?: (value: string) => T;
}
export const SENTENCE_TRAINER_PAGE_PARAMS: {
sentence: PageParam<string>;
wpm: PageParam<number>;
showDevTools: PageParam<boolean>;
textAreaDebounceInMillis: PageParam<number>;
} = {
sentence: {
key: "sentence",
default: "This text has been typed at the speed of thought",
},
wpm: {
key: "wpm",
default: 250,
parse: (value) => Number(value),
},
showDevTools: {
key: "dev",
default: false,
parse: (value) => value === "true",
},
textAreaDebounceInMillis: {
key: "debounceMillis",
default: 5000,
parse: (value) => Number(value),
},
};

8
src/routes/(app)/learn/sentence/constants.ts
View File

@@ -1,8 +0,0 @@
// Domain constants
export const AVG_WORD_LENGTH = 5;
export const SECONDS_IN_MINUTE = 60;
export const MILLIS_IN_SECOND = 1000;
// Error messages.
export const TOO_SHORT_SENTENCE_FOR_NGRAMS_MESSAGE =
"The sentence is too short to make N-Grams, please enter longer sentence";

0
src/routes/(app)/learn/sentence/types.ts
View File

69
src/routes/(app)/learn/sentence/word-selector.spec.ts
View File

@@ -1,69 +0,0 @@
import { describe, it, beforeEach, expect, vi } from "vitest";
import { pickNextWord } from "./word-selector";
import { untrack } from "svelte";
import { SvelteMap } from "svelte/reactivity";
import { TOO_SHORT_SENTENCE_FOR_NGRAMS_MESSAGE } from "./constants";
// Mock untrack so it simply executes the callback, allowing us to spy on its usage.
vi.mock("svelte", () => ({
untrack: vi.fn((fn: any) => fn()),
}));
describe("pickNextWord", () => {
let words: string[];
let wordMastery: SvelteMap<string, number>;
let currentWord: string;
beforeEach(() => {
vi.clearAllMocks();
// Set up sample words and mastery values.
words = ["alpha", "beta", "gamma"];
wordMastery = new SvelteMap<string, number>();
// For this test, assume none of the words are mastered.
words.forEach((word) => wordMastery.set(word, 0));
currentWord = "alpha";
});
it("should return a word different from current", () => {
// Force Math.random() to return a predictable value.
vi.spyOn(Math, "random").mockReturnValueOnce(0.3);
const nextWord = pickNextWord(words, wordMastery, currentWord);
// Since currentWord ("alpha") should be skipped, we expect next word.
expect(nextWord).toBe("beta");
});
it("should randomly skip words", () => {
// Force Math.random() to return a predictable value.
vi.spyOn(Math, "random").mockReturnValueOnce(0.6).mockReturnValueOnce(0.3);
const nextWord = pickNextWord(words, wordMastery, currentWord);
// Since currentWord ("alpha") should be skipped as current
// and "beta" should be randomly skipped we expect "gamma".
expect(nextWord).toBe("gamma");
});
it("should return current word if all other words were randomly skipped", () => {
// Force Math.random() to return a predictable value.
vi.spyOn(Math, "random").mockReturnValueOnce(0.6).mockReturnValueOnce(0.6);
const nextWord = pickNextWord(words, wordMastery, currentWord);
// Since all other words have been randomly skipped, we expect
// current word to be returned.
expect(nextWord).toBe("alpha");
});
it("current word should be passed untracked", () => {
pickNextWord(words, wordMastery, currentWord);
expect(untrack).toHaveBeenCalledTimes(0);
});
it("should return TOO_SHORT_SENTENCE_FOR_NGRAMS_MESSAGE if the words array is empty", () => {
const result = pickNextWord([], wordMastery, currentWord);
expect(result).toBe(TOO_SHORT_SENTENCE_FOR_NGRAMS_MESSAGE);
});
});

25
src/routes/(app)/learn/sentence/word-selector.ts
View File

@@ -1,25 +0,0 @@
import { TOO_SHORT_SENTENCE_FOR_NGRAMS_MESSAGE } from "./constants";
import { SvelteMap } from "svelte/reactivity";
export function pickNextWord(
words: string[],
wordMastery: SvelteMap<string, number>,
untrackedCurrentWord: string,
) {
const unmasteredWords = words
.map((it) => [it, wordMastery.get(it) ?? 0] as const)
.filter(([, it]) => it !== 1);
unmasteredWords.sort(([, a], [, b]) => a - b);
let nextWord =
unmasteredWords[0]?.[0] ??
words[0] ??
TOO_SHORT_SENTENCE_FOR_NGRAMS_MESSAGE;
// This is important to break infinite loop created by
// reading and writing `currentWord` inside $effect rune
for (const [word] of unmasteredWords) {
if (word === untrackedCurrentWord || Math.random() > 0.5) continue;
nextWord = word;
break;
}
return nextWord;
}

6
vitest.config.ts
View File

@@ -1,8 +1,10 @@
import { defineConfig } from "vitest/config";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { sveltekit } from "@sveltejs/kit/vite";
import { lezerGrammarPlugin } from "./vite-plugin-lezer";
import { layoutPlugin } from "./vite-plugin-layout";
export default defineConfig({
plugins: [svelte({ hot: !process.env.VITEST })],
plugins: [layoutPlugin(), sveltekit(), lezerGrammarPlugin()],
test: {
globals: true,
environment: "jsdom",