flop
2 weeks ago
parent
5071016ded
commit
480b10f764
@ -0,0 +1,37 @@ |
||||
# dependencies (bun install) |
||||
node_modules |
||||
|
||||
# output |
||||
out |
||||
dist |
||||
public |
||||
*.tgz |
||||
|
||||
# code coverage |
||||
coverage |
||||
*.lcov |
||||
|
||||
# logs |
||||
logs |
||||
_.log |
||||
report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json |
||||
|
||||
# dotenv environment variable files |
||||
.env |
||||
.env.development.local |
||||
.env.test.local |
||||
.env.production.local |
||||
.env.local |
||||
|
||||
# caches |
||||
.eslintcache |
||||
.cache |
||||
*.tsbuildinfo |
||||
|
||||
# IntelliJ based IDEs |
||||
.idea |
||||
|
||||
# Finder (MacOS) folder config |
||||
.DS_Store |
||||
.claude/ |
||||
.claude/settings.local.json |
||||
@ -0,0 +1,106 @@ |
||||
|
||||
Default to using Bun instead of Node.js. |
||||
|
||||
- Use `bun <file>` instead of `node <file>` or `ts-node <file>` |
||||
- Use `bun test` instead of `jest` or `vitest` |
||||
- Use `bun build <file.html|file.ts|file.css>` instead of `webpack` or `esbuild` |
||||
- Use `bun install` instead of `npm install` or `yarn install` or `pnpm install` |
||||
- Use `bun run <script>` instead of `npm run <script>` or `yarn run <script>` or `pnpm run <script>` |
||||
- Use `bunx <package> <command>` instead of `npx <package> <command>` |
||||
- Bun automatically loads .env, so don't use dotenv. |
||||
|
||||
## APIs |
||||
|
||||
- `Bun.serve()` supports WebSockets, HTTPS, and routes. Don't use `express`. |
||||
- `bun:sqlite` for SQLite. Don't use `better-sqlite3`. |
||||
- `Bun.redis` for Redis. Don't use `ioredis`. |
||||
- `Bun.sql` for Postgres. Don't use `pg` or `postgres.js`. |
||||
- `WebSocket` is built-in. Don't use `ws`. |
||||
- Prefer `Bun.file` over `node:fs`'s readFile/writeFile |
||||
- Bun.$`ls` instead of execa. |
||||
|
||||
## Testing |
||||
|
||||
Use `bun test` to run tests. |
||||
|
||||
```ts#index.test.ts |
||||
import { test, expect } from "bun:test"; |
||||
|
||||
test("hello world", () => { |
||||
expect(1).toBe(1); |
||||
}); |
||||
``` |
||||
|
||||
## Frontend |
||||
|
||||
Use HTML imports with `Bun.serve()`. Don't use `vite`. HTML imports fully support React, CSS, Tailwind. |
||||
|
||||
Server: |
||||
|
||||
```ts#index.ts |
||||
import index from "./index.html" |
||||
|
||||
Bun.serve({ |
||||
routes: { |
||||
"/": index, |
||||
"/api/users/:id": { |
||||
GET: (req) => { |
||||
return new Response(JSON.stringify({ id: req.params.id })); |
||||
}, |
||||
}, |
||||
}, |
||||
// optional websocket support |
||||
websocket: { |
||||
open: (ws) => { |
||||
ws.send("Hello, world!"); |
||||
}, |
||||
message: (ws, message) => { |
||||
ws.send(message); |
||||
}, |
||||
close: (ws) => { |
||||
// handle close |
||||
} |
||||
}, |
||||
development: { |
||||
hmr: true, |
||||
console: true, |
||||
} |
||||
}) |
||||
``` |
||||
|
||||
HTML files can import .tsx, .jsx or .js files directly and Bun's bundler will transpile & bundle automatically. `<link>` tags can point to stylesheets and Bun's CSS bundler will bundle. |
||||
|
||||
```html#index.html |
||||
<html> |
||||
<body> |
||||
<h1>Hello, world!</h1> |
||||
<script type="module" src="./frontend.tsx"></script> |
||||
</body> |
||||
</html> |
||||
``` |
||||
|
||||
With the following `frontend.tsx`: |
||||
|
||||
```tsx#frontend.tsx |
||||
import React from "react"; |
||||
import { createRoot } from "react-dom/client"; |
||||
|
||||
// import .css files directly and it works |
||||
import './index.css'; |
||||
|
||||
const root = createRoot(document.body); |
||||
|
||||
export default function Frontend() { |
||||
return <h1>Hello, world!</h1>; |
||||
} |
||||
|
||||
root.render(<Frontend />); |
||||
``` |
||||
|
||||
Then, run index.ts |
||||
|
||||
```sh |
||||
bun --hot ./index.ts |
||||
``` |
||||
|
||||
For more information, read the Bun API docs in `node_modules/bun-types/docs/**.mdx`. |
||||
@ -0,0 +1,15 @@ |
||||
# libmonoformat-ts |
||||
|
||||
To install dependencies: |
||||
|
||||
```bash |
||||
bun install |
||||
``` |
||||
|
||||
To run: |
||||
|
||||
```bash |
||||
bun run index.ts |
||||
``` |
||||
|
||||
This project was created using `bun init` in bun v1.3.11. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime. |
||||
@ -0,0 +1,37 @@ |
||||
{ |
||||
"lockfileVersion": 1, |
||||
"configVersion": 1, |
||||
"workspaces": { |
||||
"": { |
||||
"name": "libmonoformat", |
||||
"dependencies": { |
||||
"@types/mithril": "^2.2.8", |
||||
"libmonoformat": "../ts", |
||||
"mithril": "^2.3.8", |
||||
}, |
||||
"devDependencies": { |
||||
"@types/bun": "latest", |
||||
}, |
||||
"peerDependencies": { |
||||
"typescript": "^5", |
||||
}, |
||||
}, |
||||
}, |
||||
"packages": { |
||||
"@types/bun": ["@types/bun@1.3.14", "", { "dependencies": { "bun-types": "1.3.14" } }, "sha512-h1hFqFVcvAvD9j9K7ZW7vd82aSA+rTdznZa+5bwvCwqSB1jmmfLcbIWhOLx1/+boy/xmjgCs/OMUL8hRJSmnPw=="], |
||||
|
||||
"@types/mithril": ["@types/mithril@2.2.8", "", {}, "sha512-FN9Tv1+Nlr0LNPGnIL/xOxLJfu5WW2n8HAFeo4yxF+/O0per/8g080xlXoo+xj8baowAcfsNI3k80DxyLY34gQ=="], |
||||
|
||||
"@types/node": ["@types/node@25.9.1", "", { "dependencies": { "undici-types": ">=7.24.0 <7.24.7" } }, "sha512-xfrlY7UD5rMJk3ZVJP8BNzS28J36YJg+xp+LPXV1TdWxr8uMH5A860QNxYDGQe/ylDSgjxE52Q9VnO7p75tJxg=="], |
||||
|
||||
"bun-types": ["bun-types@1.3.14", "", { "dependencies": { "@types/node": "*" } }, "sha512-4N0ig0fEomHt5R0KCFWjovxow98rIoRwKolrYdCcknNwMekCXRnWEUvgu5soYV8QXtVsrUD8B95MBOZGPvr6KQ=="], |
||||
|
||||
"libmonoformat": ["libmonoformat@file:../ts", { "dependencies": { "@types/mithril": "^2.2.8", "mithril": "^2.3.8" }, "devDependencies": { "@types/bun": "latest" }, "peerDependencies": { "typescript": "^5" } }], |
||||
|
||||
"mithril": ["mithril@2.3.8", "", {}, "sha512-za/Yo7qXEckjm5syrSfaaI9Utf4tCUT3T1IOIYqH6Lrj7G0OZuYYLAY9SV4ygoaAf0+CNqU92MBt+7pmo53JVQ=="], |
||||
|
||||
"typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="], |
||||
|
||||
"undici-types": ["undici-types@7.24.6", "", {}, "sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg=="], |
||||
} |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,112 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> |
||||
<title>MonoDisplay Editor</title> |
||||
<script>!function(){var t=localStorage.getItem('theme');t&&document.documentElement.setAttribute('data-theme',t)}();</script> |
||||
<link href="style.css" rel="stylesheet"/> |
||||
</head> |
||||
|
||||
<body> |
||||
|
||||
<div id="topbar"> |
||||
<span class="app-name">MonoDisplay</span> |
||||
<div class="tb-sep"></div> |
||||
<button class="tb-btn" onclick="document.getElementById('file-input').click()"> |
||||
<svg viewBox="0 0 24 24"> |
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /> |
||||
<polyline points="17 8 12 3 7 8" /> |
||||
<line x1="12" y1="3" x2="12" y2="15" /> |
||||
</svg> |
||||
Load .bin |
||||
</button> |
||||
<input type="file" id="file-input" accept=".bin" onchange="loadBin(this)" /> |
||||
<button class="tb-btn" onclick="exportBin()"> |
||||
<svg viewBox="0 0 24 24"> |
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /> |
||||
<polyline points="7 10 12 15 17 10" /> |
||||
<line x1="12" y1="15" x2="12" y2="3" /> |
||||
</svg> |
||||
Export .bin |
||||
</button> |
||||
<div class="tb-sep"></div> |
||||
<button class="tb-btn" onclick="clearAll()"> |
||||
<svg viewBox="0 0 24 24"> |
||||
<polyline points="3 6 5 6 21 6" /> |
||||
<path d="M19 6l-1 14H6L5 6" /> |
||||
<path d="M10 11v6M14 11v6" /> |
||||
</svg> |
||||
Clear all |
||||
</button> |
||||
<button class="tb-btn" onclick="addSection()"> |
||||
<svg viewBox="0 0 24 24"> |
||||
<line x1="12" y1="5" x2="12" y2="19" /> |
||||
<line x1="5" y1="12" x2="19" y2="12" /> |
||||
</svg> |
||||
Add section |
||||
</button> |
||||
<span id="filename">untitled</span> |
||||
<div style="flex:1"></div> |
||||
<div class="tb-sep"></div> |
||||
<button class="tb-btn" id="theme-toggle" onclick="cycleTheme()">⊙ auto</button> |
||||
</div> |
||||
|
||||
<div id="main"> |
||||
<div id="left"> |
||||
<span class="pv-label">preview · 120 × 60</span> |
||||
<div id="display-box"> |
||||
<canvas id="canvas_root" width="120" height="60"></canvas> |
||||
</div> |
||||
<span class="pv-label">demos</span> |
||||
<div id="demo-btns"></div> |
||||
<div id="sec-meta"> |
||||
<div class="meta-row"> |
||||
<label>Selected section</label> |
||||
<span class="meta-val green" id="meta-name">-</span> |
||||
</div> |
||||
<div class="meta-row"> |
||||
<label>Elements</label> |
||||
<span class="meta-val" id="meta-count">-</span> |
||||
</div> |
||||
<div class="meta-row"> |
||||
<label>Section flags</label> |
||||
<label class="flag-check"> |
||||
<input type="checkbox" id="flag-drawFront" onchange="setSectionFlag('drawFront',this.checked)" /> |
||||
drawFront |
||||
</label> |
||||
<label class="flag-check" style="margin-left:-8px"> |
||||
<input type="checkbox" id="flag-drawBack" onchange="setSectionFlag('drawBack',this.checked)" /> |
||||
drawBack |
||||
</label> |
||||
<label class="flag-check" style="margin-left:-8px"> |
||||
<input type="checkbox" id="flag-clearBuffer" onchange="setSectionFlag('clearBuffer',this.checked)" /> |
||||
clearBuffer |
||||
</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="right"> |
||||
<div id="right-hdr"> |
||||
<span class="rh-title">sections</span> |
||||
</div> |
||||
<div id="sections-wrap"> |
||||
<div class="empty-state">No sections yet.<br />Use <b>Add section</b> to get started.</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- confirm dialog --> |
||||
<div id="confirm-overlay"> |
||||
<div id="confirm-box"> |
||||
<div id="confirm-msg"></div> |
||||
<div id="confirm-btns"></div> |
||||
</div> |
||||
</div> |
||||
|
||||
<script src="./public/mono-display.js"></script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -0,0 +1,215 @@ |
||||
<?php |
||||
session_start(); |
||||
|
||||
define('PASSWORD', 'password'); |
||||
define('FILES_DIR', __DIR__ . '/avj2305'); |
||||
define('ACTIVE_FILE', __DIR__ . '/active.txt'); |
||||
|
||||
// ============================================================================= |
||||
// HELPERS |
||||
// ============================================================================= |
||||
|
||||
function redirect(string $url): never { |
||||
header('Location: ' . $url); |
||||
exit; |
||||
} |
||||
|
||||
function require_auth(): void { |
||||
if (empty($_SESSION['auth'])) redirect('?login'); |
||||
} |
||||
|
||||
function get_active(): string { |
||||
if (!file_exists(ACTIVE_FILE)) return ''; |
||||
$v = trim(file_get_contents(ACTIVE_FILE)); |
||||
return $v !== '' ? $v : ''; |
||||
} |
||||
|
||||
function set_active(string $filename): void { |
||||
file_put_contents(ACTIVE_FILE, $filename); |
||||
} |
||||
|
||||
function get_bin_files(): array { |
||||
$files = glob(FILES_DIR . '/*.bin'); |
||||
return $files ? array_map('basename', $files) : []; |
||||
} |
||||
|
||||
function safe_filename(string $name): bool { |
||||
return $name === basename($name) |
||||
&& str_ends_with($name, '.bin') |
||||
&& !str_contains($name, "\0"); |
||||
} |
||||
|
||||
function has_png(string $bin_basename): bool { |
||||
$png = substr($bin_basename, 0, -4) . '.png'; |
||||
return file_exists(FILES_DIR . '/' . $png); |
||||
} |
||||
|
||||
function png_path(string $bin_basename): string { |
||||
return FILES_DIR . '/' . substr($bin_basename, 0, -4) . '.png'; |
||||
} |
||||
|
||||
// ============================================================================= |
||||
// ACTIONS (POST handlers - redirect, never render) |
||||
// ============================================================================= |
||||
|
||||
function action_login(): never { |
||||
if (hash_equals(PASSWORD, $_POST['password'] ?? '')) { |
||||
$_SESSION['auth'] = true; |
||||
redirect('?edit'); |
||||
} |
||||
redirect('?login&err=1'); |
||||
} |
||||
|
||||
function action_set_file(): never { |
||||
require_auth(); |
||||
$f = $_POST['file'] ?? ''; |
||||
if (safe_filename($f) && file_exists(FILES_DIR . '/' . $f)) { |
||||
set_active($f); |
||||
} |
||||
redirect('?edit'); |
||||
} |
||||
|
||||
// ============================================================================= |
||||
// RENDERERS (GET handlers - output HTML, never redirect) |
||||
// ============================================================================= |
||||
|
||||
function render_login(): never { |
||||
$err = !empty($_GET['err']); ?> |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head><meta charset="utf-8"><title>Login</title> |
||||
<style> |
||||
body{font:14px monospace;display:flex;align-items:center;justify-content:center;height:100vh;margin:0;background:#111;color:#eee} |
||||
form{display:flex;flex-direction:column;gap:8px;width:220px} |
||||
input[type=password]{padding:6px;background:#222;border:1px solid #555;color:#eee} |
||||
button{padding:6px;background:#444;border:none;color:#eee;cursor:pointer} |
||||
button:hover{background:#555} |
||||
.err{color:#f66;font-size:12px} |
||||
</style> |
||||
</head> |
||||
<body> |
||||
<form method="post" action="?login"> |
||||
<label>Password</label> |
||||
<input type="password" name="password" autofocus> |
||||
<button type="submit">Login</button> |
||||
<?php if ($err): ?><span class="err">Wrong password.</span><?php endif; ?> |
||||
</form> |
||||
</body></html> |
||||
<?php exit; } |
||||
|
||||
function render_edit(): never { |
||||
require_auth(); |
||||
$files = get_bin_files(); |
||||
$active = get_active(); ?> |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head><meta charset="utf-8"><title>Select File</title> |
||||
<style> |
||||
body{font:14px monospace;background:#111;color:#eee;padding:24px;margin:0} |
||||
h2{margin:0 0 16px} |
||||
ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px} |
||||
li form{margin:0} |
||||
.row{display:flex;align-items:center;gap:10px} |
||||
button{padding:6px 12px;background:#333;border:1px solid #555;color:#eee;cursor:pointer;flex:1;text-align:left} |
||||
button:hover{background:#444} |
||||
button.active{border-color:#6af;color:#6af} |
||||
.thumb{width:480px;height:270px;object-fit:cover;border:1px solid #444;background:#222;flex-shrink:0} |
||||
.nothumb{width:64px;height:64px;flex-shrink:0} |
||||
.none{color:#888} |
||||
</style> |
||||
</head> |
||||
<body> |
||||
<h2>Live file selector</h2> |
||||
<p>Active: <strong><?= $active !== '' ? htmlspecialchars($active) : '<span class="none">none</span>' ?></strong></p>
|
||||
<?php if ($files): ?> |
||||
<ul> |
||||
<?php foreach ($files as $f): ?> |
||||
<li> |
||||
<form method="post" action="?edit"> |
||||
<div class="row"> |
||||
<?php if (has_png($f)): ?> |
||||
<img class="thumb" src="?img=<?= urlencode($f) ?>" alt="">
|
||||
<?php else: ?> |
||||
<div class="nothumb"></div> |
||||
<?php endif; ?> |
||||
<input type="hidden" name="file" value="<?= htmlspecialchars($f) ?>">
|
||||
<button type="submit"<?= $f === $active ? ' class="active"' : '' ?>><?= htmlspecialchars($f) ?></button>
|
||||
</div> |
||||
</form> |
||||
</li> |
||||
<?php endforeach; ?> |
||||
</ul> |
||||
<?php else: ?> |
||||
<p class="none">No .bin files found in avj2305/</p> |
||||
<?php endif; ?> |
||||
</body></html> |
||||
<?php exit; } |
||||
|
||||
// ============================================================================= |
||||
// FILE SERVER (default route) |
||||
// ============================================================================= |
||||
|
||||
function serve_png(): never { |
||||
require_auth(); |
||||
$f = $_GET['img'] ?? ''; |
||||
if (!safe_filename($f)) { |
||||
http_response_code(400); exit('Invalid filename.'); |
||||
} |
||||
$path = png_path($f); |
||||
if (!file_exists($path)) { |
||||
http_response_code(404); exit('No preview.'); |
||||
} |
||||
header('Content-Type: image/png'); |
||||
header('Content-Length: ' . filesize($path)); |
||||
readfile($path); |
||||
exit; |
||||
} |
||||
|
||||
function serve_active_file(): never { |
||||
$active = get_active(); |
||||
|
||||
if ($active === '') { |
||||
http_response_code(404); exit('No active file set.'); |
||||
} |
||||
if (!safe_filename($active)) { |
||||
http_response_code(500); exit('Invalid filename.'); |
||||
} |
||||
|
||||
$path = FILES_DIR . '/' . $active; |
||||
|
||||
if (!file_exists($path)) { |
||||
http_response_code(404); exit('File not found.'); |
||||
} |
||||
|
||||
header('Content-Type: application/octet-stream'); |
||||
header('Content-Disposition: inline; filename="' . addslashes($active) . '"'); |
||||
header('Content-Length: ' . filesize($path)); |
||||
readfile($path); |
||||
exit; |
||||
} |
||||
|
||||
|
||||
// ============================================================================= |
||||
// ROUTES |
||||
// ============================================================================= |
||||
// |
||||
// GET /live.php -> serve active .bin file |
||||
// GET /live.php?login -> login page |
||||
// POST /live.php?login -> process login |
||||
// GET /live.php?edit -> file picker [auth required] |
||||
// POST /live.php?edit -> set active file [auth required] |
||||
// GET /live.php?img=x.bin -> serve x.png preview [auth required] |
||||
// |
||||
// ============================================================================= |
||||
|
||||
$method = $_SERVER['REQUEST_METHOD']; |
||||
$route = array_key_first($_GET) ?? ''; |
||||
|
||||
match (true) { |
||||
$method === 'POST' && $route === 'login' => action_login(), |
||||
$method === 'POST' && $route === 'edit' => action_set_file(), |
||||
$method === 'GET' && $route === 'login' => render_login(), |
||||
$method === 'GET' && $route === 'edit' => render_edit(), |
||||
$method === 'GET' && $route === 'img' => serve_png(), |
||||
default => serve_active_file(), |
||||
}; |
||||
@ -0,0 +1,20 @@ |
||||
{ |
||||
"name": "libmonoformat", |
||||
"module": "src/index.ts", |
||||
"type": "module", |
||||
"scripts": { |
||||
"build": "bun build src/browser.ts --target browser --outfile public/mono-display.js", |
||||
"test": "bun test" |
||||
}, |
||||
"devDependencies": { |
||||
"@types/bun": "latest" |
||||
}, |
||||
"peerDependencies": { |
||||
"typescript": "^5" |
||||
}, |
||||
"dependencies": { |
||||
"libmonoformat": "../ts", |
||||
"@types/mithril": "^2.2.8", |
||||
"mithril": "^2.3.8" |
||||
} |
||||
} |
||||
@ -0,0 +1,906 @@ |
||||
// browser.ts - Mithril entry point
|
||||
// Built by: bun build src/browser.ts --target browser --outfile public/mono-display.js
|
||||
|
||||
import m from "mithril"; |
||||
import * as MonoDisplay from "libmonoformat"; |
||||
import { MonoDisplayFile, cycleTheme } from "libmonoformat"; |
||||
|
||||
(globalThis as typeof globalThis & { MonoDisplay: typeof MonoDisplay }).MonoDisplay = MonoDisplay; |
||||
|
||||
const W = 120, H = 60; |
||||
|
||||
// --- State -------------------------------------------------------------------
|
||||
let file: MonoDisplayFile = new MonoDisplayFile([]); |
||||
let activeSecIndex: number | null = null; |
||||
let activeElIndex: number | null = null; |
||||
let currentFilename = "untitled"; |
||||
let isDirty = false; |
||||
|
||||
// --- Element metadata --------------------------------------------------------
|
||||
type ElFieldMeta = { key: string; label: string; type: string; default: any; full?: boolean }; |
||||
type ElFlagMeta = { key: string; label: string; default?: boolean }; |
||||
|
||||
const EL_FIELDS: Partial<Record<MonoDisplay.ElementTypeName, ElFieldMeta[]>> = { |
||||
Image2D: [ |
||||
{ key: "xOffset", label: "X offset", type: "number", default: 0 }, |
||||
{ key: "yOffset", label: "Y offset", type: "number", default: 0 }, |
||||
{ key: "width", label: "Width", type: "number", default: W }, |
||||
{ key: "height", label: "Height", type: "number", default: H }, |
||||
], |
||||
Animation: [ |
||||
{ key: "xOffset", label: "X offset", type: "number", default: 0 }, |
||||
{ key: "yOffset", label: "Y offset", type: "number", default: 0 }, |
||||
{ key: "width", label: "Width", type: "number", default: W }, |
||||
{ key: "height", label: "Height", type: "number", default: H }, |
||||
{ key: "updateInterval", label: "Update interval", type: "number", default: 12 }, |
||||
{ key: "frames", label: "Frames", type: "list", default: [] }, |
||||
], |
||||
ClippedText: [ |
||||
{ key: "text", label: "Text", type: "text", default: "Hello, World!", full: true }, |
||||
{ key: "xOffset", label: "X offset", type: "number", default: 0 }, |
||||
{ key: "yOffset", label: "Y offset", type: "number", default: 10 }, |
||||
{ key: "width", label: "Width", type: "number", default: 30 }, |
||||
{ key: "height", label: "Height", type: "number", default: 10 }, |
||||
{ key: "fontIndex", label: "Font", type: "font", default: 0 }, |
||||
], |
||||
HScrollText: [ |
||||
{ key: "text", label: "Text", type: "text", default: "Scrolling text - ", full: true }, |
||||
{ key: "xOffset", label: "X offset", type: "number", default: 0 }, |
||||
{ key: "yOffset", label: "Y offset", type: "number", default: 10 }, |
||||
{ key: "width", label: "Width", type: "number", default: 30 }, |
||||
{ key: "height", label: "Height", type: "number", default: 10 }, |
||||
{ key: "scrollSpeed", label: "Scroll speed", type: "number", default: 50 }, |
||||
{ key: "fontIndex", label: "Font", type: "font", default: 0 }, |
||||
], |
||||
VScrollText: [ |
||||
{ key: "text", label: "Text", type: "text", default: "Scrolling text - ", full: true }, |
||||
{ key: "xOffset", label: "X offset", type: "number", default: 0 }, |
||||
{ key: "yOffset", label: "Y offset", type: "number", default: 32 }, |
||||
{ key: "width", label: "Width", type: "number", default: 30 }, |
||||
{ key: "height", label: "Height", type: "number", default: 10 }, |
||||
{ key: "scrollSpeed", label: "Scroll speed", type: "number", default: 50 }, |
||||
{ key: "fontIndex", label: "Font", type: "font", default: 0 }, |
||||
], |
||||
Line: [ |
||||
{ key: "xOrigin", label: "X offset", type: "number", default: 0 }, |
||||
{ key: "yOrigin", label: "Y offset", type: "number", default: 32 }, |
||||
{ key: "xTarget", label: "X offset", type: "number", default: 0 }, |
||||
{ key: "yTarget", label: "Y offset", type: "number", default: 32 }, |
||||
{ key: "linestyle", label: "Lintylee S", type: "number", default: 0 }, |
||||
], |
||||
CurrentTime: [ |
||||
{ key: "xOffset", label: "X offset", type: "number", default: 0 }, |
||||
{ key: "yOffset", label: "Y offset", type: "number", default: 8 }, |
||||
{ key: "width", label: "Width", type: "number", default: W }, |
||||
{ key: "height", label: "Height", type: "number", default: H }, |
||||
{ key: "utcOffsetMinutes", label: "UTC offset (min)", type: "number", default: 120 }, |
||||
{ key: "fontIndex", label: "Font", type: "font", default: 0 }, |
||||
], |
||||
}; |
||||
|
||||
const EL_FLAGS: Partial<Record<MonoDisplay.ElementTypeName, ElFlagMeta[]>> = { |
||||
HScrollText: [ |
||||
{ key: "endless", label: "Endless" }, |
||||
{ key: "invertDirection", label: "Invert direction" }, |
||||
{ key: "padBefore", label: "Pad Before" }, |
||||
{ key: "padAfter", label: "Pad After" }, |
||||
], |
||||
CurrentTime: [ |
||||
{ key: "clock12h", label: "12h mode", default: false }, |
||||
{ key: "showHours", label: "Show hours", default: true }, |
||||
{ key: "showSeconds", label: "Show seconds", default: true }, |
||||
], |
||||
}; |
||||
|
||||
const EL_TYPES: MonoDisplay.ElementType[] = Object.keys(EL_FIELDS).map( |
||||
(x) => MonoDisplay.StringToElementType[x as MonoDisplay.ElementTypeName] |
||||
); |
||||
|
||||
const DEFAULT_FONTS = Object.keys(MonoDisplay.MonoDisplayRenderer.builtinFonts); |
||||
|
||||
// --- Confirm dialog ----------------------------------------------------------
|
||||
function showConfirm( |
||||
msg: string, |
||||
buttons: { label: string; primary?: boolean; action: boolean }[] |
||||
): Promise<boolean> { |
||||
return new Promise(resolve => { |
||||
const overlay = document.getElementById("confirm-overlay"); |
||||
const msgEl = document.getElementById("confirm-msg"); |
||||
const btnsEl = document.getElementById("confirm-btns"); |
||||
if (msgEl) msgEl.textContent = msg; |
||||
if (btnsEl) btnsEl.innerHTML = ""; |
||||
buttons.forEach(b => { |
||||
const btn = document.createElement("button"); |
||||
btn.className = "cb" + (b.primary ? " primary" : ""); |
||||
btn.textContent = b.label; |
||||
btn.onclick = () => { overlay?.classList.remove("show"); resolve(b.action); }; |
||||
btnsEl?.appendChild(btn); |
||||
}); |
||||
overlay?.classList.add("show"); |
||||
}); |
||||
} |
||||
|
||||
// --- Persistence -------------------------------------------------------------
|
||||
const STORAGE_KEY = "monodisplay_autosave"; |
||||
|
||||
function saveToStorage() { |
||||
try { |
||||
const buf = file.toBuffer(); |
||||
const b64 = btoa(String.fromCharCode(...buf)); |
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify({ filename: currentFilename, data: b64 })); |
||||
} catch { } |
||||
} |
||||
|
||||
function loadFromStorage() { |
||||
try { |
||||
const raw = localStorage.getItem(STORAGE_KEY); |
||||
if (!raw) return; |
||||
const { filename, data } = JSON.parse(raw); |
||||
const bytes = Uint8Array.from(atob(data), c => c.charCodeAt(0)); |
||||
const parsed = new MonoDisplay.MonoDisplayParser().parse(bytes.buffer); |
||||
file = new MonoDisplayFile(parsed.sections); |
||||
currentFilename = filename; |
||||
const filenameEl = document.getElementById("filename"); |
||||
if (filenameEl) filenameEl.textContent = filename; |
||||
isDirty = true; |
||||
document.getElementById("filename")?.classList.add("dirty"); |
||||
m.redraw(); |
||||
} catch { } |
||||
} |
||||
|
||||
// --- Dirty tracking ----------------------------------------------------------
|
||||
function markDirty() { |
||||
isDirty = true; |
||||
document.getElementById("filename")?.classList.add("dirty"); |
||||
saveToStorage(); |
||||
} |
||||
function markClean() { |
||||
isDirty = false; |
||||
document.getElementById("filename")?.classList.remove("dirty"); |
||||
} |
||||
async function guardDirty(): Promise<boolean> { |
||||
if (!isDirty || !file.sections.length) return true; |
||||
return showConfirm( |
||||
"You have unsaved changes. Loading a demo will replace the current editor state.", |
||||
[{ label: "Cancel", action: false }, { label: "Load anyway", primary: true, action: true }] |
||||
); |
||||
} |
||||
|
||||
// --- Helpers -----------------------------------------------------------------
|
||||
function newSec(): MonoDisplay.MonoFormatElementsAlways { |
||||
return { |
||||
sectionType: MonoDisplay.SectionType.ElementsAlways, elements: [], flags: { |
||||
clearBuffer: true, |
||||
drawBack: true, |
||||
drawFront: true, |
||||
} |
||||
}; |
||||
} |
||||
|
||||
function createNewElement(type: MonoDisplay.ElementType): MonoDisplay.MonoFormatElement { |
||||
const fields: Record<string, any> = {}; |
||||
(EL_FIELDS[MonoDisplay.ElementTypeToString[type]] as ElFieldMeta[] || []) |
||||
.forEach(f => (fields[f.key] = f.default)); |
||||
const flags: Record<string, any> = {}; |
||||
(EL_FLAGS[MonoDisplay.ElementTypeToString[type]] as ElFlagMeta[] || []) |
||||
.forEach(f => (flags[f.key] = f.default ?? false)); |
||||
const el: any = { type, ...fields, flags }; |
||||
if (type === MonoDisplay.ElementType.Image2D) { |
||||
el.image = { pixels: new Uint8Array(el.width * el.height), width: el.width, height: el.height }; |
||||
} |
||||
if (type === MonoDisplay.ElementType.Animation) { |
||||
el.frames = [{ pixels: new Uint8Array(el.width * el.height), width: el.width, height: el.height }]; |
||||
} |
||||
return el as MonoDisplay.MonoFormatElement; |
||||
} |
||||
|
||||
function getSectionByIndex(i: number | null): MonoDisplay.MonoFormatSection | undefined { |
||||
return i !== null ? file.sections[i] : undefined; |
||||
} |
||||
|
||||
function getElementByIndex(si: number, ei: number): MonoDisplay.MonoFormatElement | undefined { |
||||
const s = getSectionByIndex(si); |
||||
return s && "elements" in s ? s.elements[ei] : undefined; |
||||
} |
||||
|
||||
function getCustomFonts(): { fontname: string; index: number }[] { |
||||
return file.sections |
||||
.filter(s => s.sectionType === MonoDisplay.SectionType.CustomFont) |
||||
.map((_, i) => ({ fontname: `CustomFont ${i}`, index: 0x8000 + i })); |
||||
} |
||||
|
||||
function elSummary(el: MonoDisplay.MonoFormatElement): string { |
||||
switch (el.type) { |
||||
case MonoDisplay.ElementType.ClippedText: |
||||
case MonoDisplay.ElementType.HScrollText: |
||||
return el.text.slice(0, 24) + (el.text.length > 24 ? "..." : ""); |
||||
case MonoDisplay.ElementType.CurrentTime: |
||||
case MonoDisplay.ElementType.Image2D: |
||||
case MonoDisplay.ElementType.HorizontalScroll: |
||||
case MonoDisplay.ElementType.VerticalScroll: |
||||
return `${(el as any).xOffset ?? 0}, ${(el as any).yOffset ?? 0}`; |
||||
default: |
||||
return el.type.toString(); |
||||
} |
||||
} |
||||
|
||||
// --- Mutations ----------------------------------------------------------------
|
||||
function addSection() { |
||||
file.sections.push(newSec()); |
||||
activeSecIndex = file.sections.length - 1; |
||||
activeElIndex = null; |
||||
markDirty(); triggerPreview(); m.redraw(); |
||||
} |
||||
|
||||
function removeSection(si: number) { |
||||
file.sections.splice(si, 1); |
||||
if (activeSecIndex === si) { |
||||
activeSecIndex = file.sections.length ? file.sections.length - 1 : null; |
||||
activeElIndex = null; |
||||
} |
||||
markDirty(); triggerPreview(); |
||||
} |
||||
|
||||
function toggleSection(si: number) { |
||||
activeSecIndex = si; |
||||
} |
||||
|
||||
function setSectionFlag(flag: string, val: boolean) { |
||||
if (activeSecIndex === null) return; |
||||
const s = getSectionByIndex(activeSecIndex); |
||||
if (!s) return; |
||||
(s as any).flags[flag] = val; |
||||
markDirty(); triggerPreview(); |
||||
} |
||||
|
||||
function setSectionField(si: number, key: string, val: any) { |
||||
const s = getSectionByIndex(si); |
||||
if (!s) return; |
||||
(s as any)[key] = val; |
||||
markDirty(); triggerPreview(); |
||||
} |
||||
|
||||
function setSectionType(si: number, sectionType: string) { |
||||
const sec = getSectionByIndex(si); |
||||
if (!sec) return; |
||||
const wasElementsSection = sec.sectionType !== MonoDisplay.SectionType.CustomFont; |
||||
(sec as any).sectionType = MonoDisplay.StringToSectionType[sectionType as MonoDisplay.SectionTypeName]; |
||||
if ((sec as any).sectionType === MonoDisplay.SectionType.CustomFont) { |
||||
(sec as any).fontData = new Uint8Array(); |
||||
delete (sec as any).elements; |
||||
delete (sec as any).flags; |
||||
} else { |
||||
if (!wasElementsSection) { |
||||
(sec as any).elements = []; |
||||
(sec as any).flags = {}; |
||||
} |
||||
delete (sec as any).fontData; |
||||
if ((sec as any).sectionType === MonoDisplay.SectionType.ElementsTimespan) { |
||||
const now = BigInt(Math.floor(Date.now() / 1000)); |
||||
(sec as any).startTimestamp = now; |
||||
(sec as any).endTimestamp = now + 3600n; |
||||
} else { |
||||
delete (sec as any).startTimestamp; |
||||
delete (sec as any).endTimestamp; |
||||
} |
||||
} |
||||
markDirty(); triggerPreview(); |
||||
} |
||||
|
||||
function addElement(si: number) { |
||||
const s = getSectionByIndex(si); |
||||
if (!s || !("elements" in s)) return; |
||||
s.elements.push(createNewElement(MonoDisplay.ElementType.HScrollText)); |
||||
activeElIndex = s.elements.length - 1; |
||||
activeSecIndex = si; |
||||
markDirty(); triggerPreview(); |
||||
} |
||||
|
||||
function removeElement(si: number, ei: number) { |
||||
const s = getSectionByIndex(si); |
||||
if (!s || !("elements" in s)) return; |
||||
s.elements.splice(ei, 1); |
||||
activeElIndex = null; |
||||
markDirty(); triggerPreview(); |
||||
} |
||||
|
||||
function selectElement(si: number, ei: number) { |
||||
if (activeSecIndex === si && activeElIndex === ei) { |
||||
activeElIndex = null; |
||||
} else { |
||||
activeSecIndex = si; |
||||
activeElIndex = ei; |
||||
} |
||||
} |
||||
|
||||
function changeElType(si: number, ei: number, typeString: MonoDisplay.ElementTypeName) { |
||||
const el = getElementByIndex(si, ei); |
||||
if (!el) return; |
||||
const fresh = createNewElement(MonoDisplay.StringToElementType[typeString]); |
||||
Object.assign(el, fresh); |
||||
markDirty(); triggerPreview(); |
||||
} |
||||
|
||||
function setElField(si: number, ei: number, key: string, val: any) { |
||||
const el = getElementByIndex(si, ei); |
||||
if (!el) return; |
||||
(el as any)[key] = val; |
||||
markDirty(); triggerPreview(); |
||||
} |
||||
|
||||
function setElFlag(si: number, ei: number, key: string, val: any) { |
||||
const el = getElementByIndex(si, ei); |
||||
if (!el) return; |
||||
(el as any).flags[key] = val; |
||||
markDirty(); triggerPreview(); |
||||
} |
||||
|
||||
// --- DEMO --------------------------------------------------------------------
|
||||
const DEMO: Record<string, () => MonoDisplayFile> = { |
||||
Checkerboard() { |
||||
const pixels = new Uint8Array(W * H); |
||||
for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) pixels[y * W + x] = (x + y) % 2; |
||||
return new MonoDisplayFile([{ |
||||
sectionType: MonoDisplay.SectionType.ElementsAlways, |
||||
elements: [{ type: MonoDisplay.ElementType.Image2D, image: { pixels, height: H, width: W }, xOffset: 0, yOffset: 0 }], |
||||
flags: { clearBuffer: true, drawFront: true, drawBack: true }, |
||||
}]); |
||||
}, |
||||
Blink() { |
||||
return new MonoDisplayFile([{ |
||||
sectionType: MonoDisplay.SectionType.ElementsAlways, |
||||
elements: [{ |
||||
type: MonoDisplay.ElementType.Animation, width: W, height: H, updateInterval: 12, xOffset: 0, yOffset: 0, |
||||
frames: [ |
||||
{ pixels: new Uint8Array(W * H).fill(1), width: 0, height: 0 }, |
||||
{ pixels: new Uint8Array(W * H).fill(0), width: 0, height: 0 }, |
||||
], |
||||
}], |
||||
flags: { clearBuffer: true, drawFront: true, drawBack: true }, |
||||
}]); |
||||
}, |
||||
Text() { |
||||
return new MonoDisplayFile([{ |
||||
sectionType: MonoDisplay.SectionType.ElementsAlways, |
||||
elements: [{ type: MonoDisplay.ElementType.ClippedText, fontIndex: 0, text: "Hello, World!", xOffset: 0, yOffset: 16, width: 60, height: 10 }], |
||||
flags: { clearBuffer: true, drawFront: true, drawBack: true }, |
||||
}]); |
||||
}, |
||||
Scrolltext() { |
||||
return new MonoDisplayFile([{ |
||||
sectionType: MonoDisplay.SectionType.ElementsAlways, |
||||
elements: [{ |
||||
type: MonoDisplay.ElementType.HScrollText, fontIndex: 0, |
||||
text: "MONO DISPLAY - scrolling ticker - 🚀 ", |
||||
xOffset: 0, yOffset: 32, width: W, height: 16, scrollSpeed: 50, |
||||
flags: { endless: true, invertDirection: false, padStart: false, padEnd: false }, |
||||
}], |
||||
flags: { clearBuffer: true, drawFront: true, drawBack: true }, |
||||
}]); |
||||
}, |
||||
Time() { |
||||
return new MonoDisplayFile([{ |
||||
sectionType: MonoDisplay.SectionType.ElementsAlways, |
||||
elements: [ |
||||
{ type: MonoDisplay.ElementType.CurrentTime, fontIndex: 0, flags: {}, xOffset: 0, yOffset: 8, width: W, height: 16, utcOffsetMinutes: 120 }, |
||||
{ type: MonoDisplay.ElementType.CurrentTime, fontIndex: 0, flags: { clock12h: true }, xOffset: 40, yOffset: 16, width: W, height: 16, utcOffsetMinutes: 120 }, |
||||
{ type: MonoDisplay.ElementType.CurrentTime, fontIndex: 0, flags: { clock12h: true, showHours: true }, xOffset: 0, yOffset: 24, width: W, height: 16, utcOffsetMinutes: 120 }, |
||||
{ type: MonoDisplay.ElementType.CurrentTime, fontIndex: 0, flags: { clock12h: true, showHours: false }, xOffset: 40, yOffset: 32, width: W, height: 16, utcOffsetMinutes: 120 }, |
||||
{ type: MonoDisplay.ElementType.CurrentTime, fontIndex: 0, flags: { clock12h: true, showSeconds: true }, xOffset: 80, yOffset: 32, width: W, height: 16, utcOffsetMinutes: 120 }, |
||||
], |
||||
flags: { clearBuffer: true, drawFront: true, drawBack: true }, |
||||
}]); |
||||
}, |
||||
}; |
||||
|
||||
// --- Preview -----------------------------------------------------------------
|
||||
let previewTimer: ReturnType<typeof setTimeout> | null = null; |
||||
|
||||
function triggerPreview() { |
||||
if (previewTimer) clearTimeout(previewTimer); |
||||
previewTimer = setTimeout(() => { |
||||
try { buildPreview(); } catch (e) { console.warn("preview", e); } |
||||
}, 150); |
||||
} |
||||
|
||||
function buildPreview() { |
||||
if (!window.MonoDisplay) return; |
||||
if (!window._mdDriver) |
||||
window._mdDriver = new MonoDisplay.MonoDisplayDriver("canvas_root", { onColor: "#EC0", offColor: "#000", fps: 25 }); |
||||
window._mdDriver.load(() => Promise.resolve(file.toBuffer())); |
||||
} |
||||
|
||||
// --- Load / Export -----------------------------------------------------------
|
||||
function loadBin(input: HTMLInputElement) { |
||||
const binFile = input.files?.[0]; |
||||
if (!binFile) return; |
||||
currentFilename = binFile.name; |
||||
const filenameEl = document.getElementById("filename"); |
||||
if (filenameEl) filenameEl.textContent = binFile.name; |
||||
const reader = new FileReader(); |
||||
reader.onload = e => { |
||||
try { |
||||
const parsed = new window.MonoDisplay.MonoDisplayParser().parse(e.target!.result as ArrayBuffer); |
||||
file = new MonoDisplayFile(parsed.sections); |
||||
activeSecIndex = null; |
||||
activeElIndex = null; |
||||
triggerPreview(); |
||||
m.redraw(); |
||||
} catch (err) { |
||||
console.warn("Could not parse sections from bin:", err); |
||||
} |
||||
}; |
||||
reader.readAsArrayBuffer(binFile); |
||||
input.value = ""; |
||||
markClean(); |
||||
} |
||||
|
||||
function exportBin() { |
||||
if (!window.MonoDisplay) { alert("MonoDisplay library not loaded."); return; } |
||||
const blob = new Blob([file.toBuffer() as any], { type: "application/octet-stream" }); |
||||
const a = document.createElement("a"); |
||||
a.href = URL.createObjectURL(blob); |
||||
a.download = currentFilename.replace(/\.bin$/, "") + ".bin"; |
||||
a.click(); |
||||
markClean(); |
||||
} |
||||
|
||||
// --- Mithril Components -------------------------------------------------------
|
||||
|
||||
function FieldInput(si: number, ei: number, field: ElFieldMeta, el: MonoDisplay.MonoFormatElement): m.Vnode { |
||||
const val = (el as any)[field.key] ?? field.default; |
||||
switch (field.type) { |
||||
case "text": |
||||
return m("textarea", { |
||||
onchange: (e: Event) => setElField(si, ei, field.key, (e.target as HTMLTextAreaElement).value), |
||||
}, val); |
||||
case "font": |
||||
return m("select", { |
||||
onchange: (e: Event) => setElField(si, ei, field.key, +(e.target as HTMLSelectElement).value), |
||||
}, [ |
||||
...DEFAULT_FONTS.map((name, i) => m("option", { value: i, selected: val === i }, name)), |
||||
...getCustomFonts().map(cf => m("option", { value: cf.index, selected: val === cf.index }, cf.fontname)), |
||||
]); |
||||
case "list": |
||||
return m("span"); // rendered by dedicated editor
|
||||
default: |
||||
return m("input[type=number]", { |
||||
value: val, |
||||
onchange: (e: Event) => setElField(si, ei, field.key, +(e.target as HTMLInputElement).value), |
||||
}); |
||||
} |
||||
} |
||||
|
||||
// --- Shared pixel canvas ------------------------------------------------------
|
||||
|
||||
const PIXEL_SCALE = 4; |
||||
|
||||
function getPixelIndex(img: MonoDisplay.MonoFormatPixelImage, x: number, y: number): number { |
||||
return y * img.width + x; |
||||
} |
||||
|
||||
function drawPixelCanvas(canvas: HTMLCanvasElement, img: MonoDisplay.MonoFormatPixelImage) { |
||||
const ctx = canvas.getContext("2d")!; |
||||
ctx.fillStyle = "#000"; |
||||
ctx.fillRect(0, 0, canvas.width, canvas.height); |
||||
ctx.fillStyle = "#EC0"; |
||||
for (let y = 0; y < img.height; y++) { |
||||
for (let x = 0; x < img.width; x++) { |
||||
if (img.pixels[getPixelIndex(img, x, y)]) { |
||||
ctx.fillRect(x * PIXEL_SCALE, y * PIXEL_SCALE, PIXEL_SCALE, PIXEL_SCALE); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
interface PixelCanvasState { drawing: boolean; drawValue: number; } |
||||
|
||||
const PixelCanvas: m.Component<{ img: MonoDisplay.MonoFormatPixelImage; onpaint: () => void }, PixelCanvasState> = { |
||||
drawing: false, |
||||
drawValue: 1, |
||||
|
||||
view({ attrs: { img, onpaint }, state }) { |
||||
function pixelFromEvent(e: MouseEvent): { x: number; y: number } | null { |
||||
const canvas = e.currentTarget as HTMLCanvasElement; |
||||
const rect = canvas.getBoundingClientRect(); |
||||
const scaleX = canvas.width / rect.width; |
||||
const scaleY = canvas.height / rect.height; |
||||
const x = Math.floor((e.clientX - rect.left) * scaleX / PIXEL_SCALE); |
||||
const y = Math.floor((e.clientY - rect.top) * scaleY / PIXEL_SCALE); |
||||
if (x < 0 || x >= img.width || y < 0 || y >= img.height) return null; |
||||
return { x, y }; |
||||
} |
||||
|
||||
function paint(e: MouseEvent) { |
||||
const p = pixelFromEvent(e); |
||||
if (!p) return; |
||||
img.pixels[getPixelIndex(img, p.x, p.y)] = state.drawValue; |
||||
onpaint(); |
||||
drawPixelCanvas(e.currentTarget as HTMLCanvasElement, img); |
||||
} |
||||
|
||||
return m("canvas.pixel-editor", { |
||||
width: img.width * PIXEL_SCALE, |
||||
height: img.height * PIXEL_SCALE, |
||||
oncreate: ({ dom }: m.VnodeDOM) => drawPixelCanvas(dom as HTMLCanvasElement, img), |
||||
onupdate: ({ dom }: m.VnodeDOM) => drawPixelCanvas(dom as HTMLCanvasElement, img), |
||||
onmousedown: (e: MouseEvent) => { |
||||
state.drawing = true; |
||||
const p = pixelFromEvent(e); |
||||
if (p) state.drawValue = img.pixels[getPixelIndex(img, p.x, p.y)] ? 0 : 1; |
||||
paint(e); |
||||
}, |
||||
onmousemove: (e: MouseEvent) => { if (state.drawing) paint(e); }, |
||||
onmouseup: () => { state.drawing = false; }, |
||||
onmouseleave: () => { state.drawing = false; }, |
||||
ondragover: (e: DragEvent) => { |
||||
e.preventDefault(); |
||||
e.dataTransfer!.dropEffect = "copy"; |
||||
}, |
||||
|
||||
ondrop: (e: DragEvent) => { |
||||
e.preventDefault(); |
||||
const file = e.dataTransfer?.files[0]; |
||||
if (!file || !file.type.startsWith("image/")) return; |
||||
|
||||
const url = URL.createObjectURL(file); |
||||
const htmlImg = new Image(); |
||||
htmlImg.onload = () => { |
||||
// Draw the dropped image into an offscreen canvas to read pixel data
|
||||
const offscreen = document.createElement("canvas"); |
||||
offscreen.width = htmlImg.width; |
||||
offscreen.height = htmlImg.height; |
||||
const ctx = offscreen.getContext("2d")!; |
||||
ctx.drawImage(htmlImg, 0, 0); |
||||
|
||||
const imageData = ctx.getImageData(0, 0, htmlImg.width, htmlImg.height); |
||||
|
||||
// Convert to your pixel format — adjust this to match your img structure
|
||||
const scale = Math.min(1, 120 / htmlImg.width, 60 / htmlImg.height); |
||||
const w = Math.round(htmlImg.width * scale); |
||||
const h = Math.round(htmlImg.height * scale); |
||||
|
||||
offscreen.width = w; |
||||
offscreen.height = h; |
||||
ctx.drawImage(htmlImg, 0, 0, w, h); // scales the image down while drawing
|
||||
img.width = w; |
||||
img.height = h; |
||||
// then read imageData from the scaled offscreen canvas as before
|
||||
img.pixels = new Uint8Array(w * h).map((_, i) => { |
||||
const r = imageData.data[i * 4]; |
||||
const g = imageData.data[i * 4 + 1]; |
||||
const b = imageData.data[i * 4 + 2]; |
||||
const a = imageData.data[i * 4 + 3]; |
||||
// transparent = 0, dark pixels = 1, light pixels = 0
|
||||
return a > 128 && (r * 299 + g * 587 + b * 114) < 128_000 ? 0 : 1; |
||||
}); |
||||
|
||||
URL.revokeObjectURL(url); |
||||
m.redraw(); |
||||
}; |
||||
htmlImg.src = url; |
||||
}, |
||||
}); |
||||
}, |
||||
}; |
||||
|
||||
// --- Image2D editor -----------------------------------------------------------
|
||||
|
||||
const Image2DEditor: m.Component<{ si: number; ei: number; el: MonoDisplay.MonoFormatImage2D }> = { |
||||
view({ attrs: { si, ei, el } }) { |
||||
if (!el.image) { |
||||
const w = (el as any).width || W; |
||||
const h = (el as any).height || H; |
||||
el.image = { pixels: new Uint8Array(w * h), width: w, height: h }; |
||||
} |
||||
return m(PixelCanvas, { |
||||
img: el.image, |
||||
onpaint: () => { markDirty(); triggerPreview(); }, |
||||
}); |
||||
}, |
||||
}; |
||||
|
||||
// --- Animation editor ---------------------------------------------------------
|
||||
|
||||
interface AnimationEditorState { activeFrame: number; } |
||||
|
||||
const AnimationEditor: m.Component<{ si: number; ei: number; el: MonoDisplay.MonoFormatAnimation }, AnimationEditorState> = { |
||||
activeFrame: 0, |
||||
|
||||
view({ attrs: { si, ei, el }, state }) { |
||||
const w = el.width || W; |
||||
const h = el.height || H; |
||||
if (!el.frames) el.frames = []; |
||||
if (!el.frames.length) { |
||||
el.frames.push({ pixels: new Uint8Array(w * h), width: w, height: h }); |
||||
} |
||||
state.activeFrame = Math.min(state.activeFrame, el.frames.length - 1); |
||||
const frame = el.frames[state.activeFrame]; |
||||
|
||||
function addFrame() { |
||||
el.frames.push({ pixels: new Uint8Array(w * h), width: w, height: h }); |
||||
state.activeFrame = el.frames.length - 1; |
||||
markDirty(); triggerPreview(); m.redraw(); |
||||
} |
||||
|
||||
function removeFrame(fi: number) { |
||||
el.frames.splice(fi, 1); |
||||
if (!el.frames.length) |
||||
el.frames.push({ pixels: new Uint8Array(w * h), width: w, height: h }); |
||||
state.activeFrame = Math.min(state.activeFrame, el.frames.length - 1); |
||||
markDirty(); triggerPreview(); |
||||
} |
||||
|
||||
return m(".anim-editor", |
||||
m(".anim-frame-tabs", { key: "tabs" }, |
||||
el.frames.map((_, fi) => |
||||
m(".anim-frame-tab", { |
||||
class: fi === state.activeFrame ? "active" : "", |
||||
onclick: () => { state.activeFrame = fi; }, |
||||
}, |
||||
m("span", fi + 1), |
||||
el.frames.length > 1 |
||||
? m("button.x-btn-sm", { |
||||
onclick: (e: Event) => { e.stopPropagation(); removeFrame(fi); }, |
||||
}, "×") |
||||
: null, |
||||
) |
||||
), |
||||
m("button.add-el", { onclick: addFrame }, "+ frame"), |
||||
), |
||||
m("div", { key: state.activeFrame }, |
||||
m(PixelCanvas, { |
||||
img: frame, |
||||
onpaint: () => { markDirty(); triggerPreview(); }, |
||||
}), |
||||
), |
||||
); |
||||
}, |
||||
}; |
||||
|
||||
const ElementItem: m.Component<{ si: number; ei: number; el: MonoDisplay.MonoFormatElement }> = { |
||||
view({ attrs: { si, ei, el } }) { |
||||
const isActive = activeSecIndex === si && activeElIndex === ei; |
||||
const typeStr = MonoDisplay.ElementTypeToString[el.type]; |
||||
const fields = EL_FIELDS[typeStr] || []; |
||||
const flags = EL_FLAGS[typeStr] || []; |
||||
|
||||
return m(".el-item", { class: isActive ? "active" : "" }, |
||||
m(".el-item-hdr", { onclick: () => selectElement(si, ei) }, |
||||
m("span.el-type", typeStr), |
||||
m("span.el-name", elSummary(el)), |
||||
m("button.x-btn", { |
||||
title: "Remove element", |
||||
onclick: (e: Event) => { e.stopPropagation(); removeElement(si, ei); }, |
||||
}, "X"), |
||||
), |
||||
isActive && m(".el-fields", |
||||
m(".field.full", |
||||
m("label", "Type"), |
||||
m("select", { |
||||
onchange: (e: Event) => changeElType(si, ei, (e.target as HTMLSelectElement).value as MonoDisplay.ElementTypeName), |
||||
}, |
||||
EL_TYPES.map(t => |
||||
m("option", { value: MonoDisplay.ElementTypeToString[t], selected: t === el.type }, MonoDisplay.ElementTypeToString[t]) |
||||
) |
||||
), |
||||
), |
||||
m(".fields-grid", |
||||
fields.map(field => |
||||
m(`.field${field.full ? ".full" : ""}`, |
||||
m("label", field.label), |
||||
FieldInput(si, ei, field, el), |
||||
) |
||||
) |
||||
), |
||||
flags.length ? m(".field.full", |
||||
m("label", "Flags"), |
||||
m(".flags-row", |
||||
flags.map(flag => |
||||
m("label.flag-check", |
||||
m("input[type=checkbox]", { |
||||
checked: !!(el as any).flags?.[flag.key], |
||||
onchange: (e: Event) => setElFlag(si, ei, flag.key, (e.target as HTMLInputElement).checked), |
||||
}), |
||||
" " + flag.label, |
||||
) |
||||
) |
||||
), |
||||
) : null, |
||||
el.type === MonoDisplay.ElementType.Image2D |
||||
? m(".field.full", |
||||
m("label", "Pixels"), |
||||
m(Image2DEditor, { si, ei, el: el as MonoDisplay.MonoFormatImage2D }), |
||||
) |
||||
: el.type === MonoDisplay.ElementType.Animation |
||||
? m(".field.full", |
||||
m("label", "Frames"), |
||||
m(AnimationEditor, { si, ei, el: el as MonoDisplay.MonoFormatAnimation }), |
||||
) |
||||
: null, |
||||
), |
||||
); |
||||
}, |
||||
}; |
||||
|
||||
const SectionCard: m.Component<{ si: number }> = { |
||||
view({ attrs: { si } }) { |
||||
const section = file.sections[si]; |
||||
if (!section) return null; |
||||
const isActive = activeSecIndex === si; |
||||
const typeStr = MonoDisplay.SectionTypeToString[section.sectionType]; |
||||
|
||||
const hdr = m(`.sec-hdr${isActive ? ".active" : ""}`, { onclick: () => toggleSection(si) }, |
||||
m("span.sec-arrow", "▶"), |
||||
m("span.sec-label", typeStr), |
||||
m("button.x-btn", { |
||||
title: "Remove section", |
||||
onclick: (e: Event) => { e.stopPropagation(); removeSection(si); }, |
||||
}, "X"), |
||||
); |
||||
|
||||
if (section.sectionType === MonoDisplay.SectionType.CustomFont) { |
||||
return m(`.sec-card.open${isActive ? ".active" : ""}`, |
||||
m(`.sec-hdr${isActive ? ".active" : ""}`, { onclick: () => toggleSection(si) }, |
||||
m("span.sec-arrow", "▶"), |
||||
m("span.sec-label", "Custom Font"), |
||||
m("span.sec-badge", "1 el"), |
||||
m("button.x-btn", { |
||||
title: "Remove section", |
||||
onclick: (e: Event) => { e.stopPropagation(); removeSection(si); }, |
||||
}, "X"), |
||||
), |
||||
m(".el-list", "?"), |
||||
); |
||||
} |
||||
|
||||
const elSection = section as MonoDisplay.MonoFormatElementsAlways | MonoDisplay.MonoFormatElementsTimespan; |
||||
|
||||
return m(`.sec-card.open${isActive ? ".active" : ""}`, |
||||
m(`.sec-hdr${isActive ? ".active" : ""}`, { onclick: () => toggleSection(si) }, |
||||
m("span.sec-arrow", "▶"), |
||||
m("span.sec-label", typeStr), |
||||
m("span.sec-badge", `${elSection.elements.length} el`), |
||||
m("button.x-btn", { |
||||
title: "Remove section", |
||||
onclick: (e: Event) => { e.stopPropagation(); removeSection(si); }, |
||||
}, "X"), |
||||
), |
||||
section.sectionType === MonoDisplay.SectionType.ElementsTimespan |
||||
? m(".el-list", |
||||
([["Start Time", "startTimestamp"], ["Stop Time", "endTimestamp"]] as [string, string][]) |
||||
.map(([label, key]) => { |
||||
let posix: bigint = (section as any)[key]; |
||||
if (!posix) { |
||||
posix = BigInt(Math.floor(Date.now() / 1000)); |
||||
setSectionField(si, key, posix); |
||||
} |
||||
const dtLocal = new Date(Number(posix) * 1000).toISOString().slice(0, 16); |
||||
return m(".field", |
||||
m("label", label), |
||||
m("input[type=datetime-local]", { |
||||
value: dtLocal, |
||||
onchange: (e: Event) => { |
||||
const ms = new Date((e.target as HTMLInputElement).value).getTime(); |
||||
setSectionField(si, key, BigInt(Math.floor(ms / 1000))); |
||||
}, |
||||
}), |
||||
); |
||||
}) |
||||
) |
||||
: null, |
||||
m(".el-list", |
||||
elSection.elements.map((el, ei) => m(ElementItem, { key: String(ei), si, ei, el })), |
||||
m("button.add-el", { onclick: () => addElement(si) }, "+ add element"), |
||||
), |
||||
); |
||||
}, |
||||
}; |
||||
|
||||
const SectionsList: m.Component = { |
||||
view() { |
||||
if (!file.sections.length) |
||||
return m(".empty-state", m.trust("No sections yet.<br/>Use <b>Add section</b> to get started.")); |
||||
if (activeSecIndex === null && file.sections.length === 1) activeSecIndex = 0; |
||||
return m("", file.sections.map((_, si) => m(SectionCard, { key: String(si), si }))); |
||||
}, |
||||
}; |
||||
|
||||
const MetaPanel: m.Component = { |
||||
view() { |
||||
const section = getSectionByIndex(activeSecIndex); |
||||
return m("", |
||||
m(".meta-row", |
||||
m("label", "Selected section"), |
||||
section |
||||
? m("select.meta-val.green", { |
||||
value: MonoDisplay.SectionTypeToString[section.sectionType], |
||||
onchange: (e: Event) => |
||||
activeSecIndex !== null && setSectionType(activeSecIndex, (e.target as HTMLSelectElement).value), |
||||
}, |
||||
Object.values(MonoDisplay.SectionTypeToString).map(name => |
||||
m("option", { value: name, selected: name === MonoDisplay.SectionTypeToString[section.sectionType] }, name) |
||||
) |
||||
) |
||||
: m("span.meta-val.green", "-"), |
||||
), |
||||
m(".meta-row", |
||||
m("label", "Elements"), |
||||
m("span.meta-val", section && "elements" in section ? `${section.elements.length} element(s)` : "-"), |
||||
), |
||||
m(".meta-row", |
||||
m("label", "Section flags"), |
||||
(["drawFront", "drawBack", "clearBuffer"] as const).map((flag, i) => |
||||
m("label.flag-check", { style: i > 0 ? "margin-left:-8px" : "" }, |
||||
m("input[type=checkbox]", { |
||||
checked: section ? !!(section as any).flags?.[flag] : false, |
||||
onchange: (e: Event) => setSectionFlag(flag, (e.target as HTMLInputElement).checked), |
||||
}), |
||||
" " + flag, |
||||
) |
||||
), |
||||
), |
||||
); |
||||
}, |
||||
}; |
||||
|
||||
let activeDemoName: string | null = null; |
||||
|
||||
const DemoButtons: m.Component = { |
||||
view() { |
||||
return Object.entries(DEMO).map(([name, fn]) => |
||||
m("button.tb-btn", { |
||||
style: activeDemoName === name ? "color:#33ff66" : "", |
||||
onclick: async () => { |
||||
const ok = await guardDirty(); |
||||
if (!ok) return; |
||||
file = fn(); |
||||
activeSecIndex = null; |
||||
activeElIndex = null; |
||||
currentFilename = name.toLowerCase(); |
||||
const filenameEl = document.getElementById("filename"); |
||||
if (filenameEl) filenameEl.textContent = currentFilename; |
||||
activeDemoName = name; |
||||
markClean(); |
||||
triggerPreview(); |
||||
m.redraw(); |
||||
}, |
||||
}, name) |
||||
); |
||||
}, |
||||
}; |
||||
|
||||
// --- Mount --------------------------------------------------------------------
|
||||
m.mount(document.getElementById("sections-wrap")!, SectionsList); |
||||
m.mount(document.getElementById("demo-btns")!, DemoButtons); |
||||
m.mount(document.getElementById("sec-meta")!, MetaPanel); |
||||
|
||||
async function clearAll() { |
||||
if (isDirty && file.sections.length) { |
||||
const ok = await showConfirm("Clear all sections?", [ |
||||
{ label: "Cancel", action: false }, |
||||
{ label: "Clear", primary: true, action: true }, |
||||
]); |
||||
if (!ok) return; |
||||
} |
||||
file = new MonoDisplayFile([]); |
||||
activeSecIndex = null; |
||||
activeElIndex = null; |
||||
currentFilename = "untitled"; |
||||
const filenameEl = document.getElementById("filename"); |
||||
if (filenameEl) filenameEl.textContent = "untitled"; |
||||
localStorage.removeItem(STORAGE_KEY); |
||||
markClean(); |
||||
triggerPreview(); |
||||
m.redraw(); |
||||
} |
||||
|
||||
// Expose globals referenced by topbar inline handlers
|
||||
Object.assign(window, { loadBin, exportBin, addSection, clearAll, cycleTheme }); |
||||
|
||||
// window.addEventListener("beforeunload", (e) => {
|
||||
// if (isDirty) e.preventDefault();
|
||||
// });
|
||||
|
||||
loadFromStorage(); |
||||
triggerPreview(); |
||||
@ -0,0 +1,682 @@ |
||||
:root { |
||||
--bg: #111; |
||||
--bg-bar: #1a1a1a; |
||||
--bg-raised: #161616; |
||||
--bg-hover: #1b1b1b; |
||||
--bg-hover2: #222; |
||||
--bg-sunken: #141414; |
||||
--bg-accent: #141e14; |
||||
--bg-active: #1e2e1e; |
||||
--bg-deep: #0f0f0f; |
||||
--bg-input: #0a0a0a; |
||||
--bg-canvas: #000; |
||||
--bg-xhover: #1e1010; |
||||
--bg-overlay: rgba(0,0,0,.6); |
||||
--bd: #2a2a2a; |
||||
--bd-inner: #1e1e1e; |
||||
--bd-deep: #1c1c1c; |
||||
--bd-card: #222; |
||||
--bd-btn: #2d2d2d; |
||||
--bd-type: #252525; |
||||
--bd-active: #2b3d2b; |
||||
--bd-hover: #444; |
||||
--bd-strong: #333; |
||||
--tx: #ccc; |
||||
--tx-hover: #bbb; |
||||
--tx-sub: #888; |
||||
--tx-label: #777; |
||||
--tx-meta: #666; |
||||
--tx-dim: #555; |
||||
--tx-faint: #444; |
||||
--tx-ghost: #333; |
||||
--tx-file: #3a3a3a; |
||||
--tx-empty: #2e2e2e; |
||||
--ac: #33ff66; |
||||
--dirty: #886622 |
||||
} |
||||
|
||||
@media (prefers-color-scheme: light) { |
||||
:root:not([data-theme="dark"]) { |
||||
--bg: #f5f5f5; |
||||
--bg-bar: #e8e8e8; |
||||
--bg-raised: #efefef; |
||||
--bg-hover: #e5e5e5; |
||||
--bg-hover2: #e0e0e0; |
||||
--bg-sunken: #ebebeb; |
||||
--bg-accent: #e8f5e8; |
||||
--bg-active: #dff0df; |
||||
--bg-deep: #f0f0f0; |
||||
--bg-input: #fff; |
||||
--bg-canvas: #fff; |
||||
--bg-xhover: #ffe8e8; |
||||
--bg-overlay: rgba(0,0,0,.4); |
||||
--bd: #d0d0d0; |
||||
--bd-inner: #ddd; |
||||
--bd-deep: #e0e0e0; |
||||
--bd-card: #ddd; |
||||
--bd-btn: #ccc; |
||||
--bd-type: #d8d8d8; |
||||
--bd-active: #7dc87d; |
||||
--bd-hover: #bbb; |
||||
--bd-strong: #ccc; |
||||
--tx: #222; |
||||
--tx-hover: #333; |
||||
--tx-sub: #555; |
||||
--tx-label: #666; |
||||
--tx-meta: #777; |
||||
--tx-dim: #888; |
||||
--tx-faint: #999; |
||||
--tx-ghost: #aaa; |
||||
--tx-file: #aaa; |
||||
--tx-empty: #bbb; |
||||
--ac: #1a9940; |
||||
--dirty: #b37a00 |
||||
} |
||||
} |
||||
|
||||
[data-theme="light"] { |
||||
--bg: #f5f5f5; |
||||
--bg-bar: #e8e8e8; |
||||
--bg-raised: #efefef; |
||||
--bg-hover: #e5e5e5; |
||||
--bg-hover2: #e0e0e0; |
||||
--bg-sunken: #ebebeb; |
||||
--bg-accent: #e8f5e8; |
||||
--bg-active: #dff0df; |
||||
--bg-deep: #f0f0f0; |
||||
--bg-input: #fff; |
||||
--bg-canvas: #fff; |
||||
--bg-xhover: #ffe8e8; |
||||
--bg-overlay: rgba(0,0,0,.4); |
||||
--bd: #d0d0d0; |
||||
--bd-inner: #ddd; |
||||
--bd-deep: #e0e0e0; |
||||
--bd-card: #ddd; |
||||
--bd-btn: #ccc; |
||||
--bd-type: #d8d8d8; |
||||
--bd-active: #7dc87d; |
||||
--bd-hover: #bbb; |
||||
--bd-strong: #ccc; |
||||
--tx: #222; |
||||
--tx-hover: #333; |
||||
--tx-sub: #555; |
||||
--tx-label: #666; |
||||
--tx-meta: #777; |
||||
--tx-dim: #888; |
||||
--tx-faint: #999; |
||||
--tx-ghost: #aaa; |
||||
--tx-file: #aaa; |
||||
--tx-empty: #bbb; |
||||
--ac: #1a9940; |
||||
--dirty: #b37a00 |
||||
} |
||||
|
||||
*, |
||||
*::before, |
||||
*::after { |
||||
box-sizing: border-box; |
||||
margin: 0; |
||||
padding: 0 |
||||
} |
||||
|
||||
body { |
||||
background: var(--bg); |
||||
color: var(--tx); |
||||
font-family: monospace; |
||||
height: 100vh; |
||||
display: flex; |
||||
flex-direction: column; |
||||
overflow: hidden; |
||||
font-size: 12px |
||||
} |
||||
|
||||
#topbar { |
||||
height: 36px; |
||||
background: var(--bg-bar); |
||||
border-bottom: 1px solid var(--bd); |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 8px; |
||||
padding: 0 12px; |
||||
flex-shrink: 0 |
||||
} |
||||
|
||||
#topbar .app-name { |
||||
color: var(--tx-dim); |
||||
font-size: 11px; |
||||
letter-spacing: .12em; |
||||
text-transform: uppercase; |
||||
margin-right: 4px |
||||
} |
||||
|
||||
.tb-btn { |
||||
background: var(--bg-raised); |
||||
color: var(--tx-sub); |
||||
border: 1px solid var(--bd-btn); |
||||
border-radius: 3px; |
||||
padding: 3px 10px; |
||||
font-family: monospace; |
||||
font-size: 11px; |
||||
cursor: pointer; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 5px; |
||||
white-space: nowrap |
||||
} |
||||
|
||||
.tb-btn:hover { |
||||
background: var(--bg-hover2); |
||||
color: var(--tx-hover); |
||||
border-color: var(--bd-hover) |
||||
} |
||||
|
||||
.tb-btn svg { |
||||
width: 13px; |
||||
height: 13px; |
||||
stroke: currentColor; |
||||
fill: none; |
||||
stroke-width: 1.8; |
||||
stroke-linecap: round; |
||||
stroke-linejoin: round; |
||||
flex-shrink: 0 |
||||
} |
||||
|
||||
#file-input { |
||||
display: none |
||||
} |
||||
|
||||
#filename { |
||||
color: var(--tx-file); |
||||
font-size: 11px; |
||||
margin-left: 2px; |
||||
max-width: 200px; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap |
||||
} |
||||
|
||||
.tb-sep { |
||||
width: 1px; |
||||
height: 18px; |
||||
background: var(--bd) |
||||
} |
||||
|
||||
.dirty { |
||||
color: var(--dirty) !important |
||||
} |
||||
|
||||
#main { |
||||
flex: 1; |
||||
display: flex; |
||||
min-height: 0 |
||||
} |
||||
|
||||
#left { |
||||
width: 48%; |
||||
border-right: 1px solid var(--bd-inner); |
||||
display: flex; |
||||
flex-direction: column; |
||||
padding: 14px; |
||||
gap: 10px; |
||||
overflow-y: auto; |
||||
flex-shrink: 0 |
||||
} |
||||
|
||||
#display-box { |
||||
width: 100%; |
||||
aspect-ratio: 2/1; |
||||
background: var(--bg-canvas); |
||||
border: 1px solid var(--bd); |
||||
border-radius: 3px; |
||||
overflow: hidden |
||||
} |
||||
|
||||
#canvas_root { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: block; |
||||
image-rendering: pixelated; |
||||
image-rendering: crisp-edges |
||||
} |
||||
|
||||
.pv-label { |
||||
font-size: 10px; |
||||
color: var(--tx-ghost); |
||||
letter-spacing: .1em; |
||||
text-transform: uppercase |
||||
} |
||||
|
||||
#demo-btns { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
gap: 5px; |
||||
margin-top: 6px |
||||
} |
||||
#demo-btns > div { |
||||
display: contents; |
||||
} |
||||
|
||||
canvas.pixel-editor { |
||||
display: block; |
||||
cursor: crosshair; |
||||
image-rendering: pixelated; |
||||
max-width: 100%; |
||||
border: 1px solid var(--bd-inner); |
||||
} |
||||
.anim-editor { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 4px; |
||||
} |
||||
.anim-frame-tabs { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
gap: 3px; |
||||
align-items: center; |
||||
} |
||||
.anim-frame-tab { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 2px; |
||||
padding: 2px 6px; |
||||
border: 1px solid var(--bd-inner); |
||||
border-radius: 3px; |
||||
cursor: pointer; |
||||
font-size: 11px; |
||||
user-select: none; |
||||
} |
||||
.anim-frame-tab.active { |
||||
border-color: var(--accent, #EC0); |
||||
color: var(--accent, #EC0); |
||||
} |
||||
.x-btn-sm { |
||||
background: none; |
||||
border: none; |
||||
color: inherit; |
||||
cursor: pointer; |
||||
padding: 0 2px; |
||||
font-size: 13px; |
||||
line-height: 1; |
||||
opacity: 0.6; |
||||
} |
||||
.x-btn-sm:hover { opacity: 1; } |
||||
|
||||
#sec-meta { |
||||
background: var(--bg-sunken); |
||||
border: 1px solid var(--bd-inner); |
||||
border-radius: 3px; |
||||
padding: 8px 10px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 6px |
||||
} |
||||
|
||||
.meta-row { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 8px; |
||||
font-size: 11px |
||||
} |
||||
|
||||
.meta-row label { |
||||
color: var(--tx-faint); |
||||
min-width: 90px |
||||
} |
||||
|
||||
.meta-val { |
||||
color: var(--tx-meta) |
||||
} |
||||
|
||||
.green { |
||||
color: var(--ac) |
||||
} |
||||
|
||||
select.meta-val { |
||||
background: var(--bg-input); |
||||
color: var(--ac); |
||||
border: 1px solid var(--bd-inner); |
||||
border-radius: 3px; |
||||
padding: 1px 4px; |
||||
} |
||||
|
||||
.flag-check { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 5px; |
||||
font-size: 11px; |
||||
color: var(--tx-dim); |
||||
cursor: pointer |
||||
} |
||||
|
||||
.flag-check input { |
||||
accent-color: var(--ac); |
||||
cursor: pointer |
||||
} |
||||
|
||||
#right { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
min-height: 0; |
||||
overflow: hidden |
||||
} |
||||
|
||||
#right-hdr { |
||||
height: 36px; |
||||
background: var(--bg-sunken); |
||||
border-bottom: 1px solid var(--bd-inner); |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 0 10px; |
||||
gap: 6px; |
||||
flex-shrink: 0 |
||||
} |
||||
|
||||
#right-hdr .rh-title { |
||||
flex: 1; |
||||
color: var(--tx-faint); |
||||
font-size: 11px; |
||||
letter-spacing: .08em; |
||||
text-transform: uppercase |
||||
} |
||||
|
||||
#sections-wrap { |
||||
flex: 1; |
||||
overflow-y: auto; |
||||
padding: 8px |
||||
} |
||||
|
||||
.empty-state { |
||||
color: var(--tx-empty); |
||||
font-size: 11px; |
||||
padding: 28px 16px; |
||||
text-align: center; |
||||
line-height: 2 |
||||
} |
||||
|
||||
/* section card */ |
||||
.sec-card { |
||||
border: 1px solid var(--bd-card); |
||||
border-radius: 3px; |
||||
margin-bottom: 5px; |
||||
overflow: hidden |
||||
} |
||||
|
||||
.sec-card.active { |
||||
border-color: var(--bd-active) |
||||
} |
||||
|
||||
.sec-hdr { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 7px; |
||||
padding: 6px 8px; |
||||
cursor: pointer; |
||||
user-select: none; |
||||
background: var(--bg-raised); |
||||
position: relative |
||||
} |
||||
|
||||
.sec-hdr:hover { |
||||
background: var(--bg-hover) |
||||
} |
||||
|
||||
.sec-card.active .sec-hdr, |
||||
.sec-hdr.active { |
||||
background: var(--bg-active) |
||||
} |
||||
|
||||
.sec-arrow { |
||||
color: var(--tx-ghost); |
||||
font-size: 13px; |
||||
line-height: 1; |
||||
transition: transform .12s; |
||||
flex-shrink: 0 |
||||
} |
||||
|
||||
.sec-card.open .sec-arrow { |
||||
transform: rotate(90deg) |
||||
} |
||||
|
||||
.sec-label { |
||||
flex: 1; |
||||
color: var(--tx-label); |
||||
font-size: 11px |
||||
} |
||||
|
||||
.sec-badge { |
||||
font-size: 10px; |
||||
color: var(--ac); |
||||
border: 1px solid var(--bd-active); |
||||
background: var(--bg-accent); |
||||
border-radius: 2px; |
||||
padding: 1px 6px; |
||||
flex-shrink: 0 |
||||
} |
||||
|
||||
/* red × - section & element */ |
||||
.x-btn { |
||||
background: none; |
||||
border: none; |
||||
color: var(--bd); |
||||
cursor: pointer; |
||||
font-size: 15px; |
||||
line-height: 1; |
||||
padding: 2px 5px; |
||||
border-radius: 2px; |
||||
flex-shrink: 0; |
||||
transition: color .1s, background .1s |
||||
} |
||||
|
||||
.x-btn:hover { |
||||
color: #ff4444; |
||||
background: var(--bg-xhover) |
||||
} |
||||
|
||||
/* element */ |
||||
.el-list { |
||||
background: var(--bg-deep); |
||||
border-top: 1px solid var(--bd-deep); |
||||
padding: 6px |
||||
} |
||||
|
||||
.el-item { |
||||
border: 1px solid var(--bd-inner); |
||||
border-radius: 3px; |
||||
background: var(--bg-sunken); |
||||
margin-bottom: 4px; |
||||
overflow: hidden |
||||
} |
||||
|
||||
.el-item.active { |
||||
border-color: var(--ac) |
||||
} |
||||
|
||||
.el-item-hdr { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 6px; |
||||
padding: 5px 8px; |
||||
cursor: pointer |
||||
} |
||||
|
||||
.el-item-hdr:hover { |
||||
background: var(--bg-hover) |
||||
} |
||||
|
||||
.el-type { |
||||
font-size: 10px; |
||||
color: var(--tx-meta); |
||||
border: 1px solid var(--bd-type); |
||||
border-radius: 2px; |
||||
padding: 1px 6px; |
||||
flex-shrink: 0 |
||||
} |
||||
|
||||
.el-item.active .el-type { |
||||
color: var(--ac); |
||||
border-color: var(--bd-active) |
||||
} |
||||
|
||||
.el-name { |
||||
flex: 1; |
||||
color: var(--tx-dim); |
||||
font-size: 11px; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
max-width: 120px |
||||
} |
||||
|
||||
.el-fields { |
||||
padding: 6px 8px 8px; |
||||
border-top: 1px solid var(--bg-bar); |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 5px |
||||
} |
||||
|
||||
.fields-grid { |
||||
display: grid; |
||||
grid-template-columns: 1fr 1fr; |
||||
gap: 4px 10px |
||||
} |
||||
|
||||
.field { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 2px |
||||
} |
||||
|
||||
.field.full { |
||||
grid-column: 1/-1 |
||||
} |
||||
|
||||
.field>label { |
||||
font-size: 10px; |
||||
color: var(--tx-faint) |
||||
} |
||||
|
||||
.field input[type=text], |
||||
.field input[type=number], |
||||
.field input[type=datetime-local], |
||||
.field select, |
||||
.field textarea { |
||||
background: var(--bg-input); |
||||
color: var(--tx-sub); |
||||
border: 1px solid var(--bd-card); |
||||
border-radius: 2px; |
||||
padding: 3px 6px; |
||||
font-family: monospace; |
||||
font-size: 11px; |
||||
width: 100%; |
||||
outline: none |
||||
} |
||||
|
||||
.field input:focus, |
||||
.field select:focus, |
||||
.field textarea:focus { |
||||
border-color: var(--ac); |
||||
color: var(--tx) |
||||
} |
||||
|
||||
.field textarea { |
||||
resize: vertical; |
||||
min-height: 44px; |
||||
line-height: 1.4 |
||||
} |
||||
|
||||
.field select option { |
||||
background: var(--bg-bar); |
||||
color: var(--tx-ghost) |
||||
} |
||||
|
||||
.flags-row { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
gap: 10px; |
||||
padding: 2px 0 |
||||
} |
||||
|
||||
.add-el { |
||||
background: transparent; |
||||
color: var(--tx-ghost); |
||||
border: 1px dashed var(--bd-card); |
||||
border-radius: 3px; |
||||
padding: 5px 8px; |
||||
font-family: monospace; |
||||
font-size: 11px; |
||||
cursor: pointer; |
||||
width: 100%; |
||||
text-align: center; |
||||
margin-top: 2px |
||||
} |
||||
|
||||
.add-el:hover { |
||||
color: var(--tx-sub); |
||||
border-color: var(--bd-hover) |
||||
} |
||||
|
||||
/* confirm dialog */ |
||||
#confirm-overlay { |
||||
display: none; |
||||
position: fixed; |
||||
inset: 0; |
||||
background: var(--bg-overlay); |
||||
z-index: 100; |
||||
align-items: center; |
||||
justify-content: center |
||||
} |
||||
|
||||
#confirm-overlay.show { |
||||
display: flex |
||||
} |
||||
|
||||
#confirm-box { |
||||
background: var(--bg-bar); |
||||
border: 1px solid var(--bd-strong); |
||||
border-radius: 4px; |
||||
padding: 20px 24px; |
||||
max-width: 340px; |
||||
width: 90%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 14px |
||||
} |
||||
|
||||
#confirm-msg { |
||||
color: var(--tx-ghost); |
||||
font-size: 12px; |
||||
line-height: 1.6 |
||||
} |
||||
|
||||
#confirm-btns { |
||||
display: flex; |
||||
gap: 8px; |
||||
justify-content: flex-end |
||||
} |
||||
|
||||
.cb { |
||||
background: var(--bg-raised); |
||||
color: var(--tx-sub); |
||||
border: 1px solid var(--bd-btn); |
||||
border-radius: 3px; |
||||
padding: 4px 14px; |
||||
font-family: monospace; |
||||
font-size: 11px; |
||||
cursor: pointer |
||||
} |
||||
|
||||
.cb:hover { |
||||
background: var(--bg-hover2); |
||||
color: var(--tx-hover) |
||||
} |
||||
|
||||
.cb.primary { |
||||
border-color: var(--bd-active); |
||||
color: var(--ac) |
||||
} |
||||
|
||||
.cb.primary:hover { |
||||
background: var(--bg-active) |
||||
} |
||||
@ -0,0 +1,29 @@ |
||||
{ |
||||
"compilerOptions": { |
||||
// Environment setup & latest features |
||||
"lib": ["ESNext", "DOM"], |
||||
"target": "ESNext", |
||||
"module": "Preserve", |
||||
"moduleDetection": "force", |
||||
"jsx": "react-jsx", |
||||
"allowJs": true, |
||||
|
||||
// Bundler mode |
||||
"moduleResolution": "bundler", |
||||
"allowImportingTsExtensions": true, |
||||
"verbatimModuleSyntax": true, |
||||
"noEmit": true, |
||||
|
||||
// Best practices |
||||
"strict": true, |
||||
"skipLibCheck": true, |
||||
"noFallthroughCasesInSwitch": true, |
||||
"noUncheckedIndexedAccess": true, |
||||
"noImplicitOverride": true, |
||||
|
||||
// Some stricter flags (disabled by default) |
||||
"noUnusedLocals": false, |
||||
"noUnusedParameters": false, |
||||
"noPropertyAccessFromIndexSignature": false |
||||
} |
||||
} |
||||
Loading…
Reference in new issue