1 files changed, 44 insertions, 18 deletions
diff --git a/src/App.tsx b/src/App.tsx
index c50d1fc..dd3d76d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,28 +2,54 @@ import { useEffect, useState } from 'react';
 
 import { ChooseArt } from '@/pages/ChooseArt';
 import { Paint } from '@/pages/Paint';
+import { LoadScreen } from '@/components/LoadScreen';
 
-import { gridFromAscii } from '@/utils/grid';
-
-const butterfly = `|                      |
-|  ⠀⠀⠀⠀⊹               |
-|  ⢶⢻⣑⣒⢤⡀⠀⢄⠀⠀⡠⠀⢀⡤⣆⣊⡿⡷  |
-|  ⠀⠹⠹⣚⣣⠻⣦⡀⠀⠀⢀⣴⠟⣸⢓⢎⠏⠀  |
-|  ⠀⠀⢡⣱⣖⣢⡾⢿⣾⣷⡿⢷⣖⣒⣎⡎⠀⠀  |
-|  ⠀⠀⠀⣠⠓⢬⠅⡺⢻⡟⢗⠨⡥⠚⣄⠀⠀⠀  |
-|  ⠀⠀⠀⣿⡆⠘⠆⢇⢸⡇⠸⠰⠃⢰⣿⠀⠀⠀  |
-|  ⠀⠀⠀⠐⡻⣮⣬⠞⠈⠁⠳⣤⣴⢿⠂⠀⠀⠀  |
-|  ⠀⠀⠀⡜⠀⠁⠉⠀⠀⠀⠀⠈⠈⠀⢣⠀⠀⠀  |
-|  ⊹                   |
-|                      |`;
+import { gridFromAscii, gridFromAnsi } from '@/utils/grid';
+import type { Grid } from '@/types/grid';
 
 export const App: React.FC = () => {
-    // const [chosenArt, setChosenArt] = useState<undefined | string>(undefined);
-    const [chosenArt, setChosenArt] = useState<undefined | string>(butterfly);
+    const [route, setRoute] = useState(window.location.hash || '#home');
+    const [chosenArt, setChosenArt] = useState<null | string>(null);
+    const [loadedGrid, setLoadedGrid] = useState<Grid | null>(null);
+
+    useEffect(() => {
+        const handleHashChange = () => {
+            setRoute(window.location.hash || '#home');
+        };
+        window.addEventListener('hashchange', handleHashChange);
+        return () => window.removeEventListener('hashchange', handleHashChange);
+    }, []);
+
+    const handleLoad = (grid: Grid) => {
+        setLoadedGrid(grid);
+        window.location.hash = '#paint';
+    };
+
+    const handleNew = () => {
+        setChosenArt('');
+        window.location.hash = '#paint';
+    };
+
+    const handlePaste = (ansiText: string) => {
+        const importedGrid = gridFromAnsi(ansiText);
+        setLoadedGrid(importedGrid);
+        window.location.hash = '#paint';
+    };
+
+    const handleGoHome = () => {
+        setLoadedGrid(null);
+        setChosenArt(null);
+        window.location.hash = '#home';
+    };
 
-    if (chosenArt !== undefined) {
-        return <Paint grid={gridFromAscii(chosenArt)} />;
+    if (route === '#paint') {
+        if (loadedGrid !== null) {
+            return <Paint grid={loadedGrid} onGoHome={handleGoHome} />;
+        }
+        if (chosenArt !== null) {
+            return <Paint grid={gridFromAscii(chosenArt)} onGoHome={handleGoHome} />;
+        }
     }
 
-    return <ChooseArt artSubmissionCallback={setChosenArt} />;
+    return <LoadScreen onLoad={handleLoad} onNew={handleNew} onPaste={handlePaste} />;
 };