Stop using string

package.json

@@ -33,6 +33,7 @@
     "@fluentui/svg-icons": "^1.1.272",
     "@fontsource-variable/inter": "^5.1.1",
     "@fontsource/flow-rounded": "^5.1.1",
+    "@total-typescript/ts-reset": "^0.6.1",
     "expressive-code": "^0.41.2",
     "import-meta-resolve": "^4.1.0",
     "mime": "^4.0.6",

src/app.d.ts

@@ -3,6 +3,7 @@
 
 import type { TranslationFunctions, Locales } from "$lib/i18n/i18n-types"
 import type { User } from "$lib/api/user"
+import "@total-typescript/ts-reset"
 
 declare global {
 	namespace App {

src/lib/api/card.ts

@@ -1,7 +1,7 @@
 import { z } from "zod"
 import type { Parser } from "."
 import { Json, String } from "./utility/responses"
-import { games } from "$lib/app/formatting"
+import { games, type Game } from "$lib/app/formatting"
 
 export interface Card {
 	luid: string
@@ -16,9 +16,9 @@ export interface GameCard {
 	name: string
 	rating: number
 }
-export type CardUserGames = Record<string, GameCard | null>
+export type CardUserGames = Record<Game, GameCard | null>
 
-export function getAvailableGame(cardUserGames: CardUserGames, active?: string, target?: string) {
+export function getAvailableGame(cardUserGames: CardUserGames, active?: Game, target?: Game) {
 	if (target && cardUserGames[target]) return target
 	if (active && cardUserGames[active]) return active
 	return Object.keys(cardUserGames).find(
@@ -41,7 +41,7 @@ const Routes = {
 				username: z.string()
 			})
 		},
-		response: Json<{ game: string }>()
+		response: Json<{ game: Game }>()
 	},
 	link: {
 		authenticated: true,

src/lib/api/settings.ts

@@ -1,11 +1,12 @@
 import { z } from "zod"
 import type { Parser } from "."
 import { Json } from "./utility/responses"
+import type { Game } from "$lib/app/formatting"
 
 export interface Setting {
 	key: string
 	type: "String" | "Boolean"
-	game: string
+	game: Game
 	value?: boolean | string
 }
 
@@ -19,14 +20,14 @@ export const userVisibleSettings: Array<string> = [
 	"waccaAlwaysVip",
 	"waccaInfiniteWp"
 ]
-export const userSettingMatches: Record<string, Array<string>> = {
+export const userSettingMatches: Record<Game, string[]> = {
 	chu3: ["chu3", "chu3-matching"],
 	mai2: ["general", "mai2"],
 	wacca: ["general", "wacca"],
 	ongeki: ["ongeki"]
 }
 
-export function settingMatches(selectedGame: string, setting: Setting) {
+export function settingMatches(selectedGame: Game, setting: Setting) {
 	return (
 		userSettingMatches[selectedGame].includes(setting.game) &&
 		userVisibleSettings.includes(setting.key)

src/lib/app/assets.ts

@@ -1,7 +1,9 @@
+import type { Game } from "./formatting"
+
 export function getProfilePictureUrl(profilePicture: string) {
 	return `/net/asset/net/portrait/${profilePicture}`
 }
-export function getMusicJacket(game: string, musicId: number) {
+export function getMusicJacket(game: Game, musicId: number) {
 	// Removing any characters at the beginning if 4+ characters long seems to fix the thumbnail resolving for some reason on mai
 	return `/net/data/${game}/song/${musicId.toString().substring(musicId.toString().length - 4)}/jacket`;
 }

src/lib/app/formatting.ts

@@ -24,7 +24,7 @@ export function fromSegacode(name: string) {
 export function formatWithCommas(number: number) {
 	return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
 }
-export function formatRatingForGame(game: string, rating: number) {
+export function formatRatingForGame(game: Game, rating: number) {
 	switch (game) {
 		case "chu3":
 			return (rating / 100).toFixed(2)

src/lib/components/Navigator.svelte

@@ -20,13 +20,13 @@
 	import type { CardUserGames } from "$lib/api/card"
 	import type { User } from "$lib/api/user"
 	import SignedOutCard from "./generic/SignedOutCard.svelte"
-	import { games } from "$lib/app/formatting"
+	import { games, type Game } from "$lib/app/formatting"
 	import NavButton from "./NavButton.svelte"
 
 	interface Props {
 		user?: User
 		cardUserGames?: CardUserGames
-		activeGame?: string
+		activeGame?: Game
 	}
 
 	let { cardUserGames, user, activeGame = $bindable() }: Props = $props()

src/lib/components/generic/ProfileCard.svelte

@@ -9,17 +9,16 @@ Do NOT pass in values that are not of the CURRENT USER or it will NOT work prope
     import { LL } from "$lib/i18n/i18n-svelte";
 
     import { getAvailableGames, type CardUserGames } from "$lib/api/card"
-    import { games, formatRatingForGame, fromSegacode } from "$lib/app/formatting";
+    import { games, formatRatingForGame, fromSegacode, type Game } from "$lib/app/formatting";
 	import { enhance } from "$app/forms"
     import { page } from "$app/state"
 	import { getContext } from "svelte"
 	import type { User } from "$lib/api/user"
 	import Loader from "$lib/app/loader.svelte"
 	import { getProfilePictureUrl } from "$lib/app/assets"
-
     export interface Props {
         cardUserGames: CardUserGames,
-        activeGame?: string,
+        activeGame?: Game,
         user: User
     }
     let { cardUserGames, activeGame = $bindable(), user }: Props = $props();
@@ -78,7 +77,7 @@ Do NOT pass in values that are not of the CURRENT USER or it will NOT work prope
                 {#each available_games as game}
                     <button value={game} name="active-game" class="profile-card-dropdown-item" type="submit">
                         <div class="profile-card-name">
-                            {game in $LL.games ? $LL.games[game as keyof typeof $LL.games]() : "?"}
+                            {$LL.games[game]()}
                         </div>
                         <div class="profile-card-rating">
                             {$LL.navigationBar.rating({rating: formatRatingForGame(game, cardUserGames[game]!.rating) ?? "?"})}

src/lib/components/profile/ProfileThumbnailEmbed.svelte

@@ -7,7 +7,7 @@
         displayedName: string,
         displayRating?: string,
         leaderboardRank?: number,
-        game?: string,
+        game?: Game,
         url: string
     }
     let { username, displayedName, displayRating, leaderboardRank, game, url } : Props = $props();

src/params/game.ts

@@ -1,6 +1,4 @@
 import type { ParamMatcher } from "@sveltejs/kit"
-import { games } from "$lib/app/formatting"
+import { games, type Game } from "$lib/app/formatting"
 
-export const match = ((param: string): param is (typeof games)[number] => {
-	return games.some((e) => e === param)
-}) satisfies ParamMatcher
+export const match: ParamMatcher = (param: string): param is Game => games.includes(param)

src/routes/(app)/(nonuser)/settings/+page.svelte

@@ -8,11 +8,12 @@
     import LL from "$lib/i18n/i18n-svelte";
 	import { enhance } from "$app/forms"
 	import type { User } from "$lib/api/user"
+	import type { Game } from "$lib/app/formatting"
 
     interface Props {
         data: {
             cardUserGames: CardUserGames,
-            activeGame: string,
+            activeGame?: Game,
             settings: Setting[],
             user?: User
         }

src/routes/+layout.server.ts

@@ -1,6 +1,8 @@
 import { api } from "$lib/api/index.js"
 
 import { getAvailableGame } from "$lib/api/card.js"
+import { games } from "$lib/app/formatting"
+import { error } from "@sveltejs/kit"
 
 export async function load({ cookies, locals: { locale, user } }) {
 	let token = cookies.get("token")
@@ -26,6 +28,7 @@ export async function load({ cookies, locals: { locale, user } }) {
 				else cookies.delete("active-game", { path: "/" })
 		}
 
+		if (activeGame && !games.includes(activeGame)) throw error(400, { message: "Invalid game" }) // Surely this will never trigger any false positives
 		return {
 			user,
 			cardUserGames,