diff --git a/includes/background.png b/includes/background.png deleted file mode 100644 index 91fd9b6..0000000 Binary files a/includes/background.png and /dev/null differ diff --git a/includes/style.less b/includes/style.less index 31f9f2d..f95c7a0 100644 --- a/includes/style.less +++ b/includes/style.less @@ -11,7 +11,6 @@ html, body { background-color: @background; - background-image: url("background.png"); font-size: 3vmin; margin: 0; padding: 0; @@ -37,6 +36,10 @@ button { } } +h1 { + margin: 0; +} + h3 { font-size: 0.9em; } @@ -57,6 +60,7 @@ input { img { max-height: 12em; max-width: 100%; + margin: 0; } p { @@ -70,7 +74,7 @@ label { } textarea { - height: 20em; + height: 15em; padding: 0.5em; text-align: left; width: 100%; @@ -92,12 +96,13 @@ textarea { } .page { - height: 80vmin; - width: 80vmin; + height: 70vmin; + width: 70vmin; background-color: @background; + border: 2px solid @accent; border-radius: 5vmin; - box-shadow: @accent 0.5vmin 0.5vmin; + box-shadow: @accent 1vmin 1vmin; padding: 5vmin; position: relative; } diff --git a/includes/tilesy.png b/includes/tilesy.png new file mode 100644 index 0000000..1fdc634 Binary files /dev/null and b/includes/tilesy.png differ diff --git a/index.pug b/index.pug index cd850d3..77667f2 100644 --- a/index.pug +++ b/index.pug @@ -6,7 +6,7 @@ html(lang="en-gb") link(rel="stylesheet" href="includes/style.css") body h1 - span.background tilesy + img(alt="tilesy" src="includes/tilesy.png") p span.background import 8×8 tile sheets into Bitsy games .pages @@ -33,11 +33,8 @@ html(lang="en-gb") .page.extras h2 tiles label - | tile name prefix (optional) + | tile name (optional) input#prefix(type="text" placeholder="e.g. 'forest'" autocomplete="off") - p. - to help you find your new tiles in Bitsy, #[br] - new tiles will be named #[span#tile-name-preview e.g. 'forest 1'] h3 create alternate versions .checkboxes @@ -57,8 +54,7 @@ html(lang="en-gb") some tile sheets assume you will be able to flip and rotate their tiles. Bitsy does not allow this, so it may be easier to generate these alternate versions here. - p. - don't worry - #[i tilesy] will not create duplicate tiles. + button.pagination.prev#back-to-image previous button.pagination.next#import next .page.download diff --git a/script.js b/script.js index 09486c4..1a4e514 100644 --- a/script.js +++ b/script.js @@ -60,7 +60,6 @@ async function run() { const checkboxRotateTiles = el("rotate"); const inputPrefix = el("prefix"); const imagePreview = el("preview"); - const spanTileNamePreview = el("tile-name-preview") const textareaGameDataInput = el("game-data"); const textareaGameDataOutput = el("output"); @@ -122,18 +121,6 @@ async function run() { }, "image"); }); - function handleTilePrefix() { - if (inputPrefix.value) { - spanTileNamePreview.innerText = `'${this.value} 1' etc.` - } else { - spanTileNamePreview.innerText = "'forest 1' etc." - } - } - - inputPrefix.addEventListener("keyup", handleTilePrefix); - inputPrefix.addEventListener("change", handleTilePrefix); - handleTilePrefix(); - function addTiles() { let image = imagePreview.getAttribute("src"); let gameData = textareaGameDataInput.value;