diff --git a/liberica/src/components/Navbar.tsx b/liberica/src/components/Navbar.tsx index c3debf8..03b15a6 100644 --- a/liberica/src/components/Navbar.tsx +++ b/liberica/src/components/Navbar.tsx @@ -1,22 +1,9 @@ import { PropsWithChildren } from "react"; -import { FaHome } from "react-icons/fa"; -import { useNavigate } from "react-router-dom"; -import { Button } from "components/lila/button"; export function Navbar(props: PropsWithChildren) { return ( -
+
{props.children}
); } - -export function HomeButton() { - const navigate = useNavigate(); - - return ( - - ); -} diff --git a/liberica/src/components/map/Map.tsx b/liberica/src/components/map/Map.tsx index 74074a8..557857e 100644 --- a/liberica/src/components/map/Map.tsx +++ b/liberica/src/components/map/Map.tsx @@ -12,7 +12,6 @@ import { import { createContext, useContext, useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { MrXIcon, TrainIcon, DetectiveIcon } from "components/MapIcons"; -import { Button } from "components/lila"; import { Marker } from "./Marker"; import { GameState, Stop, TeamState, Train } from "lib/bindings"; import { getStops } from "lib/api"; @@ -28,29 +27,10 @@ const CENTER: [number, number] = [49.0046, 8.403]; const DEFAULT_ZOOM = 15; export type MapProps = React.PropsWithChildren<{ - tileProps?: Partial; - containerProps?: Partial; + tileProps?: Omit, "className">; + containerProps?: Omit, "className">; }>; -function ResetMapViewButton() { - const map = useMap(); - const { t } = useTranslation(); - - return ( -
-
- -
-
- ); -} - function TrainMarker(props: { train: Train; onClick?: (train: Train) => void; @@ -177,7 +157,7 @@ export function Map( - + {props.children} ); diff --git a/liberica/src/i18n/de.json b/liberica/src/i18n/de.json index 3f5e6ba..ea02db6 100644 --- a/liberica/src/i18n/de.json +++ b/liberica/src/i18n/de.json @@ -18,5 +18,6 @@ "FailedParseReplay": "Replay-Datei konnte nicht geparst werden", "ReplayTooBig": "Replay-Datei ist zu groß", "Speed": "Geschwindigkeit", - "Cancel": "Abbrechen" + "Cancel": "Abbrechen", + "EmbarkPlaceholder": "Zum einsteigen auf Zug klicken" } diff --git a/liberica/src/i18n/en.json b/liberica/src/i18n/en.json index d6b004e..f7c7bb8 100644 --- a/liberica/src/i18n/en.json +++ b/liberica/src/i18n/en.json @@ -18,5 +18,6 @@ "FailedParseReplay": "failed to parse replay file", "ReplayTooBig": "replay file is too big", "Speed": "Speed", - "Cancel": "Cancel" + "Cancel": "Cancel", + "EmbarkPlaceholder": "Click on train to embark" } diff --git a/liberica/src/lib/theme.ts b/liberica/src/lib/theme.ts index 1e11e26..c5042f2 100644 --- a/liberica/src/lib/theme.ts +++ b/liberica/src/lib/theme.ts @@ -2,10 +2,25 @@ import THEMES_JSON from "assets/themes.json"; import { hexToHSL } from "lib/colors"; import { camelToKebabCase } from "lib/util"; +const LOCAL_STORAGE_THEME_KEY = "theme"; +const BROADCAST_CHANNEL_NAME = "theme"; + export type ThemeName = keyof typeof THEMES_JSON; + export const THEMES: Record = THEMES_JSON; export const THEME_NAMES = Object.keys(THEMES) as ThemeName[]; +export const BROADCAST_CHANNEL = new BroadcastChannel(BROADCAST_CHANNEL_NAME); + +BROADCAST_CHANNEL.onmessage = (msg: { data: ThemeName }) => { + console.debug( + `Received Boradcast Message on channel ${BROADCAST_CHANNEL_NAME}: `, + msg.data, + ); + if (!THEME_NAMES.includes(msg.data)) return; + applyTheme(msg.data, { persistent: false, broadcast: false }); +}; + export interface Theme { base: string; surface: string; @@ -20,8 +35,6 @@ export interface Theme { onMuted: string; } -const LOCAL_STORAGE_THEME_KEY = "theme"; - export function saveTheme(themeName?: ThemeName) { if (!themeName) { localStorage.removeItem(LOCAL_STORAGE_THEME_KEY); @@ -35,8 +48,22 @@ export function loadTheme(): ThemeName | null { return localStorage.getItem(LOCAL_STORAGE_THEME_KEY) as ThemeName | null; } -export function applyTheme(themeName: ThemeName, persistent = false) { +export interface ApplyThemeOptions { + persistent: boolean; + broadcast: boolean; +} + +const applyThemeOptionsDefaults: ApplyThemeOptions = { + persistent: false, + broadcast: false, +}; + +export function applyTheme(themeName: ThemeName, options: ApplyThemeOptions) { console.assert(THEME_NAMES.includes(themeName), "Set Theme does not exist"); + const { persistent, broadcast } = { + ...applyThemeOptionsDefaults, + ...options, + }; const style = document.documentElement.style; const theme = THEMES[themeName]; @@ -58,4 +85,5 @@ export function applyTheme(themeName: ThemeName, persistent = false) { } if (persistent) saveTheme(themeName); + if (broadcast) BROADCAST_CHANNEL.postMessage(themeName); } diff --git a/liberica/src/page/Debug.tsx b/liberica/src/page/Debug.tsx index 26cb357..28fb73c 100644 --- a/liberica/src/page/Debug.tsx +++ b/liberica/src/page/Debug.tsx @@ -22,7 +22,12 @@ export function Debug() { > {