olipassey/tiles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Oli Passey
2026-02-21 17:31:10 +00:00
commit b63d094c70
7 changed files with 1218 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
index.html Normal file
View File

@@ -0,0 +1,121 @@
<!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>
<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-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>