Changes
diff --git a/simple-slides/design.md b/simple-slides/design.md
index 3f3a7fd..0ed2bde 100644
--- a/simple-slides/design.md
+++ b/simple-slides/design.md
@@ -33,7 +33,8 @@ Since there is no bundler, we will use standard ES modules.
│ └── Player.js # Play mode view
└── utils/
├── storage.js # LocalStorage wrapper
- └── array.js # Shuffle logic
+ ├── array.js # Shuffle logic
+ └── presets.js # Pre-defined slideshow generators
```
## 4. Data Model
@@ -73,8 +74,12 @@ The `App` component will hold the central state:
- `onPlay`: Function to start normal playback.
- `onShufflePlay`: Function to start shuffled playback.
- **Features**:
- - Renders a list of textareas.
- - **Settings Control**: Input for Base Font Size (px).
+ - **Toolbar**: Organized into two rows.
+ - Row 1: Title, Clear All button, Play buttons.
+ - Row 2: Font Size input, Presets dropdown (A-Z, 1-20).
+ - **Presets**: Load pre-defined slide decks (replacing current slides).
+ - **Clear All**: Reset slideshow to a single empty slide.
+ - **Slide List**: Renders a list of textareas.
- **Drag and Drop**: Implemented using HTML5 Drag and Drop API.
- **Actions**: Add Slide, Delete Slide.
diff --git a/simple-slides/src/components/Editor.js b/simple-slides/src/components/Editor.js
index 32c1d68..7f4b33b 100644
--- a/simple-slides/src/components/Editor.js
+++ b/simple-slides/src/components/Editor.js
@@ -2,6 +2,7 @@ import { h } from 'preact';
import { useState } from 'preact/hooks';
import { v4 as uuid } from 'uuid';
import htm from 'htm';
+import { PRESETS } from '../utils/presets.js';
const html = htm.bind(h);
@@ -74,17 +75,43 @@ export function Editor({ slides, fontSize, onUpdate, onUpdateFontSize, onPlay, o
setDropTargetIndex(null);
};
+ const handleLoadPreset = (e) => {
+ const presetId = e.target.value;
+ if (!presetId) return;
+
+ const preset = PRESETS.find(p => p.id === presetId);
+ if (preset) {
+ if (confirm('This will replace your current slides. Are you sure?')) {
+ onUpdate(preset.generate());
+ }
+ }
+ e.target.value = "";
+ };
+
return html`
<div class="editor-container">
<div class="editor-header">
- <h1>Random Slides</h1>
- <div class="controls">
- <div style="display: flex; align-items: center; margin-right: 15px;">
- <label for="font-size" style="margin-right: 5px; font-size: 0.9rem;">Font Size:</label>
- <input id="font-size" type="number" value=${fontSize} onInput=${(e) => onUpdateFontSize(Number(e.target.value))} style="width: 60px; padding: 5px;" />
+ <div class="toolbar-row">
+ <h1>Random Slides</h1>
+ <div class="controls">
+ <button class="btn btn-danger" onClick=${() => confirm('Clear all slides?') && onUpdate([{ id: uuid(), content: '' }])}>Clear All</button>
+ <button class="btn btn-primary" onClick=${onPlay} disabled=${slides.length === 0}>Play</button>
+ <button class="btn btn-secondary" onClick=${onPlayShuffled} disabled=${slides.length === 0}>Shuffle Play</button>
+ </div>
+ </div>
+ <div class="toolbar-row">
+ <div class="controls">
+ <div style="display: flex; align-items: center;">
+ <label for="font-size" style="margin-right: 5px; font-size: 0.9rem;">Font Size:</label>
+ <input id="font-size" type="number" value=${fontSize} onInput=${(e) => onUpdateFontSize(Number(e.target.value))} style="width: 60px; padding: 5px;" />
+ </div>
+ <div style="display: flex; align-items: center;">
+ <select onChange=${handleLoadPreset} style="padding: 5px;">
+ <option value="">Load Preset...</option>
+ ${PRESETS.map(p => html`<option value=${p.id}>${p.name}</option>`)}
+ </select>
+ </div>
</div>
- <button class="btn btn-primary" onClick=${onPlay} disabled=${slides.length === 0}>Play</button>
- <button class="btn btn-secondary" onClick=${onPlayShuffled} disabled=${slides.length === 0}>Shuffle Play</button>
</div>
</div>
diff --git a/simple-slides/src/utils/presets.js b/simple-slides/src/utils/presets.js
new file mode 100644
index 0000000..6fdcf33
--- /dev/null
+++ b/simple-slides/src/utils/presets.js
@@ -0,0 +1,33 @@
+import { v4 as uuid } from 'uuid';
+
+export const PRESETS = [
+ {
+ id: 'alphabet',
+ name: 'Alphabet (A-Z)',
+ generate: () => {
+ const slides = [];
+ for (let i = 0; i < 26; i++) {
+ const letter = String.fromCharCode(65 + i); // 65 is 'A'
+ slides.push({
+ id: uuid(),
+ content: `${letter} ${letter.toLowerCase()}`
+ });
+ }
+ return slides;
+ }
+ },
+ {
+ id: 'numbers',
+ name: 'Numbers (1-20)',
+ generate: () => {
+ const slides = [];
+ for (let i = 1; i <= 20; i++) {
+ slides.push({
+ id: uuid(),
+ content: String(i)
+ });
+ }
+ return slides;
+ }
+ }
+];
diff --git a/simple-slides/style.css b/simple-slides/style.css
index 492cd1a..1268f67 100644
--- a/simple-slides/style.css
+++ b/simple-slides/style.css
@@ -39,15 +39,22 @@ body {
.editor-header {
display: flex;
- justify-content: space-between;
- align-items: center;
+ flex-direction: column;
+ gap: 10px;
margin-bottom: 20px;
position: sticky;
top: 0;
background-color: var(--bg-color);
z-index: 10;
padding: 10px 0;
- border-bottom: 1px solid transparent;
+ border-bottom: 1px solid var(--border-color);
+}
+
+.toolbar-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
}
.editor-header h1 {
@@ -58,6 +65,7 @@ body {
.controls {
display: flex;
gap: 10px;
+ align-items: center;
}
.slide-list {