|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Stackline web editor</title>
|
|
|
|
|
<script type="module" src="index.js"></script>
|
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="left-pane">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div id="middle-pane">
|
|
|
|
|
<canvas id="main-canvas">
|
|
|
|
|
Your browser needs to support canvases, sowwy :(
|
|
|
|
|
</canvas>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="right-pane" class="">
|
|
|
|
|
<h2>Coordinates:</h2>
|
|
|
|
|
<div id="coordinates"></div>
|
|
|
|
|
<h2>State:</h2>
|
|
|
|
|
<div id="state"></div>
|
|
|
|
|
<h2>Signal:</h2>
|
|
|
|
|
<div id="signal" class="indent">
|
|
|
|
|
<h3>Stack:</h3>
|
|
|
|
|
<ol id="stack" class="stack"></ol>
|
|
|
|
|
</div>
|
|
|
|
|
<h2>Tile:</h2>
|
|
|
|
|
<div id="tile" class="indent">
|
|
|
|
|
<b>Type:</b> <span id="tile-name"></span>
|
|
|
|
|
<ul id="tile-properties">
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<template class="property-template" name="Orientation">
|
|
|
|
|
<select>
|
|
|
|
|
<option value="Any" default>Any</option>
|
|
|
|
|
<option value="Vertical">Vertical</option>
|
|
|
|
|
<option value="Horizontal">Horizontal</option>
|
|
|
|
|
</select>
|
|
|
|
|
</template>
|
|
|
|
|
<template class="property-template" name="Direction">
|
|
|
|
|
<select>
|
|
|
|
|
<option value="Up" default>Up</option>
|
|
|
|
|
<option value="Right">Right</option>
|
|
|
|
|
<option value="Down">Down</option>
|
|
|
|
|
<option value="Left">Left</option>
|
|
|
|
|
</select>
|
|
|
|
|
</template>
|
|
|
|
|
<template class="property-template" name="Value">
|
|
|
|
|
<div class="value-input number">
|
|
|
|
|
<select title="Value type">
|
|
|
|
|
<option value="Number" default>Number</option>
|
|
|
|
|
<option value="String">String</option>
|
|
|
|
|
</select>
|
|
|
|
|
<div class="value-number">
|
|
|
|
|
<input type="number" value="0" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="value-string">
|
|
|
|
|
"<input type="string" value="" />"
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template class="property-template" name="Uint">
|
|
|
|
|
<input type="number" min="0" value="0" />
|
|
|
|
|
</template>
|
|
|
|
|
<template class="property-template" name="Int">
|
|
|
|
|
<input type="number" min="0" value="0" />
|
|
|
|
|
</template>
|
|
|
|
|
<template class="property-template" name="Signal">
|
|
|
|
|
<div class="indent">
|
|
|
|
|
<h3>Direction:</h3>
|
|
|
|
|
<select class="direction">
|
|
|
|
|
<option value="Up" default>Up</option>
|
|
|
|
|
<option value="Right">Right</option>
|
|
|
|
|
<option value="Down">Down</option>
|
|
|
|
|
<option value="Left">Left</option>
|
|
|
|
|
</select>
|
|
|
|
|
<h3>Stack:</h3>
|
|
|
|
|
<ol class="stack"></ol>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
