Compare commits

..

2 Commits

Author SHA1 Message Date
243a020e00 Racepicks: Rework racename display on mobile (fixes emoji bug)
All checks were successful
Build Formula11 Docker Image / pocketbase-docker (push) Successful in 40s
2025-03-23 19:00:48 +01:00
45d4cc1557 Env: Add runes2 npm dep for emoji support 2025-03-23 19:00:34 +01:00
3 changed files with 15 additions and 4 deletions

8
package-lock.json generated
View File

@ -27,6 +27,7 @@
"prettier": "^3.5.3", "prettier": "^3.5.3",
"prettier-plugin-svelte": "^3.3.3", "prettier-plugin-svelte": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.11", "prettier-plugin-tailwindcss": "^0.6.11",
"runes2": "^1.1.4",
"svelte": "^5.23.0", "svelte": "^5.23.0",
"svelte-check": "^4.1.5", "svelte-check": "^4.1.5",
"tailwindcss": "^3.4.17", "tailwindcss": "^3.4.17",
@ -3259,6 +3260,13 @@
"queue-microtask": "^1.2.2" "queue-microtask": "^1.2.2"
} }
}, },
"node_modules/runes2": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/runes2/-/runes2-1.1.4.tgz",
"integrity": "sha512-LNPnEDPOOU4ehF71m5JoQyzT2yxwD6ZreFJ7MxZUAoMKNMY1XrAo60H1CUoX5ncSm0rIuKlqn9JZNRrRkNou2g==",
"dev": true,
"license": "MIT"
},
"node_modules/sade": { "node_modules/sade": {
"version": "1.8.1", "version": "1.8.1",
"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz", "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",

View File

@ -26,6 +26,7 @@
"prettier": "^3.5.3", "prettier": "^3.5.3",
"prettier-plugin-svelte": "^3.3.3", "prettier-plugin-svelte": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.11", "prettier-plugin-tailwindcss": "^0.6.11",
"runes2": "^1.1.4",
"svelte": "^5.23.0", "svelte": "^5.23.0",
"svelte-check": "^4.1.5", "svelte-check": "^4.1.5",
"tailwindcss": "^3.4.17", "tailwindcss": "^3.4.17",

View File

@ -19,6 +19,7 @@
RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_HEIGHT,
RACE_PICTOGRAM_WIDTH, RACE_PICTOGRAM_WIDTH,
} from "$lib/config"; } from "$lib/config";
import { runes, substring } from "runes2";
import { format_date, shortdatetimeformat } from "$lib/date"; import { format_date, shortdatetimeformat } from "$lib/date";
import type { CurrentPickedUser, RacePick } from "$lib/schema"; import type { CurrentPickedUser, RacePick } from "$lib/schema";
import { get_by_value, get_driver_headshot_template } from "$lib/database"; import { get_by_value, get_driver_headshot_template } from "$lib/database";
@ -292,7 +293,7 @@
<div <div
use:popup={race_popupsettings(race?.id ?? "Invalid")} use:popup={race_popupsettings(race?.id ?? "Invalid")}
class="card mt-1 flex h-20 w-7 cursor-pointer flex-col !rounded-r-none p-2 lg:mt-2 lg:w-36" class="card mt-1 flex h-20 w-7 cursor-pointer flex-col !rounded-r-none lg:mt-2 lg:w-36 lg:p-2"
> >
<!-- For large screens --> <!-- For large screens -->
<span class="hidden text-sm font-bold lg:block"> <span class="hidden text-sm font-bold lg:block">
@ -304,9 +305,10 @@
<span class="hidden text-sm lg:block">Guessed: P{race?.pxx}</span> <span class="hidden text-sm lg:block">Guessed: P{race?.pxx}</span>
<!-- For small screens --> <!-- For small screens -->
<span class="block rotate-90 text-xs font-bold lg:hidden"> <!-- TODO: This requires the race name to end with an emoji, but this is never enforced -->
{race?.name.slice(0, 9)}{(race?.name.length ?? 9) > 9 ? "." : ""} <div class="mx-[2px] my-[25px] block text-lg font-bold lg:hidden">
</span> {runes(race?.name ?? "Invalid").at(-1)}
</div>
</div> </div>
<!-- The race result popup is triggered on click on the race --> <!-- The race result popup is triggered on click on the race -->