Merge pull request #28 from DVDAGames/feat/revamp

Revamp from local-only to DB-backed for retaining state cross-device; allow users to create new Hex Flower Engines

Author: ericrallen

.env

@@ -0,0 +1,35 @@
+# Cloudflare D1 Database
+# Get this after running: npx wrangler d1 create hex-flower-engine-db
+# The command will output the database_id - copy it here and to wrangler.toml
+CLOUDFLARE_D1_DATABASE_ID=
+
+# Cloudflare Account (for GitHub Actions deployment)
+# Find at: https://dash.cloudflare.com/ → right sidebar → Account ID
+CLOUDFLARE_ACCOUNT_ID=
+
+# Cloudflare API Token (for GitHub Actions deployment)
+# Create at: https://dash.cloudflare.com/profile/api-tokens
+# Use template: "Edit Cloudflare Workers" or create custom with:
+#   - Account: Cloudflare Pages:Edit, D1:Edit
+#   - Zone: (optional, only if using custom domain)
+CLOUDFLARE_API_TOKEN=
+
+# JWT Secret for signing auth tokens
+# Generate with: node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
+JWT_SECRET=
+
+# Resend API Key for sending magic link emails
+# Get from: https://resend.com/api-keys
+RESEND_API_KEY=
+
+# Admin email addresses (comma-separated)
+# These users will have admin access to approve public gallery submissions
+ADMIN_EMAILS=your-email@example.com
+
+# Sender email address for magic link emails
+# Format: "Display Name <email@yourdomain.com>"
+# Must be from a verified domain in Resend, or use onboarding@resend.dev for testing
+EMAIL_FROM=Hex Flower Engine <info@yourdomain.com>
+
+# Environment (production or development)
+ENVIRONMENT=development

.example.env

@@ -1,27 +1,62 @@
-# This is a basic workflow to help you get started with Actions
+# Deploy Hex Flower Engine to Cloudflare Pages
 
-name: Publish to Github Pages
+name: Deploy to Cloudflare Pages
 
-# Controls when the action will run. Triggers the workflow on push or pull request
-# events but only for the master branch
 on:
   push:
-    branches: [ master ]
+    branches: [main]
+  pull_request:
+    branches: [main]
+  workflow_dispatch:
+
+concurrency:
+  group: "cloudflare-pages-${{ github.ref }}"
+  cancel-in-progress: true
 
-# A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
-   # This workflow contains a single job called "deploy"
-  deploy:
-    name: Deploy to gh-pages
-    # The type of runner that the job will run onruns-on: ubuntu-latest
+  build-and-deploy:
+    name: Build and Deploy
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
     steps:
-      - uses: actions/checkout@v2
-      - uses: borales/actions-yarn@v2.0.0
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
-          cmd: install # will run `yarn install` command
-      - uses: borales/actions-yarn@v2.0.0
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Type check
+        run: npm run type-check
+
+      - name: Build
+        run: npm run build
+
+      # Only run migrations and deploy on push to main (not PRs)
+      - name: Run D1 Migrations
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: d1 migrations apply hex-flower-engine-db --remote
+
+      - name: Deploy to Cloudflare Pages
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+        uses: cloudflare/wrangler-action@v3
         with:
-          cmd: deploy # will run `yarn build` command
-      - name: Success
-        run: echo "Successfully deployed to gh-pages branch"
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: pages deploy dist --project-name=hex-flower-engine
+
+      # For PRs, just report build success
+      - name: Build Success
+        if: github.event_name == 'pull_request'
+        run: echo "✅ Build and type check passed for PR"

.github/workflows/main.yml

@@ -10,14 +10,23 @@
 
 # production
 /build
+/dist
 
-# misc
+# env
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 
+# misc
+/.tmp
+
+# wrangler
+.dev.vars
+.wrangler
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

.gitignore

@@ -0,0 +1 @@
+24.13.0

.nvmrc

@@ -1,11 +1,27 @@
-# React Hex Flower Engine
+# Hex v2
 
-![Weather Generation Hex Flower Engine](./public/weather-flower-demo.png)
+![Hex v2](./public/hex-v2.png)
 
-This is a simple application for managing a
-[Hex Flower Engine](https://goblinshenchman.wordpress.com/2018/10/25/2d6-hex-power-flower/)
+Hex is an application for managing
+[Hex Flower Engines](https://goblinshenchman.wordpress.com/2018/10/25/2d6-hex-power-flower/)
 for any tabletop game in the browser.
 
+## Create and Share Hex Flower Engines
+
+In the Hex application, you can create your own Hex Flower Engines, share them with your players, and even publish them to the Garden, where other users can find them and use them in their own games.
+
+The Hex Editor allows you to choose a label, icon, color, and description for each Hex cell, and also customize the Hex Flower Engine movement rules for each roll outcome for that cell.
+
+**Coming Soon**:
+
+- Fork published engines and save your own version of them with modifications
+- Use movement rules other than `2d6` and `1d19`
+- Offline -> Online sync of engine state and editor state in case you lose network connection while using the application
+
+### Legacy Version
+
+The legacy version of this application is still hosted on GitHub Pages, but `v2` is a much better application for your needs and provides an interface for you to configure your own Hex Flower Engines.
+
 It currently supports two engines:
 
 - `Standard Hex Flower Engine`: basic hex flower engine with standard movement rules

README.md

@@ -0,0 +1,105 @@
+// Admin API: Get review history (approved/rejected engines)
+// GET /api/admin/history
+
+import type { Env } from '../../types';
+import { getAuthUser, isAdminEmail, json, errorResponse } from '../../utils';
+
+interface EngineRow {
+  id: string;
+  owner_id: string;
+  definition: string;
+  visibility: string;
+  submitted_for_review_at: string;
+  reviewed_at: string;
+  reviewed_by: string;
+  rejection_reason: string | null;
+  use_count: number;
+  created_at: string;
+  updated_at: string;
+  user_email: string;
+  user_display_name: string | null;
+  reviewer_email: string | null;
+  reviewer_display_name: string | null;
+}
+
+export const onRequestGet: PagesFunction<Env> = async (context) => {
+  const { request, env } = context;
+
+  try {
+    // Verify admin authentication
+    const session = await getAuthUser(request, env);
+    if (!session) {
+      return errorResponse('Unauthorized', 401);
+    }
+
+    if (!isAdminEmail(session.email, env)) {
+      return errorResponse('Forbidden - Admin access required', 403);
+    }
+
+    // Get query params for filtering
+    const url = new URL(request.url);
+    const filter = url.searchParams.get('filter') || 'all'; // 'all', 'approved', 'rejected'
+    const limit = Math.min(parseInt(url.searchParams.get('limit') || '50'), 100);
+
+    // Build visibility filter
+    let visibilityFilter = "e.visibility IN ('public', 'private')";
+    if (filter === 'approved') {
+      visibilityFilter = "e.visibility = 'public'";
+    } else if (filter === 'rejected') {
+      visibilityFilter = "e.visibility = 'private'";
+    }
+
+    // Get reviewed engines with user and reviewer info
+    const result = await env.DB.prepare(`
+      SELECT 
+        e.id,
+        e.owner_id,
+        e.definition,
+        e.visibility,
+        e.submitted_for_review_at,
+        e.reviewed_at,
+        e.reviewed_by,
+        e.rejection_reason,
+        e.use_count,
+        e.created_at,
+        e.updated_at,
+        p.email as user_email,
+        p.display_name as user_display_name,
+        r.email as reviewer_email,
+        r.display_name as reviewer_display_name
+      FROM engines e
+      JOIN profiles p ON e.owner_id = p.id
+      LEFT JOIN profiles r ON e.reviewed_by = r.id
+      WHERE e.reviewed_at IS NOT NULL
+        AND ${visibilityFilter}
+      ORDER BY e.reviewed_at DESC
+      LIMIT ?
+    `).bind(limit).all();
+
+    const engines = (result.results as unknown as EngineRow[]).map((row) => ({
+      id: row.id,
+      ownerId: row.owner_id,
+      definition: JSON.parse(row.definition),
+      visibility: row.visibility,
+      submittedAt: row.submitted_for_review_at,
+      reviewedAt: row.reviewed_at,
+      rejectionReason: row.rejection_reason,
+      useCount: row.use_count,
+      createdAt: row.created_at,
+      updatedAt: row.updated_at,
+      user: {
+        email: row.user_email,
+        displayName: row.user_display_name,
+      },
+      reviewer: row.reviewer_email ? {
+        email: row.reviewer_email,
+        displayName: row.reviewer_display_name,
+      } : null,
+    }));
+
+    return json({ engines });
+  } catch (error) {
+    console.error('Admin history error:', error);
+    return errorResponse('Failed to fetch review history', 500);
+  }
+};

functions/api/admin/history.ts

@@ -0,0 +1,73 @@
+// Admin API: Get pending engines for review
+// GET /api/admin/pending
+
+import type { Env } from '../../types';
+import { getAuthUser, isAdminEmail, json, errorResponse } from '../../utils';
+
+interface EngineRow {
+  id: string;
+  owner_id: string;
+  definition: string;
+  visibility: string;
+  submitted_at: string;
+  use_count: number;
+  created_at: string;
+  updated_at: string;
+  user_email: string;
+  user_display_name: string | null;
+}
+
+export const onRequestGet: PagesFunction<Env> = async (context) => {
+  const { request, env } = context;
+
+  try {
+    // Verify admin authentication
+    const session = await getAuthUser(request, env);
+    if (!session) {
+      return errorResponse('Unauthorized', 401);
+    }
+
+    if (!isAdminEmail(session.email, env)) {
+      return errorResponse('Forbidden - Admin access required', 403);
+    }
+
+    // Get all pending engines with user info
+    const result = await env.DB.prepare(`
+      SELECT 
+        e.id,
+        e.owner_id,
+        e.definition,
+        e.visibility,
+        e.submitted_for_review_at as submitted_at,
+        e.use_count,
+        e.created_at,
+        e.updated_at,
+        p.email as user_email,
+        p.display_name as user_display_name
+      FROM engines e
+      JOIN profiles p ON e.owner_id = p.id
+      WHERE e.visibility = 'pending_review'
+      ORDER BY e.submitted_for_review_at ASC
+    `).all();
+
+    const engines = (result.results as unknown as EngineRow[]).map((row) => ({
+      id: row.id,
+      ownerId: row.owner_id,
+      definition: JSON.parse(row.definition),
+      visibility: row.visibility,
+      submittedAt: row.submitted_at,
+      useCount: row.use_count,
+      createdAt: row.created_at,
+      updatedAt: row.updated_at,
+      user: {
+        email: row.user_email,
+        displayName: row.user_display_name,
+      },
+    }));
+
+    return json({ engines });
+  } catch (error) {
+    console.error('Admin pending error:', error);
+    return errorResponse('Failed to fetch pending engines', 500);
+  }
+};