Initial janky way to change CSS per jam

api/src/main/kotlin/com/gmtkgamejam/models/jams/Jam.kt

@@ -4,5 +4,6 @@ import kotlinx.serialization.Serializable
 
 @Serializable
 data class Jam(
-    val jamId: String
+    val jamId: String,
+    val styles: Map<String, String>,
 )

ui/src/AppRoutes.tsx

@@ -11,6 +11,7 @@ import {Logout} from "./pages/logout/Logout.tsx";
 import Footer from "./pages/components/Footer.tsx";
 import {About} from "./pages/about/About.tsx";
 import {Index} from "./pages/index/Index.tsx";
+import {JamSpecificStyling} from "./common/components/JamSpecificStyling.tsx";
 
 const queryClient = new QueryClient({
     defaultOptions: {
@@ -21,9 +22,13 @@ const queryClient = new QueryClient({
 });
 
 export const AppRoutes: React.FC = () => {
+
+    // document.documentElement.style.setProperty('--tile-secondary', '#A0BE11')
+
     return (
         <BrowserRouter>
             <ReactQuerySiteWrapper>
+            <JamSpecificStyling />
             <Header />
             <div style={{
                 width: '100%',

ui/src/common/components/JamSpecificStyling.tsx

@@ -0,0 +1,26 @@
+import React, {useEffect, useState} from "react";
+import {useMatch} from "react-router-dom";
+
+export const JamSpecificStyling: React.FC = () => {
+    const jamId = useMatch("/:jamId/:postId?")?.params.jamId!!;
+    const [activeTheme, setActiveTheme] = useState()
+    console.log(jamId)
+
+    useEffect(() => {
+        if (!jamId) return
+
+        fetch(`${import.meta.env.VITE_API_URL}/jams`)
+            .then(res => res.json())
+            .then(s => s.find(x => x['jamId'] === jamId))
+            .then(jam => setActiveTheme(jam))
+            .then(jam => localStorage.setItem(`theme_${jamId}`, JSON.stringify(jam)))
+
+    }, [jamId])
+
+    if (!activeTheme) return
+
+    const styles = Object.entries(activeTheme['styles'])
+    styles.map(style => document.documentElement.style.setProperty(style[0], style[1]))
+
+    return (<></>)
+}

ui/src/common/components/PostTile.css

@@ -1,6 +1,7 @@
 @layer components {
     .c-post-tile {
-        @apply bg-grey-500 border-2 border-neutral-900 rounded-xl p-4 flex flex-col gap-1 lg:min-h-[560px];
+        background-color: var(--tile-secondary);
+        @apply border-2 border-neutral-900 rounded-xl p-4 flex flex-col gap-1 lg:min-h-[560px];
 
         .post-tile__header {
             @apply flex justify-between min-w-0;

ui/src/index.css

@@ -28,3 +28,8 @@
 
 /* Utilities */
 @import "tailwindcss/utilities";
+
+
+:root {
+    --tile-secondary: theme('colors.grey-500');
+}

ui/src/pages/components/Header.tsx

@@ -94,6 +94,7 @@ const ToggleBookmarks: React.FC = () => {
 }
 
 const MyPostButton: React.FC = () => {
+    // TODO: Get from storage somewhere
     const jamId = useMatch("/:jamId/:postId?")?.params.jamId;
 
     const userInfo = useUserInfo();