tile preview; styling etc.
This commit is contained in:
parent
4a0a9d10d3
commit
bff9b90258
33
index.pug
33
index.pug
|
|
@ -23,7 +23,38 @@ html(lang="en-gb")
|
|||
.image-container
|
||||
input#image(type="file")
|
||||
img#preview
|
||||
input#prefix(type="text" placeholder="tile name prefix, e.g. 'forest'")
|
||||
button.pagination.prev previous
|
||||
button.pagination.next next
|
||||
.page.extras
|
||||
h2 tiles
|
||||
label
|
||||
| tile name prefix
|
||||
input#prefix(type="text" placeholder="e.g. 'forest'")
|
||||
p.
|
||||
to help you find your new tiles in Bitsy, #[br]
|
||||
new tiles will be labelled #[span#tile-name-preview e.g. 'forest 1']
|
||||
br
|
||||
|
||||
h3 create alternate versions
|
||||
.checkboxes
|
||||
label
|
||||
input(type="checkbox")#invert
|
||||
| inverted
|
||||
label
|
||||
input(type="checkbox")#flip
|
||||
| flipped
|
||||
label
|
||||
input(type="checkbox")#mirror
|
||||
| mirrored
|
||||
label
|
||||
input(type="checkbox")#rotate
|
||||
| rotated
|
||||
p.
|
||||
some tile sets only include one rotation for each tile;
|
||||
this can be a problem in Bitsy since it does not allow tile rotation/mirroring.
|
||||
p.
|
||||
#[i tilesy] will not create duplicate tiles,
|
||||
so don't worry about ending up with numerous identical tiles.
|
||||
button.pagination.prev previous
|
||||
button.pagination.next#import next
|
||||
.page.download
|
||||
|
|
|
|||
30
script.js
30
script.js
|
|
@ -49,13 +49,15 @@ async function run() {
|
|||
const buttonAddImage = el("add");
|
||||
const buttonDownload = el("download");
|
||||
const buttonGameDataProceed = el("game-data-next");
|
||||
const textareaGameDataInput = el("game-data");
|
||||
const buttonImportGame = el("import");
|
||||
const buttonLoadGame = el("load");
|
||||
const buttonNewGame = el("new");
|
||||
const textareaGameDataOutput = el("output");
|
||||
const preview = el("preview");
|
||||
const inputPrefix = el("prefix");
|
||||
const imagePreview = el("preview");
|
||||
const resetButton = el("reset");
|
||||
const spanTileNamePreview = el("tile-name-preview")
|
||||
const textareaGameDataInput = el("game-data");
|
||||
const textareaGameDataOutput = el("output");
|
||||
|
||||
// hide all pages except start page
|
||||
for (let page of document.getElementsByClassName('page')) {
|
||||
|
|
@ -102,16 +104,28 @@ async function run() {
|
|||
|
||||
textareaGameDataInput.addEventListener("change", checkGameData);
|
||||
textareaGameDataInput.addEventListener("keyup", checkGameData);
|
||||
|
||||
preview.style.display = "none";
|
||||
checkGameData();
|
||||
|
||||
imagePreview.style.display = "none";
|
||||
|
||||
el('image').addEventListener('change', function () {
|
||||
readFile(this, function (e) {
|
||||
preview.src = e.target.result;
|
||||
preview.style.display = "initial"
|
||||
imagePreview.src = e.target.result;
|
||||
imagePreview.style.display = "initial"
|
||||
}, "image");
|
||||
});
|
||||
|
||||
function handleTilePrefix() {
|
||||
if (this.value) {
|
||||
spanTileNamePreview.innerText = `e.g. '${this.value} 1'`
|
||||
} else {
|
||||
spanTileNamePreview.innerText = "e.g. 'forest 1'"
|
||||
}
|
||||
}
|
||||
|
||||
inputPrefix.addEventListener("change", handleTilePrefix);
|
||||
handleTilePrefix();
|
||||
|
||||
function addTiles() {
|
||||
let image = el("preview").getAttribute("src");
|
||||
let gameData = el("game-data").value;
|
||||
|
|
@ -140,7 +154,7 @@ async function run() {
|
|||
|
||||
function reset() {
|
||||
clear_game();
|
||||
preview.removeAttribute("src");
|
||||
imagePreview.removeAttribute("src");
|
||||
}
|
||||
|
||||
resetButton.addEventListener("click", reset);
|
||||
|
|
|
|||
36
style.less
36
style.less
|
|
@ -1,13 +1,19 @@
|
|||
@background: #fff4d9;
|
||||
@text: #ec6d7d;
|
||||
@accent: #a3c4ef;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
color: @text;
|
||||
margin: 0 auto 0.5em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
html, body {
|
||||
background-color: @background;
|
||||
font-size: 3vmin;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 3vmin;
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
@ -30,9 +36,18 @@ button {
|
|||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
&[type="checkbox"] {
|
||||
width: auto;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -40,6 +55,16 @@ img {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.8em;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 0.75em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 20em;
|
||||
padding: 0.5em;
|
||||
|
|
@ -47,14 +72,21 @@ textarea {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.checkboxes label {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
height: 38.5vmin;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 80vmin;
|
||||
height: 80vmin;
|
||||
width: 80vmin;
|
||||
|
||||
border-radius: 5vmin;
|
||||
box-shadow: @accent 1vmin 1vmin;
|
||||
padding: 5vmin;
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue