add tooltip stuff

[deploy]
This commit is contained in:
2023-07-18 01:40:30 +02:00
parent 4eb1e8c049
commit b04ed7fe7f
24 changed files with 1161 additions and 5143 deletions

View File

@@ -2,9 +2,9 @@ name: Build
on:
push:
branches: [ "master" ]
branches: ["master"]
pull_request:
branches: [ "master" ]
branches: ["master"]
jobs:
build:
@@ -26,7 +26,7 @@ jobs:
uses: actions/setup-node@v3
with:
node-version: 18.16.x
cache: 'npm'
cache: "npm"
- name: ⏬ Install Node dependencies
run: npm ci

5501
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -27,6 +27,7 @@
"stylelint-config-recommended-scss": "^12.0.0",
"stylelint-config-clean-order": "^5.0.1",
"glob": "^10.3.1",
"cypress": "^12.17.1",
"flexsearch": "^0.7.31",
"@sveltejs/adapter-static": "^2.0.2",
"@sveltejs/kit": "^1.20.4",

View File

@@ -3,34 +3,34 @@ col:
- gap: 156
row:
- row:
- { d: 30, e: 31, n: 32, w: 33, s: 34 }
- {d: 30, e: 31, n: 32, w: 33, s: 34}
- col:
- { d: 25, e: 26, n: 27, w: 28, s: 29 }
- { d: 40, e: 41, n: 42, w: 43, s: 44 }
- {d: 25, e: 26, n: 27, w: 28, s: 29}
- {d: 40, e: 41, n: 42, w: 43, s: 44}
- col:
- { d: 20, e: 21, n: 22, w: 23, s: 24 }
- { d: 35, e: 36, n: 37, w: 38, s: 39 }
- { d: 15, e: 16, n: 17, w: 18, s: 19 }
- {d: 20, e: 21, n: 22, w: 23, s: 24}
- {d: 35, e: 36, n: 37, w: 38, s: 39}
- {d: 15, e: 16, n: 17, w: 18, s: 19}
- row:
- { d: 60, w: 61, n: 62, e: 63, s: 64 }
- {d: 60, w: 61, n: 62, e: 63, s: 64}
- col:
- { d: 65, w: 66, n: 67, e: 68, s: 69 }
- { d: 80, w: 81, n: 82, e: 83, s: 84 }
- {d: 65, w: 66, n: 67, e: 68, s: 69}
- {d: 80, w: 81, n: 82, e: 83, s: 84}
- col:
- { d: 70, w: 71, n: 72, e: 73, s: 74 }
- { d: 85, w: 86, n: 87, e: 88, s: 89 }
- { d: 75, w: 76, n: 77, e: 78, s: 79 }
- {d: 70, w: 71, n: 72, e: 73, s: 74}
- {d: 85, w: 86, n: 87, e: 88, s: 89}
- {d: 75, w: 76, n: 77, e: 78, s: 79}
- gap: 48
margin-top: -32
row:
- { d: 10, e: 11, n: 12, w: 13, s: 14 }
- { d: 55, w: 56, n: 57, e: 58, s: 59 }
- {d: 10, e: 11, n: 12, w: 13, s: 14}
- {d: 55, w: 56, n: 57, e: 58, s: 59}
- gap: 160
row:
- { d: 5, e: 6, n: 7, w: 8, s: 9 }
- { d: 50, w: 51, n: 52, e: 53, s: 54 }
- {d: 5, e: 6, n: 7, w: 8, s: 9}
- {d: 50, w: 51, n: 52, e: 53, s: 54}
- gap: 320
margin-top: -12
row:
- { d: 0, e: 1, n: 2, w: 3, s: 4 }
- { d: 45, w: 46, n: 47, e: 48, s: 49 }
- {d: 0, e: 1, n: 2, w: 3, s: 4}
- {d: 45, w: 46, n: 47, e: 48, s: 49}

View File

@@ -1,5 +0,0 @@
import type {CharaLayout} from "$lib/serialization/layout"
export function isBadChord(chord: number[], layout: CharaLayout) {
const adjacentHits = layout[0].
}

View File

@@ -0,0 +1,16 @@
<script lang="ts">
import {layout} from "$lib/serial/connection"
import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
export let id: number = 0
</script>
<table>
{#each $layout as layer, i}
{@const action = KEYMAP_CODES[layer[id]]}
<tr>
<th class="icon">counter_{i + 1}</th>
<td>{action?.id}</td>
</tr>
{/each}
</table>

View File

@@ -3,6 +3,7 @@
import type {CharaLayout} from "$lib/serialization/layout"
import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
import type {KeyInfo} from "$lib/serial/keymap-codes"
import {editableLayout} from "$lib/editable-layout"
export let activeLayer = 0
export let keys: Record<"d" | "s" | "n" | "w" | "e", number>
@@ -19,13 +20,6 @@
return 25 * quadrant + layerOffsetIndex * layerOffset
}
function getKeyDescriptions(keys: KeyInfo[]): string {
return keys
.filter(it => !!it)
.map(({title, id, code}, i) => `${title || id || code} (${layerNames[i]})`)
.join("\n")
}
function getActions(id: number, layout: CharaLayout): KeyInfo[] {
return Array.from({length: 3}).map((_, i) => {
const actionId = layout?.[i][id]
@@ -38,7 +32,7 @@
{#each [keys.n, keys.e, keys.s, keys.w] as id, quadrant}
{@const actions = getActions(id, $layout)}
<button
title={getKeyDescriptions(actions)}
use:editableLayout={{id, quadrant}}
class:active={actions.some(it => it && $highlightActions?.includes(it.code))}
>
{#each actions as keyInfo, layer}

View File

@@ -0,0 +1,31 @@
import tippy from "tippy.js"
import InputEdit from "$lib/components/InputEdit.svelte"
import type {Action} from "svelte/action"
export const editableLayout: Action<HTMLButtonElement, {id: number; quadrant: number}> = (
node,
{id, quadrant},
) => {
let component: InputEdit | undefined
const edit = tippy(node, {
interactive: true,
appendTo: document.body,
placement: (["top", "right", "bottom", "left"] as const)[quadrant],
onShow(instance) {
component ??= new InputEdit({
target: instance.popper.querySelector(".tippy-content")!,
props: {id},
})
},
onHidden() {
component?.$destroy()
component = undefined
},
})
return {
destroy() {
edit.destroy()
},
}
}

View File

@@ -15,8 +15,8 @@
font-family: "Material Symbols Rounded";
font-size: 24px;
font-feature-settings: "liga";
font-variation-settings: "FILL" var(--icon-fill, 0), "wght" var(--icon-weigth, 400), "GRAD"
var(--icon-grade, 0);
font-variation-settings: "FILL" var(--icon-fill, 0), "wght" var(--icon-weigth, 400),
"GRAD" var(--icon-grade, 0);
font-weight: normal;
font-style: normal;
line-height: 1;

12
src/lib/style/tippy.scss Normal file
View File

@@ -0,0 +1,12 @@
.tippy-box[data-theme~="surface-variant"] {
color: var(--md-sys-color-on-surface-variant);
background-color: var(--md-sys-color-surface-variant);
filter: drop-shadow(0 0 12px #000a);
@each $placement in top, bottom, right, left {
&[data-placement^="#{$placement}"] > .tippy-arrow::before {
border-#{$placement}-color: var(--md-sys-color-surface-variant);
}
}
}

13
src/lib/tooltip.ts Normal file
View File

@@ -0,0 +1,13 @@
import type {Action} from "svelte/action"
import tippy from "tippy.js"
import type {Props} from "tippy.js"
export const tooltip: Action = function (node, props?: Partial<Props>) {
const instance = tippy(node, props)
return {
destroy() {
instance.destroy()
},
}
}

View File

@@ -2,6 +2,7 @@
import "$lib/fonts/noto-sans-mono.scss"
import "$lib/fonts/material-symbols-rounded.scss"
import "$lib/style/scrollbar.scss"
import "$lib/style/tippy.scss"
import {onMount} from "svelte"
import {applyTheme, argbFromHex, themeFromSourceColor} from "@material/material-color-utilities"
import Navigation from "$lib/components/Navigation.svelte"
@@ -14,6 +15,19 @@
import {initLocalStorage} from "$lib/serial/storage"
import {browser} from "$app/environment"
import BrowserWarning from "./BrowserWarning.svelte"
import "tippy.js/animations/shift-away.css"
import "tippy.js/dist/tippy.css"
import tippy from "tippy.js"
if (browser) {
tippy.setDefaultProps({
animation: "shift-away",
theme: "surface-variant",
allowHTML: true,
duration: 250,
arrow: true,
})
}
export let data: LayoutServerData

View File

@@ -19,8 +19,7 @@
await navigator.clipboard.writeText(url.toString())
tippy(event.target, {
content: "Share url copied!",
hideOnClick: true,
duration: 4000,
delay: [0, 1000000],
onHidden(instance) {
instance.destroy()
},

View File

@@ -27,13 +27,7 @@
},
{
"name": "french",
"languages": [
"french",
"french_1k",
"french_2k",
"french_10k",
"french_600k"
]
"languages": ["french", "french_1k", "french_2k", "french_10k", "french_600k"]
},
{
"name": "german",
@@ -53,13 +47,7 @@
},
{
"name": "italian",
"languages": [
"italian",
"italian_1k",
"italian_7k",
"italian_60k",
"italian_280k"
]
"languages": ["italian", "italian_1k", "italian_7k", "italian_60k", "italian_280k"]
},
{
"name": "friulian",
@@ -83,26 +71,11 @@
},
{
"name": "russian",
"languages": [
"russian",
"russian_1k",
"russian_10k",
"russian_25k",
"russian_50k",
"russian_375k"
]
"languages": ["russian", "russian_1k", "russian_10k", "russian_25k", "russian_50k", "russian_375k"]
},
{
"name": "polish",
"languages": [
"polish",
"polish_2k",
"polish_5k",
"polish_10k",
"polish_20k",
"polish_40k",
"polish_200k"
]
"languages": ["polish", "polish_2k", "polish_5k", "polish_10k", "polish_20k", "polish_40k", "polish_200k"]
},
{
"name": "czech",
@@ -114,13 +87,7 @@
},
{
"name": "ukrainian",
"languages": [
"ukrainian",
"ukrainian_1k",
"ukrainian_10k",
"ukrainian_50k",
"ukrainian_endings"
]
"languages": ["ukrainian", "ukrainian_1k", "ukrainian_10k", "ukrainian_50k", "ukrainian_endings"]
},
{
"name": "lithuanian",
@@ -132,11 +99,7 @@
},
{
"name": "kurdish_central",
"languages": [
"kurdish_central",
"kurdish_central_2k",
"kurdish_central_45k"
]
"languages": ["kurdish_central", "kurdish_central_2k", "kurdish_central_45k"]
},
{
"name": "greek",
@@ -232,13 +195,7 @@
},
{
"name": "persian",
"languages": [
"persian",
"persian_1k",
"persian_5k",
"persian_20k",
"persian_romanized"
]
"languages": ["persian", "persian_1k", "persian_5k", "persian_20k", "persian_romanized"]
},
{
"name": "kazakh",
@@ -354,12 +311,7 @@
},
{
"name": "macedonian",
"languages": [
"macedonian",
"macedonian_1k",
"macedonian_10k",
"macedonian_75k"
]
"languages": ["macedonian", "macedonian_1k", "macedonian_10k", "macedonian_75k"]
},
{
"name": "belarusian",
@@ -434,13 +386,7 @@
},
{
"name": "other",
"languages": [
"lojban_gismu",
"lojban_cmavo",
"pig_latin",
"twitch_emotes",
"git"
]
"languages": ["lojban_gismu", "lojban_cmavo", "pig_latin", "twitch_emotes", "git"]
},
{
"name": "amharic",

View File

@@ -1,256 +1,256 @@
[
"english"
,"english_1k"
,"english_5k"
,"english_10k"
,"english_25k"
,"english_450k"
,"english_commonly_misspelled"
,"english_contractions"
,"english_doubleletter"
,"spanish"
,"spanish_1k"
,"spanish_10k"
,"french"
,"french_1k"
,"french_2k"
,"french_10k"
,"french_600k"
,"nepali"
,"nepali_1k"
,"sanskrit"
,"santali"
,"azerbaijani"
,"azerbaijani_1k"
,"arabic"
,"arabic_10k"
,"malagasy"
,"malagasy_1k"
,"malay"
,"mongolian"
,"mongolian_10k"
,"korean"
,"korean_1k"
,"korean_5k"
,"russian"
,"russian_1k"
,"russian_10k"
,"russian_25k"
,"russian_50k"
,"russian_375k"
,"ukrainian"
,"ukrainian_1k"
,"ukrainian_10k"
,"ukrainian_50k"
,"ukrainian_endings"
,"portuguese"
,"portuguese_acentos_e_cedilha"
,"portuguese_3k"
,"indonesian"
,"indonesian_1k"
,"indonesian_10k"
,"kurdish_central"
,"kurdish_central_2k"
,"kurdish_central_45k"
,"german"
,"german_1k"
,"german_10k"
,"german_250k"
,"swiss_german"
,"swiss_german_1k"
,"afrikaans"
,"afrikaans_1k"
,"afrikaans_10k"
,"georgian"
,"tamil"
,"tamil_1k"
,"telugu"
,"telugu_1k"
,"greek"
,"greek_1k"
,"greek_5k"
,"greek_10k"
,"greek_25k"
,"turkish"
,"irish"
,"italian"
,"italian_1k"
,"italian_7k"
,"italian_60k"
,"italian_280k"
,"friulian"
,"latin"
,"thai"
,"polish"
,"polish_2k"
,"polish_5k"
,"polish_10k"
,"polish_20k"
,"polish_40k"
,"polish_200k"
,"czech"
,"czech_1k"
,"czech_10k"
,"slovak"
,"slovak_1k"
,"slovak_10k"
,"slovenian"
,"croatian"
,"dutch"
,"dutch_1k"
,"dutch_10k"
,"filipino"
,"filipino_1k"
,"danish"
,"danish_1k"
,"danish_10k"
,"hungarian"
,"hungarian_2k"
,"norwegian"
,"norwegian_1k"
,"norwegian_5k"
,"norwegian_10k"
,"norwegian_nynorsk"
,"hebrew"
,"hebrew_1k"
,"hebrew_5k"
,"hebrew_10k"
,"icelandic_1k"
,"romanian"
,"lorem_ipsum"
,"finnish"
,"finnish_1k"
,"finnish_10k"
,"estonian"
,"estonian_1k"
,"estonian_10k"
,"udmurt"
,"welsh"
,"welsh_1k"
,"persian"
,"persian_1k"
,"persian_5k"
,"persian_20k"
,"persian_romanized"
,"kazakh"
,"kazakh_1k"
,"vietnamese"
,"vietnamese_1k"
,"vietnamese_5k"
,"jyutping"
,"pinyin"
,"pinyin_1k"
,"pinyin_10k"
,"hausa"
,"hausa_1k"
,"swedish"
,"swedish_1k"
,"serbian"
,"yoruba_1k"
,"swahili_1k"
,"maori_1k"
,"catalan"
,"catalan_1k"
,"lojban_gismu"
,"lojban_cmavo"
,"lithuanian"
,"lithuanian_1k"
,"lithuanian_3k"
,"bulgarian"
,"bangla"
,"bangla_letters"
,"bangla_10k"
,"toki_pona"
,"toki_pona_ku_suli"
,"toki_pona_ku_lili"
,"esperanto"
,"esperanto_1k"
,"esperanto_10k"
,"esperanto_25k"
,"esperanto_36k"
,"esperanto_x_sistemo"
,"esperanto_x_sistemo_1k"
,"esperanto_x_sistemo_10k"
,"esperanto_x_sistemo_25k"
,"esperanto_x_sistemo_36k"
,"esperanto_h_sistemo"
,"esperanto_h_sistemo_1k"
,"esperanto_h_sistemo_10k"
,"esperanto_h_sistemo_25k"
,"esperanto_h_sistemo_36k"
,"kyrgyz"
,"urdu"
,"urdu_1k"
,"urdu_5k"
,"albanian"
,"albanian_1k"
,"shona"
,"shona_1k"
,"armenian_western"
,"armenian_western_1k"
,"myanmar_burmese"
,"japanese_hiragana"
,"japanese_katakana"
,"sinhala"
,"latvian"
,"latvian_1k"
,"maltese"
,"maltese_1k"
,"twitch_emotes"
,"git"
,"pig_latin"
,"hindi"
,"hindi_1k"
,"hinglish"
,"macedonian"
,"macedonian_1k"
,"macedonian_10k"
,"macedonian_75k"
,"belarusian_1k"
,"malayalam"
,"amharic"
,"oromo"
,"oromo_1k"
,"oromo_5k"
,"wordle"
,"wordle_1k"
,"code_python"
,"code_python_1k"
,"code_python_2k"
,"code_python_5k"
,"code_fsharp"
,"code_c"
,"code_csharp"
,"code_css"
,"code_c++"
,"code_dart"
,"code_brainfck"
,"code_javascript"
,"code_javascript_1k"
,"code_julia"
,"code_haskell"
,"code_html"
,"code_pascal"
,"code_java"
,"code_kotlin"
,"code_go"
,"code_rust"
,"code_ruby"
,"code_r"
,"code_swift"
,"code_scala"
,"code_bash"
,"code_powershell"
,"code_lua"
,"code_luau"
,"code_matlab"
,"code_sql"
,"code_perl"
,"code_php"
,"code_vim"
,"code_vimscript"
,"code_opencl"
,"code_visual_basic"
,"code_arduino"
,"code_systemverilog"
"english",
"english_1k",
"english_5k",
"english_10k",
"english_25k",
"english_450k",
"english_commonly_misspelled",
"english_contractions",
"english_doubleletter",
"spanish",
"spanish_1k",
"spanish_10k",
"french",
"french_1k",
"french_2k",
"french_10k",
"french_600k",
"nepali",
"nepali_1k",
"sanskrit",
"santali",
"azerbaijani",
"azerbaijani_1k",
"arabic",
"arabic_10k",
"malagasy",
"malagasy_1k",
"malay",
"mongolian",
"mongolian_10k",
"korean",
"korean_1k",
"korean_5k",
"russian",
"russian_1k",
"russian_10k",
"russian_25k",
"russian_50k",
"russian_375k",
"ukrainian",
"ukrainian_1k",
"ukrainian_10k",
"ukrainian_50k",
"ukrainian_endings",
"portuguese",
"portuguese_acentos_e_cedilha",
"portuguese_3k",
"indonesian",
"indonesian_1k",
"indonesian_10k",
"kurdish_central",
"kurdish_central_2k",
"kurdish_central_45k",
"german",
"german_1k",
"german_10k",
"german_250k",
"swiss_german",
"swiss_german_1k",
"afrikaans",
"afrikaans_1k",
"afrikaans_10k",
"georgian",
"tamil",
"tamil_1k",
"telugu",
"telugu_1k",
"greek",
"greek_1k",
"greek_5k",
"greek_10k",
"greek_25k",
"turkish",
"irish",
"italian",
"italian_1k",
"italian_7k",
"italian_60k",
"italian_280k",
"friulian",
"latin",
"thai",
"polish",
"polish_2k",
"polish_5k",
"polish_10k",
"polish_20k",
"polish_40k",
"polish_200k",
"czech",
"czech_1k",
"czech_10k",
"slovak",
"slovak_1k",
"slovak_10k",
"slovenian",
"croatian",
"dutch",
"dutch_1k",
"dutch_10k",
"filipino",
"filipino_1k",
"danish",
"danish_1k",
"danish_10k",
"hungarian",
"hungarian_2k",
"norwegian",
"norwegian_1k",
"norwegian_5k",
"norwegian_10k",
"norwegian_nynorsk",
"hebrew",
"hebrew_1k",
"hebrew_5k",
"hebrew_10k",
"icelandic_1k",
"romanian",
"lorem_ipsum",
"finnish",
"finnish_1k",
"finnish_10k",
"estonian",
"estonian_1k",
"estonian_10k",
"udmurt",
"welsh",
"welsh_1k",
"persian",
"persian_1k",
"persian_5k",
"persian_20k",
"persian_romanized",
"kazakh",
"kazakh_1k",
"vietnamese",
"vietnamese_1k",
"vietnamese_5k",
"jyutping",
"pinyin",
"pinyin_1k",
"pinyin_10k",
"hausa",
"hausa_1k",
"swedish",
"swedish_1k",
"serbian",
"yoruba_1k",
"swahili_1k",
"maori_1k",
"catalan",
"catalan_1k",
"lojban_gismu",
"lojban_cmavo",
"lithuanian",
"lithuanian_1k",
"lithuanian_3k",
"bulgarian",
"bangla",
"bangla_letters",
"bangla_10k",
"toki_pona",
"toki_pona_ku_suli",
"toki_pona_ku_lili",
"esperanto",
"esperanto_1k",
"esperanto_10k",
"esperanto_25k",
"esperanto_36k",
"esperanto_x_sistemo",
"esperanto_x_sistemo_1k",
"esperanto_x_sistemo_10k",
"esperanto_x_sistemo_25k",
"esperanto_x_sistemo_36k",
"esperanto_h_sistemo",
"esperanto_h_sistemo_1k",
"esperanto_h_sistemo_10k",
"esperanto_h_sistemo_25k",
"esperanto_h_sistemo_36k",
"kyrgyz",
"urdu",
"urdu_1k",
"urdu_5k",
"albanian",
"albanian_1k",
"shona",
"shona_1k",
"armenian_western",
"armenian_western_1k",
"myanmar_burmese",
"japanese_hiragana",
"japanese_katakana",
"sinhala",
"latvian",
"latvian_1k",
"maltese",
"maltese_1k",
"twitch_emotes",
"git",
"pig_latin",
"hindi",
"hindi_1k",
"hinglish",
"macedonian",
"macedonian_1k",
"macedonian_10k",
"macedonian_75k",
"belarusian_1k",
"malayalam",
"amharic",
"oromo",
"oromo_1k",
"oromo_5k",
"wordle",
"wordle_1k",
"code_python",
"code_python_1k",
"code_python_2k",
"code_python_5k",
"code_fsharp",
"code_c",
"code_csharp",
"code_css",
"code_c++",
"code_dart",
"code_brainfck",
"code_javascript",
"code_javascript_1k",
"code_julia",
"code_haskell",
"code_html",
"code_pascal",
"code_java",
"code_kotlin",
"code_go",
"code_rust",
"code_ruby",
"code_r",
"code_swift",
"code_scala",
"code_bash",
"code_powershell",
"code_lua",
"code_luau",
"code_matlab",
"code_sql",
"code_perl",
"code_php",
"code_vim",
"code_vimscript",
"code_opencl",
"code_visual_basic",
"code_arduino",
"code_systemverilog"
]