diff --git a/ts-editor/index.html b/ts-editor/index.html index d8c8633..3661499 100644 --- a/ts-editor/index.html +++ b/ts-editor/index.html @@ -11,7 +11,6 @@ -
MonoDisplay
@@ -53,10 +52,13 @@
-
- preview · 120 × 60 + preview · +
@@ -88,7 +90,6 @@
- - -
- diff --git a/ts-editor/src/browser.ts b/ts-editor/src/browser.ts index e50c1d1..57455e5 100644 --- a/ts-editor/src/browser.ts +++ b/ts-editor/src/browser.ts @@ -26,7 +26,7 @@ import { } from "libmonoformat"; -const W = 120, H = 60; +let W = 120, H = 60; // --- State ------------------------------------------------------------------- let file: MonoDisplayFile = new MonoDisplayFile([]); @@ -185,6 +185,14 @@ async function guardDirty(): Promise { ); } +function changeDisplayLayout() { + const sel = document.querySelector('.pv-label select') as HTMLSelectElement; + const [w, h] = sel.value.split('×').map(s => parseInt(s.trim())); + W = w as number; + H = h as number; + ((window as any)._mdDriver as MonoDisplayDriver).setSize(W, H); +} + // --- Helpers ----------------------------------------------------------------- function newSec(): MonoFormatElementsAlways { return { @@ -425,7 +433,8 @@ function triggerPreview() { function buildPreview() { if (!(window as any)._mdDriver) (window as any)._mdDriver = new MonoDisplayDriver("canvas_root", { onColor: "#EC0", offColor: "#000", fps: 25 }); - (window as any)._mdDriver.load(() => Promise.resolve(file.toBuffer())); + ((window as any)._mdDriver as MonoDisplayDriver).load(() => Promise.resolve(file.toBuffer())); + ((window as any)._mdDriver as MonoDisplayDriver).setSize(W, H); } // --- Load / Export ----------------------------------------------------------- @@ -933,7 +942,7 @@ async function clearAll() { } // Expose globals referenced by topbar inline handlers -Object.assign(window, { loadBin, exportBin, addSection, clearAll, cycleTheme }); +Object.assign(window, { loadBin, exportBin, addSection, clearAll, cycleTheme, changeDisplayLayout }); // window.addEventListener("beforeunload", (e) => { // if (isDirty) e.preventDefault(); diff --git a/ts-editor/style.css b/ts-editor/style.css index adebd99..21f9689 100644 --- a/ts-editor/style.css +++ b/ts-editor/style.css @@ -11,7 +11,7 @@ --bg-input: #0a0a0a; --bg-canvas: #000; --bg-xhover: #1e1010; - --bg-overlay: rgba(0,0,0,.6); + --bg-overlay: rgba(0, 0, 0, .6); --bd: #2a2a2a; --bd-inner: #1e1e1e; --bd-deep: #1c1c1c; @@ -49,7 +49,7 @@ --bg-input: #fff; --bg-canvas: #fff; --bg-xhover: #ffe8e8; - --bg-overlay: rgba(0,0,0,.4); + --bg-overlay: rgba(0, 0, 0, .4); --bd: #d0d0d0; --bd-inner: #ddd; --bd-deep: #e0e0e0; @@ -87,7 +87,7 @@ --bg-input: #fff; --bg-canvas: #fff; --bg-xhover: #ffe8e8; - --bg-overlay: rgba(0,0,0,.4); + --bg-overlay: rgba(0, 0, 0, .4); --bd: #d0d0d0; --bd-inner: #ddd; --bd-deep: #e0e0e0; @@ -252,7 +252,8 @@ body { gap: 5px; margin-top: 6px } -#demo-btns > div { + +#demo-btns>div { display: contents; } @@ -263,17 +264,20 @@ canvas.pixel-editor { 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; @@ -285,10 +289,12 @@ canvas.pixel-editor { 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; @@ -299,7 +305,10 @@ canvas.pixel-editor { line-height: 1; opacity: 0.6; } -.x-btn-sm:hover { opacity: 1; } + +.x-btn-sm:hover { + opacity: 1; +} #sec-meta { background: var(--bg-sunken); @@ -681,10 +690,24 @@ select.meta-val { background: var(--bg-active) } -#mob-add-section { display: none; } +#mob-add-section { + display: none; +} canvas.pixel-editor { - touch-action: none; /* belt-and-suspenders alongside preventDefault */ + touch-action: none; + /* belt-and-suspenders alongside preventDefault */ -webkit-user-select: none; user-select: none; -} \ No newline at end of file +} + +.pv-label select { + background: var(--bg-input); + color: var(--ac); + border: 1px solid var(--bd-inner); + border-radius: 3px; + padding: 1px 14px; + font-family: monospace; + font-size: 10px; + letter-spacing: .1em; +}