support hiding spoilers in chinese, japanese, korean

Author: istudyatuni

.github/workflows/pages.yaml

@@ -10,6 +10,9 @@ on:
       - "!frontend/scripts/**"
   workflow_dispatch:
 
+env:
+  JUST_COLOR: always
+
 jobs:
   build:
     # https://vite.dev/guide/static-deploy.html#github-pages
@@ -28,6 +31,12 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - uses: DeterminateSystems/nix-installer-action@main
+      - uses: DeterminateSystems/magic-nix-cache-action@main
+
+      - name: install tools
+        run: nix profile add "nixpkgs#just" && just -V
+
       - uses: actions/setup-node@v4
         with:
           node-version: "lts/*"

.justfile

@@ -1,15 +1,18 @@
+spoilers-font := "https://github.com/istudyatuni/spoilers-ahead-font/raw/refs/heads/master/SpoilersAhead.otf"
+spoilers-font-file := "frontend/public/SpoilersAhead.otf"
+
 [private]
 @default:
 	just --list --unsorted
 
 # run frontend dev server
-dev: (yarn "dev --host --port 8080")
+dev: download-spoilers-font (yarn "dev --host --port 8080")
 
 # build frontend
-build: (yarn-prod "build")
+build: download-spoilers-font (yarn-prod "build")
 
 # run frontend in prod mode
-preview: (yarn-prod "preview")
+preview: download-spoilers-font (yarn-prod "preview")
 
 # format frontend code
 format: (yarn "format")
@@ -22,6 +25,11 @@ yarn cmd:
 yarn-prod cmd:
 	export VITE_BUILD_VERSION=$(git rev-parse HEAD) && cd frontend && yarn {{cmd}}
 
+download-spoilers-font:
+	if [[ ! -e "{{ spoilers-font-file }}" ]]; then \
+		wget "{{ spoilers-font }}" -O "{{ spoilers-font-file }}"; \
+	fi
+
 # extract game translations
 extract-translations:
 	cargo r --release --package tr-extractor -- --write -vv --output-dir=frontend/public

frontend/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+/public/*.otf

frontend/src/App.svelte

@@ -14,9 +14,11 @@
     SESSION_SETTINGS,
     SELECTED_CATEGORIES,
     SETTINGS,
+    LANGUAGE,
   } from "@/lib/stores";
   import { get_facts_for } from "@/lib/data";
   import { init_i18n, t } from "@/lib/i18n";
+  import { NEED_EXTENDED_SPOILER_FONT } from "./lib/language";
 </script>
 
 <script>
@@ -50,7 +52,10 @@
   );
 </script>
 
-<main class={hide_categories} class:hide-spoilers={$SETTINGS.hide_spoilers}>
+<main
+  class={hide_categories}
+  class:hide-spoilers={$SETTINGS.hide_spoilers}
+  class:extended-spoiler-font={NEED_EXTENDED_SPOILER_FONT.has($LANGUAGE)}>
   <Sidebar />
   <Map />
   <FactsPanel {facts} />

frontend/src/Leaflet.svelte

@@ -35,8 +35,8 @@
 
     MAP_SIZE.subscribe((bounds) => {
       map
-        .fitBounds(map_bounds_to_leaflet(bounds))
-        .setView(bounds_center(bounds));
+        ?.fitBounds(map_bounds_to_leaflet(bounds))
+        ?.setView(bounds_center(bounds));
     });
 
     return {

frontend/src/app.scss

@@ -3,7 +3,14 @@
 
 @import url("https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap");
 
+// https://github.com/istudyatuni/spoilers-ahead-font
+@font-face {
+  font-family: "Spoilers Ahead";
+  src: url("/SpoilersAhead.otf") format("opentype");
+}
+
 $button-bg: #082638;
+$extended-spoilers-font: "Spoilers Ahead";
 $spoilers-font: "Flow Circular";
 
 :root {
@@ -161,7 +168,7 @@ input[type="checkbox"]:checked::after {
 rect.card,
 line.arrow,
 // "line.arrow +" is required to override leaflet's style for "svg path" with "pointer-events: none"
-line.arrow + path.arrow {
+line.arrow+path.arrow {
   @extend %pointer;
 
   pointer-events: auto;
@@ -188,7 +195,7 @@ line.arrow:hover,
 // hover on arrow head
 line.arrow:has(+ path.arrow:hover),
 // connection is active
-svg.active > line.arrow {
+svg.active>line.arrow {
   stroke: $arrow-color-hover;
 
   & + path.arrow {
@@ -254,9 +261,9 @@ $categories-colors: map.set($categories-colors, "other", $other-color);
     fill: $c;
 
     // card is hovered
-    svg:hover > &,
+    svg:hover>&,
     // card is opened
-    svg.active > & {
+    svg.active>& {
       fill: $highlight;
     }
   }
@@ -283,7 +290,7 @@ $categories-colors: map.set($categories-colors, "other", $other-color);
   }
 }
 
-.hide-spoilers {
+main.hide-spoilers {
   & .spoiler,
   &.spoiler {
     font-family: $spoilers-font;
@@ -306,6 +313,13 @@ $categories-colors: map.set($categories-colors, "other", $other-color);
   }
 }
 
+main.hide-spoilers.extended-spoiler-font {
+  & .spoiler,
+  &.spoiler {
+    font-family: $extended-spoilers-font;
+  }
+}
+
 // question sign background
 rect.img-q-bg {
   fill: var(--bg);

frontend/src/lib/language.js

@@ -28,6 +28,12 @@ export const LANGUAGE_NAMES = {
 	turkish: "Türkçe",
 };
 
+export const NEED_EXTENDED_SPOILER_FONT = new Set([
+	LANGUAGES.ChineseSimple,
+	LANGUAGES.Japanese,
+	LANGUAGES.Korean,
+]);
+
 export function detect_language() {
 	return (
 		get_language() ||