theme saved to preferences

6 files changed, 50 insertions, 36 deletions

diff --git a/api/user/preferences.py b/api/user/preferences.py
index d903fd8..c25ff1a 100644
--- a/api/user/preferences.py
+++ b/api/user/preferences.py
@@ -16,7 +16,8 @@ def format_preferences(prefs):
             "diskA": prefs.get("userColors", {}).get("diskA") or "",
             "diskB": prefs.get("userColors", {}).get("diskB") or "",
         },
-        "theme": prefs.get("theme") or "default",
+        "theme":
+        prefs.get("theme") or "default.css",
     }
 
 
diff --git a/components/preferencesContext.tsx b/components/preferencesContext.tsx
index 965b185..f7b6db8 100644
--- a/components/preferencesContext.tsx
+++ b/components/preferencesContext.tsx
@@ -5,9 +5,8 @@ import { userPreferences } from '../api/api';
 
 function applyPreferences(preferences: userPreferences) {
 	if (typeof preferences === 'undefined') return;
-	if (typeof preferences.darkMode !== 'undefined') {
-		document.getElementsByTagName('html')[0].classList[preferences.darkMode ? 'add' : 'remove']('dark');
-	}
+	document.getElementsByTagName('html')[0].classList[preferences.darkMode ? 'add' : 'remove']('dark');
+	document.getElementById('theme').setAttribute('href', '/themes/' + preferences.theme);
 }
 
 var PreferencesContext = createContext<
@@ -20,7 +19,7 @@ export function PreferencesContextWrapper(props: { children?: ReactNode; }) {
 
 	var [preferences, setPreferences] = useState<userPreferences>();
 
-	var [dummy, setDummy] = useState(false); //FIXME: janky fix to cause rerender
+	var [dummy, setDummy] = useState(false); // FIXME: janky fix to cause rerender
 
 	useEffect(() => {
 		(async () => {
diff --git a/components/themes.tsx b/components/themes.tsx
index be98685..547319f 100644
--- a/components/themes.tsx
+++ b/components/themes.tsx
@@ -1,7 +1,8 @@
-import { useEffect, useState, CSSProperties } from 'react';
 import axios from 'axios';
+import { CSSProperties, useContext, useEffect, useState } from 'react';
 
 import { userPreferences } from '../api/api';
+import PreferencesContext from '../components/preferencesContext';
 import { Button } from './ui';
 
 type previewThemeColors = {
@@ -9,19 +10,21 @@ type previewThemeColors = {
 	fg: string;
 	a: string;
 	b: string;
-}
+};
 
 export type themeInfo = {
 	name: string;
 	url: string;
 	dark: previewThemeColors;
 	light: previewThemeColors;
-}
+};
 
 export type themeJSON = themeInfo[];
 
-export default function ThemePicker(props: { preferences?: userPreferences }) {
-	var [ themes, setThemes ] = useState<themeJSON>([]);
+export default function ThemePicker(props: { preferences?: userPreferences; }) {
+	var { preferences, updatePreference } = useContext(PreferencesContext);
+
+	var [themes, setThemes] = useState<themeJSON>([]);
 
 	useEffect(() => {
 		axios.request<themeJSON>({
@@ -30,32 +33,43 @@ export default function ThemePicker(props: { preferences?: userPreferences }) {
 		}).then(response => {
 			setThemes(response.data);
 		}).catch(err => {
-			console.error(err)
-		})
+			console.error(err);
+		});
 	}, []);
 
 	return <>
-		{themes.map(theme => <ThemeCard theme={theme} dark={props.preferences?.darkMode}/>)}
+		{themes.map(theme =>
+			<ThemeCard
+				theme={theme}
+				dark={props.preferences?.darkMode}
+				setTheme={theme => updatePreference({ theme })}
+			/>
+		)}
 	</>;
 }
 
-export function ThemeCard(props: { theme: themeInfo; dark?: boolean }) {
-	var mode = props.dark ? "dark" : "light";
-
-	return <div className="dispinbl themeCardWrapper" style={{
-		"--bg": props.theme[mode].bg,
-		"--fg": props.theme[mode].fg,
-		"--a": props.theme[mode].a,
-		"--b": props.theme[mode].b,
-	} as CSSProperties}>
-	<Button className="themeCard dispinbl drop-1" onclick={() => {
-		document.getElementById("theme").setAttribute("href", "/themes/" + props.theme.url)
-	}}>
-			<span className="name">{props.theme.name}</span>
-				<div className="posabs r0 v0 disks">
-					<div className="disk posabs a"/>
-					<div className="disk posabs b"/>
-				</div>
+export function ThemeCard(props: {
+	theme: themeInfo;
+	dark?: boolean;
+	setTheme: (theme: string) => void;
+}) {
+	var mode = props.dark ? 'dark' : 'light';
+
+	return <div
+		className='dispinbl themeCardWrapper'
+		style={{
+			'--bg': props.theme[mode].bg,
+			'--fg': props.theme[mode].fg,
+			'--a': props.theme[mode].a,
+			'--b': props.theme[mode].b,
+		} as CSSProperties}
+	>
+		<Button className='themeCard dispinbl drop-1' onclick={() => props.setTheme(props.theme.url)}>
+			<span className='name'>{props.theme.name}</span>
+			<div className='posabs r0 v0 disks'>
+				<div className='disk posabs a' />
+				<div className='disk posabs b' />
+			</div>
 		</Button>
-	</div>
+	</div>;
 }
diff --git a/components/ui.tsx b/components/ui.tsx
index c92ebfe..bf8c65d 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -123,7 +123,7 @@ export function CheckBox(props: {
 	onclick?: (state: boolean) => void;
 }) {
 	return <div
-        onClick={() => props.onclick && props.onclick(!props.state)}
+		onClick={() => props.onclick && props.onclick(!props.state)}
 		id={props.id}
 		className={'checkbox dispinbl ' + (props.state ? 'on' : 'off')}
 	>
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 6cbd476..418cacd 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -9,10 +9,10 @@ import '../styles/global.css';
 import '../styles/navbar.css';
 import '../styles/notifications.css';
 import '../styles/recentGames.css';
+import '../styles/themepicker.css';
 import '../styles/toast.css';
 import '../styles/ui.css';
 import '../styles/utility.css';
-import '../styles/themepicker.css';
 
 import '../styles/game.css';
 import '../styles/gameSettings.css';
diff --git a/pages/settings.tsx b/pages/settings.tsx
index d2b23eb..b984936 100644
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
@@ -8,8 +8,8 @@ import { CurrentGameSettings } from '../components/gameSettings';
 import { NavBar } from '../components/navbar';
 import { CenteredPage, PageTitle } from '../components/page';
 import PreferencesContext from '../components/preferencesContext';
-import { CheckBox, ColorPicker, IconLabelButton, Vierkant } from '../components/ui';
 import ThemePicker from '../components/themes';
+import { CheckBox, ColorPicker, IconLabelButton, Vierkant } from '../components/ui';
 
 import EditOutlinedIcon from '@material-ui/icons/EditOutlined';
 import ExitToAppOutlinedIcon from '@material-ui/icons/ExitToAppOutlined';
@@ -111,8 +111,8 @@ export default function SettingsPage() {
 						</div>
 						<h3>Donkere modus</h3>
 					</div>
-					<div className="subsection">
-						<ThemePicker preferences={preferences}/>
+					<div className='subsection'>
+						<ThemePicker preferences={preferences} />
 					</div>
 				</Vierkant>
 				<Vierkant className='section gamerules w100m2m pad-l bg-800'>