146 lines
4.8 KiB
HTML
146 lines
4.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Tile Pattern Creator</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<header class="app-header">
|
|
<div>
|
|
<h1>Tile Pattern Creator</h1>
|
|
<p>Build a tile library, then paint patterns for your tiler.</p>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button id="export-json" class="primary">Export JSON</button>
|
|
<button id="copy-json">Copy JSON</button>
|
|
<button id="export-png">Export PNG</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="app-layout">
|
|
<section class="panel">
|
|
<h2>Tile Library</h2>
|
|
<div class="library-actions">
|
|
<button id="export-library" class="primary">Export library</button>
|
|
<button id="import-library">Import library</button>
|
|
<input id="import-library-file" type="file" accept="application/json" hidden />
|
|
</div>
|
|
<form id="tile-form" class="tile-form">
|
|
<label>
|
|
Tile name
|
|
<input id="tile-name" type="text" placeholder="e.g., Sky Blue" required />
|
|
</label>
|
|
<label>
|
|
Tile color
|
|
<input id="tile-color" type="color" value="#4c8bf5" />
|
|
</label>
|
|
<label>
|
|
Tile width (cells)
|
|
<input id="tile-width" type="number" min="1" max="12" value="1" />
|
|
</label>
|
|
<label>
|
|
Tile height (cells)
|
|
<input id="tile-height" type="number" min="1" max="12" value="1" />
|
|
</label>
|
|
<label>
|
|
Optional image
|
|
<input id="tile-image" type="file" accept="image/*" />
|
|
</label>
|
|
<button type="submit" class="primary">Add tile</button>
|
|
</form>
|
|
|
|
<div class="active-tile">
|
|
<span>Active tile</span>
|
|
<div class="active-preview" id="active-tile-swatch"></div>
|
|
<strong id="active-tile-name">None selected</strong>
|
|
</div>
|
|
|
|
<div id="tile-list" class="tile-list"></div>
|
|
</section>
|
|
|
|
<section class="workspace">
|
|
<div class="controls">
|
|
<div class="control-group">
|
|
<label>
|
|
Rows
|
|
<input id="grid-rows" type="number" min="1" max="100" value="12" />
|
|
</label>
|
|
<label>
|
|
Columns
|
|
<input id="grid-cols" type="number" min="1" max="100" value="12" />
|
|
</label>
|
|
<label>
|
|
Tile size
|
|
<input id="grid-size" type="number" min="12" max="120" value="48" />
|
|
</label>
|
|
</div>
|
|
<div class="control-group">
|
|
<label class="checkbox">
|
|
<input id="floor-enabled" type="checkbox" />
|
|
Floor row
|
|
</label>
|
|
<label>
|
|
Floor tile
|
|
<select id="floor-tile"></select>
|
|
</label>
|
|
</div>
|
|
<div class="control-group">
|
|
<label>
|
|
Fill row #
|
|
<input id="fill-row" type="number" min="1" max="100" value="1" />
|
|
</label>
|
|
<label>
|
|
Fill with tile
|
|
<select id="fill-row-tile"></select>
|
|
</label>
|
|
<button id="fill-row-button">Fill row</button>
|
|
</div>
|
|
<div class="control-group">
|
|
<label>
|
|
Brick start row
|
|
<input id="brick-start" type="number" min="1" max="100" value="1" />
|
|
</label>
|
|
<label>
|
|
Brick end row
|
|
<input id="brick-end" type="number" min="1" max="100" value="6" />
|
|
</label>
|
|
<label>
|
|
Brick tile
|
|
<select id="brick-tile"></select>
|
|
</label>
|
|
<label class="checkbox">
|
|
<input id="brick-stagger" type="checkbox" checked />
|
|
Stagger rows
|
|
</label>
|
|
<button id="brick-apply">Apply brick</button>
|
|
</div>
|
|
<div class="control-actions">
|
|
<button id="apply-grid">Apply grid</button>
|
|
<button id="clear-grid">Clear grid</button>
|
|
</div>
|
|
<div class="control-tip">
|
|
Tip: click to paint. Shift-click or right click to erase.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="canvas-wrap">
|
|
<canvas id="pattern-canvas" width="576" height="576"></canvas>
|
|
</div>
|
|
|
|
<div class="json-panel">
|
|
<div class="json-actions">
|
|
<h3>Pattern JSON</h3>
|
|
<button id="import-json">Import JSON</button>
|
|
<button id="refresh-json">Refresh JSON</button>
|
|
</div>
|
|
<textarea id="pattern-json" spellcheck="false"></textarea>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|