InitHEADmain

1 files changed, 164 insertions, 0 deletions

diff --git a/src/components/LoadScreen.tsx b/src/components/LoadScreen.tsx
new file mode 100644
index 0000000..e51ff6a
--- /dev/null
+++ b/src/components/LoadScreen.tsx
@@ -0,0 +1,164 @@
+import React, { useState } from 'react';
+import type { Grid } from '@/types/grid';
+import { getSavedArt, deleteSavedArt, type SavedArt } from '@/utils/storage';
+import { GridComponent } from './grid/GridComponent';
+import { gridFromAscii } from '@/utils/grid';
+
+const demoArt = [
+    { name: '🎨 Butterfly', art: `|                      |
+|  ⠀⠀⠀⠀⊹               |
+|  ⢶⢻⣑⣒⢤⡀⠀⢄⠀⠀⡠⠀⢀⡤⣆⣊⡿⡷  |
+|  ⠀⠹⠹⣚⣣⠻⣦⡀⠀⠀⢀⣴⠟⣸⢓⢎⠏⠀  |
+|  ⠀⠀⢡⣱⣖⣢⡾⢿⣾⣷⡿⢷⣖⣒⣎⡎⠀⠀  |
+|  ⠀⠀⠀⣠⠓⢬⠅⡺⢻⡟⢗⠨⡥⠚⣄⠀⠀⠀  |
+|  ⠀⠀⠀⣿⡆⠘⠆⢇⢸⡇⠸⠰⠃⢰⣿⠀⠀⠀  |
+|  ⠀⠀⠀⠐⡻⣮⣬⠞⠈⠁⠳⣤⣴⢿⠂⠀⠀⠀  |
+|  ⠀⠀⠀⡜⠀⠁⠉⠀⠀⠀⠀⠈⠈⠀⢣⠀⠀⠀  |
+|  ⊹                   |
+|                      |` },
+    { name: '😊 Smiley', art: `    ████████
+  ██        ██
+ ██  ██  ██  ██
+██              ██
+██   ██    ██   ██
+██              ██
+ ██  ██████████ ██
+  ██          ██
+    ████████    ` },
+    { name: '🌟 Star', art: `    ★
+   ███
+  █████
+ ███████
+█████████
+ ███████
+  █████
+   ███
+    █    ` },
+];
+
+interface LoadScreenProps {
+    onLoad: (grid: Grid) => void;
+    onNew: () => void;
+    onPaste: (ansiText: string) => void;
+}
+
+export const LoadScreen: React.FC<LoadScreenProps> = ({ onLoad, onNew, onPaste }) => {
+    const [saves] = useState<SavedArt[]>(getSavedArt());
+    const [pasteText, setPasteText] = useState('');
+
+    const handleDemoLoad = (art: string) => {
+        const grid = gridFromAscii(art);
+        onLoad(grid);
+    };
+
+    const formatDate = (timestamp: number) => {
+        const date = new Date(timestamp);
+        return date.toLocaleString();
+    };
+
+    const handleDelete = (id: string, e: React.MouseEvent) => {
+        e.stopPropagation();
+        deleteSavedArt(id);
+        window.location.reload();
+    };
+
+    const handlePaste = () => {
+        if (pasteText.trim()) {
+            onPaste(pasteText.trim());
+        }
+    };
+
+    return (
+        <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '1.5rem',
+            padding: '2rem',
+            width: '100%',
+            maxWidth: '900px',
+            margin: '0 auto',
+        }}>
+            <h2>ANSI Color Paint</h2>
+
+            <div>
+                <h3>Demo Templates</h3>
+                <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+                    {demoArt.map((demo, idx) => (
+                        <button
+                            key={idx}
+                            onClick={() => handleDemoLoad(demo.art)}
+                            style={{ flex: '1 1 calc(33% - 0.5rem)', minWidth: '150px' }}
+                        >
+                            {demo.name}
+                        </button>
+                    ))}
+                </div>
+            </div>
+
+            <div>
+                <h3>Recent Saves</h3>
+                {saves.length > 0 ? (
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                        {saves.map((save) => (
+                            <div
+                                key={save.id}
+                                onClick={() => onLoad(save.grid)}
+                                style={{
+                                    border: '2px solid var(--regular3)',
+                                    borderRadius: '4px',
+                                    padding: '1rem',
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    alignItems: 'center',
+                                    transition: 'border-color 0.2s',
+                                }}
+                                onMouseEnter={(e) => {
+                                    e.currentTarget.style.borderColor = 'var(--regular6)';
+                                }}
+                                onMouseLeave={(e) => {
+                                    e.currentTarget.style.borderColor = 'var(--regular3)';
+                                }}
+                            >
+                                <div>
+                                    <div style={{ fontWeight: 'bold', marginBottom: '0.25rem' }}>
+                                        {save.name}
+                                    </div>
+                                    <div style={{ fontSize: '0.9rem', opacity: 0.7 }}>
+                                        {formatDate(save.timestamp)}
+                                    </div>
+                                </div>
+                                <button
+                                    onClick={(e) => handleDelete(save.id, e)}
+                                    style={{
+                                        padding: '0.25rem 0.5rem',
+                                        fontSize: '0.9rem',
+                                        width: 'auto',
+                                        minWidth: 'fit-content',
+                                    }}
+                                >
+                                    Delete
+                                </button>
+                            </div>
+                        ))}
+                    </div>
+                ) : (
+                    <p style={{ opacity: 0.7 }}>No saves yet</p>
+                )}
+            </div>
+
+            <div>
+                <h3>Import from ANSI Text</h3>
+                <textarea
+                    value={pasteText}
+                    onChange={(e) => setPasteText(e.target.value)}
+                    placeholder="Paste ANSI art here..."
+                    style={{ width: '100%', minHeight: '100px', marginBottom: '0.5rem' }}
+                />
+                <button onClick={handlePaste} disabled={!pasteText.trim()}>
+                    Import
+                </button>
+            </div>
+        </div>
+    );
+};