feat: add a whats new thing

OldStarchy · Jul 13, 2024 · 3000108 · 3000108
1 parent 5157ba5
commit 3000108
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 1 deletion.
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,6 +6,7 @@ import {
 	faFileExport,
 	faFileImport,
 	faMinus,
+	faNewspaper,
 	faPlus,
 	faRedo,
 	faShuffle,
@@ -28,7 +29,7 @@ import { Popup } from './components/Popup';
 import { Button } from './components/common/Button';
 import { Input } from './components/common/Input';
 import { Select } from './components/common/Select';
-import { H2 } from './components/common/Typography';
+import { H2, H3 } from './components/common/Typography';
 import { cities } from './data/cities';
 import { Assortment, IAssortment } from './lib/Assortment';
 import { Card } from './lib/Card';
@@ -72,6 +73,13 @@ function createStripeyBackground(colors: string[]): string {
 }
 
 function App() {
+	const [showWhatsNew, setShowWhatsNew] = useState(() => {
+		const dismissed = localStorage.getItem('whats_new.version_dismissed');
+		const sha = process.env.REACT_APP_GIT_SHA;
+		const shouldShow = dismissed !== (sha ?? 'dev');
+		return shouldShow;
+	});
+
 	const [drawCount, setDrawCountRaw] = useState(1);
 	const [topDrawFormVisible, setTopDrawFormVisible] = useState(false);
 	const [bottomDrawFormVisible, setBottomDrawFormVisible] = useState(false);
@@ -198,6 +206,13 @@ function App() {
 				<Button onClick={redo} disabled={!canRedo}>
 					Redo <FontAwesomeIcon icon={faRedo} />
 				</Button>
+				<Button
+					onClick={() => {
+						setShowWhatsNew(true);
+					}}
+				>
+					Whats New <FontAwesomeIcon icon={faNewspaper} />
+				</Button>
 			</section>
 			<section>
 				<H2>Draw Chance</H2>
@@ -547,6 +562,41 @@ function App() {
 					}}
 				/>
 			</Popup>
+			<Popup visible={showWhatsNew}>
+				<section
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						gap: '0.5rem',
+					}}
+				>
+					<H2>Whats New</H2>
+					<section>
+						<H3>Undo stack</H3>
+						<p>It's janky, but it sortof works!</p>
+					</section>
+					<section>
+						<H3>What's New Section</H3>
+						<p>It's also janky!</p>
+					</section>
+					<div>
+						<Button
+							onClick={() => {
+								localStorage.setItem(
+									'whats_new.version_dismissed',
+									process.env.REACT_APP_GIT_SHA ?? 'dev'
+								);
+								setShowWhatsNew(false);
+							}}
+						>
+							Mark as Read
+						</Button>
+						<Button onClick={() => setShowWhatsNew(false)}>
+							Close
+						</Button>
+					</div>
+				</section>
+			</Popup>
 		</div>
 	);
 }

diff --git a/src/components/common/Typography.tsx b/src/components/common/Typography.tsx
@@ -13,3 +13,9 @@ export const H2 = styled.h1`
 	font-size: 1.25rem;
 	padding: 0.5rem 0;
 `;
+
+export const H3 = styled.h1`
+	font-size: 1.1rem;
+	padding: 0.5rem 0;
+	font-weight: bold;
+`;