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,33 @@
+import React, {useEffect, useState} from "react";
+import {useMatch} from "react-router-dom";
+
+type Jam = {
+    jamId: String,
+    styles: Map<String, String>,
+}
+
+export const JamSpecificStyling: React.FC = () => {
+    const jamId = useMatch("/:jamId/:postId?")?.params.jamId!!;
+    const [activeTheme, setActiveTheme] = useState<Jam>()
+
+    // TODO: Cache and avoid refetch
+    // TODO: TTL for styles?
+    useEffect(() => {
+        if (!jamId) return
+
+        fetch(`${import.meta.env.VITE_API_URL}/jams`)
+            .then(res => res.json() as Promise<Jam[]>)
+            .then(s => s.find(x => x.jamId === jamId))
+            .then(jam => setActiveTheme(jam))
+
+    }, [jamId])
+
+    if (!activeTheme) return
+
+    localStorage.setItem(`theme_${jamId}`, JSON.stringify(activeTheme))
+
+    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,10 @@
 
 /* Utilities */
 @import "tailwindcss/utilities";
+
+
+:root {
+    --gradient-start: #88151b;
+    --gradient-end: #000000;
+    --tile-secondary: theme('colors.grey-500');
+}

ui/src/pages/components/Footer.css

@@ -4,7 +4,7 @@
         padding-top: 32px;
         height: 96px;
         margin: -32px auto 0 auto;
-        background-image: linear-gradient(#000000, #88151b);
+        background-image: linear-gradient(var(--gradient-end), var(--gradient-start));
 
         .footer__icon {
             @apply px-4 h-[24px] border-r-2 border-theme-l-7 last:border-0;

ui/src/pages/components/Header.css

@@ -3,7 +3,7 @@
         @apply p-2 mb-4;
         height: 96px;
         margin: 0 auto -32px 0;
-        background-image: linear-gradient(#88151b, #000000);
+        background-image: linear-gradient(var(--gradient-start), var(--gradient-end));
 
         #toggle-bookmark-button {
             @apply leading-none py-2 px-2 hover:font-bold hover:text-white border border-white rounded-lg;

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();