Initial Commit
This commit is contained in:
HPL-JesusCastro
4
.dockerignore
Normal file
4
.dockerignore
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
**/node_modules
|
||||||
|
uploads
|
||||||
|
data
|
||||||
|
client/dist
|
||||||
168
.gitignore
vendored
Normal file
168
.gitignore
vendored
Normal file
@@ -0,0 +1,168 @@
|
|||||||
|
# Created by https://www.toptal.com/developers/gitignore/api/node
|
||||||
|
# Edit at https://www.toptal.com/developers/gitignore?templates=node
|
||||||
|
|
||||||
|
### Node ###
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||||
|
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
*.lcov
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# Bower dependency directory (https://bower.io/)
|
||||||
|
bower_components
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||||
|
build/Release
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules/
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# Snowpack dependency directory (https://snowpack.dev/)
|
||||||
|
web_modules/
|
||||||
|
|
||||||
|
# TypeScript cache
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional stylelint cache
|
||||||
|
.stylelintcache
|
||||||
|
|
||||||
|
# Microbundle cache
|
||||||
|
.rpt2_cache/
|
||||||
|
.rts2_cache_cjs/
|
||||||
|
.rts2_cache_es/
|
||||||
|
.rts2_cache_umd/
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variable files
|
||||||
|
.env
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
.env.local
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
.cache
|
||||||
|
.parcel-cache
|
||||||
|
|
||||||
|
# Next.js build output
|
||||||
|
.next
|
||||||
|
out
|
||||||
|
|
||||||
|
# Nuxt.js build / generate output
|
||||||
|
.nuxt
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Gatsby files
|
||||||
|
.cache/
|
||||||
|
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||||
|
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||||
|
# public
|
||||||
|
|
||||||
|
# vuepress build output
|
||||||
|
.vuepress/dist
|
||||||
|
|
||||||
|
# vuepress v2.x temp and cache directory
|
||||||
|
.temp
|
||||||
|
|
||||||
|
# Docusaurus cache and generated files
|
||||||
|
.docusaurus
|
||||||
|
|
||||||
|
# Serverless directories
|
||||||
|
.serverless/
|
||||||
|
|
||||||
|
# FuseBox cache
|
||||||
|
.fusebox/
|
||||||
|
|
||||||
|
# DynamoDB Local files
|
||||||
|
.dynamodb/
|
||||||
|
|
||||||
|
# TernJS port file
|
||||||
|
.tern-port
|
||||||
|
|
||||||
|
# Stores VSCode versions used for testing VSCode extensions
|
||||||
|
.vscode-test
|
||||||
|
|
||||||
|
# yarn v2
|
||||||
|
.yarn/cache
|
||||||
|
.yarn/unplugged
|
||||||
|
.yarn/build-state.yml
|
||||||
|
.yarn/install-state.gz
|
||||||
|
.pnp.*
|
||||||
|
|
||||||
|
### Node Patch ###
|
||||||
|
# Serverless Webpack directories
|
||||||
|
.webpack/
|
||||||
|
|
||||||
|
# Optional stylelint cache
|
||||||
|
|
||||||
|
# SvelteKit build / generate output
|
||||||
|
.svelte-kit
|
||||||
|
|
||||||
|
# End of https://www.toptal.com/developers/gitignore/api/node
|
||||||
|
|
||||||
|
### Project-specific ###
|
||||||
|
# Uploaded files
|
||||||
|
uploads/
|
||||||
|
|
||||||
|
# Runtime data files
|
||||||
|
data/*.json
|
||||||
|
|
||||||
|
# Vite build output
|
||||||
|
client/dist/
|
||||||
|
|
||||||
|
# Environment files
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
|
|
||||||
|
# OS files
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Docker
|
||||||
|
docker-compose.override.yml
|
||||||
|
|
||||||
|
# Claude Code
|
||||||
|
.claude/
|
||||||
265
DEVLOG.md
Normal file
265
DEVLOG.md
Normal file
@@ -0,0 +1,265 @@
|
|||||||
|
# Playable Showcase — Dev Log
|
||||||
|
|
||||||
|
## Project Overview
|
||||||
|
|
||||||
|
Internal tool for uploading, previewing, and organizing HTML playable ads.
|
||||||
|
Single-file HTML playables are uploaded, stored on disk, and served via Express.
|
||||||
|
React SPA (Vite) for the frontend. JSON file-based DB (no SQL).
|
||||||
|
|
||||||
|
**Stack:** Node.js + Express · React + Vite · React Router DOM · Multer · Puppeteer
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
```
|
||||||
|
PlayableShowcase/
|
||||||
|
├── server/
|
||||||
|
│ ├── index.js — Express server (port 3000), serves /public and /uploads
|
||||||
|
│ ├── db.js — JSON file-based database (ads + apps)
|
||||||
|
│ ├── routes/
|
||||||
|
│ │ ├── ads.js — GET/PATCH /api/ads/:id, POST /api/ads/:id/screenshot
|
||||||
|
│ │ ├── upload.js — POST /api/upload (multer, creates ad record)
|
||||||
|
│ │ └── apps.js — CRUD /api/apps, GET /api/apps/lookup
|
||||||
|
│ └── utils/
|
||||||
|
│ └── screenshot.js — Puppeteer headless screenshot utility
|
||||||
|
├── client/
|
||||||
|
│ ├── vite.config.js — outDir: '../public' (matches Express static path)
|
||||||
|
│ └── src/
|
||||||
|
│ ├── App.jsx — Routes: / (Catalog), /apps, /viewer/:id
|
||||||
|
│ ├── api.js — All fetch calls to Express API
|
||||||
|
│ ├── components/
|
||||||
|
│ │ ├── AppLayout.jsx/css — Shared sidebar shell + mobile hamburger
|
||||||
|
│ │ ├── AdCard.jsx/css — Catalog grid card (thumbnail + app icon)
|
||||||
|
│ │ ├── AppModal.jsx — Create/edit application modal (shared)
|
||||||
|
│ │ ├── MetadataModal.jsx — Edit playable metadata in Viewer
|
||||||
|
│ │ └── UploadPreviewModal.jsx/css — Upload flow modal
|
||||||
|
│ └── pages/
|
||||||
|
│ ├── Catalog.jsx/css — Main grid + sidebar with search/filter
|
||||||
|
│ ├── Viewer.jsx/css — Playable preview with device frame
|
||||||
|
│ └── Apps.jsx/css — Application management page
|
||||||
|
├── uploads/ — Uploaded HTML files + thumbnail PNGs
|
||||||
|
└── public/ — Vite build output (served by Express)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Features Implemented
|
||||||
|
|
||||||
|
### Catalog (`/`)
|
||||||
|
- Grid of AdCards with thumbnails, app icon, title, app name
|
||||||
|
- Sidebar: brand, upload button (hidden file input → UploadPreviewModal), app filter, search
|
||||||
|
- Search filters by: title, developer, app name, tags
|
||||||
|
- Apps sorted alphabetically in filter list
|
||||||
|
|
||||||
|
### Viewer (`/viewer/:id`)
|
||||||
|
- Device frame (phone/tablet/desktop) with scale-to-fit
|
||||||
|
- Rotate frame button
|
||||||
|
- Manual screenshot button (server-side Puppeteer)
|
||||||
|
- Auto-screenshot on iframe load if no thumbnail exists
|
||||||
|
- Sidebar: playable info, app icon + store links, repo@branch, tags, frame controls, edit button
|
||||||
|
- MetadataModal for editing: title, app, tags, developer, repo, branch, notes, replace HTML file
|
||||||
|
|
||||||
|
### Apps (`/apps`)
|
||||||
|
- List all applications with icon, name, store links
|
||||||
|
- Create/edit/delete apps
|
||||||
|
- App Store / Play Store URL auto-fill (lookupApp API)
|
||||||
|
|
||||||
|
### Upload Flow
|
||||||
|
- Upload HTML → UploadPreviewModal opens
|
||||||
|
- Left: live iframe preview of the playable
|
||||||
|
- Right: metadata form (title, app, tags, developer, repo, branch, notes)
|
||||||
|
- "Take Screenshot" button (required before Save) — calls Puppeteer server-side
|
||||||
|
- "New Application" inline button opens AppModal without leaving the flow
|
||||||
|
- Screenshot taken via server-side Puppeteer (not client-side canvas capture)
|
||||||
|
|
||||||
|
### Mobile
|
||||||
|
- Sidebar collapses to hamburger menu at ≤680px
|
||||||
|
- Overlay closes sidebar when tapped
|
||||||
|
- Upload preview frame uses aspect-ratio: 9/19.5
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Key Technical Decisions
|
||||||
|
|
||||||
|
### Screenshot: Server-side Puppeteer (not client-side html2canvas)
|
||||||
|
Client-side approaches (html2canvas, canvas.toDataURL) were tried and failed for various reasons:
|
||||||
|
- html2canvas can't access iframe CSS from parent window context → HTML overlays invisible
|
||||||
|
- WebGL `preserveDrawingBuffer: false` → canvas.toDataURL() always returns blank
|
||||||
|
- Composite-canvas fallback only captures WebGL, misses HTML UI layers
|
||||||
|
|
||||||
|
**Decision:** All screenshots go through `POST /api/ads/:id/screenshot` which runs Puppeteer.
|
||||||
|
Puppeteer captures the GPU-composited output, getting WebGL + HTML overlays correctly.
|
||||||
|
|
||||||
|
### Vite Build Output
|
||||||
|
`vite.config.js` sets `build: { outDir: '../public', emptyOutDir: true }`.
|
||||||
|
Express serves static files from `./public`. Without this, Vite outputs to `client/dist`
|
||||||
|
and Express throws `ENOENT: no such file or directory, stat '.../public/index.html'`.
|
||||||
|
|
||||||
|
### AdCard Thumbnail Display
|
||||||
|
`.ad-card__thumb` uses `aspect-ratio: 9 / 19.5` to match the 390×844 Puppeteer output.
|
||||||
|
`object-fit: cover` fills the container cleanly since both are the same ratio.
|
||||||
|
|
||||||
|
### AppModal Shared Component
|
||||||
|
AppModal was extracted from Apps.jsx into `components/AppModal.jsx` so it can be used
|
||||||
|
by both Apps.jsx (edit apps) and UploadPreviewModal.jsx (create app inline during upload).
|
||||||
|
Imports styles from `'../pages/Apps.css'` (note the relative path from components/).
|
||||||
|
|
||||||
|
### Sidebar Layout Pattern
|
||||||
|
All pages use `AppLayout` + consistent CSS class names:
|
||||||
|
- `.sb-brand` — top brand name
|
||||||
|
- `.sb-nav` — nav button area
|
||||||
|
- `.sb-btn` — sidebar button
|
||||||
|
- `.sb-divider` — horizontal rule
|
||||||
|
- `.sb-section-label` — uppercase section label
|
||||||
|
- `.viewer__sb-info` — padded content block inside a section
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Outstanding Issues
|
||||||
|
|
||||||
|
### 1. White Screenshots — Unity WebGL (UNRESOLVED)
|
||||||
|
|
||||||
|
**Symptom:** Clicking "Take Screenshot" on Unity WebGL playables returns a white/blank image.
|
||||||
|
|
||||||
|
**Root cause analysis:**
|
||||||
|
Unity WebGL uses `preserveDrawingBuffer: false` by default.
|
||||||
|
This means after the GPU compositor reads the WebGL framebuffer to display the frame,
|
||||||
|
the buffer is cleared. `canvas.toDataURL()` called between frames returns blank.
|
||||||
|
|
||||||
|
**Fixes attempted:**
|
||||||
|
1. `html2canvas` with frozen canvas data — failed (doesn't capture HTML overlays)
|
||||||
|
2. Canvas composite fallback — failed (same issue)
|
||||||
|
3. Puppeteer with `networkidle2` + 1500ms wait — failed (Unity initializes after network idle)
|
||||||
|
4. Puppeteer with `waitForFunction` polling `canvas.toDataURL()` — failed (still blank due to preserveDrawingBuffer)
|
||||||
|
5. **`evaluateOnNewDocument` monkey-patch to force `preserveDrawingBuffer: true`** — partial
|
||||||
|
- Monkey-patches `HTMLCanvasElement.prototype.getContext` before any page scripts run
|
||||||
|
- Forces `{ preserveDrawingBuffer: true }` on all webgl/webgl2 contexts
|
||||||
|
- Changed `waitUntil: 'networkidle2'` → `'load'` because Unity's fetch requests
|
||||||
|
keep the network permanently busy, causing networkidle2 timeout on large files
|
||||||
|
- Test script confirmed this works in isolation (saw "PL Island House" 3D screenshot)
|
||||||
|
- **But user still reports white screenshots in the actual app**
|
||||||
|
|
||||||
|
**Suspected remaining cause:**
|
||||||
|
The server process was NOT restarted after screenshot.js was changed.
|
||||||
|
Node.js caches `require()`d modules — the old code runs until the server restarts.
|
||||||
|
Or: there are additional Unity playables with different initialization patterns.
|
||||||
|
|
||||||
|
**What to try next:**
|
||||||
|
- Restart the server (`Ctrl+C` then `node index.js` or `npm start` in `/server`)
|
||||||
|
- If still white: add console logging to screenshot.js to see what `waitForFunction` detects
|
||||||
|
- Consider: `page.waitForFunction` might not see `window.unityInstance` if Unity sets it
|
||||||
|
as a local variable (not on window) — check the actual Unity HTML template used
|
||||||
|
- Nuclear option: after canvas polling resolves, take 3 screenshots 500ms apart and
|
||||||
|
keep the largest (most content = most bytes)
|
||||||
|
|
||||||
|
**Current screenshot.js logic (server/utils/screenshot.js):**
|
||||||
|
```js
|
||||||
|
// 1. Inject monkey-patch BEFORE page scripts run
|
||||||
|
await page.evaluateOnNewDocument(() => {
|
||||||
|
const orig = HTMLCanvasElement.prototype.getContext;
|
||||||
|
HTMLCanvasElement.prototype.getContext = function(type, attrs) {
|
||||||
|
if (type === 'webgl' || type === 'webgl2' || type === 'experimental-webgl') {
|
||||||
|
attrs = Object.assign({}, attrs || {}, { preserveDrawingBuffer: true });
|
||||||
|
}
|
||||||
|
return orig.call(this, type, attrs);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. Navigate (load, not networkidle2)
|
||||||
|
await page.goto(url, { waitUntil: 'load', timeout: 60000 });
|
||||||
|
|
||||||
|
// 3. Poll canvas for non-blank pixels (up to 20s)
|
||||||
|
await page.waitForFunction(() => {
|
||||||
|
const canvases = Array.from(document.querySelectorAll('canvas'))
|
||||||
|
.filter(c => c.width > 0 && c.height > 0);
|
||||||
|
return canvases.some(c => {
|
||||||
|
try {
|
||||||
|
const d = c.toDataURL('image/png');
|
||||||
|
return (d.split(',')[1] || '').length > 2000;
|
||||||
|
} catch { return false; }
|
||||||
|
});
|
||||||
|
}, { timeout: 20000, polling: 500 });
|
||||||
|
|
||||||
|
// 4. Settle 800ms, then screenshot
|
||||||
|
await new Promise(r => setTimeout(r, 800));
|
||||||
|
const buffer = await page.screenshot({ type: 'png' });
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. Simulated Device Too Small on Mobile (UNRESOLVED)
|
||||||
|
|
||||||
|
**Symptom:** On mobile viewports, the device frame in Viewer is very small — doesn't fill the available space.
|
||||||
|
|
||||||
|
**Root cause:**
|
||||||
|
`.viewer__stage` is a flex child of `.app-layout__main` which is `display: flex; flex-direction: column`.
|
||||||
|
The stage needs `flex: 1; min-height: 0` to grow and fill the column.
|
||||||
|
`min-height: 0` is required because flex children default to `min-height: auto`,
|
||||||
|
preventing them from shrinking below their content size.
|
||||||
|
|
||||||
|
**Fix was applied** (Viewer.css sets `flex: 1; min-height: 0` on `.viewer__stage`)
|
||||||
|
but mobile may still show the device too small because:
|
||||||
|
- On mobile, the hamburger bar takes 56px at the top (`padding-top: 56px` on `.app-layout__main`)
|
||||||
|
- The scale calculation in Viewer.jsx uses `stageDims` from a ResizeObserver
|
||||||
|
- If ResizeObserver fires before layout settles, `stageDims` could be stale
|
||||||
|
- The scale formula: `Math.min(1, (sw - 32) / fw, (sh - 32) / fh)` where fw/fh are frame dimensions
|
||||||
|
|
||||||
|
**What to try next:**
|
||||||
|
- Verify `.viewer__stage` actually has `flex: 1; min-height: 0` in the built CSS
|
||||||
|
(run `npm run build` in `/client` and check `/public/assets/index-*.css`)
|
||||||
|
- On mobile, check if `stageDims.height` reflects the full available height minus hamburger
|
||||||
|
- The `DeviceFrame` component's `getFrameSize(frame, rotated)` returns fixed pixel dimensions —
|
||||||
|
if the stage is e.g. 400px tall on mobile but the frame is 844px, scale = 400/844 ≈ 0.47
|
||||||
|
which might feel too small. Consider increasing margin or adjusting min-scale.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Playable Fields (DB Schema)
|
||||||
|
|
||||||
|
Each ad record:
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"id": "uuid",
|
||||||
|
"filename": "uuid.html",
|
||||||
|
"title": "string",
|
||||||
|
"appId": "uuid (ref to apps)",
|
||||||
|
"tags": ["string"],
|
||||||
|
"developer": "string",
|
||||||
|
"repo": "string",
|
||||||
|
"branch": "string",
|
||||||
|
"notes": "string",
|
||||||
|
"thumbnail": "uuid-thumb.png",
|
||||||
|
"uploaded_at": 1234567890,
|
||||||
|
"updated_at": 1234567890
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Each app record:
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"id": "uuid",
|
||||||
|
"name": "string",
|
||||||
|
"ios_url": "string",
|
||||||
|
"android_url": "string",
|
||||||
|
"icon_url": "string"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Dev Commands
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Server (from /server)
|
||||||
|
node index.js
|
||||||
|
# or if package.json has start script:
|
||||||
|
npm start
|
||||||
|
|
||||||
|
# Client dev server (from /client)
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# Client production build (from /client)
|
||||||
|
npm run build
|
||||||
|
# Output goes to /public (Express static root)
|
||||||
|
```
|
||||||
60
Dockerfile
Normal file
60
Dockerfile
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
# Stage 1: build React client
|
||||||
|
FROM node:20-alpine AS client-build
|
||||||
|
WORKDIR /app/client
|
||||||
|
COPY client/package*.json ./
|
||||||
|
RUN npm ci
|
||||||
|
COPY client/ ./
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
# Stage 2: run Express server (Debian-slim for Puppeteer/Chromium compatibility)
|
||||||
|
FROM node:20-slim
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# Chromium dependencies for Puppeteer
|
||||||
|
RUN apt-get update && apt-get install -y --no-install-recommends \
|
||||||
|
ca-certificates \
|
||||||
|
fonts-liberation \
|
||||||
|
libasound2 \
|
||||||
|
libatk-bridge2.0-0 \
|
||||||
|
libatk1.0-0 \
|
||||||
|
libc6 \
|
||||||
|
libcairo2 \
|
||||||
|
libcups2 \
|
||||||
|
libdbus-1-3 \
|
||||||
|
libexpat1 \
|
||||||
|
libfontconfig1 \
|
||||||
|
libgbm1 \
|
||||||
|
libgcc1 \
|
||||||
|
libglib2.0-0 \
|
||||||
|
libgtk-3-0 \
|
||||||
|
libnspr4 \
|
||||||
|
libnss3 \
|
||||||
|
libpango-1.0-0 \
|
||||||
|
libpangocairo-1.0-0 \
|
||||||
|
libstdc++6 \
|
||||||
|
libx11-6 \
|
||||||
|
libx11-xcb1 \
|
||||||
|
libxcb1 \
|
||||||
|
libxcomposite1 \
|
||||||
|
libxcursor1 \
|
||||||
|
libxdamage1 \
|
||||||
|
libxext6 \
|
||||||
|
libxfixes3 \
|
||||||
|
libxi6 \
|
||||||
|
libxrandr2 \
|
||||||
|
libxrender1 \
|
||||||
|
libxss1 \
|
||||||
|
libxtst6 \
|
||||||
|
lsb-release \
|
||||||
|
wget \
|
||||||
|
xdg-utils \
|
||||||
|
&& rm -rf /var/lib/apt/lists/*
|
||||||
|
|
||||||
|
COPY server/package*.json ./
|
||||||
|
RUN npm ci --omit=dev
|
||||||
|
COPY server/ ./server/
|
||||||
|
COPY --from=client-build /app/client/dist ./public
|
||||||
|
RUN mkdir -p /data /uploads
|
||||||
|
EXPOSE 3000
|
||||||
|
ENV NODE_ENV=production
|
||||||
|
CMD ["node", "server/index.js"]
|
||||||
24
client/.gitignore
vendored
Normal file
24
client/.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
16
client/README.md
Normal file
16
client/README.md
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
# React + Vite
|
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
|
|
||||||
|
Currently, two official plugins are available:
|
||||||
|
|
||||||
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
||||||
|
|
||||||
|
## React Compiler
|
||||||
|
|
||||||
|
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||||
|
|
||||||
|
## Expanding the ESLint configuration
|
||||||
|
|
||||||
|
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
||||||
21
client/eslint.config.js
Normal file
21
client/eslint.config.js
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{js,jsx}'],
|
||||||
|
extends: [
|
||||||
|
js.configs.recommended,
|
||||||
|
reactHooks.configs.flat.recommended,
|
||||||
|
reactRefresh.configs.vite,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
globals: globals.browser,
|
||||||
|
parserOptions: { ecmaFeatures: { jsx: true } },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
13
client/index.html
Normal file
13
client/index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>client</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
2532
client/package-lock.json
generated
Normal file
2532
client/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
29
client/package.json
Normal file
29
client/package.json
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"name": "client",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"html2canvas": "^1.4.1",
|
||||||
|
"react": "^19.2.6",
|
||||||
|
"react-dom": "^19.2.6",
|
||||||
|
"react-router-dom": "^7.15.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^10.0.1",
|
||||||
|
"@types/react": "^19.2.14",
|
||||||
|
"@types/react-dom": "^19.2.3",
|
||||||
|
"@vitejs/plugin-react": "^6.0.1",
|
||||||
|
"eslint": "^10.3.0",
|
||||||
|
"eslint-plugin-react-hooks": "^7.1.1",
|
||||||
|
"eslint-plugin-react-refresh": "^0.5.2",
|
||||||
|
"globals": "^17.6.0",
|
||||||
|
"vite": "^8.0.12"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
client/public/favicon.svg
Normal file
1
client/public/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
24
client/public/icons.svg
Normal file
24
client/public/icons.svg
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||||
|
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||||
|
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||||
|
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.9 KiB |
184
client/src/App.css
Normal file
184
client/src/App.css
Normal file
@@ -0,0 +1,184 @@
|
|||||||
|
.counter {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: var(--accent);
|
||||||
|
background: var(--accent-bg);
|
||||||
|
border: 2px solid transparent;
|
||||||
|
transition: border-color 0.3s;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--accent-border);
|
||||||
|
}
|
||||||
|
&:focus-visible {
|
||||||
|
outline: 2px solid var(--accent);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.base,
|
||||||
|
.framework,
|
||||||
|
.vite {
|
||||||
|
inset-inline: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.base {
|
||||||
|
width: 170px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework,
|
||||||
|
.vite {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework {
|
||||||
|
z-index: 1;
|
||||||
|
top: 34px;
|
||||||
|
height: 28px;
|
||||||
|
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||||
|
scale(1.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vite {
|
||||||
|
z-index: 0;
|
||||||
|
top: 107px;
|
||||||
|
height: 26px;
|
||||||
|
width: auto;
|
||||||
|
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||||
|
scale(0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#center {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 25px;
|
||||||
|
place-content: center;
|
||||||
|
place-items: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 32px 20px 24px;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#next-steps {
|
||||||
|
display: flex;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
flex: 1 1 0;
|
||||||
|
padding: 32px;
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 24px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#docs {
|
||||||
|
border-right: 1px solid var(--border);
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#next-steps ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
margin: 32px 0 0;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--text-h);
|
||||||
|
font-size: 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--social-bg);
|
||||||
|
display: flex;
|
||||||
|
padding: 6px 12px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: box-shadow 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
.button-icon {
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
margin-top: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
li {
|
||||||
|
flex: 1 1 calc(50% - 8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#spacer {
|
||||||
|
height: 88px;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticks {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -4.5px;
|
||||||
|
border: 5px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
left: 0;
|
||||||
|
border-left-color: var(--border);
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
right: 0;
|
||||||
|
border-right-color: var(--border);
|
||||||
|
}
|
||||||
|
}
|
||||||
23
client/src/App.jsx
Normal file
23
client/src/App.jsx
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
|
||||||
|
import { isAuthenticated } from './api';
|
||||||
|
import Login from './pages/Login';
|
||||||
|
import Apps from './pages/Apps';
|
||||||
|
import Catalog from './pages/Catalog';
|
||||||
|
import Viewer from './pages/Viewer';
|
||||||
|
|
||||||
|
function ProtectedRoute({ children }) {
|
||||||
|
return isAuthenticated() ? children : <Navigate to="/login" replace />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<BrowserRouter>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/login" element={<Login />} />
|
||||||
|
<Route path="/" element={<ProtectedRoute><Catalog /></ProtectedRoute>} />
|
||||||
|
<Route path="/apps" element={<ProtectedRoute><Apps /></ProtectedRoute>} />
|
||||||
|
<Route path="/viewer/:id" element={<ProtectedRoute><Viewer /></ProtectedRoute>} />
|
||||||
|
</Routes>
|
||||||
|
</BrowserRouter>
|
||||||
|
);
|
||||||
|
}
|
||||||
145
client/src/api.js
Normal file
145
client/src/api.js
Normal file
@@ -0,0 +1,145 @@
|
|||||||
|
const ADS_BASE = '/api/ads';
|
||||||
|
const APPS_BASE = '/api/apps';
|
||||||
|
|
||||||
|
function authHeaders(extra = {}) {
|
||||||
|
const token = localStorage.getItem('showcase_token');
|
||||||
|
return token ? { Authorization: `Bearer ${token}`, ...extra } : { ...extra };
|
||||||
|
}
|
||||||
|
|
||||||
|
async function apiFetch(url, options = {}) {
|
||||||
|
const res = await fetch(url, {
|
||||||
|
...options,
|
||||||
|
headers: { ...authHeaders(), ...options.headers },
|
||||||
|
});
|
||||||
|
if (res.status === 401) {
|
||||||
|
localStorage.removeItem('showcase_token');
|
||||||
|
window.location.href = '/login';
|
||||||
|
throw new Error('Unauthorized');
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── auth ─────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export async function login(password) {
|
||||||
|
const res = await fetch('/api/auth/login', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ password }),
|
||||||
|
});
|
||||||
|
if (!res.ok) throw new Error('Invalid password');
|
||||||
|
const { token } = await res.json();
|
||||||
|
localStorage.setItem('showcase_token', token);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function logout() {
|
||||||
|
localStorage.removeItem('showcase_token');
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isAuthenticated() {
|
||||||
|
return !!localStorage.getItem('showcase_token');
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── ads ──────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export async function listAds(appId) {
|
||||||
|
const url = appId ? `${ADS_BASE}?appId=${encodeURIComponent(appId)}` : ADS_BASE;
|
||||||
|
const res = await apiFetch(url);
|
||||||
|
if (!res.ok) throw new Error('Failed to fetch ads');
|
||||||
|
return res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getAd(id) {
|
||||||
|
const res = await apiFetch(`${ADS_BASE}/${id}`);
|
||||||
|
if (!res.ok) throw new Error('Ad not found');
|
||||||
|
return res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function uploadAd(file) {
|
||||||
|
const form = new FormData();
|
||||||
|
form.append('file', file);
|
||||||
|
const res = await apiFetch(ADS_BASE, { method: 'POST', body: form });
|
||||||
|
if (!res.ok) throw new Error('Upload failed');
|
||||||
|
return res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function updateAd(id, data) {
|
||||||
|
const res = await apiFetch(`${ADS_BASE}/${id}`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
if (!res.ok) throw new Error('Update failed');
|
||||||
|
return res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function updateAdFile(id, file) {
|
||||||
|
const form = new FormData();
|
||||||
|
form.append('file', file);
|
||||||
|
const res = await apiFetch(`${ADS_BASE}/${id}/file`, { method: 'POST', body: form });
|
||||||
|
if (!res.ok) throw new Error('File update failed');
|
||||||
|
return res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function deleteAd(id) {
|
||||||
|
const res = await apiFetch(`${ADS_BASE}/${id}`, { method: 'DELETE' });
|
||||||
|
if (!res.ok) throw new Error('Delete failed');
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function requestScreenshot(id) {
|
||||||
|
const res = await apiFetch(`${ADS_BASE}/${id}/screenshot`, { method: 'POST' });
|
||||||
|
if (!res.ok) throw new Error('Screenshot failed');
|
||||||
|
return res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function saveThumbnail(id, dataUrl) {
|
||||||
|
const res = await apiFetch(`${ADS_BASE}/${id}/thumbnail`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ dataUrl }),
|
||||||
|
});
|
||||||
|
if (!res.ok) throw new Error('Thumbnail save failed');
|
||||||
|
return res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── apps ─────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export async function lookupApp(url) {
|
||||||
|
const res = await apiFetch(`${APPS_BASE}/lookup?url=${encodeURIComponent(url)}`);
|
||||||
|
if (!res.ok) {
|
||||||
|
const body = await res.json().catch(() => ({}));
|
||||||
|
throw new Error(body.error || 'Lookup failed');
|
||||||
|
}
|
||||||
|
return res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function listApps() {
|
||||||
|
const res = await apiFetch(APPS_BASE);
|
||||||
|
if (!res.ok) throw new Error('Failed to fetch apps');
|
||||||
|
return res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function createApp(data) {
|
||||||
|
const res = await apiFetch(APPS_BASE, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
if (!res.ok) throw new Error('Create app failed');
|
||||||
|
return res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function updateApp(id, data) {
|
||||||
|
const res = await apiFetch(`${APPS_BASE}/${id}`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
if (!res.ok) throw new Error('Update app failed');
|
||||||
|
return res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function deleteApp(id) {
|
||||||
|
const res = await apiFetch(`${APPS_BASE}/${id}`, { method: 'DELETE' });
|
||||||
|
if (!res.ok) throw new Error('Delete app failed');
|
||||||
|
}
|
||||||
BIN
client/src/assets/hero.png
Normal file
BIN
client/src/assets/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
1
client/src/assets/react.svg
Normal file
1
client/src/assets/react.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
1
client/src/assets/vite.svg
Normal file
1
client/src/assets/vite.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
153
client/src/components/AdCard.css
Normal file
153
client/src/components/AdCard.css
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
.ad-card {
|
||||||
|
background: #1e1e1e;
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 1px solid #2e2e2e;
|
||||||
|
transition: border-color 0.2s, transform 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-card:hover {
|
||||||
|
border-color: #7c6af7;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-card__thumb {
|
||||||
|
aspect-ratio: 9 / 19.5;
|
||||||
|
background: #111;
|
||||||
|
cursor: pointer;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-card__thumb-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-card__thumb-placeholder {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-card__thumb-name {
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #aaa;
|
||||||
|
word-break: break-word;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 4;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-card__thumb-hint {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-card__body {
|
||||||
|
padding: 10px 12px 6px;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-card__top-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-card__app-icon {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 7px;
|
||||||
|
object-fit: cover;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-card__top-text {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-card__title {
|
||||||
|
font-size: 0.88rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
color: #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-card__app {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #9d8ef7;
|
||||||
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-card__tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-card__meta {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: #555;
|
||||||
|
font-family: monospace;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-card__actions {
|
||||||
|
display: flex;
|
||||||
|
border-top: 1px solid #2e2e2e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-card__actions button {
|
||||||
|
flex: 1;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
border-right: 1px solid #2e2e2e;
|
||||||
|
color: #aaa;
|
||||||
|
padding: 8px 0;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: background 0.15s, color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-card__actions button:last-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-card__actions button:hover {
|
||||||
|
background: #2a2a2a;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-card__actions .ad-card__delete:hover {
|
||||||
|
background: #3a1a1a;
|
||||||
|
color: #f77;
|
||||||
|
}
|
||||||
52
client/src/components/AdCard.jsx
Normal file
52
client/src/components/AdCard.jsx
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import './AdCard.css';
|
||||||
|
|
||||||
|
export default function AdCard({ ad, app, onEdit, onDelete }) {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [thumbError, setThumbError] = useState(false);
|
||||||
|
const [iconError, setIconError] = useState(false);
|
||||||
|
const showThumb = ad.thumbnail && !thumbError;
|
||||||
|
const showIcon = app?.icon_url && !iconError;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="ad-card">
|
||||||
|
<div className="ad-card__thumb" onClick={() => navigate(`/viewer/${ad.id}`)}>
|
||||||
|
{showThumb ? (
|
||||||
|
<img
|
||||||
|
src={`/uploads/${ad.thumbnail}`}
|
||||||
|
alt={ad.title}
|
||||||
|
className="ad-card__thumb-img"
|
||||||
|
onError={() => setThumbError(true)}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="ad-card__thumb-placeholder">
|
||||||
|
<span className="ad-card__thumb-name">{ad.title}</span>
|
||||||
|
<span className="ad-card__thumb-hint">Open to screenshot</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="ad-card__body">
|
||||||
|
<div className="ad-card__top-row">
|
||||||
|
{showIcon && (
|
||||||
|
<img
|
||||||
|
src={app.icon_url}
|
||||||
|
className="ad-card__app-icon"
|
||||||
|
alt=""
|
||||||
|
onError={() => setIconError(true)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<div className="ad-card__top-text">
|
||||||
|
<h3 className="ad-card__title" title={ad.title}>{ad.title}</h3>
|
||||||
|
{app && <span className="ad-card__app">{app.name}</span>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="ad-card__actions">
|
||||||
|
<button onClick={() => navigate(`/viewer/${ad.id}`)} title="Open viewer">▶</button>
|
||||||
|
<button onClick={() => onEdit(ad)} title="Edit metadata">✎</button>
|
||||||
|
<button onClick={() => onDelete(ad)} title="Delete" className="ad-card__delete">✕</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
178
client/src/components/AppLayout.css
Normal file
178
client/src/components/AppLayout.css
Normal file
@@ -0,0 +1,178 @@
|
|||||||
|
.app-layout {
|
||||||
|
display: flex;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #0e0e0e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-sidebar {
|
||||||
|
width: 220px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: #141414;
|
||||||
|
border-right: 1px solid #222;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-layout__main {
|
||||||
|
flex: 1;
|
||||||
|
overflow: auto;
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hamburger — hidden on desktop */
|
||||||
|
.app-layout__hamburger {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Overlay — only used on mobile */
|
||||||
|
.app-layout__overlay {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Shared sidebar building blocks ─────────────────────────────────────── */
|
||||||
|
|
||||||
|
.sb-brand {
|
||||||
|
padding: 20px 16px 14px;
|
||||||
|
font-size: 0.88rem;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
background: linear-gradient(135deg, #7c6af7, #b89bf7);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sb-divider {
|
||||||
|
height: 1px;
|
||||||
|
background: #222;
|
||||||
|
margin: 4px 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sb-section-label {
|
||||||
|
padding: 10px 14px 4px;
|
||||||
|
font-size: 0.68rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #444;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.07em;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sb-nav {
|
||||||
|
padding: 6px 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sb-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #888;
|
||||||
|
padding: 8px 10px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: left;
|
||||||
|
transition: all 0.15s;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sb-btn:hover {
|
||||||
|
background: #1e1e1e;
|
||||||
|
color: #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sb-btn--active {
|
||||||
|
background: #2a2440;
|
||||||
|
color: #9d8ef7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sb-btn--primary {
|
||||||
|
background: #2a2440;
|
||||||
|
color: #9d8ef7;
|
||||||
|
border: 1px solid #3d3060;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sb-btn--primary:hover {
|
||||||
|
background: #352d55;
|
||||||
|
color: #b8aaf9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sb-app-icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 6px;
|
||||||
|
object-fit: cover;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sb-app-icon-placeholder {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #2a2a2a;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Mobile ──────────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
@media (max-width: 680px) {
|
||||||
|
.app-sidebar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 200;
|
||||||
|
transform: translateX(-100%);
|
||||||
|
transition: transform 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-sidebar.is-open {
|
||||||
|
transform: translateX(0);
|
||||||
|
box-shadow: 8px 0 40px rgba(0, 0, 0, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-layout__overlay {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.55);
|
||||||
|
backdrop-filter: blur(2px);
|
||||||
|
z-index: 199;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-layout__hamburger {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: fixed;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
z-index: 198;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
background: #1a1a1a;
|
||||||
|
border: 1px solid #2a2a2a;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #888;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-layout__main {
|
||||||
|
padding-top: 56px;
|
||||||
|
}
|
||||||
|
}
|
||||||
28
client/src/components/AppLayout.jsx
Normal file
28
client/src/components/AppLayout.jsx
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import './AppLayout.css';
|
||||||
|
|
||||||
|
export default function AppLayout({ sidebar, children }) {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="app-layout">
|
||||||
|
<aside className={`app-sidebar${open ? ' is-open' : ''}`}>
|
||||||
|
{sidebar}
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
{open && (
|
||||||
|
<div className="app-layout__overlay" onClick={() => setOpen(false)} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="app-layout__hamburger"
|
||||||
|
onClick={() => setOpen(o => !o)}
|
||||||
|
aria-label="Toggle menu"
|
||||||
|
>
|
||||||
|
☰
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="app-layout__main">{children}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
103
client/src/components/AppModal.jsx
Normal file
103
client/src/components/AppModal.jsx
Normal file
@@ -0,0 +1,103 @@
|
|||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import { lookupApp } from '../api';
|
||||||
|
import '../pages/Apps.css';
|
||||||
|
|
||||||
|
export default function AppModal({ app, onSave, onClose }) {
|
||||||
|
const dialogRef = useRef();
|
||||||
|
const [name, setName] = useState(app?.name || '');
|
||||||
|
const [iosUrl, setIosUrl] = useState(app?.ios_url || '');
|
||||||
|
const [androidUrl, setAndroidUrl] = useState(app?.android_url || '');
|
||||||
|
const [iconUrl, setIconUrl] = useState(app?.icon_url || '');
|
||||||
|
const [fetching, setFetching] = useState(false);
|
||||||
|
const [fetchError, setFetchError] = useState('');
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
dialogRef.current?.showModal();
|
||||||
|
return () => dialogRef.current?.close();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
async function handleUrlBlur(url) {
|
||||||
|
const trimmed = url.trim();
|
||||||
|
if (!trimmed || (!trimmed.includes('apps.apple.com') && !trimmed.includes('play.google.com'))) return;
|
||||||
|
setFetching(true);
|
||||||
|
setFetchError('');
|
||||||
|
try {
|
||||||
|
const data = await lookupApp(trimmed);
|
||||||
|
if (!name) setName(data.name);
|
||||||
|
if (data.icon_url) setIconUrl(data.icon_url);
|
||||||
|
} catch (err) {
|
||||||
|
setFetchError(err.message);
|
||||||
|
} finally {
|
||||||
|
setFetching(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSave() {
|
||||||
|
if (!name.trim()) return;
|
||||||
|
setSaving(true);
|
||||||
|
try {
|
||||||
|
await onSave({ name: name.trim(), ios_url: iosUrl.trim(), android_url: androidUrl.trim(), icon_url: iconUrl });
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<dialog ref={dialogRef} className="app-modal" onClose={onClose}>
|
||||||
|
<h2>{app ? 'Edit Application' : 'New Application'}</h2>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
iOS App Store URL
|
||||||
|
<input
|
||||||
|
value={iosUrl}
|
||||||
|
onChange={e => setIosUrl(e.target.value)}
|
||||||
|
onBlur={e => handleUrlBlur(e.target.value)}
|
||||||
|
placeholder="https://apps.apple.com/app/..."
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Android Play Store URL
|
||||||
|
<input
|
||||||
|
value={androidUrl}
|
||||||
|
onChange={e => setAndroidUrl(e.target.value)}
|
||||||
|
onBlur={e => handleUrlBlur(e.target.value)}
|
||||||
|
placeholder="https://play.google.com/store/apps/..."
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div className="app-modal__name-row">
|
||||||
|
{iconUrl && (
|
||||||
|
<img src={iconUrl} alt="" className="app-modal__icon-preview" onError={() => setIconUrl('')} />
|
||||||
|
)}
|
||||||
|
<label style={{ flex: 1 }}>
|
||||||
|
Name
|
||||||
|
<div className="app-modal__name-input-wrap">
|
||||||
|
<input
|
||||||
|
value={name}
|
||||||
|
onChange={e => setName(e.target.value)}
|
||||||
|
placeholder={fetching ? 'Fetching…' : 'App name'}
|
||||||
|
autoFocus={!iosUrl && !androidUrl}
|
||||||
|
/>
|
||||||
|
{fetching && <span className="app-modal__spinner" />}
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{fetchError && <p className="app-modal__fetch-error">Could not auto-fill: {fetchError}</p>}
|
||||||
|
|
||||||
|
<div className="app-modal__footer">
|
||||||
|
<button type="button" onClick={onClose} className="btn-secondary">Cancel</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleSave}
|
||||||
|
disabled={saving || !name.trim() || fetching}
|
||||||
|
className="btn-primary"
|
||||||
|
>
|
||||||
|
{saving ? 'Saving…' : 'Save'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
46
client/src/components/DeviceFrame.css
Normal file
46
client/src/components/DeviceFrame.css
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
.device-frame {
|
||||||
|
position: relative;
|
||||||
|
background: #1a1a1a;
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 2px #444,
|
||||||
|
0 0 0 6px #222,
|
||||||
|
0 20px 60px rgba(0,0,0,0.6);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-frame--phone {
|
||||||
|
border-radius: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-frame--tablet {
|
||||||
|
border-radius: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-frame__notch {
|
||||||
|
position: absolute;
|
||||||
|
background: #111;
|
||||||
|
border-radius: 12px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-frame--tablet .device-frame__notch {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-frame__screen {
|
||||||
|
position: absolute;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #000;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-frame__screen iframe {
|
||||||
|
border: none;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-frame__home {
|
||||||
|
position: absolute;
|
||||||
|
background: #444;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
83
client/src/components/DeviceFrame.jsx
Normal file
83
client/src/components/DeviceFrame.jsx
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
import './DeviceFrame.css';
|
||||||
|
|
||||||
|
// Screen resolution (inner display area)
|
||||||
|
// Phone: 390×844 → 9:19.5 (iPhone 14)
|
||||||
|
// Tablet: 744×1133 → iPad mini 6th gen (≈ 2:3)
|
||||||
|
const SCREEN = {
|
||||||
|
phone: { portrait: { w: 390, h: 844 }, landscape: { w: 844, h: 390 } },
|
||||||
|
tablet: { portrait: { w: 744, h: 1133 }, landscape: { w: 1133, h: 744 } },
|
||||||
|
};
|
||||||
|
|
||||||
|
// Bezel padding [top, right, bottom, left] sized so outer frame matches target ratio:
|
||||||
|
// Phone outer: 410×888 → 9:19.5 ✓
|
||||||
|
// Tablet outer: 768×1152 → 2:3 ✓
|
||||||
|
const BEZEL = {
|
||||||
|
phone: { portrait: [28, 10, 16, 10], landscape: [10, 28, 10, 16] },
|
||||||
|
tablet: { portrait: [13, 12, 6, 12], landscape: [ 6, 13, 12, 12] },
|
||||||
|
};
|
||||||
|
|
||||||
|
export const FRAMES = {
|
||||||
|
phone: { label: 'Phone' },
|
||||||
|
tablet: { label: 'Tablet' },
|
||||||
|
};
|
||||||
|
|
||||||
|
export function getFrameSize(frame, rotated) {
|
||||||
|
const o = rotated ? 'landscape' : 'portrait';
|
||||||
|
const { w, h } = SCREEN[frame][o];
|
||||||
|
const [pt, pr, pb, pl] = BEZEL[frame][o];
|
||||||
|
return { width: w + pl + pr, height: h + pt + pb };
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DeviceFrame({ frame = 'phone', filename, rotated = false, iframeRef, onIframeLoad }) {
|
||||||
|
const o = rotated ? 'landscape' : 'portrait';
|
||||||
|
const { w: sw, h: sh } = SCREEN[frame][o];
|
||||||
|
const [pt, pr, pb, pl] = BEZEL[frame][o];
|
||||||
|
const outerW = sw + pl + pr;
|
||||||
|
const outerH = sh + pt + pb;
|
||||||
|
const isPhone = frame === 'phone';
|
||||||
|
|
||||||
|
// Notch
|
||||||
|
const notchW = isPhone ? 90 : 14;
|
||||||
|
const notchH = isPhone ? 24 : 14;
|
||||||
|
const notchStyle = rotated
|
||||||
|
? { width: notchH, height: notchW, top: (outerH - notchW) / 2, left: (pl - notchH) / 2 }
|
||||||
|
: { width: notchW, height: notchH, top: (pt - notchH) / 2, left: (outerW - notchW) / 2 };
|
||||||
|
|
||||||
|
// Home bar (phone only)
|
||||||
|
const homeStyle = isPhone
|
||||||
|
? rotated
|
||||||
|
? { width: 6, height: 40, top: (outerH - 40) / 2, right: (pr - 6) / 2 }
|
||||||
|
: { width: 40, height: 6, bottom: (pb - 6) / 2, left: (outerW - 40) / 2 }
|
||||||
|
: null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`device-frame device-frame--${frame}`}
|
||||||
|
style={{ width: outerW, height: outerH }}
|
||||||
|
>
|
||||||
|
{/* Notch / camera dot */}
|
||||||
|
<div className="device-frame__notch" style={notchStyle} />
|
||||||
|
|
||||||
|
{/* Screen — exactly the device resolution.
|
||||||
|
Corner radius = outer bezel radius − side bezel width, so the
|
||||||
|
screen edge follows the body curve instead of looking pasted on. */}
|
||||||
|
<div className="device-frame__screen" style={{
|
||||||
|
top: pt, left: pl, width: sw, height: sh,
|
||||||
|
borderRadius: isPhone ? 30 : 16,
|
||||||
|
}}>
|
||||||
|
<iframe
|
||||||
|
ref={iframeRef}
|
||||||
|
key={`${filename}-${frame}-${o}`}
|
||||||
|
src={`/uploads/${filename}`}
|
||||||
|
title="Playable ad"
|
||||||
|
sandbox="allow-scripts allow-same-origin allow-forms"
|
||||||
|
onLoad={onIframeLoad}
|
||||||
|
style={{ width: sw, height: sh }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Home indicator */}
|
||||||
|
{homeStyle && <div className="device-frame__home" style={homeStyle} />}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
31
client/src/components/DropZone.css
Normal file
31
client/src/components/DropZone.css
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
.dropzone {
|
||||||
|
border: 2px dashed #555;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 40px 24px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #aaa;
|
||||||
|
transition: border-color 0.2s, background 0.2s;
|
||||||
|
background: #1a1a1a;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropzone:hover,
|
||||||
|
.dropzone--active {
|
||||||
|
border-color: #7c6af7;
|
||||||
|
background: #1e1b2e;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropzone__icon {
|
||||||
|
display: block;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #7c6af7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropzone p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
41
client/src/components/DropZone.jsx
Normal file
41
client/src/components/DropZone.jsx
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import { useRef, useState } from 'react';
|
||||||
|
import './DropZone.css';
|
||||||
|
|
||||||
|
export default function DropZone({ onFiles }) {
|
||||||
|
const [dragging, setDragging] = useState(false);
|
||||||
|
const inputRef = useRef();
|
||||||
|
|
||||||
|
function handleDrop(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
setDragging(false);
|
||||||
|
const files = [...e.dataTransfer.files].filter(f => f.name.endsWith('.html'));
|
||||||
|
if (files.length) onFiles(files);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleChange(e) {
|
||||||
|
const files = [...e.target.files];
|
||||||
|
if (files.length) onFiles(files);
|
||||||
|
e.target.value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`dropzone${dragging ? ' dropzone--active' : ''}`}
|
||||||
|
onDragOver={e => { e.preventDefault(); setDragging(true); }}
|
||||||
|
onDragLeave={() => setDragging(false)}
|
||||||
|
onDrop={handleDrop}
|
||||||
|
onClick={() => inputRef.current.click()}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
ref={inputRef}
|
||||||
|
type="file"
|
||||||
|
accept=".html"
|
||||||
|
multiple
|
||||||
|
style={{ display: 'none' }}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
<span className="dropzone__icon">+</span>
|
||||||
|
<p>Drop <strong>.html</strong> files here or click to browse</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
244
client/src/components/MetadataModal.css
Normal file
244
client/src/components/MetadataModal.css
Normal file
@@ -0,0 +1,244 @@
|
|||||||
|
.meta-modal {
|
||||||
|
background: #1e1e1e;
|
||||||
|
color: #e8e8e8;
|
||||||
|
border: 1px solid #333;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 28px 32px;
|
||||||
|
width: 480px;
|
||||||
|
max-width: 94vw;
|
||||||
|
max-height: 90dvh;
|
||||||
|
overflow-y: auto;
|
||||||
|
box-shadow: 0 24px 80px rgba(0,0,0,0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal::backdrop {
|
||||||
|
background: rgba(0,0,0,0.6);
|
||||||
|
backdrop-filter: blur(3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal h2 {
|
||||||
|
margin: 0 0 20px;
|
||||||
|
font-size: 1.15rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal label {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
color: #999;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal__required {
|
||||||
|
color: #f77;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal input,
|
||||||
|
.meta-modal textarea,
|
||||||
|
.meta-modal__select {
|
||||||
|
background: #111;
|
||||||
|
border: 1px solid #333;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #e8e8e8;
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-family: inherit;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal input:focus,
|
||||||
|
.meta-modal textarea:focus,
|
||||||
|
.meta-modal__select:focus {
|
||||||
|
border-color: #7c6af7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal textarea {
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal__select {
|
||||||
|
cursor: pointer;
|
||||||
|
appearance: none;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right 12px center;
|
||||||
|
padding-right: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal__tag-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal__tag-row input {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal__tag-row button {
|
||||||
|
background: #2a2440;
|
||||||
|
color: #9d8ef7;
|
||||||
|
border: 1px solid #3d3060;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 6px 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal__tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 6px;
|
||||||
|
min-height: 24px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal__tags .tag {
|
||||||
|
background: #2a2440;
|
||||||
|
color: #9d8ef7;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
padding: 3px 8px;
|
||||||
|
border-radius: 999px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal__tags .tag button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #9d8ef7;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
padding: 0;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal__row2 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.meta-modal {
|
||||||
|
padding: 20px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal__row2 {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal__replace {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal__replace-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
color: #999;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal__replace-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal__file-input {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal__file-btn {
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal__file-name {
|
||||||
|
font-size: 0.88rem;
|
||||||
|
color: #9d8ef7;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal__file-clear {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #9d8ef7;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
padding: 0;
|
||||||
|
line-height: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal__file-hint {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal__error {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: #f77;
|
||||||
|
margin: -8px 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-modal__footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: #7c6af7;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 9px 22px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background: #6a58e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: #2a2a2a;
|
||||||
|
color: #ccc;
|
||||||
|
border: 1px solid #3a3a3a;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 9px 22px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
149
client/src/components/MetadataModal.jsx
Normal file
149
client/src/components/MetadataModal.jsx
Normal file
@@ -0,0 +1,149 @@
|
|||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import './MetadataModal.css';
|
||||||
|
|
||||||
|
export default function MetadataModal({ ad, apps = [], onSave, onClose }) {
|
||||||
|
const dialogRef = useRef();
|
||||||
|
const fileInputRef = useRef();
|
||||||
|
const [title, setTitle] = useState(ad.title);
|
||||||
|
const [appId, setAppId] = useState(ad.appId || '');
|
||||||
|
const [tagInput, setTagInput] = useState('');
|
||||||
|
const [tags, setTags] = useState(ad.tags || []);
|
||||||
|
const [repo, setRepo] = useState(ad.repo || '');
|
||||||
|
const [branch, setBranch] = useState(ad.branch || 'main');
|
||||||
|
const [developer, setDeveloper] = useState(ad.developer || '');
|
||||||
|
const [notes, setNotes] = useState(ad.notes || '');
|
||||||
|
const [newFile, setNewFile] = useState(null);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
dialogRef.current?.showModal();
|
||||||
|
return () => dialogRef.current?.close();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
function addTag() {
|
||||||
|
const t = tagInput.trim().toLowerCase();
|
||||||
|
if (t && !tags.includes(t)) setTags([...tags, t]);
|
||||||
|
setTagInput('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeTag(t) {
|
||||||
|
setTags(tags.filter(x => x !== t));
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleFileChange(e) {
|
||||||
|
setNewFile(e.target.files[0] || null);
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearFile() {
|
||||||
|
setNewFile(null);
|
||||||
|
if (fileInputRef.current) fileInputRef.current.value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSave() {
|
||||||
|
if (!appId) { setError('Application is required.'); return; }
|
||||||
|
setError('');
|
||||||
|
setSaving(true);
|
||||||
|
try {
|
||||||
|
await onSave({ title, appId, tags, developer: developer.trim(), repo: repo.trim(), branch: branch.trim(), notes, newFile });
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<dialog ref={dialogRef} className="meta-modal" onClose={onClose}>
|
||||||
|
<h2>Edit Metadata</h2>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Title
|
||||||
|
<input value={title} onChange={e => setTitle(e.target.value)} />
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Application <span className="meta-modal__required">*</span>
|
||||||
|
<select value={appId} onChange={e => setAppId(e.target.value)} className="meta-modal__select">
|
||||||
|
<option value="">— select application —</option>
|
||||||
|
{apps.map(a => (
|
||||||
|
<option key={a.id} value={a.id}>{a.name}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Tags
|
||||||
|
<div className="meta-modal__tag-row">
|
||||||
|
<input
|
||||||
|
value={tagInput}
|
||||||
|
onChange={e => setTagInput(e.target.value)}
|
||||||
|
onKeyDown={e => (e.key === 'Enter' || e.key === ',') && (e.preventDefault(), addTag())}
|
||||||
|
placeholder="Add tag, press Enter"
|
||||||
|
/>
|
||||||
|
<button type="button" onClick={addTag}>Add</button>
|
||||||
|
</div>
|
||||||
|
<div className="meta-modal__tags">
|
||||||
|
{tags.map(t => (
|
||||||
|
<span key={t} className="tag">
|
||||||
|
{t} <button type="button" onClick={() => removeTag(t)}>×</button>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Developer
|
||||||
|
<input value={developer} onChange={e => setDeveloper(e.target.value)} placeholder="Developer or team name" />
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div className="meta-modal__row2">
|
||||||
|
<label>
|
||||||
|
Repo
|
||||||
|
<input value={repo} onChange={e => setRepo(e.target.value)} placeholder="owner/repo" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Branch
|
||||||
|
<input value={branch} onChange={e => setBranch(e.target.value)} placeholder="main" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Notes
|
||||||
|
<textarea value={notes} onChange={e => setNotes(e.target.value)} rows={3} />
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div className="meta-modal__replace">
|
||||||
|
<span className="meta-modal__replace-label">Replace HTML</span>
|
||||||
|
<div className="meta-modal__replace-row">
|
||||||
|
<input
|
||||||
|
ref={fileInputRef}
|
||||||
|
type="file"
|
||||||
|
accept=".html,text/html"
|
||||||
|
id="replace-file"
|
||||||
|
className="meta-modal__file-input"
|
||||||
|
onChange={handleFileChange}
|
||||||
|
/>
|
||||||
|
<label htmlFor="replace-file" className="btn-secondary meta-modal__file-btn">
|
||||||
|
Choose file
|
||||||
|
</label>
|
||||||
|
{newFile ? (
|
||||||
|
<span className="meta-modal__file-name">
|
||||||
|
{newFile.name}
|
||||||
|
<button type="button" onClick={clearFile} className="meta-modal__file-clear">×</button>
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className="meta-modal__file-hint">No file selected</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && <p className="meta-modal__error">{error}</p>}
|
||||||
|
|
||||||
|
<div className="meta-modal__footer">
|
||||||
|
<button type="button" onClick={onClose} className="btn-secondary">Cancel</button>
|
||||||
|
<button type="button" onClick={handleSave} disabled={saving} className="btn-primary">
|
||||||
|
{saving ? 'Saving…' : 'Save'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
236
client/src/components/UploadPreviewModal.css
Normal file
236
client/src/components/UploadPreviewModal.css
Normal file
@@ -0,0 +1,236 @@
|
|||||||
|
.upm {
|
||||||
|
background: #1a1a1a;
|
||||||
|
border: 1px solid #2a2a2a;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 0;
|
||||||
|
width: min(920px, 96vw);
|
||||||
|
max-height: 92vh;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 32px 100px rgba(0,0,0,0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm::backdrop {
|
||||||
|
background: rgba(0,0,0,0.75);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 320px 1fr;
|
||||||
|
height: 92vh;
|
||||||
|
max-height: 92vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Left: preview ─────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
.upm__preview {
|
||||||
|
background: #111;
|
||||||
|
border-right: 1px solid #222;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 14px;
|
||||||
|
padding: 24px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__frame {
|
||||||
|
width: 220px;
|
||||||
|
aspect-ratio: 9 / 19.5;
|
||||||
|
border-radius: 22px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 2px solid #2e2e2e;
|
||||||
|
background: #000;
|
||||||
|
flex-shrink: 0;
|
||||||
|
box-shadow: 0 8px 32px rgba(0,0,0,0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: none;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__shot-hint {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #555;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Right: form ───────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
.upm__form {
|
||||||
|
padding: 28px 28px 20px;
|
||||||
|
overflow-y: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
color: #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__form h2 {
|
||||||
|
margin: 0 0 20px;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__form label {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #888;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__form input,
|
||||||
|
.upm__form textarea,
|
||||||
|
.upm__select {
|
||||||
|
background: #111;
|
||||||
|
border: 1px solid #2e2e2e;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #e8e8e8;
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 0.92rem;
|
||||||
|
font-family: inherit;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__form input:focus,
|
||||||
|
.upm__form textarea:focus,
|
||||||
|
.upm__select:focus {
|
||||||
|
border-color: #7c6af7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__form textarea { resize: vertical; }
|
||||||
|
|
||||||
|
.upm__select {
|
||||||
|
cursor: pointer;
|
||||||
|
appearance: none;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right 12px center;
|
||||||
|
padding-right: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__app-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__app-row .upm__select {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__new-app-btn {
|
||||||
|
background: #2a2440;
|
||||||
|
color: #9d8ef7;
|
||||||
|
border: 1px solid #3d3060;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0 12px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: background 0.15s;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__new-app-btn:hover {
|
||||||
|
background: #352d55;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__req {
|
||||||
|
color: #f77;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__row2 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__tag-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__tag-row input { flex: 1; }
|
||||||
|
|
||||||
|
.upm__tag-add {
|
||||||
|
background: #2a2440;
|
||||||
|
color: #9d8ef7;
|
||||||
|
border: 1px solid #3d3060;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 6px;
|
||||||
|
min-height: 20px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__tags .tag button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #9d8ef7;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
padding: 0 0 0 4px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__error {
|
||||||
|
font-size: 0.83rem;
|
||||||
|
color: #f77;
|
||||||
|
margin: -6px 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: auto;
|
||||||
|
padding-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 680px) {
|
||||||
|
.upm {
|
||||||
|
width: 100vw;
|
||||||
|
max-height: 100dvh;
|
||||||
|
border-radius: 0;
|
||||||
|
border: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__layout {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
height: 100dvh;
|
||||||
|
max-height: 100dvh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__preview {
|
||||||
|
padding: 16px;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__frame {
|
||||||
|
width: 140px;
|
||||||
|
aspect-ratio: 9 / 19.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upm__shot-hint {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
184
client/src/components/UploadPreviewModal.jsx
Normal file
184
client/src/components/UploadPreviewModal.jsx
Normal file
@@ -0,0 +1,184 @@
|
|||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import { createApp, requestScreenshot } from '../api';
|
||||||
|
import AppModal from './AppModal';
|
||||||
|
import './UploadPreviewModal.css';
|
||||||
|
|
||||||
|
export default function UploadPreviewModal({ ad, apps: appsProp = [], onSave, onClose }) {
|
||||||
|
const dialogRef = useRef();
|
||||||
|
const initialScreenshotStarted = useRef(false);
|
||||||
|
|
||||||
|
const [title, setTitle] = useState(ad.title);
|
||||||
|
const [appId, setAppId] = useState(ad.appId || '');
|
||||||
|
const [tagInput, setTagInput] = useState('');
|
||||||
|
const [tags, setTags] = useState(ad.tags || []);
|
||||||
|
const [developer, setDeveloper] = useState(ad.developer || '');
|
||||||
|
const [repo, setRepo] = useState(ad.repo || '');
|
||||||
|
const [branch, setBranch] = useState(ad.branch || 'main');
|
||||||
|
const [notes, setNotes] = useState(ad.notes || '');
|
||||||
|
|
||||||
|
const [localApps, setLocalApps] = useState(appsProp);
|
||||||
|
const [creatingApp, setCreatingApp] = useState(false);
|
||||||
|
const [screenshotTaken, setScreenshotTaken] = useState(false);
|
||||||
|
const [screenshotStatus, setScreenshotStatus] = useState(null);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
dialogRef.current?.showModal();
|
||||||
|
return () => dialogRef.current?.close();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (initialScreenshotStarted.current) return;
|
||||||
|
initialScreenshotStarted.current = true;
|
||||||
|
handleScreenshot();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
function addTag() {
|
||||||
|
const t = tagInput.trim().toLowerCase();
|
||||||
|
if (t && !tags.includes(t)) setTags([...tags, t]);
|
||||||
|
setTagInput('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeTag(t) { setTags(tags.filter(x => x !== t)); }
|
||||||
|
|
||||||
|
async function handleScreenshot() {
|
||||||
|
setScreenshotStatus('saving');
|
||||||
|
try {
|
||||||
|
await requestScreenshot(ad.id);
|
||||||
|
setScreenshotTaken(true);
|
||||||
|
setScreenshotStatus('done');
|
||||||
|
} catch {
|
||||||
|
setScreenshotStatus('error');
|
||||||
|
setTimeout(() => setScreenshotStatus(null), 2500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleCreateApp(data) {
|
||||||
|
const created = await createApp(data);
|
||||||
|
setLocalApps(prev => [...prev, created].sort((a, b) => a.name.localeCompare(b.name)));
|
||||||
|
setAppId(created.id);
|
||||||
|
setCreatingApp(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSave() {
|
||||||
|
if (!appId) { setError('Application is required.'); return; }
|
||||||
|
setError('');
|
||||||
|
setSaving(true);
|
||||||
|
try {
|
||||||
|
await onSave({ title, appId, tags, developer: developer.trim(), repo: repo.trim(), branch: branch.trim(), notes });
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<dialog ref={dialogRef} className="upm" onClose={onClose}>
|
||||||
|
<div className="upm__layout">
|
||||||
|
|
||||||
|
{/* ── Left: live preview ── */}
|
||||||
|
<div className="upm__preview">
|
||||||
|
<div className="upm__frame">
|
||||||
|
<iframe
|
||||||
|
|
||||||
|
src={`/uploads/${ad.filename}`}
|
||||||
|
title="Playable preview"
|
||||||
|
sandbox="allow-scripts allow-same-origin allow-forms"
|
||||||
|
className="upm__iframe"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{!screenshotTaken && (
|
||||||
|
<p className="upm__shot-hint">
|
||||||
|
{screenshotStatus === 'saving' ? 'Capturing initial thumbnail…' : 'Required before saving'}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Right: metadata form ── */}
|
||||||
|
<div className="upm__form">
|
||||||
|
<h2>New Playable</h2>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Title
|
||||||
|
<input value={title} onChange={e => setTitle(e.target.value)} />
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Application <span className="upm__req">*</span>
|
||||||
|
<div className="upm__app-row">
|
||||||
|
<select value={appId} onChange={e => setAppId(e.target.value)} className="upm__select">
|
||||||
|
<option value="">— select application —</option>
|
||||||
|
{localApps.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
|
||||||
|
</select>
|
||||||
|
<button type="button" className="upm__new-app-btn" onClick={() => setCreatingApp(true)}>+ New</button>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Tags
|
||||||
|
<div className="upm__tag-row">
|
||||||
|
<input
|
||||||
|
value={tagInput}
|
||||||
|
onChange={e => setTagInput(e.target.value)}
|
||||||
|
onKeyDown={e => (e.key === 'Enter' || e.key === ',') && (e.preventDefault(), addTag())}
|
||||||
|
placeholder="Add tag, press Enter"
|
||||||
|
/>
|
||||||
|
<button type="button" onClick={addTag} className="upm__tag-add">Add</button>
|
||||||
|
</div>
|
||||||
|
<div className="upm__tags">
|
||||||
|
{tags.map(t => (
|
||||||
|
<span key={t} className="tag">
|
||||||
|
{t} <button type="button" onClick={() => removeTag(t)}>×</button>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Developer
|
||||||
|
<input value={developer} onChange={e => setDeveloper(e.target.value)} placeholder="Developer or team name" />
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div className="upm__row2">
|
||||||
|
<label>
|
||||||
|
Repo
|
||||||
|
<input value={repo} onChange={e => setRepo(e.target.value)} placeholder="owner/repo" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Branch
|
||||||
|
<input value={branch} onChange={e => setBranch(e.target.value)} placeholder="main" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Notes
|
||||||
|
<textarea value={notes} onChange={e => setNotes(e.target.value)} rows={3} />
|
||||||
|
</label>
|
||||||
|
|
||||||
|
{error && <p className="upm__error">{error}</p>}
|
||||||
|
|
||||||
|
<div className="upm__footer">
|
||||||
|
<button type="button" onClick={onClose} className="btn-secondary">Cancel</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleSave}
|
||||||
|
disabled={saving || !screenshotTaken}
|
||||||
|
className="btn-primary"
|
||||||
|
title={!screenshotTaken ? 'Take a screenshot first' : ''}
|
||||||
|
>
|
||||||
|
{saving ? 'Saving…' : 'Save'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{creatingApp && (
|
||||||
|
<AppModal
|
||||||
|
app={null}
|
||||||
|
onSave={handleCreateApp}
|
||||||
|
onClose={() => setCreatingApp(false)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
65
client/src/index.css
Normal file
65
client/src/index.css
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
*, *::before, *::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background: #0e0e0e;
|
||||||
|
color: #e8e8e8;
|
||||||
|
font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
#root {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #9d8ef7;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
background: #2a2440;
|
||||||
|
color: #9d8ef7;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 999px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: #7c6af7;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 9px 22px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) { background: #6a58e0; }
|
||||||
|
.btn-primary:disabled { opacity: 0.6; cursor: default; }
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: #2a2a2a;
|
||||||
|
color: #ccc;
|
||||||
|
border: 1px solid #3a3a3a;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 9px 22px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover { background: #333; }
|
||||||
10
client/src/main.jsx
Normal file
10
client/src/main.jsx
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import './index.css'
|
||||||
|
import App from './App.jsx'
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
251
client/src/pages/Apps.css
Normal file
251
client/src/pages/Apps.css
Normal file
@@ -0,0 +1,251 @@
|
|||||||
|
.apps-page {
|
||||||
|
max-width: 800px;
|
||||||
|
padding: 28px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apps-page__title {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: 800;
|
||||||
|
margin: 0 0 24px;
|
||||||
|
background: linear-gradient(135deg, #7c6af7 0%, #b89bf7 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.apps-page {
|
||||||
|
padding: 16px 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.apps-page__empty {
|
||||||
|
text-align: center;
|
||||||
|
color: #555;
|
||||||
|
margin-top: 48px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apps-page__list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 14px;
|
||||||
|
background: #1e1e1e;
|
||||||
|
border: 1px solid #2e2e2e;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 14px 20px;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-row__icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 12px;
|
||||||
|
object-fit: cover;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-row__icon-placeholder {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #2a2a2a;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-row:hover {
|
||||||
|
border-color: #3e3e3e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-row__info {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-row__name {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-row__links {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-row__store {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 3px 10px;
|
||||||
|
border-radius: 999px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-row__store--ios {
|
||||||
|
background: #1a2535;
|
||||||
|
color: #60a5fa;
|
||||||
|
border: 1px solid #2a4060;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-row__store--ios:hover {
|
||||||
|
background: #1e2e45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-row__store--android {
|
||||||
|
background: #1a2a1a;
|
||||||
|
color: #6fcf6f;
|
||||||
|
border: 1px solid #2a4a2a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-row__store--android:hover {
|
||||||
|
background: #1e341e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-row__store--missing {
|
||||||
|
color: #444;
|
||||||
|
border: 1px solid #2e2e2e;
|
||||||
|
background: #161616;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-row__actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-row__actions button {
|
||||||
|
background: #2a2a2a;
|
||||||
|
border: 1px solid #3a3a3a;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #aaa;
|
||||||
|
padding: 6px 12px;
|
||||||
|
font-size: 0.83rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-row__actions button:hover {
|
||||||
|
background: #333;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-row__delete:hover {
|
||||||
|
background: #3a1a1a !important;
|
||||||
|
color: #f77 !important;
|
||||||
|
border-color: #5e2e2e !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* App Modal ─────────────────────────────────────────────────────────────── */
|
||||||
|
.app-modal {
|
||||||
|
background: #1e1e1e;
|
||||||
|
color: #e8e8e8;
|
||||||
|
border: 1px solid #333;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 28px 32px;
|
||||||
|
width: 460px;
|
||||||
|
max-width: 90vw;
|
||||||
|
box-shadow: 0 24px 80px rgba(0,0,0,0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-modal::backdrop {
|
||||||
|
background: rgba(0,0,0,0.6);
|
||||||
|
backdrop-filter: blur(3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-modal h2 {
|
||||||
|
margin: 0 0 20px;
|
||||||
|
font-size: 1.15rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-modal label {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
color: #999;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-modal input {
|
||||||
|
background: #111;
|
||||||
|
border: 1px solid #333;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #e8e8e8;
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-family: inherit;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-modal input:focus {
|
||||||
|
border-color: #7c6af7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-modal__name-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-modal__icon-preview {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 14px;
|
||||||
|
object-fit: cover;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border: 1px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-modal__name-input-wrap {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-modal__name-input-wrap input {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-modal__spinner {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
border: 2px solid #333;
|
||||||
|
border-top-color: #7c6af7;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 0.7s linear infinite;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-modal__fetch-error {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #f97;
|
||||||
|
margin: -8px 0 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-modal__footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
97
client/src/pages/Apps.jsx
Normal file
97
client/src/pages/Apps.jsx
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import AppLayout from '../components/AppLayout';
|
||||||
|
import AppModal from '../components/AppModal';
|
||||||
|
import { createApp, deleteApp, listApps, updateApp } from '../api';
|
||||||
|
import './Apps.css';
|
||||||
|
|
||||||
|
export default function Apps() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [apps, setApps] = useState([]);
|
||||||
|
const [editingApp, setEditingApp] = useState(null);
|
||||||
|
|
||||||
|
useEffect(() => { load(); }, []);
|
||||||
|
|
||||||
|
function sortByName(list) {
|
||||||
|
return [...list].sort((a, b) => a.name.localeCompare(b.name));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
setApps(sortByName(await listApps()));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSave(data) {
|
||||||
|
if (editingApp === 'new') {
|
||||||
|
const created = await createApp(data);
|
||||||
|
setApps(prev => sortByName([created, ...prev]));
|
||||||
|
} else {
|
||||||
|
const updated = await updateApp(editingApp.id, data);
|
||||||
|
setApps(prev => sortByName(prev.map(a => a.id === updated.id ? updated : a)));
|
||||||
|
}
|
||||||
|
setEditingApp(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleDelete(app) {
|
||||||
|
if (!confirm(`Delete "${app.name}"? Playables linked to it will become unlinked.`)) return;
|
||||||
|
await deleteApp(app.id);
|
||||||
|
setApps(prev => prev.filter(a => a.id !== app.id));
|
||||||
|
}
|
||||||
|
|
||||||
|
const sidebar = (
|
||||||
|
<>
|
||||||
|
<div className="sb-brand">Playable Showcase</div>
|
||||||
|
<div className="sb-nav">
|
||||||
|
<button className="sb-btn sb-btn--primary" onClick={() => setEditingApp('new')}>+ New Application</button>
|
||||||
|
<button className="sb-btn" onClick={() => navigate('/')}>← Catalog</button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AppLayout sidebar={sidebar}>
|
||||||
|
<div className="apps-page">
|
||||||
|
<h1 className="apps-page__title">Applications</h1>
|
||||||
|
|
||||||
|
{apps.length === 0 && (
|
||||||
|
<p className="apps-page__empty">No applications yet. Create one to start organizing playables.</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="apps-page__list">
|
||||||
|
{apps.map(app => (
|
||||||
|
<div key={app.id} className="app-row">
|
||||||
|
{app.icon_url
|
||||||
|
? <img src={app.icon_url} alt={app.name} className="app-row__icon" onError={e => { e.target.style.display = 'none'; }} />
|
||||||
|
: <div className="app-row__icon-placeholder" />
|
||||||
|
}
|
||||||
|
<div className="app-row__info">
|
||||||
|
<span className="app-row__name">{app.name}</span>
|
||||||
|
<div className="app-row__links">
|
||||||
|
{app.ios_url
|
||||||
|
? <a href={app.ios_url} target="_blank" rel="noopener noreferrer" className="app-row__store app-row__store--ios">iOS</a>
|
||||||
|
: <span className="app-row__store app-row__store--missing">No iOS link</span>
|
||||||
|
}
|
||||||
|
{app.android_url
|
||||||
|
? <a href={app.android_url} target="_blank" rel="noopener noreferrer" className="app-row__store app-row__store--android">Android</a>
|
||||||
|
: <span className="app-row__store app-row__store--missing">No Android link</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="app-row__actions">
|
||||||
|
<button onClick={() => setEditingApp(app)}>✎ Edit</button>
|
||||||
|
<button onClick={() => handleDelete(app)} className="app-row__delete">✕</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{editingApp && (
|
||||||
|
<AppModal
|
||||||
|
app={editingApp === 'new' ? null : editingApp}
|
||||||
|
onSave={handleSave}
|
||||||
|
onClose={() => setEditingApp(null)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</AppLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
49
client/src/pages/Catalog.css
Normal file
49
client/src/pages/Catalog.css
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
.catalog {
|
||||||
|
padding: 24px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.catalog__search-wrap {
|
||||||
|
padding: 4px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.catalog__search {
|
||||||
|
width: 100%;
|
||||||
|
background: #111;
|
||||||
|
border: 1px solid #2e2e2e;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #e8e8e8;
|
||||||
|
padding: 7px 10px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-family: inherit;
|
||||||
|
outline: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transition: border-color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.catalog__search:focus {
|
||||||
|
border-color: #7c6af7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.catalog__search::placeholder {
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.catalog__empty {
|
||||||
|
text-align: center;
|
||||||
|
color: #555;
|
||||||
|
margin-top: 48px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.catalog__grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.catalog__grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
190
client/src/pages/Catalog.jsx
Normal file
190
client/src/pages/Catalog.jsx
Normal file
@@ -0,0 +1,190 @@
|
|||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import AdCard from '../components/AdCard';
|
||||||
|
import AppLayout from '../components/AppLayout';
|
||||||
|
import MetadataModal from '../components/MetadataModal';
|
||||||
|
import UploadPreviewModal from '../components/UploadPreviewModal';
|
||||||
|
import { deleteAd, listAds, listApps, updateAd, updateAdFile, uploadAd } from '../api';
|
||||||
|
import './Catalog.css';
|
||||||
|
|
||||||
|
export default function Catalog() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const fileInputRef = useRef();
|
||||||
|
const uploadQueueRef = useRef([]);
|
||||||
|
|
||||||
|
const [ads, setAds] = useState([]);
|
||||||
|
const [apps, setApps] = useState([]);
|
||||||
|
const [activeAppId, setActiveAppId] = useState(null);
|
||||||
|
const [search, setSearch] = useState('');
|
||||||
|
const [editingAd, setEditingAd] = useState(null);
|
||||||
|
const [pendingAd, setPendingAd] = useState(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
listApps()
|
||||||
|
.then(list => setApps([...list].sort((a, b) => a.name.localeCompare(b.name))))
|
||||||
|
.catch(() => {});
|
||||||
|
}, []);
|
||||||
|
useEffect(() => { listAds(activeAppId).then(setAds).catch(() => {}); }, [activeAppId]);
|
||||||
|
|
||||||
|
// ── upload flow ──────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function openFilePicker() { fileInputRef.current.click(); }
|
||||||
|
|
||||||
|
async function handleFileSelect(e) {
|
||||||
|
const files = [...e.target.files];
|
||||||
|
e.target.value = '';
|
||||||
|
if (!files.length) return;
|
||||||
|
uploadQueueRef.current = files;
|
||||||
|
processNext();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function processNext() {
|
||||||
|
const file = uploadQueueRef.current.shift();
|
||||||
|
if (!file) return;
|
||||||
|
try {
|
||||||
|
const ad = await uploadAd(file);
|
||||||
|
setPendingAd({ ...ad, _next: processNext });
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Upload failed', err);
|
||||||
|
processNext();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleUploadSave(data) {
|
||||||
|
const updated = await updateAd(pendingAd.id, data);
|
||||||
|
setAds(prev => [updated, ...prev.filter(a => a.id !== updated.id)]);
|
||||||
|
const next = pendingAd._next;
|
||||||
|
setPendingAd(null);
|
||||||
|
if (next) next();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleUploadCancel() {
|
||||||
|
deleteAd(pendingAd.id).catch(() => {});
|
||||||
|
uploadQueueRef.current = [];
|
||||||
|
setPendingAd(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── edit existing ────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
async function handleSave({ newFile, ...data }) {
|
||||||
|
if (newFile) await updateAdFile(editingAd.id, newFile);
|
||||||
|
const updated = await updateAd(editingAd.id, data);
|
||||||
|
setAds(prev => prev.map(a => a.id === updated.id ? updated : a));
|
||||||
|
setEditingAd(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleDelete(ad) {
|
||||||
|
if (!confirm(`Delete "${ad.title}"?`)) return;
|
||||||
|
await deleteAd(ad.id);
|
||||||
|
setAds(prev => prev.filter(a => a.id !== ad.id));
|
||||||
|
}
|
||||||
|
|
||||||
|
const appsById = Object.fromEntries(apps.map(a => [a.id, a]));
|
||||||
|
|
||||||
|
// ── search filter ────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const query = search.trim().toLowerCase();
|
||||||
|
const visibleAds = query
|
||||||
|
? ads.filter(ad => {
|
||||||
|
const appName = appsById[ad.appId]?.name?.toLowerCase() || '';
|
||||||
|
return (
|
||||||
|
ad.title.toLowerCase().includes(query) ||
|
||||||
|
(ad.developer || '').toLowerCase().includes(query) ||
|
||||||
|
appName.includes(query) ||
|
||||||
|
(ad.tags || []).some(t => t.includes(query))
|
||||||
|
);
|
||||||
|
})
|
||||||
|
: ads;
|
||||||
|
|
||||||
|
const sidebar = (
|
||||||
|
<>
|
||||||
|
<div className="sb-brand">Playable Showcase</div>
|
||||||
|
|
||||||
|
<div className="sb-nav">
|
||||||
|
<input ref={fileInputRef} type="file" accept=".html" multiple style={{ display: 'none' }} onChange={handleFileSelect} />
|
||||||
|
<button className="sb-btn sb-btn--primary" onClick={openFilePicker}>+ Upload</button>
|
||||||
|
<button className="sb-btn" onClick={() => navigate('/apps')}>Applications</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="sb-divider" />
|
||||||
|
<div className="catalog__search-wrap">
|
||||||
|
<input
|
||||||
|
className="catalog__search"
|
||||||
|
type="search"
|
||||||
|
placeholder="Search…"
|
||||||
|
value={search}
|
||||||
|
onChange={e => setSearch(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{apps.length > 0 && (
|
||||||
|
<>
|
||||||
|
<div className="sb-divider" />
|
||||||
|
<span className="sb-section-label">Filter by App</span>
|
||||||
|
<div className="sb-nav" style={{ paddingTop: 0 }}>
|
||||||
|
<button
|
||||||
|
className={`sb-btn${activeAppId === null ? ' sb-btn--active' : ''}`}
|
||||||
|
onClick={() => setActiveAppId(null)}
|
||||||
|
>
|
||||||
|
All
|
||||||
|
</button>
|
||||||
|
{apps.map(a => (
|
||||||
|
<button
|
||||||
|
key={a.id}
|
||||||
|
className={`sb-btn${activeAppId === a.id ? ' sb-btn--active' : ''}`}
|
||||||
|
onClick={() => setActiveAppId(a.id)}
|
||||||
|
>
|
||||||
|
{a.icon_url
|
||||||
|
? <img src={a.icon_url} className="sb-app-icon" alt="" onError={e => { e.target.style.display = 'none'; }} />
|
||||||
|
: <div className="sb-app-icon-placeholder" />
|
||||||
|
}
|
||||||
|
{a.name}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AppLayout sidebar={sidebar}>
|
||||||
|
<div className="catalog">
|
||||||
|
{visibleAds.length === 0 && (
|
||||||
|
<p className="catalog__empty">
|
||||||
|
{query ? 'No results.' : 'No playables yet. Click + Upload to add one.'}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<div className="catalog__grid">
|
||||||
|
{visibleAds.map(ad => (
|
||||||
|
<AdCard
|
||||||
|
key={ad.id}
|
||||||
|
ad={ad}
|
||||||
|
app={appsById[ad.appId]}
|
||||||
|
onEdit={setEditingAd}
|
||||||
|
onDelete={handleDelete}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{pendingAd && (
|
||||||
|
<UploadPreviewModal
|
||||||
|
ad={pendingAd}
|
||||||
|
apps={apps}
|
||||||
|
onSave={handleUploadSave}
|
||||||
|
onClose={handleUploadCancel}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{editingAd && (
|
||||||
|
<MetadataModal
|
||||||
|
ad={editingAd}
|
||||||
|
apps={apps}
|
||||||
|
onSave={handleSave}
|
||||||
|
onClose={() => setEditingAd(null)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</AppLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
68
client/src/pages/Login.css
Normal file
68
client/src/pages/Login.css
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
.login-wrapper {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #0e0e0e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card {
|
||||||
|
background: #181818;
|
||||||
|
border: 1px solid #2a2a2a;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 48px 40px 40px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 360px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-logo img {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card h1 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #e8e8e8;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form input[type='password'] {
|
||||||
|
width: 100%;
|
||||||
|
background: #111;
|
||||||
|
border: 1px solid #333;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
color: #e8e8e8;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-family: inherit;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.15s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form input[type='password']:focus {
|
||||||
|
border-color: #7c6af7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form .btn-primary {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-error {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: #f87171;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
50
client/src/pages/Login.jsx
Normal file
50
client/src/pages/Login.jsx
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { login } from '../api';
|
||||||
|
import './Login.css';
|
||||||
|
|
||||||
|
export default function Login() {
|
||||||
|
const [password, setPassword] = useState('');
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
async function handleSubmit(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
setError('');
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
await login(password);
|
||||||
|
navigate('/', { replace: true });
|
||||||
|
} catch {
|
||||||
|
setError('Incorrect password');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="login-wrapper">
|
||||||
|
<div className="login-card">
|
||||||
|
<div className="login-logo">
|
||||||
|
<img src="/favicon.svg" alt="Logo" />
|
||||||
|
</div>
|
||||||
|
<h1>Playable Showcase</h1>
|
||||||
|
<form onSubmit={handleSubmit} className="login-form">
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
placeholder="Password"
|
||||||
|
value={password}
|
||||||
|
onChange={e => setPassword(e.target.value)}
|
||||||
|
autoFocus
|
||||||
|
autoComplete="current-password"
|
||||||
|
/>
|
||||||
|
{error && <p className="login-error">{error}</p>}
|
||||||
|
<button type="submit" className="btn-primary" disabled={loading || !password}>
|
||||||
|
{loading ? 'Signing in…' : 'Sign in'}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
92
client/src/pages/Upload.css
Normal file
92
client/src/pages/Upload.css
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
.upload-page {
|
||||||
|
max-width: 640px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 32px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-page__header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-page__header h1 {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: 800;
|
||||||
|
margin: 0;
|
||||||
|
background: linear-gradient(135deg, #7c6af7 0%, #b89bf7 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-page__back {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #9d8ef7;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
padding: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-page__back:hover {
|
||||||
|
color: #b8aaf9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-page__zone {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-page__warning {
|
||||||
|
text-align: center;
|
||||||
|
color: #888;
|
||||||
|
font-size: 0.88rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-page__link {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #9d8ef7;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: inherit;
|
||||||
|
padding: 0;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-page__status {
|
||||||
|
text-align: center;
|
||||||
|
color: #9d8ef7;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin-top: 48px;
|
||||||
|
animation: pulse 1.2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.4; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-page__done {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 64px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-page__done-msg {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #6fcf6f;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-page__done-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
105
client/src/pages/Upload.jsx
Normal file
105
client/src/pages/Upload.jsx
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import DropZone from '../components/DropZone';
|
||||||
|
import MetadataModal from '../components/MetadataModal';
|
||||||
|
import { deleteAd, listApps, updateAd, updateAdFile, uploadAd } from '../api';
|
||||||
|
import './Upload.css';
|
||||||
|
|
||||||
|
export default function Upload() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [apps, setApps] = useState([]);
|
||||||
|
const [uploading, setUploading] = useState(false);
|
||||||
|
const [editingAd, setEditingAd] = useState(null);
|
||||||
|
const [doneCount, setDoneCount] = useState(0);
|
||||||
|
const uploadQueueRef = useRef([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
listApps().then(setApps).catch(() => {});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
async function handleFiles(files) {
|
||||||
|
setUploading(true);
|
||||||
|
setDoneCount(0);
|
||||||
|
uploadQueueRef.current = [...files];
|
||||||
|
processNext();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function processNext() {
|
||||||
|
const file = uploadQueueRef.current.shift();
|
||||||
|
if (!file) { setUploading(false); return; }
|
||||||
|
try {
|
||||||
|
const ad = await uploadAd(file);
|
||||||
|
setEditingAd({ ...ad, _afterSave: processNext });
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Upload failed', err);
|
||||||
|
processNext();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSave({ newFile, ...data }) {
|
||||||
|
if (newFile) await updateAdFile(editingAd.id, newFile);
|
||||||
|
await updateAd(editingAd.id, data);
|
||||||
|
setDoneCount(c => c + 1);
|
||||||
|
const after = editingAd._afterSave;
|
||||||
|
setEditingAd(null);
|
||||||
|
if (after) after();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleClose() {
|
||||||
|
// The file was already uploaded — delete it since the user cancelled
|
||||||
|
if (editingAd) deleteAd(editingAd.id).catch(() => {});
|
||||||
|
// Discard any remaining queued files
|
||||||
|
uploadQueueRef.current = [];
|
||||||
|
setEditingAd(null);
|
||||||
|
setUploading(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="upload-page">
|
||||||
|
<header className="upload-page__header">
|
||||||
|
<button className="upload-page__back" onClick={() => navigate('/')}>← Catalog</button>
|
||||||
|
<h1>Upload Playables</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{!uploading && doneCount === 0 && (
|
||||||
|
<div className="upload-page__zone">
|
||||||
|
<DropZone onFiles={handleFiles} />
|
||||||
|
{apps.length === 0 && (
|
||||||
|
<p className="upload-page__warning">
|
||||||
|
No applications configured yet.{' '}
|
||||||
|
<button className="upload-page__link" onClick={() => navigate('/apps')}>
|
||||||
|
Create one first
|
||||||
|
</button>{' '}
|
||||||
|
so you can link playables.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{uploading && !editingAd && (
|
||||||
|
<p className="upload-page__status">Uploading…</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!uploading && doneCount > 0 && (
|
||||||
|
<div className="upload-page__done">
|
||||||
|
<p className="upload-page__done-msg">
|
||||||
|
{doneCount} playable{doneCount !== 1 ? 's' : ''} uploaded successfully.
|
||||||
|
</p>
|
||||||
|
<div className="upload-page__done-actions">
|
||||||
|
<button className="btn-secondary" onClick={() => { setDoneCount(0); }}>Upload more</button>
|
||||||
|
<button className="btn-primary" onClick={() => navigate('/')}>View in Catalog</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{editingAd && (
|
||||||
|
<MetadataModal
|
||||||
|
ad={editingAd}
|
||||||
|
apps={apps}
|
||||||
|
onSave={handleSave}
|
||||||
|
onClose={handleClose}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
190
client/src/pages/Viewer.css
Normal file
190
client/src/pages/Viewer.css
Normal file
@@ -0,0 +1,190 @@
|
|||||||
|
.viewer__loading {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100vh;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stage fills the main content area (flex: 1 since parent is flex column) */
|
||||||
|
.viewer__stage {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer__frame-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform-origin: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Sidebar content ──────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
.viewer__sb-info {
|
||||||
|
padding: 4px 14px 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer__sb-title {
|
||||||
|
font-size: 0.88rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #e8e8e8;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer__sb-developer {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer__app-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer__app-icon {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 8px;
|
||||||
|
object-fit: cover;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer__app-icon--placeholder {
|
||||||
|
background: #2a2a2a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer__app-name {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #e8e8e8;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer__store-links {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 5px;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer__store-link {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 6px;
|
||||||
|
text-decoration: none;
|
||||||
|
text-align: center;
|
||||||
|
transition: opacity 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer__store-link:hover { opacity: 0.8; }
|
||||||
|
|
||||||
|
.viewer__store-link--ios {
|
||||||
|
background: #1c1c2e;
|
||||||
|
color: #a78bfa;
|
||||||
|
border: 1px solid #3730a3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer__store-link--android {
|
||||||
|
background: #0f2310;
|
||||||
|
color: #6fcf6f;
|
||||||
|
border: 1px solid #1a4a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer__sb-mono {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: #888;
|
||||||
|
font-family: monospace;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer__tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer__spacer {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Controls section (bottom of sidebar) ─────────────────────────────────── */
|
||||||
|
|
||||||
|
.viewer__controls {
|
||||||
|
padding: 12px 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer__frame-btns {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer__frame-btn {
|
||||||
|
flex: 1;
|
||||||
|
background: #252525;
|
||||||
|
border: 1px solid #333;
|
||||||
|
color: #aaa;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 5px 6px;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer__frame-btn.active,
|
||||||
|
.viewer__frame-btn:hover {
|
||||||
|
background: #2a2440;
|
||||||
|
color: #9d8ef7;
|
||||||
|
border-color: #5a4ea8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer__ctrl-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer__ctrl-btn {
|
||||||
|
flex: 1;
|
||||||
|
background: #252525;
|
||||||
|
border: 1px solid #333;
|
||||||
|
color: #aaa;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 6px 4px;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer__ctrl-btn:hover,
|
||||||
|
.viewer__ctrl-btn.active {
|
||||||
|
background: #2a2440;
|
||||||
|
color: #9d8ef7;
|
||||||
|
border-color: #5a4ea8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer__edit-btn {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 680px) {
|
||||||
|
.viewer__stage {
|
||||||
|
min-height: 100dvh;
|
||||||
|
}
|
||||||
|
}
|
||||||
206
client/src/pages/Viewer.jsx
Normal file
206
client/src/pages/Viewer.jsx
Normal file
@@ -0,0 +1,206 @@
|
|||||||
|
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||||
|
import { useNavigate, useParams } from 'react-router-dom';
|
||||||
|
import { getAd, listApps, updateAd, updateAdFile } from '../api';
|
||||||
|
import AppLayout from '../components/AppLayout';
|
||||||
|
import DeviceFrame, { FRAMES, getFrameSize } from '../components/DeviceFrame';
|
||||||
|
import MetadataModal from '../components/MetadataModal';
|
||||||
|
import './Viewer.css';
|
||||||
|
|
||||||
|
const VIEWER_LAYOUT = {
|
||||||
|
sidebarWidth: 220,
|
||||||
|
mobileBreakpoint: 680,
|
||||||
|
desktopFrameMargin: 32,
|
||||||
|
mobileFrameMargin: 8,
|
||||||
|
fallbackScale: 0.8,
|
||||||
|
scaleTransitionMs: 180,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Viewer() {
|
||||||
|
const { id } = useParams();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [ad, setAd] = useState(null);
|
||||||
|
const [apps, setApps] = useState([]);
|
||||||
|
const [frame, setFrame] = useState('phone');
|
||||||
|
const [rotated, setRotated] = useState(false);
|
||||||
|
const [editing, setEditing] = useState(false);
|
||||||
|
const stageRef = useRef();
|
||||||
|
const [stageDims, setStageDims] = useState(() => ({
|
||||||
|
width: window.innerWidth - VIEWER_LAYOUT.sidebarWidth,
|
||||||
|
height: window.innerHeight,
|
||||||
|
}));
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getAd(id).then(setAd).catch(() => navigate('/'));
|
||||||
|
listApps().then(setApps).catch(() => {});
|
||||||
|
}, [id, navigate]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!stageRef.current) return undefined;
|
||||||
|
|
||||||
|
let rafId = null;
|
||||||
|
const measure = () => {
|
||||||
|
if (rafId) cancelAnimationFrame(rafId);
|
||||||
|
rafId = requestAnimationFrame(() => {
|
||||||
|
const rect = stageRef.current?.getBoundingClientRect();
|
||||||
|
if (!rect) return;
|
||||||
|
setStageDims({ width: rect.width, height: rect.height });
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const ro = new ResizeObserver(measure);
|
||||||
|
ro.observe(stageRef.current);
|
||||||
|
window.addEventListener('resize', measure);
|
||||||
|
window.addEventListener('orientationchange', measure);
|
||||||
|
measure();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (rafId) cancelAnimationFrame(rafId);
|
||||||
|
ro.disconnect();
|
||||||
|
window.removeEventListener('resize', measure);
|
||||||
|
window.removeEventListener('orientationchange', measure);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const scale = useMemo(() => {
|
||||||
|
const { width: fw, height: fh } = getFrameSize(frame, rotated);
|
||||||
|
const { width: sw, height: sh } = stageDims;
|
||||||
|
if (!sw || !sh) return VIEWER_LAYOUT.fallbackScale;
|
||||||
|
|
||||||
|
const margin = sw <= VIEWER_LAYOUT.mobileBreakpoint
|
||||||
|
? VIEWER_LAYOUT.mobileFrameMargin
|
||||||
|
: VIEWER_LAYOUT.desktopFrameMargin;
|
||||||
|
|
||||||
|
return Math.min(1, (sw - margin) / fw, (sh - margin) / fh);
|
||||||
|
}, [stageDims, frame, rotated]);
|
||||||
|
|
||||||
|
async function handleSave({ newFile, ...data }) {
|
||||||
|
if (newFile) await updateAdFile(id, newFile);
|
||||||
|
const updated = await updateAd(id, data);
|
||||||
|
setAd(updated);
|
||||||
|
setEditing(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!ad) return <div className="viewer__loading">Loading...</div>;
|
||||||
|
|
||||||
|
const app = apps.find(a => a.id === ad.appId);
|
||||||
|
|
||||||
|
const sidebar = (
|
||||||
|
<>
|
||||||
|
<div className="sb-brand">Playable Showcase</div>
|
||||||
|
<div className="sb-nav">
|
||||||
|
<button className="sb-btn" onClick={() => navigate('/')}>Back</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="sb-divider" />
|
||||||
|
<span className="sb-section-label">Playable</span>
|
||||||
|
<div className="viewer__sb-info">
|
||||||
|
<span className="viewer__sb-title">{ad.title}</span>
|
||||||
|
{ad.developer && <span className="viewer__sb-developer">{ad.developer}</span>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{app && (
|
||||||
|
<>
|
||||||
|
<div className="sb-divider" />
|
||||||
|
<span className="sb-section-label">Application</span>
|
||||||
|
<div className="viewer__sb-info">
|
||||||
|
<div className="viewer__app-row">
|
||||||
|
{app.icon_url
|
||||||
|
? <img src={app.icon_url} className="viewer__app-icon" alt="" onError={e => { e.target.style.display = 'none'; }} />
|
||||||
|
: <div className="viewer__app-icon viewer__app-icon--placeholder" />
|
||||||
|
}
|
||||||
|
<span className="viewer__app-name">{app.name}</span>
|
||||||
|
</div>
|
||||||
|
{(app.ios_url || app.android_url) && (
|
||||||
|
<div className="viewer__store-links">
|
||||||
|
{app.ios_url && (
|
||||||
|
<a href={app.ios_url} target="_blank" rel="noreferrer" className="viewer__store-link viewer__store-link--ios">
|
||||||
|
App Store
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
{app.android_url && (
|
||||||
|
<a href={app.android_url} target="_blank" rel="noreferrer" className="viewer__store-link viewer__store-link--android">
|
||||||
|
Google Play
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{ad.repo && (
|
||||||
|
<>
|
||||||
|
<div className="sb-divider" />
|
||||||
|
<span className="sb-section-label">Repo</span>
|
||||||
|
<div className="viewer__sb-info">
|
||||||
|
<span className="viewer__sb-mono">{ad.repo}@{ad.branch || 'main'}</span>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{ad.tags?.length > 0 && (
|
||||||
|
<>
|
||||||
|
<div className="sb-divider" />
|
||||||
|
<span className="sb-section-label">Tags</span>
|
||||||
|
<div className="viewer__sb-info">
|
||||||
|
<div className="viewer__tags">
|
||||||
|
{ad.tags.map(t => <span key={t} className="tag">{t}</span>)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="viewer__spacer" />
|
||||||
|
<div className="sb-divider" />
|
||||||
|
|
||||||
|
<div className="viewer__controls">
|
||||||
|
<span className="sb-section-label" style={{ padding: '8px 14px 4px' }}>Frame</span>
|
||||||
|
<div className="viewer__frame-btns">
|
||||||
|
{Object.entries(FRAMES).map(([key, { label }]) => (
|
||||||
|
<button
|
||||||
|
key={key}
|
||||||
|
className={`viewer__frame-btn${frame === key ? ' active' : ''}`}
|
||||||
|
onClick={() => { setFrame(key); setRotated(false); }}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="viewer__ctrl-row">
|
||||||
|
<button
|
||||||
|
className={`viewer__ctrl-btn${rotated ? ' active' : ''}`}
|
||||||
|
onClick={() => setRotated(r => !r)}
|
||||||
|
title="Rotate"
|
||||||
|
>
|
||||||
|
Rotate
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button className="btn-primary viewer__edit-btn" onClick={() => setEditing(true)}>Edit</button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AppLayout sidebar={sidebar}>
|
||||||
|
<div className="viewer__stage" ref={stageRef}>
|
||||||
|
<div
|
||||||
|
className="viewer__frame-wrapper"
|
||||||
|
style={{
|
||||||
|
transform: `translate(-50%, -50%) scale(${scale})`,
|
||||||
|
transition: `transform ${VIEWER_LAYOUT.scaleTransitionMs}ms ease`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DeviceFrame
|
||||||
|
frame={frame}
|
||||||
|
filename={ad.filename}
|
||||||
|
rotated={rotated}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{editing && (
|
||||||
|
<MetadataModal ad={ad} apps={apps} onSave={handleSave} onClose={() => setEditing(false)} />
|
||||||
|
)}
|
||||||
|
</AppLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
16
client/vite.config.js
Normal file
16
client/vite.config.js
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
build: {
|
||||||
|
outDir: '../public',
|
||||||
|
emptyOutDir: true,
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
proxy: {
|
||||||
|
'/api': 'http://localhost:3000',
|
||||||
|
'/uploads': 'http://localhost:3000',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
13
docker-compose.yml
Normal file
13
docker-compose.yml
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
services:
|
||||||
|
showcase:
|
||||||
|
build: .
|
||||||
|
ports:
|
||||||
|
- "3000:3000"
|
||||||
|
volumes:
|
||||||
|
- ./uploads:/uploads
|
||||||
|
- ./data:/data
|
||||||
|
environment:
|
||||||
|
- PORT=3000
|
||||||
|
- UPLOADS_DIR=/uploads
|
||||||
|
- DB_PATH=/data/ads.json
|
||||||
|
restart: unless-stopped
|
||||||
358
package-lock.json
generated
Normal file
358
package-lock.json
generated
Normal file
@@ -0,0 +1,358 @@
|
|||||||
|
{
|
||||||
|
"name": "playable-showcase",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"lockfileVersion": 3,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"name": "playable-showcase",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"devDependencies": {
|
||||||
|
"concurrently": "^9.1.2",
|
||||||
|
"kill-port": "^2.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/ansi-regex": {
|
||||||
|
"version": "5.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
|
||||||
|
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/ansi-styles": {
|
||||||
|
"version": "4.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||||
|
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"color-convert": "^2.0.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/chalk": {
|
||||||
|
"version": "4.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||||
|
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"ansi-styles": "^4.1.0",
|
||||||
|
"supports-color": "^7.1.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/chalk/node_modules/supports-color": {
|
||||||
|
"version": "7.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||||
|
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"has-flag": "^4.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/cliui": {
|
||||||
|
"version": "8.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
|
||||||
|
"integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"string-width": "^4.2.0",
|
||||||
|
"strip-ansi": "^6.0.1",
|
||||||
|
"wrap-ansi": "^7.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/color-convert": {
|
||||||
|
"version": "2.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||||
|
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"color-name": "~1.1.4"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=7.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/color-name": {
|
||||||
|
"version": "1.1.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||||
|
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/concurrently": {
|
||||||
|
"version": "9.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.2.1.tgz",
|
||||||
|
"integrity": "sha512-fsfrO0MxV64Znoy8/l1vVIjjHa29SZyyqPgQBwhiDcaW8wJc2W3XWVOGx4M3oJBnv/zdUZIIp1gDeS98GzP8Ng==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"chalk": "4.1.2",
|
||||||
|
"rxjs": "7.8.2",
|
||||||
|
"shell-quote": "1.8.3",
|
||||||
|
"supports-color": "8.1.1",
|
||||||
|
"tree-kill": "1.2.2",
|
||||||
|
"yargs": "17.7.2"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"conc": "dist/bin/concurrently.js",
|
||||||
|
"concurrently": "dist/bin/concurrently.js"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/emoji-regex": {
|
||||||
|
"version": "8.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
|
||||||
|
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/escalade": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/get-caller-file": {
|
||||||
|
"version": "2.0.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
|
||||||
|
"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "ISC",
|
||||||
|
"engines": {
|
||||||
|
"node": "6.* || 8.* || >= 10.*"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/get-them-args": {
|
||||||
|
"version": "1.3.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/get-them-args/-/get-them-args-1.3.2.tgz",
|
||||||
|
"integrity": "sha512-LRn8Jlk+DwZE4GTlDbT3Hikd1wSHgLMme/+7ddlqKd7ldwR6LjJgTVWzBnR01wnYGe4KgrXjg287RaI22UHmAw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/has-flag": {
|
||||||
|
"version": "4.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||||
|
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/is-fullwidth-code-point": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
|
||||||
|
"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/kill-port": {
|
||||||
|
"version": "2.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/kill-port/-/kill-port-2.0.1.tgz",
|
||||||
|
"integrity": "sha512-e0SVOV5jFo0mx8r7bS29maVWp17qGqLBZ5ricNSajON6//kmb7qqqNnml4twNE8Dtj97UQD+gNFOaipS/q1zzQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"get-them-args": "1.3.2",
|
||||||
|
"shell-exec": "1.0.2"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"kill-port": "cli.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/require-directory": {
|
||||||
|
"version": "2.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
|
||||||
|
"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/rxjs": {
|
||||||
|
"version": "7.8.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
|
||||||
|
"integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"tslib": "^2.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/shell-exec": {
|
||||||
|
"version": "1.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/shell-exec/-/shell-exec-1.0.2.tgz",
|
||||||
|
"integrity": "sha512-jyVd+kU2X+mWKMmGhx4fpWbPsjvD53k9ivqetutVW/BQ+WIZoDoP4d8vUMGezV6saZsiNoW2f9GIhg9Dondohg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/shell-quote": {
|
||||||
|
"version": "1.8.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz",
|
||||||
|
"integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/string-width": {
|
||||||
|
"version": "4.2.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
|
||||||
|
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"emoji-regex": "^8.0.0",
|
||||||
|
"is-fullwidth-code-point": "^3.0.0",
|
||||||
|
"strip-ansi": "^6.0.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/strip-ansi": {
|
||||||
|
"version": "6.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
|
||||||
|
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"ansi-regex": "^5.0.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/supports-color": {
|
||||||
|
"version": "8.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
|
||||||
|
"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"has-flag": "^4.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/chalk/supports-color?sponsor=1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/tree-kill": {
|
||||||
|
"version": "1.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
|
||||||
|
"integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"bin": {
|
||||||
|
"tree-kill": "cli.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/tslib": {
|
||||||
|
"version": "2.8.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||||
|
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "0BSD"
|
||||||
|
},
|
||||||
|
"node_modules/wrap-ansi": {
|
||||||
|
"version": "7.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
|
||||||
|
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"ansi-styles": "^4.0.0",
|
||||||
|
"string-width": "^4.1.0",
|
||||||
|
"strip-ansi": "^6.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/y18n": {
|
||||||
|
"version": "5.0.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
|
||||||
|
"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "ISC",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/yargs": {
|
||||||
|
"version": "17.7.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
|
||||||
|
"integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"cliui": "^8.0.1",
|
||||||
|
"escalade": "^3.1.1",
|
||||||
|
"get-caller-file": "^2.0.5",
|
||||||
|
"require-directory": "^2.1.1",
|
||||||
|
"string-width": "^4.2.3",
|
||||||
|
"y18n": "^5.0.5",
|
||||||
|
"yargs-parser": "^21.1.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/yargs-parser": {
|
||||||
|
"version": "21.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
|
||||||
|
"integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "ISC",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
13
package.json
Normal file
13
package.json
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"name": "playable-showcase",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "concurrently --names \"server,client\" --prefix-colors \"cyan,magenta\" \"npm run dev --prefix server\" \"npm run dev --prefix client\"",
|
||||||
|
"stop": "kill-port 3000 5173"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"concurrently": "^9.1.2",
|
||||||
|
"kill-port": "^2.0.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
11
public/assets/index-BfeSErYu.js
Normal file
11
public/assets/index-BfeSErYu.js
Normal file
File diff suppressed because one or more lines are too long
1
public/assets/index-D_Lgibo3.css
Normal file
1
public/assets/index-D_Lgibo3.css
Normal file
File diff suppressed because one or more lines are too long
1
public/favicon.svg
Normal file
1
public/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
24
public/icons.svg
Normal file
24
public/icons.svg
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||||
|
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||||
|
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||||
|
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.9 KiB |
14
public/index.html
Normal file
14
public/index.html
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>client</title>
|
||||||
|
<script type="module" crossorigin src="/assets/index-BfeSErYu.js"></script>
|
||||||
|
<link rel="stylesheet" crossorigin href="/assets/index-D_Lgibo3.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
131
server/db.js
Normal file
131
server/db.js
Normal file
@@ -0,0 +1,131 @@
|
|||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
const crypto = require('crypto');
|
||||||
|
|
||||||
|
const DB_PATH = process.env.DB_PATH || path.join(__dirname, '..', 'data', 'ads.json');
|
||||||
|
const APPS_DB_PATH = process.env.APPS_DB_PATH || path.join(__dirname, '..', 'data', 'apps.json');
|
||||||
|
|
||||||
|
// ── ads ──────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function readDb() {
|
||||||
|
try { return JSON.parse(fs.readFileSync(DB_PATH, 'utf8')); }
|
||||||
|
catch { return []; }
|
||||||
|
}
|
||||||
|
|
||||||
|
function writeDb(ads) {
|
||||||
|
fs.mkdirSync(path.dirname(DB_PATH), { recursive: true });
|
||||||
|
fs.writeFileSync(DB_PATH, JSON.stringify(ads, null, 2), 'utf8');
|
||||||
|
}
|
||||||
|
|
||||||
|
function listAds(appId) {
|
||||||
|
const ads = readDb();
|
||||||
|
if (appId) return ads.filter(ad => ad.appId === appId);
|
||||||
|
return ads;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getAd(id) {
|
||||||
|
return readDb().find(ad => ad.id === id) || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function insertAd({ id, filename, title, appId, tags, developer, repo, branch, notes }) {
|
||||||
|
const ads = readDb();
|
||||||
|
const now = Date.now();
|
||||||
|
const ad = { id, filename, title, appId: appId || null, tags: tags || [], developer: developer || '', repo: repo || '', branch: branch || '', notes: notes || '', thumbnail: null, uploaded_at: now, updated_at: now };
|
||||||
|
ads.unshift(ad);
|
||||||
|
writeDb(ads);
|
||||||
|
return ad;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateAd(id, { title, appId, tags, developer, repo, branch, notes }) {
|
||||||
|
const ads = readDb();
|
||||||
|
const idx = ads.findIndex(ad => ad.id === id);
|
||||||
|
if (idx === -1) return null;
|
||||||
|
ads[idx] = {
|
||||||
|
...ads[idx],
|
||||||
|
title,
|
||||||
|
appId: appId ?? ads[idx].appId ?? null,
|
||||||
|
tags: tags ?? ads[idx].tags ?? [],
|
||||||
|
developer: developer ?? ads[idx].developer ?? '',
|
||||||
|
repo: repo ?? ads[idx].repo ?? '',
|
||||||
|
branch: branch ?? ads[idx].branch ?? '',
|
||||||
|
notes: notes ?? ads[idx].notes ?? '',
|
||||||
|
updated_at: Date.now(),
|
||||||
|
};
|
||||||
|
writeDb(ads);
|
||||||
|
return ads[idx];
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateAdFile(id, filename) {
|
||||||
|
const ads = readDb();
|
||||||
|
const idx = ads.findIndex(ad => ad.id === id);
|
||||||
|
if (idx === -1) return null;
|
||||||
|
ads[idx] = { ...ads[idx], filename, updated_at: Date.now() };
|
||||||
|
writeDb(ads);
|
||||||
|
return ads[idx];
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateAdThumbnail(id, thumbnail) {
|
||||||
|
const ads = readDb();
|
||||||
|
const idx = ads.findIndex(ad => ad.id === id);
|
||||||
|
if (idx === -1) return null;
|
||||||
|
ads[idx] = { ...ads[idx], thumbnail, updated_at: Date.now() };
|
||||||
|
writeDb(ads);
|
||||||
|
return ads[idx];
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteAd(id) {
|
||||||
|
const ads = readDb();
|
||||||
|
const idx = ads.findIndex(ad => ad.id === id);
|
||||||
|
if (idx === -1) return null;
|
||||||
|
const [ad] = ads.splice(idx, 1);
|
||||||
|
writeDb(ads);
|
||||||
|
return ad;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── apps ─────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function readAppsDb() {
|
||||||
|
try { return JSON.parse(fs.readFileSync(APPS_DB_PATH, 'utf8')); }
|
||||||
|
catch { return []; }
|
||||||
|
}
|
||||||
|
|
||||||
|
function writeAppsDb(apps) {
|
||||||
|
fs.mkdirSync(path.dirname(APPS_DB_PATH), { recursive: true });
|
||||||
|
fs.writeFileSync(APPS_DB_PATH, JSON.stringify(apps, null, 2), 'utf8');
|
||||||
|
}
|
||||||
|
|
||||||
|
function listApps() {
|
||||||
|
return readAppsDb();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getApp(id) {
|
||||||
|
return readAppsDb().find(a => a.id === id) || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function insertApp({ name, ios_url, android_url, icon_url }) {
|
||||||
|
const apps = readAppsDb();
|
||||||
|
const app = { id: crypto.randomUUID(), name, icon_url: icon_url || '', ios_url: ios_url || '', android_url: android_url || '', created_at: Date.now() };
|
||||||
|
apps.unshift(app);
|
||||||
|
writeAppsDb(apps);
|
||||||
|
return app;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateApp(id, { name, ios_url, android_url, icon_url }) {
|
||||||
|
const apps = readAppsDb();
|
||||||
|
const idx = apps.findIndex(a => a.id === id);
|
||||||
|
if (idx === -1) return null;
|
||||||
|
apps[idx] = { ...apps[idx], name, icon_url: icon_url ?? apps[idx].icon_url ?? '', ios_url: ios_url || '', android_url: android_url || '' };
|
||||||
|
writeAppsDb(apps);
|
||||||
|
return apps[idx];
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteApp(id) {
|
||||||
|
const apps = readAppsDb();
|
||||||
|
const idx = apps.findIndex(a => a.id === id);
|
||||||
|
if (idx === -1) return null;
|
||||||
|
const [app] = apps.splice(idx, 1);
|
||||||
|
writeAppsDb(apps);
|
||||||
|
return app;
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { listAds, getAd, insertAd, updateAd, updateAdFile, updateAdThumbnail, deleteAd, listApps, getApp, insertApp, updateApp, deleteApp };
|
||||||
49
server/index.js
Normal file
49
server/index.js
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
require('dotenv').config({ path: require('path').join(__dirname, '..', '.env') });
|
||||||
|
|
||||||
|
const express = require('express');
|
||||||
|
const path = require('path');
|
||||||
|
const crypto = require('crypto');
|
||||||
|
|
||||||
|
const app = express();
|
||||||
|
const PORT = process.env.PORT || 3000;
|
||||||
|
const UPLOADS_DIR = process.env.UPLOADS_DIR || path.join(__dirname, '..', 'uploads');
|
||||||
|
|
||||||
|
// 10mb limit needed for base64-encoded screenshot payloads
|
||||||
|
app.use(express.json({ limit: '10mb' }));
|
||||||
|
|
||||||
|
// Auth middleware for protected API routes
|
||||||
|
function requireAuth(req, res, next) {
|
||||||
|
const password = process.env.SHOWCASE_PASSWORD;
|
||||||
|
if (!password) return next(); // not configured, skip
|
||||||
|
|
||||||
|
const auth = req.headers['authorization'] || '';
|
||||||
|
const token = auth.startsWith('Bearer ') ? auth.slice(7) : '';
|
||||||
|
const expected = crypto.createHmac('sha256', password).update('showcase-session').digest('hex');
|
||||||
|
|
||||||
|
if (token !== expected) {
|
||||||
|
return res.status(401).json({ error: 'Unauthorized' });
|
||||||
|
}
|
||||||
|
next();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auth route (public)
|
||||||
|
app.use('/api/auth', require('./routes/auth').router);
|
||||||
|
|
||||||
|
// Protected API routes
|
||||||
|
app.use('/api/apps', requireAuth, require('./routes/apps'));
|
||||||
|
app.use('/api/ads', requireAuth, require('./routes/upload'));
|
||||||
|
app.use('/api/ads', requireAuth, require('./routes/ads'));
|
||||||
|
|
||||||
|
// Serve uploaded HTML files
|
||||||
|
app.use('/uploads', express.static(UPLOADS_DIR));
|
||||||
|
|
||||||
|
// Serve React build in production
|
||||||
|
const publicDir = path.join(__dirname, '..', 'public');
|
||||||
|
app.use(express.static(publicDir));
|
||||||
|
app.get('*', (_req, res) => {
|
||||||
|
res.sendFile(path.join(publicDir, 'index.html'));
|
||||||
|
});
|
||||||
|
|
||||||
|
app.listen(PORT, () => {
|
||||||
|
console.log(`Playable Showcase running on http://localhost:${PORT}`);
|
||||||
|
});
|
||||||
2684
server/package-lock.json
generated
Normal file
2684
server/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
19
server/package.json
Normal file
19
server/package.json
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"name": "playable-showcase-server",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "commonjs",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"start": "node index.js",
|
||||||
|
"dev": "nodemon index.js"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"dotenv": "^17.4.2",
|
||||||
|
"express": "^4.18.3",
|
||||||
|
"multer": "^2.0.0",
|
||||||
|
"puppeteer": "^22.15.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"nodemon": "^3.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
119
server/routes/ads.js
Normal file
119
server/routes/ads.js
Normal file
@@ -0,0 +1,119 @@
|
|||||||
|
const express = require('express');
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
const crypto = require('crypto');
|
||||||
|
const multer = require('multer');
|
||||||
|
const { listAds, getAd, updateAd, updateAdFile, updateAdThumbnail, deleteAd } = require('../db');
|
||||||
|
const { captureScreenshot } = require('../utils/screenshot');
|
||||||
|
|
||||||
|
const UPLOADS_DIR = process.env.UPLOADS_DIR || path.join(__dirname, '..', '..', 'uploads');
|
||||||
|
|
||||||
|
const fileStorage = multer.diskStorage({
|
||||||
|
destination: (_req, _file, cb) => cb(null, UPLOADS_DIR),
|
||||||
|
filename: (_req, _file, cb) => cb(null, `${crypto.randomUUID()}.html`),
|
||||||
|
});
|
||||||
|
|
||||||
|
const uploadFile = multer({
|
||||||
|
storage: fileStorage,
|
||||||
|
fileFilter: (_req, file, cb) => {
|
||||||
|
if (file.mimetype === 'text/html' || file.originalname.endsWith('.html')) {
|
||||||
|
cb(null, true);
|
||||||
|
} else {
|
||||||
|
cb(new Error('Only .html files are allowed'));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
limits: { fileSize: 50 * 1024 * 1024 },
|
||||||
|
});
|
||||||
|
|
||||||
|
const router = express.Router();
|
||||||
|
|
||||||
|
router.get('/', (req, res) => {
|
||||||
|
res.json(listAds(req.query.appId));
|
||||||
|
});
|
||||||
|
|
||||||
|
router.get('/:id', (req, res) => {
|
||||||
|
const ad = getAd(req.params.id);
|
||||||
|
if (!ad) return res.status(404).json({ error: 'Not found' });
|
||||||
|
res.json(ad);
|
||||||
|
});
|
||||||
|
|
||||||
|
router.patch('/:id', (req, res) => {
|
||||||
|
const existing = getAd(req.params.id);
|
||||||
|
if (!existing) return res.status(404).json({ error: 'Not found' });
|
||||||
|
|
||||||
|
const { title, appId, tags, developer, repo, branch, notes } = req.body;
|
||||||
|
const updated = updateAd(req.params.id, {
|
||||||
|
title: title ?? existing.title,
|
||||||
|
appId: appId ?? existing.appId ?? null,
|
||||||
|
tags: tags ?? existing.tags ?? [],
|
||||||
|
developer: developer ?? existing.developer ?? '',
|
||||||
|
repo: repo ?? existing.repo ?? '',
|
||||||
|
branch: branch ?? existing.branch ?? '',
|
||||||
|
notes: notes ?? existing.notes ?? '',
|
||||||
|
});
|
||||||
|
res.json(updated);
|
||||||
|
});
|
||||||
|
|
||||||
|
router.post('/:id/thumbnail', express.json({ limit: '10mb' }), (req, res) => {
|
||||||
|
const ad = getAd(req.params.id);
|
||||||
|
if (!ad) return res.status(404).json({ error: 'Not found' });
|
||||||
|
|
||||||
|
const { dataUrl } = req.body;
|
||||||
|
if (!dataUrl || !dataUrl.startsWith('data:image/')) {
|
||||||
|
return res.status(400).json({ error: 'Invalid dataUrl' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const thumbFilename = `${req.params.id}-thumb.png`;
|
||||||
|
const base64Data = dataUrl.replace(/^data:image\/\w+;base64,/, '');
|
||||||
|
fs.writeFileSync(path.join(UPLOADS_DIR, thumbFilename), Buffer.from(base64Data, 'base64'));
|
||||||
|
|
||||||
|
const updated = updateAdThumbnail(req.params.id, thumbFilename);
|
||||||
|
res.json(updated);
|
||||||
|
});
|
||||||
|
|
||||||
|
router.post('/:id/screenshot', async (req, res) => {
|
||||||
|
const ad = getAd(req.params.id);
|
||||||
|
if (!ad) return res.status(404).json({ error: 'Not found' });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const port = process.env.PORT || 3000;
|
||||||
|
const url = `http://127.0.0.1:${port}/uploads/${ad.filename}`;
|
||||||
|
const buffer = await captureScreenshot(url);
|
||||||
|
|
||||||
|
const thumbFilename = `${req.params.id}-thumb.png`;
|
||||||
|
fs.writeFileSync(path.join(UPLOADS_DIR, thumbFilename), buffer);
|
||||||
|
|
||||||
|
const updated = updateAdThumbnail(req.params.id, thumbFilename);
|
||||||
|
res.json(updated);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Screenshot failed:', err.message);
|
||||||
|
res.status(500).json({ error: 'Screenshot failed' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
router.post('/:id/file', uploadFile.single('file'), (req, res) => {
|
||||||
|
const ad = getAd(req.params.id);
|
||||||
|
if (!ad) return res.status(404).json({ error: 'Not found' });
|
||||||
|
if (!req.file) return res.status(400).json({ error: 'No file uploaded' });
|
||||||
|
|
||||||
|
const oldPath = path.join(UPLOADS_DIR, ad.filename);
|
||||||
|
if (fs.existsSync(oldPath)) fs.unlinkSync(oldPath);
|
||||||
|
|
||||||
|
const updated = updateAdFile(req.params.id, req.file.filename);
|
||||||
|
res.json(updated);
|
||||||
|
});
|
||||||
|
|
||||||
|
router.delete('/:id', (req, res) => {
|
||||||
|
const ad = deleteAd(req.params.id);
|
||||||
|
if (!ad) return res.status(404).json({ error: 'Not found' });
|
||||||
|
|
||||||
|
const filePath = path.join(UPLOADS_DIR, ad.filename);
|
||||||
|
if (fs.existsSync(filePath)) fs.unlinkSync(filePath);
|
||||||
|
|
||||||
|
const thumbPath = path.join(UPLOADS_DIR, `${ad.id}-thumb.png`);
|
||||||
|
if (fs.existsSync(thumbPath)) fs.unlinkSync(thumbPath);
|
||||||
|
|
||||||
|
res.status(204).end();
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = router;
|
||||||
115
server/routes/apps.js
Normal file
115
server/routes/apps.js
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
const express = require('express');
|
||||||
|
const { URL } = require('url');
|
||||||
|
const { listApps, getApp, insertApp, updateApp, deleteApp } = require('../db');
|
||||||
|
|
||||||
|
const router = express.Router();
|
||||||
|
|
||||||
|
// ── store lookup helper ───────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function metaContent(html, property) {
|
||||||
|
// handles both attribute orderings
|
||||||
|
const patterns = [
|
||||||
|
new RegExp(`<meta[^>]+property="${property}"[^>]+content="([^"]*)"`, 'i'),
|
||||||
|
new RegExp(`<meta[^>]+content="([^"]*)"[^>]+property="${property}"`, 'i'),
|
||||||
|
];
|
||||||
|
for (const re of patterns) {
|
||||||
|
const m = html.match(re);
|
||||||
|
if (m) return m[1];
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchText(url) {
|
||||||
|
const res = await fetch(url, {
|
||||||
|
headers: {
|
||||||
|
'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0 Safari/537.36',
|
||||||
|
'Accept-Language': 'en-US,en;q=0.9',
|
||||||
|
},
|
||||||
|
signal: AbortSignal.timeout(10000),
|
||||||
|
redirect: 'follow',
|
||||||
|
});
|
||||||
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||||
|
return res.text();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function lookupAppStore(storeUrl) {
|
||||||
|
const m = storeUrl.match(/\/id(\d+)/);
|
||||||
|
if (!m) throw new Error('Could not parse App Store app ID from URL');
|
||||||
|
const body = await fetchText(`https://itunes.apple.com/lookup?id=${m[1]}`);
|
||||||
|
const data = JSON.parse(body);
|
||||||
|
const r = data.results?.[0];
|
||||||
|
if (!r) throw new Error('App not found in iTunes catalogue');
|
||||||
|
return {
|
||||||
|
name: r.trackName,
|
||||||
|
icon_url: r.artworkUrl512 || r.artworkUrl100 || r.artworkUrl60 || '',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async function lookupPlayStore(storeUrl) {
|
||||||
|
const m = storeUrl.match(/[?&]id=([^&]+)/);
|
||||||
|
if (!m) throw new Error('Could not parse Play Store package ID from URL');
|
||||||
|
const body = await fetchText(`https://play.google.com/store/apps/details?id=${m[1]}&hl=en`);
|
||||||
|
const title = metaContent(body, 'og:title');
|
||||||
|
if (!title) throw new Error('Could not extract app name from Play Store page');
|
||||||
|
const name = title.replace(/\s*[-–]\s*Apps on Google Play\s*$/i, '').trim();
|
||||||
|
const icon_url = metaContent(body, 'og:image') || '';
|
||||||
|
return { name, icon_url };
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── routes ────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
router.get('/lookup', async (req, res) => {
|
||||||
|
const { url } = req.query;
|
||||||
|
if (!url) return res.status(400).json({ error: 'url query param is required' });
|
||||||
|
|
||||||
|
try {
|
||||||
|
new URL(url); // validate
|
||||||
|
} catch {
|
||||||
|
return res.status(400).json({ error: 'Invalid URL' });
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (url.includes('apps.apple.com')) {
|
||||||
|
return res.json(await lookupAppStore(url));
|
||||||
|
}
|
||||||
|
if (url.includes('play.google.com')) {
|
||||||
|
return res.json(await lookupPlayStore(url));
|
||||||
|
}
|
||||||
|
return res.status(422).json({ error: 'URL must be an App Store or Play Store link' });
|
||||||
|
} catch (err) {
|
||||||
|
console.error('App lookup failed:', err.message);
|
||||||
|
res.status(502).json({ error: err.message || 'Lookup failed' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
router.get('/', (_req, res) => {
|
||||||
|
res.json(listApps());
|
||||||
|
});
|
||||||
|
|
||||||
|
router.post('/', (req, res) => {
|
||||||
|
const { name, ios_url, android_url, icon_url } = req.body;
|
||||||
|
if (!name?.trim()) return res.status(400).json({ error: 'name is required' });
|
||||||
|
const app = insertApp({ name: name.trim(), ios_url: ios_url || '', android_url: android_url || '', icon_url: icon_url || '' });
|
||||||
|
res.status(201).json(app);
|
||||||
|
});
|
||||||
|
|
||||||
|
router.patch('/:id', (req, res) => {
|
||||||
|
const existing = getApp(req.params.id);
|
||||||
|
if (!existing) return res.status(404).json({ error: 'Not found' });
|
||||||
|
const { name, ios_url, android_url, icon_url } = req.body;
|
||||||
|
const updated = updateApp(req.params.id, {
|
||||||
|
name: name ?? existing.name,
|
||||||
|
ios_url: ios_url ?? existing.ios_url,
|
||||||
|
android_url: android_url ?? existing.android_url,
|
||||||
|
icon_url: icon_url ?? existing.icon_url,
|
||||||
|
});
|
||||||
|
res.json(updated);
|
||||||
|
});
|
||||||
|
|
||||||
|
router.delete('/:id', (req, res) => {
|
||||||
|
const app = deleteApp(req.params.id);
|
||||||
|
if (!app) return res.status(404).json({ error: 'Not found' });
|
||||||
|
res.status(204).end();
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = router;
|
||||||
25
server/routes/auth.js
Normal file
25
server/routes/auth.js
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
const express = require('express');
|
||||||
|
const crypto = require('crypto');
|
||||||
|
|
||||||
|
const router = express.Router();
|
||||||
|
|
||||||
|
function makeToken(password) {
|
||||||
|
return crypto.createHmac('sha256', password).update('showcase-session').digest('hex');
|
||||||
|
}
|
||||||
|
|
||||||
|
router.post('/login', (req, res) => {
|
||||||
|
const { password } = req.body;
|
||||||
|
const expected = process.env.SHOWCASE_PASSWORD;
|
||||||
|
|
||||||
|
if (!expected) {
|
||||||
|
return res.status(500).json({ error: 'Server not configured' });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!password || password !== expected) {
|
||||||
|
return res.status(401).json({ error: 'Invalid password' });
|
||||||
|
}
|
||||||
|
|
||||||
|
res.json({ token: makeToken(expected) });
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = { router, makeToken };
|
||||||
52
server/routes/upload.js
Normal file
52
server/routes/upload.js
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
const express = require('express');
|
||||||
|
const multer = require('multer');
|
||||||
|
const path = require('path');
|
||||||
|
const fs = require('fs');
|
||||||
|
const crypto = require('crypto');
|
||||||
|
const { insertAd } = require('../db');
|
||||||
|
const { parseTitle } = require('../utils/parseTitle');
|
||||||
|
|
||||||
|
const UPLOADS_DIR = process.env.UPLOADS_DIR || path.join(__dirname, '..', '..', 'uploads');
|
||||||
|
|
||||||
|
const storage = multer.diskStorage({
|
||||||
|
destination: (_req, _file, cb) => cb(null, UPLOADS_DIR),
|
||||||
|
filename: (_req, _file, cb) => cb(null, `${crypto.randomUUID()}.html`),
|
||||||
|
});
|
||||||
|
|
||||||
|
const upload = multer({
|
||||||
|
storage,
|
||||||
|
fileFilter: (_req, file, cb) => {
|
||||||
|
if (file.mimetype === 'text/html' || file.originalname.endsWith('.html')) {
|
||||||
|
cb(null, true);
|
||||||
|
} else {
|
||||||
|
cb(new Error('Only .html files are allowed'));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
limits: { fileSize: 50 * 1024 * 1024 },
|
||||||
|
});
|
||||||
|
|
||||||
|
const router = express.Router();
|
||||||
|
|
||||||
|
router.post('/', upload.single('file'), (req, res) => {
|
||||||
|
if (!req.file) return res.status(400).json({ error: 'No file uploaded' });
|
||||||
|
|
||||||
|
const html = fs.readFileSync(req.file.path, 'utf8');
|
||||||
|
const extractedTitle = parseTitle(html);
|
||||||
|
const id = path.basename(req.file.filename, '.html');
|
||||||
|
|
||||||
|
const ad = insertAd({
|
||||||
|
id,
|
||||||
|
filename: req.file.filename,
|
||||||
|
title: req.body.title || extractedTitle || req.file.originalname.replace(/\.html$/i, ''),
|
||||||
|
appId: req.body.appId || null,
|
||||||
|
tags: req.body.tags ? JSON.parse(req.body.tags) : [],
|
||||||
|
developer: req.body.developer || '',
|
||||||
|
repo: req.body.repo || '',
|
||||||
|
branch: req.body.branch || '',
|
||||||
|
notes: req.body.notes || '',
|
||||||
|
});
|
||||||
|
|
||||||
|
res.status(201).json(ad);
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = router;
|
||||||
6
server/utils/parseTitle.js
Normal file
6
server/utils/parseTitle.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
function parseTitle(html) {
|
||||||
|
const match = html.match(/<title[^>]*>([^<]*)<\/title>/i);
|
||||||
|
return match ? match[1].trim() : '';
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { parseTitle };
|
||||||
89
server/utils/screenshot.js
Normal file
89
server/utils/screenshot.js
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
const puppeteer = require('puppeteer');
|
||||||
|
const fs = require('fs');
|
||||||
|
|
||||||
|
const FINAL_SETTLE_MS = 800;
|
||||||
|
const CANDIDATE_DELAYS_MS = [0, 500, 500];
|
||||||
|
const EDGE_PATHS = [
|
||||||
|
'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
|
||||||
|
'C:\\Program Files\\Microsoft\\Edge\\Application\\msedge.exe',
|
||||||
|
];
|
||||||
|
|
||||||
|
function wait(ms) {
|
||||||
|
return new Promise(resolve => setTimeout(resolve, ms));
|
||||||
|
}
|
||||||
|
|
||||||
|
function getBrowserExecutablePath() {
|
||||||
|
if (process.env.PUPPETEER_EXECUTABLE_PATH) return process.env.PUPPETEER_EXECUTABLE_PATH;
|
||||||
|
return EDGE_PATHS.find(p => fs.existsSync(p));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function captureScreenshot(url, width = 390, height = 844) {
|
||||||
|
const executablePath = getBrowserExecutablePath();
|
||||||
|
const browser = await puppeteer.launch({
|
||||||
|
headless: true,
|
||||||
|
executablePath,
|
||||||
|
args: [
|
||||||
|
'--no-sandbox',
|
||||||
|
'--disable-setuid-sandbox',
|
||||||
|
'--disable-dev-shm-usage',
|
||||||
|
'--enable-webgl',
|
||||||
|
'--ignore-gpu-blocklist',
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
try {
|
||||||
|
const page = await browser.newPage();
|
||||||
|
await page.setViewport({ width, height, deviceScaleFactor: 1 });
|
||||||
|
page.on('console', msg => console.log(`[screenshot:${msg.type()}] ${msg.text()}`));
|
||||||
|
|
||||||
|
// Unity clears WebGL buffers by default, so force readable buffers before
|
||||||
|
// page scripts create their contexts.
|
||||||
|
await page.evaluateOnNewDocument(() => {
|
||||||
|
const orig = HTMLCanvasElement.prototype.getContext;
|
||||||
|
HTMLCanvasElement.prototype.getContext = function (type, attrs) {
|
||||||
|
if (type === 'webgl' || type === 'webgl2' || type === 'experimental-webgl') {
|
||||||
|
attrs = Object.assign({}, attrs || {}, { preserveDrawingBuffer: true });
|
||||||
|
}
|
||||||
|
return orig.call(this, type, attrs);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(`[screenshot] loading ${url}`);
|
||||||
|
await page.goto(url, { waitUntil: 'load', timeout: 60000 });
|
||||||
|
|
||||||
|
try {
|
||||||
|
await page.waitForFunction(() => {
|
||||||
|
const canvases = Array.from(document.querySelectorAll('canvas'))
|
||||||
|
.filter(c => c.width > 0 && c.height > 0);
|
||||||
|
return canvases.some(c => {
|
||||||
|
try {
|
||||||
|
const d = c.toDataURL('image/png');
|
||||||
|
return (d.split(',')[1] || '').length > 2000;
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, { timeout: 20000, polling: 500 });
|
||||||
|
console.log('[screenshot] canvas pixels detected');
|
||||||
|
} catch (err) {
|
||||||
|
console.log(`[screenshot] canvas readiness timed out: ${err.message}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// HTML overlays and Unity's first fully composited frame can lag behind
|
||||||
|
// canvas readiness, so capture a short burst and keep the richest PNG.
|
||||||
|
await wait(FINAL_SETTLE_MS);
|
||||||
|
let bestBuffer = null;
|
||||||
|
for (const delay of CANDIDATE_DELAYS_MS) {
|
||||||
|
if (delay) await wait(delay);
|
||||||
|
const buffer = await page.screenshot({ type: 'png' });
|
||||||
|
if (!bestBuffer || buffer.length > bestBuffer.length) bestBuffer = buffer;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`[screenshot] selected ${bestBuffer.length} bytes`);
|
||||||
|
return bestBuffer;
|
||||||
|
} finally {
|
||||||
|
await browser.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { captureScreenshot };
|
||||||
Reference in New Issue
Block a user