add tooltip stuff

[deploy]

.github/workflows/build.yml

@@ -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
 

package.json

@@ -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",

src/lib/chords/bad-chord.ts

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

src/lib/components/InputEdit.svelte

@@ -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>

src/lib/components/RingInput.svelte

@@ -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}

src/lib/editable-layout.ts

@@ -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()
+    },
+  }
+}

src/lib/fonts/material-symbols-rounded.scss

@@ -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"
+  font-variation-settings: "FILL" var(--icon-fill, 0), "wght" var(--icon-weigth, 400),
-    var(--icon-grade, 0);
+    "GRAD" var(--icon-grade, 0);
   font-weight: normal;
   font-style: normal;
   line-height: 1;

src/lib/style/tippy.scss

@@ -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);
+    }
+  }
+}

src/lib/tooltip.ts

@@ -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()
+    },
+  }
+}

src/routes/+layout.svelte

@@ -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
 

src/routes/config/layout/+page.svelte

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

static/languages/_groups.json

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

static/languages/_list.json

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