Develop

.github/workflows/ci.yml

@@ -3,7 +3,7 @@ name: CI
 on:
   pull_request:
   push:
-    branches: [main, wip]
+    branches: [main, develop]
 
 permissions:
   contents: read

src/components/app/pf-project-browser.ts

@@ -90,7 +90,8 @@ export class PFProjectBrowser extends BaseComponent {
 
     .header-actions,
     .card-actions,
-    .rename-actions {
+    .rename-actions,
+    .empty-actions {
       display: flex;
       align-items: center;
       gap: 8px;
@@ -182,6 +183,11 @@ export class PFProjectBrowser extends BaseComponent {
       min-height: 226px;
     }
 
+    .new-card.guided {
+      border-color: color-mix(in srgb, var(--pf-color-accent) 62%, var(--pf-color-border));
+      background: var(--pf-color-primary-transparent);
+    }
+
     .thumbnail {
       display: grid;
       place-items: center;
@@ -344,11 +350,14 @@ export class PFProjectBrowser extends BaseComponent {
         </div>
         <section class="shell" aria-label="Project library">
           <div class="toolbar">
-            <p class="subtitle">Open a saved sprite or start a fresh canvas.</p>
+            <p class="subtitle">Open a saved sprite, start fresh, or use an image as guidance.</p>
             <form method="dialog" class="header-actions">
               <button class="primary" type="submit" value="new-project">
                 New Project
               </button>
+              <button type="submit" value="guided-drawing">
+                Guided Drawing
+              </button>
               ${this.canClose
                 ? html`
                     <button type="submit" value="close">
@@ -379,11 +388,18 @@ export class PFProjectBrowser extends BaseComponent {
       return html`
         <div class="empty">
           <p>No projects saved yet.</p>
-          <form method="dialog" class="empty-action">
-            <button class="primary" type="submit" value="new-project">
-              Create First Project
-            </button>
-          </form>
+          <div class="empty-actions">
+            <form method="dialog" class="empty-action">
+              <button class="primary" type="submit" value="new-project">
+                Create First Project
+              </button>
+            </form>
+            <form method="dialog" class="empty-action">
+              <button type="submit" value="guided-drawing">
+                Create Guided Drawing
+              </button>
+            </form>
+          </div>
         </div>
       `;
     }
@@ -396,6 +412,12 @@ export class PFProjectBrowser extends BaseComponent {
             <span class="meta">Choose a size and start drawing.</span>
           </button>
         </form>
+        <form method="dialog" class="new-card-form">
+          <button class="new-card guided" type="submit" value="guided-drawing">
+            <strong>Guided Drawing</strong>
+            <span class="meta">Start from an image in a separate numbered project.</span>
+          </button>
+        </form>
         ${this.projects.map((project) => this.renderProject(project))}
       </div>
     `;
@@ -693,6 +715,13 @@ export class PFProjectBrowser extends BaseComponent {
       return;
     }
 
+    if (returnValue === 'guided-drawing') {
+      this.dispatchEvent(
+        new CustomEvent('show-paint-by-number-dialog', { bubbles: true, composed: true })
+      );
+      return;
+    }
+
     if (!this.canDismissBrowser()) {
       this.showNativeDialog(this.browserDialog);
       return;

src/components/app/pixel-forge-app.ts

@@ -15,6 +15,7 @@
 import "../dialogs/pf-resize-dialog";
 import "../dialogs/pf-export-dialog";
 import "../dialogs/pf-new-project-dialog";
+import "../dialogs/pf-paint-by-number-dialog";
 import "../dialogs/pf-grid-settings-dialog";
 import "../dialogs/pf-checker-settings-dialog";
 import "../dialogs/pf-accent-color-dialog";
@@ -235,13 +236,15 @@
   @state() showResizeDialog = false;
   @state() showExportDialog = false;
   @state() showNewProjectDialog = false;
+  @state() showPaintByNumberDialog = false;
   @state() showProjectBrowser = false;
   @state() showDeleteCurrentDialog = false;
   @state() showKeyboardShortcutsDialog = false;
   @state() cursorPosition = { x: 0, y: 0 };
   @state() timelineHeight = 200;
   @state() private isResizingTimeline = false;
   @state() private hasLibraryProject = false;
+  @state() private projectSelectionRequired = false;
   @state() private warningMessage: string | null = null;
 
   private resizeStartY = 0;
@@ -265,6 +268,10 @@
       "show-new-project-dialog",
       this.handleShowNewProjectDialog
     );
+    window.addEventListener(
+      "show-paint-by-number-dialog",
+      this.handleShowPaintByNumberDialog
+    );
     window.addEventListener(
       "show-keyboard-shortcuts-dialog",
       this.handleShowKeyboardShortcutsDialog
@@ -333,10 +340,23 @@
     this.showNewProjectDialog = true;
   };
 
+  private handleShowPaintByNumberDialog = () => {
+    this.showProjectBrowser = false;
+    this.showPaintByNumberDialog = true;
+  };
+
+  private handlePaintByNumberDialogClose = () => {
+    this.showPaintByNumberDialog = false;
+
+    if (this.projectSelectionRequired) {
+      this.showProjectBrowser = true;
+    }
+  };
+
   private handleNewProjectDialogClose = () => {
     this.showNewProjectDialog = false;
 
-    if (!this.hasLibraryProject) {
+    if (this.projectSelectionRequired) {
       this.showProjectBrowser = true;
     }
   };
@@ -351,7 +371,7 @@
 
   private handleShowOpenFileDialog = () => {
     // Trigger the menu bar's open file method
     const menuBar = this.shadowRoot?.querySelector("pf-menu-bar") as any;
     menuBar?.openFile();
   };
 
@@ -381,24 +401,28 @@
   };
 
   private handleProjectBrowserClose = () => {
-    if (this.hasLibraryProject) {
+    if (!this.projectSelectionRequired) {
       this.showProjectBrowser = false;
     }
   };
 
   private handleProjectOpened = () => {
     this.hasLibraryProject = true;
+    this.projectSelectionRequired = false;
     this.showProjectBrowser = false;
   };
 
   private handleProjectCreated = () => {
     this.hasLibraryProject = true;
+    this.projectSelectionRequired = false;
     this.showNewProjectDialog = false;
+    this.showPaintByNumberDialog = false;
     this.showProjectBrowser = false;
   };
 
   private handleCurrentProjectDeleted = () => {
     this.hasLibraryProject = false;
+    this.projectSelectionRequired = true;
     this.showProjectBrowser = true;
   };
 
@@ -442,6 +466,7 @@
         (await workspaceStore.restoreWorkspace(workspaceState))
       ) {
         this.hasLibraryProject = true;
+        this.projectSelectionRequired = false;
         this.showProjectBrowser = false;
         return;
       }
@@ -462,15 +487,18 @@
       ) {
         historyStore.clear();
         this.hasLibraryProject = true;
+        this.projectSelectionRequired = false;
         this.showProjectBrowser = false;
       } else {
         this.hasLibraryProject = false;
-        this.showProjectBrowser = true;
+        this.projectSelectionRequired = false;
+        this.showProjectBrowser = false;
       }
     } catch (error) {
       log.warn("Failed to load saved project, starting fresh:", error);
       this.hasLibraryProject = false;
-      this.showProjectBrowser = true;
+      this.projectSelectionRequired = false;
+      this.showProjectBrowser = false;
     }
   }
 
@@ -483,6 +511,10 @@
       "show-new-project-dialog",
       this.handleShowNewProjectDialog
     );
+    window.removeEventListener(
+      "show-paint-by-number-dialog",
+      this.handleShowPaintByNumberDialog
+    );
     window.removeEventListener(
       "show-keyboard-shortcuts-dialog",
       this.handleShowKeyboardShortcutsDialog
@@ -569,6 +601,7 @@
           @resize-canvas=${() => (this.showResizeDialog = true)}
           @show-export-dialog=${() => (this.showExportDialog = true)}
           @show-new-project-dialog=${this.handleShowNewProjectDialog}
+          @show-paint-by-number-dialog=${this.handleShowPaintByNumberDialog}
           @show-project-browser=${() => (this.showProjectBrowser = true)}
         ></pf-menu-bar>
       </header>
@@ -647,11 +680,18 @@
         @project-created=${this.handleProjectCreated}
       ></pf-new-project-dialog>
 
+      <pf-paint-by-number-dialog
+        ?open=${this.showPaintByNumberDialog}
+        @close=${this.handlePaintByNumberDialogClose}
+        @project-created=${this.handleProjectCreated}
+      ></pf-paint-by-number-dialog>
+
       ${this.showProjectBrowser
         ? html`
             <pf-project-browser
-              .canClose=${this.hasLibraryProject}
+              .canClose=${!this.projectSelectionRequired}
               @show-new-project-dialog=${this.handleShowNewProjectDialog}
+              @show-paint-by-number-dialog=${this.handleShowPaintByNumberDialog}
               @project-browser-close=${this.handleProjectBrowserClose}
               @project-opened=${this.handleProjectOpened}
               @current-project-deleted=${this.handleCurrentProjectDeleted}

src/components/canvas/pf-canvas-viewport.ts

@@ -5,6 +5,7 @@ import { defaultProjectContext, type ProjectContext } from '../../stores/project
 import './pf-selection-overlay';
 import './pf-marching-ants-overlay';
 import './pf-brush-cursor-overlay';
+import './pf-guided-number-overlay';
 import './pf-transform-handles';
 import './pf-reference-transform-handles';
 import './pf-text-input';
@@ -181,6 +182,7 @@ export class PFCanvasViewport extends BaseComponent {
         <slot></slot>
       </div>
       <canvas id="grid-overlay"></canvas>
+      <pf-guided-number-overlay></pf-guided-number-overlay>
       <pf-selection-overlay></pf-selection-overlay>
       <pf-marching-ants-overlay></pf-marching-ants-overlay>
       <pf-brush-cursor-overlay></pf-brush-cursor-overlay>