From 08a24351579daa6fbd7e50632f1d6c4b87d33a51 Mon Sep 17 00:00:00 2001 From: WillDotWhite Date: Wed, 20 Mar 2024 14:26:35 +0000 Subject: [PATCH] Initial janky way to change CSS per jam --- .../kotlin/com/gmtkgamejam/models/jams/Jam.kt | 3 +- ui/src/AppRoutes.tsx | 5 +++ .../common/components/JamSpecificStyling.tsx | 33 +++++++++++++++++++ ui/src/common/components/PostTile.css | 3 +- ui/src/index.css | 7 ++++ ui/src/pages/components/Footer.css | 2 +- ui/src/pages/components/Header.css | 2 +- ui/src/pages/components/Header.tsx | 1 + 8 files changed, 52 insertions(+), 4 deletions(-) create mode 100644 ui/src/common/components/JamSpecificStyling.tsx diff --git a/api/src/main/kotlin/com/gmtkgamejam/models/jams/Jam.kt b/api/src/main/kotlin/com/gmtkgamejam/models/jams/Jam.kt index 9bf01c3..87c8d95 100644 --- a/api/src/main/kotlin/com/gmtkgamejam/models/jams/Jam.kt +++ b/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, ) \ No newline at end of file diff --git a/ui/src/AppRoutes.tsx b/ui/src/AppRoutes.tsx index 5575a80..feddcb7 100644 --- a/ui/src/AppRoutes.tsx +++ b/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 ( +
, +} + +export const JamSpecificStyling: React.FC = () => { + const jamId = useMatch("/:jamId/:postId?")?.params.jamId!!; + const [activeTheme, setActiveTheme] = useState() + + // 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) + .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 (<>) +} \ No newline at end of file diff --git a/ui/src/common/components/PostTile.css b/ui/src/common/components/PostTile.css index 280b9ad..3083462 100644 --- a/ui/src/common/components/PostTile.css +++ b/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; diff --git a/ui/src/index.css b/ui/src/index.css index d0b44be..a6744d6 100644 --- a/ui/src/index.css +++ b/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'); +} \ No newline at end of file diff --git a/ui/src/pages/components/Footer.css b/ui/src/pages/components/Footer.css index 56a9e05..0e31cda 100644 --- a/ui/src/pages/components/Footer.css +++ b/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; diff --git a/ui/src/pages/components/Header.css b/ui/src/pages/components/Header.css index 67702eb..cbcb256 100644 --- a/ui/src/pages/components/Header.css +++ b/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; diff --git a/ui/src/pages/components/Header.tsx b/ui/src/pages/components/Header.tsx index d1480de..4e260ff 100644 --- a/ui/src/pages/components/Header.tsx +++ b/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();