Color scheme -> css vars (#154)

cjs8487 · Jan 16, 2024 · 56d4044 · 56d4044
1 parent b3a7dfb
commit 56d4044
Show file tree

Hide file tree

Showing 23 changed files with 87 additions and 145 deletions.
diff --git a/src/BasicCounters.tsx b/src/BasicCounters.tsx
@@ -1,18 +1,14 @@
-import ColorScheme from './customization/ColorScheme';
-
 export default function BasicCounters({
     locationsChecked,
     totalAccessible,
     checksRemaining,
-    colorScheme,
 }: {
     locationsChecked: number;
     totalAccessible: number;
     checksRemaining: number;
-    colorScheme: ColorScheme;
 }) {
     return (
-        <div className="Counters" style={{ color: colorScheme.text }}>
+        <div className="Counters">
             <p>{`Locations Checked: ${locationsChecked}`}</p>
             <p>{`Locations Accessible: ${totalAccessible}`}</p>
             <p>{`Locations Remaining: ${checksRemaining}`}</p>

diff --git a/src/ImportExport.tsx b/src/ImportExport.tsx
@@ -1,14 +1,10 @@
 import { ChangeEvent } from 'react';
 import Logic from './logic/Logic';
-import ColorScheme from './customization/ColorScheme';
 import Settings from './permalink/Settings';
-import { Layout } from './customization/CustomizationModal';
 
 export interface ExportState {
     logic: Logic;
     settings: Settings;
-    colorScheme: ColorScheme;
-    layout: Layout;
     source: string;
 }
 

diff --git a/src/Tracker.tsx b/src/Tracker.tsx
@@ -11,7 +11,7 @@ import BasicCounters from './BasicCounters';
 import ImportExport, { ExportState } from './ImportExport';
 import DungeonTracker from './itemTracker/DungeonTracker';
 import CubeTracker from './locationTracker/CubeTracker';
-import ColorScheme from './customization/ColorScheme';
+import ColorScheme, { lightColorScheme } from './customization/ColorScheme';
 import CustomizationModal, { Layout } from './customization/CustomizationModal';
 import Logic from './logic/Logic';
 import Settings from './permalink/Settings';
@@ -35,7 +35,7 @@ function initTrackerState(): TrackerState {
     const path = new URLSearchParams(window.location.search);
     const source = path.get('source')!;
     const schemeJson = localStorage.getItem('ssrTrackerColorScheme');
-    const colorScheme = schemeJson ? JSON.parse(schemeJson) as ColorScheme : new ColorScheme();
+    const colorScheme = schemeJson ? JSON.parse(schemeJson) as ColorScheme : lightColorScheme;
     const layout = localStorage.getItem('ssrTrackerLayout') as Layout | null ?? 'inventory';
     return {
         logic: undefined,
@@ -115,7 +115,7 @@ async function createImportedState(importedState: ExportState): Promise<Pick<Tra
     await logic.initialize(settings, [], source);
     logic.loadFrom(importedState.logic);
 
-    return { logic, settings, ..._.pick(importedState, 'colorScheme', 'source', 'layout') };
+    return { logic, settings, ..._.pick(importedState, 'source') };
 }
 
 function raiseLogicError(): never {
@@ -153,18 +153,27 @@ export default class Tracker extends React.Component<Record<string, never>, Trac
             e.returnValue = '';
             return '';
         });
+        this.updateColorSchemeVars();
     }
 
     componentDidUpdate() {
         localStorage.setItem('ssrTrackerState', JSON.stringify(this.state));
         localStorage.setItem('ssrTrackerColorScheme', JSON.stringify(this.state.colorScheme));
         localStorage.setItem('ssrTrackerLayout', this.state.layout);
+        this.updateColorSchemeVars();
     }
 
     componentWillUnmount() {
         window.removeEventListener('resize', this.updateWindowDimensions);
     }
 
+    updateColorSchemeVars() {
+        const html = document.querySelector('html')!;
+        Object.entries(this.state.colorScheme).forEach(([key, val]) => {
+            html.style.setProperty(`theme-${key}`, val.toString());
+        });
+    }
+
     updateStateWith<K extends keyof TrackerState>(source: Promise<Pick<TrackerState, K>>) {
         source.then((newState) => this.setState(newState));
     }
@@ -315,7 +324,6 @@ export default class Tracker extends React.Component<Record<string, never>, Trac
                     styleProps={itemTrackerStyle}
                     logic={this.state.logic}
                     handleItemClick={this.handleItemClick}
-                    colorScheme={this.state.colorScheme}
                 />
             );
         } else if (this.state.layout === 'grid') {
@@ -324,13 +332,12 @@ export default class Tracker extends React.Component<Record<string, never>, Trac
                     styleProps={gridTrackerStyle}
                     logic={this.state.logic}
                     handleItemClick={this.handleItemClick}
-                    colorScheme={this.state.colorScheme}
                 />
             );
         }
 
         return (
-            <div style={{ height: this.state.height * 0.95, overflow: 'hidden', background: this.state.colorScheme.background }}>
+            <div style={{ height: this.state.height * 0.95, overflow: 'hidden', background: 'var(--scheme-background)' }}>
                 <Container fluid>
                     <Row>
                         <Col>
@@ -345,7 +352,6 @@ export default class Tracker extends React.Component<Record<string, never>, Trac
                                 handleGroupClick={this.handleGroupClick}
                                 handleLocationClick={this.handleLocationClick}
                                 handleCheckAllClick={this.handleCheckAllClick}
-                                colorScheme={this.state.colorScheme}
                                 containerHeight={this.state.height * 0.95}
                             />
                         </Col>
@@ -355,7 +361,6 @@ export default class Tracker extends React.Component<Record<string, never>, Trac
                                     locationsChecked={this.state.logic.getTotalLocationsChecked()}
                                     totalAccessible={this.state.logic.getTotalLocationsInLogic()}
                                     checksRemaining={this.state.logic.getTotalRemainingChecks()}
-                                    colorScheme={this.state.colorScheme}
                                 />
                             </Row>
                             <Row noGutters>
@@ -366,7 +371,6 @@ export default class Tracker extends React.Component<Record<string, never>, Trac
                                     skyKeep={!(this.state.settings.getOption('Empty Unrequired Dungeons') && (!this.state.settings.getOption('Triforce Required') || this.state.settings.getOption('Triforce Shuffle') === 'Anywhere'))}
                                     entranceRando={this.state.settings.getOption('Randomize Entrances')}
                                     trialRando={this.state.settings.getOption('Randomize Silent Realms')}
-                                    colorScheme={this.state.colorScheme}
                                     groupClicked={this.handleGroupClick}
                                 />
                             </Row>
@@ -377,7 +381,6 @@ export default class Tracker extends React.Component<Record<string, never>, Trac
                                         locations={this.state.logic.getExtraChecksForArea(this.state.expandedGroup)}
                                         locationHandler={this.handleCubeClick}
                                         logic={this.state.logic}
-                                        colorScheme={this.state.colorScheme}
                                         containerHeight={(this.state.height * 0.95) / 2}
                                     />
                                 </Col>

diff --git a/src/customization/ColorBlock.tsx b/src/customization/ColorBlock.tsx
@@ -12,7 +12,8 @@ export default function ColorBlock({
     updateColorScheme
 }: {
     colorName: string,
-    schemeKey: string, currentColor: string,
+    schemeKey: keyof ColorScheme,
+    currentColor: string,
     colorScheme: ColorScheme,
     updateColorScheme: (scheme: ColorScheme) => void
 }) {

diff --git a/src/customization/ColorScheme.ts b/src/customization/ColorScheme.ts
@@ -1,23 +1,28 @@
-class ColorScheme {
-    outLogic: string;
-    inLogic: string;
-    semiLogic: string;
+import { LogicalState } from "../logic/ItemLocation";
+
+export type ColorScheme = { [logicalState in LogicalState]: string; } & {
     background: string;
     text: string;
     required: string;
     unrequired: string;
-    checked: string;
+};
+
+export const lightColorScheme: ColorScheme = {
+    outLogic: '#FF0000',
+    inLogic: '#00AFFF',
+    semiLogic: '#FFA500',
+    background: '#FFFFFF',
+    text: '#000000',
+    required: '#004FFF',
+    unrequired: '#808080',
+    checked: '#303030',
+};
 
-    constructor() {
-        this.outLogic = '#FF0000';
-        this.inLogic = '#00AFFF';
-        this.semiLogic = '#FFA500';
-        this.background = '#FFFFFF';
-        this.text = '#000000';
-        this.required = '#004FFF';
-        this.unrequired = '#808080';
-        this.checked = '#303030';
-    }
-}
+export const darkColorScheme: ColorScheme = {
+    ...lightColorScheme,
+    background: '#000000',
+    text: '#FFFFFF',
+    checked: '#B6B6B6',
+};
 
-export default ColorScheme;
+export default ColorScheme;
diff --git a/src/customization/CustomizationModal.tsx b/src/customization/CustomizationModal.tsx
@@ -1,13 +1,12 @@
 import { Modal, Button, Container, Row, Col, FormControl } from 'react-bootstrap';
 import ColorBlock from './ColorBlock';
-import ColorScheme from './ColorScheme';
+import ColorScheme, { darkColorScheme, lightColorScheme } from './ColorScheme';
 
 const defaultColorSchemes = {
-    Light: new ColorScheme(),
-    Dark: {...(new ColorScheme()), background: '#000000', text: '#FFFFFF', checked: '#B6B6B6'},
+    Light: lightColorScheme,
+    Dark: darkColorScheme,
 };
 
-
 export type Layout = 'grid' | 'inventory';
 
 export default function CustomizationModal({

diff --git a/src/index.css b/src/index.css
@@ -5,6 +5,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  color: var(--scheme-text);
 }
 
 code {
@@ -15,4 +16,4 @@ code {
 @font-face {
   font-family: "HyliaSerif";
   src: url("assets/HyliaSerifBeta-Regular.otf") format("opentype")
-}
+}
diff --git a/src/itemTracker/AdditionalItems.tsx b/src/itemTracker/AdditionalItems.tsx
@@ -2,21 +2,18 @@ import { CSSProperties } from 'react';
 import Item from './Item';
 
 import Logic from '../logic/Logic';
-import ColorScheme from '../customization/ColorScheme';
 import { ItemClickCallback } from '../callbacks';
 import miscItemBlock from '../assets/misc_items_block.png';
 
 type AdditionalItemsProps = {
     handleItemClick: ItemClickCallback;
     logic: Logic;
-    colorScheme: ColorScheme;
     styleProps: CSSProperties;
 };
 
 const AdditionalItems = ({
     handleItemClick,
     logic,
-    colorScheme,
     styleProps,
 }: AdditionalItemsProps) => {
 
@@ -80,18 +77,18 @@ const AdditionalItems = ({
             </div>
             <div style={bottleStyle}>
                 <Item itemName="Empty Bottle" logic={logic} onChange={handleItemClick} imgWidth={bottleWidth} />
-                <p style={{ fontSize: width * 0.12, position: 'relative', left: '11%', bottom: `-${bottleWidth * 0.3}px`, color: colorScheme.text }}>{logic.getItem('Empty Bottle')}</p>
+                <p style={{ fontSize: width * 0.12, position: 'relative', left: '11%', bottom: `-${bottleWidth * 0.3}px` }}>{logic.getItem('Empty Bottle')}</p>
             </div>
             <div style={chargeStyle}>
                 <Item itemName="Spiral Charge" logic={logic} onChange={handleItemClick} imgWidth={chargeWidth} />
             </div>
             <div style={tadtoneStyle}>
                 <Item itemName="Group of Tadtones" logic={logic} onChange={handleItemClick} imgWidth={tadtoneWidth} />
-                <p style={{ fontSize: width * 0.12, position: 'relative', left: '10%', bottom: `-${tadtoneWidth * 0.25}px`, color: colorScheme.text }}>{logic.getItem('Group of Tadtones')}</p>
+                <p style={{ fontSize: width * 0.12, position: 'relative', left: '10%', bottom: `-${tadtoneWidth * 0.25}px` }}>{logic.getItem('Group of Tadtones')}</p>
             </div>
             <div style={keyStyle}>
                 <Item itemName="Lanayru Caves Small Key" logic={logic} onChange={handleItemClick} imgWidth={keyWidth} />
-                <p style={{ margin: 0, fontSize: width / 20, color: colorScheme.text, position: 'relative', top: `${keyWidth * 0.75}px`, left: '1%' }}>Caves</p>
+                <p style={{ margin: 0, fontSize: width / 20, position: 'relative', top: `${keyWidth * 0.75}px`, left: '1%' }}>Caves</p>
             </div>
             <div style={chartStyle}>
                 <Item itemName="Sea Chart" logic={logic} onChange={handleItemClick} imgWidth={chartWidth} />