diff options
Diffstat (limited to 'src/components/LoadScreen.tsx')
| -rw-r--r-- | src/components/LoadScreen.tsx | 164 |
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> + ); +}; |