mirror of
https://github.com/litruv/picoGraph.git
synced 2026-07-23 18:28:49 +10:00
Max Litruv Boonzaayer
f917cf6ad5
- Created test_cart.p8 with basic drawing functionality and a print statement. - Created test_unix.p8 with a simple initialization function.
238 lines
8.4 KiB
HTML
238 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; connect-src 'self'; font-src 'self' data:;" />
|
|
<title>picoGraph</title>
|
|
<link rel="stylesheet" href="styles/main.css" />
|
|
</head>
|
|
<body>
|
|
<header class="app-header">
|
|
<div class="header-actions header-actions--left" aria-label="Workspace tools">
|
|
<button
|
|
id="tileManagerButton"
|
|
class="header-icon-button"
|
|
type="button"
|
|
aria-label="Tile manager"
|
|
title="Tile manager"
|
|
>
|
|
<span class="header-icon header-icon--tiles" aria-hidden="true"></span>
|
|
</button>
|
|
<span class="header-icon-spacer" aria-hidden="true"></span>
|
|
<button
|
|
id="projectSettingsButton"
|
|
class="header-icon-button"
|
|
type="button"
|
|
aria-label="Project settings"
|
|
title="Project settings"
|
|
>
|
|
<span class="header-icon header-icon--settings" aria-hidden="true"></span>
|
|
</button>
|
|
<button
|
|
id="exportLuaButton"
|
|
class="header-icon-button"
|
|
type="button"
|
|
aria-label="Export Lua"
|
|
title="Export Lua"
|
|
>
|
|
<span class="header-icon header-icon--export" aria-hidden="true"></span>
|
|
</button>
|
|
<span class="header-icon-spacer" aria-hidden="true"></span>
|
|
<button
|
|
id="frameSelectionButton"
|
|
class="header-icon-button"
|
|
type="button"
|
|
aria-label="Frame selection"
|
|
title="Frame selection"
|
|
>
|
|
<span class="header-icon header-icon--frame" aria-hidden="true"></span>
|
|
</button>
|
|
<button
|
|
id="paletteToggleButton"
|
|
class="header-icon-button"
|
|
type="button"
|
|
aria-label="Toggle palette"
|
|
title="Toggle palette"
|
|
aria-pressed="true"
|
|
>
|
|
<span class="header-icon header-icon--palette" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
<div class="header-titlebar">
|
|
<div class="header-title">picoGraph</div>
|
|
</div>
|
|
<div class="header-primary-actions">
|
|
<button
|
|
id="saveButton"
|
|
class="header-icon-button"
|
|
type="button"
|
|
aria-label="Save workspace"
|
|
title="Save workspace"
|
|
>
|
|
<span class="header-icon header-icon--save" aria-hidden="true"></span>
|
|
</button>
|
|
<button
|
|
id="previewButton"
|
|
class="header-icon-button header-icon-button--accent"
|
|
type="button"
|
|
aria-label="Preview cart"
|
|
title="Preview cart"
|
|
>
|
|
<span class="header-icon header-icon--play" aria-hidden="true"></span>
|
|
</button>
|
|
<div id="windowControls" class="window-controls" aria-label="Window controls">
|
|
<button
|
|
id="minimizeWindowButton"
|
|
class="window-control-button"
|
|
type="button"
|
|
aria-label="Minimize window"
|
|
title="Minimize"
|
|
>
|
|
<span class="header-icon header-icon--minimize" aria-hidden="true"></span>
|
|
</button>
|
|
<button
|
|
id="maximizeWindowButton"
|
|
class="window-control-button"
|
|
type="button"
|
|
aria-label="Maximize window"
|
|
title="Maximize"
|
|
>
|
|
<span class="header-icon header-icon--maximize" aria-hidden="true"></span>
|
|
</button>
|
|
<button
|
|
id="closeWindowButton"
|
|
class="window-control-button window-control-button--close"
|
|
type="button"
|
|
aria-label="Close window"
|
|
title="Close"
|
|
>
|
|
<span class="header-icon header-icon--close-window" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main id="appBody" class="app-body">
|
|
<aside class="overview" aria-label="Graph overview">
|
|
<div class="overview-section">
|
|
<div class="overview-title">Events</div>
|
|
<ul id="eventList" class="overview-list" aria-label="Existing events"></ul>
|
|
</div>
|
|
<div class="overview-section">
|
|
<div class="overview-title overview-title--with-action">
|
|
<span>Variables</span>
|
|
<button id="addVariableButton" type="button" class="overview-action" aria-label="Add global variable">+</button>
|
|
</div>
|
|
<ul id="variableList" class="overview-list" aria-label="Defined variables"></ul>
|
|
</div>
|
|
</aside>
|
|
<section class="workspace" aria-label="Blueprint workspace">
|
|
<div id="workspaceCanvas" class="workspace-canvas">
|
|
<svg id="connectionLayer" class="connection-layer" xmlns="http://www.w3.org/2000/svg"></svg>
|
|
<div id="nodeLayer" class="node-layer"></div>
|
|
</div>
|
|
</section>
|
|
<aside id="palettePanel" class="palette" aria-label="Node palette">
|
|
<div class="palette-search">
|
|
<input id="paletteSearch" type="search" placeholder="Search nodes" />
|
|
</div>
|
|
<div id="paletteList" class="palette-list" role="listbox" aria-label="Available nodes"></div>
|
|
</aside>
|
|
<aside class="inspector" aria-label="Node inspector">
|
|
<div class="inspector-header">Details</div>
|
|
<div id="inspectorContent" class="inspector-content"></div>
|
|
<div class="inspector-footer">
|
|
<button id="duplicateNodeButton" type="button" disabled>Duplicate</button>
|
|
<button id="deleteNodeButton" type="button" disabled>Delete</button>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
<div
|
|
id="luaModal"
|
|
class="modal"
|
|
aria-hidden="true"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="luaModalTitle"
|
|
hidden
|
|
>
|
|
<div class="modal__backdrop" data-modal-close></div>
|
|
<div class="modal__panel" role="document">
|
|
<header class="modal__header">
|
|
<h2 id="luaModalTitle">Lua Preview</h2>
|
|
<div class="modal__actions">
|
|
<button
|
|
id="copyLuaButton"
|
|
type="button"
|
|
class="modal__icon-button"
|
|
aria-label="Copy to clipboard"
|
|
title="Copy to clipboard"
|
|
>
|
|
<span class="modal-icon modal-icon--copy" aria-hidden="true"></span>
|
|
</button>
|
|
<button
|
|
id="closeLuaModalButton"
|
|
type="button"
|
|
class="modal__icon-button"
|
|
aria-label="Close Lua preview"
|
|
title="Close"
|
|
data-modal-close
|
|
>
|
|
<span class="modal-icon modal-icon--close" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<div class="modal__body">
|
|
<pre class="lua-modal__code" tabindex="0"><code id="luaModalCode"></code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
id="tileModal"
|
|
class="modal"
|
|
aria-hidden="true"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="tileModalTitle"
|
|
hidden
|
|
>
|
|
<div class="modal__backdrop" data-modal-close></div>
|
|
<div class="modal__panel modal__panel--tile" role="document">
|
|
<header class="modal__header">
|
|
<h2 id="tileModalTitle">Tile Manager</h2>
|
|
<div class="modal__actions">
|
|
<button
|
|
type="button"
|
|
class="modal__icon-button close-modal"
|
|
aria-label="Close tile manager"
|
|
title="Close"
|
|
data-modal-close
|
|
>
|
|
<span class="modal-icon modal-icon--close" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<div class="modal__body">
|
|
<div class="tile-browser-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template id="nodeTemplate">
|
|
<article class="blueprint-node" draggable="false">
|
|
<header class="node-header">
|
|
<div class="node-title"></div>
|
|
</header>
|
|
<section class="node-io node-inputs"></section>
|
|
<section class="node-io node-outputs"></section>
|
|
</article>
|
|
</template>
|
|
<template id="pinTemplate">
|
|
<div class="pin" draggable="false">
|
|
<span class="pin-label"></span>
|
|
<span class="pin-handle" tabindex="0"></span>
|
|
</div>
|
|
</template>
|
|
<script type="module" src="scripts/main.js"></script>
|
|
</body>
|
|
</html>
|