more responsive styling
This commit is contained in:
synth-ruiner
parent
da05c45031
commit
93abf1cfcc
|
|
@ -58,25 +58,32 @@ table th {
|
|||
textarea {
|
||||
height: 256px;
|
||||
width: 256px;
|
||||
margin: 0 1em;
|
||||
font-family: monospace;
|
||||
}
|
||||
textarea,
|
||||
input {
|
||||
text-align: left;
|
||||
}
|
||||
.box256 {
|
||||
height: 256px;
|
||||
width: 256px;
|
||||
}
|
||||
.centre {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.croppie-container {
|
||||
height: auto;
|
||||
}
|
||||
.flex-container {
|
||||
background-color: #d3cbd0;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.section {
|
||||
width: 20vw;
|
||||
height: 20vw;
|
||||
display: table-cell;
|
||||
margin: 0 auto;
|
||||
background-color: #d3cbd0;
|
||||
color: #594a54;
|
||||
width: 256px;
|
||||
}
|
||||
#brightness {
|
||||
width: 256px;
|
||||
|
|
@ -88,6 +95,11 @@ input {
|
|||
#threshold + label {
|
||||
margin: 0 auto;
|
||||
}
|
||||
#palettes {
|
||||
height: 256px;
|
||||
width: 256px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
#preview,
|
||||
#room-output {
|
||||
margin: 0 auto;
|
||||
|
|
|
|||
|
|
@ -71,9 +71,7 @@ table {
|
|||
}
|
||||
|
||||
textarea {
|
||||
height: 256px;
|
||||
width: 256px;
|
||||
margin: 0 1em;
|
||||
.box256;
|
||||
|
||||
font-family: monospace;
|
||||
}
|
||||
|
|
@ -82,6 +80,11 @@ textarea, input {
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
.box256 {
|
||||
height: 256px;
|
||||
width: 256px;
|
||||
}
|
||||
|
||||
.centre {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -90,14 +93,21 @@ textarea, input {
|
|||
height: auto;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
background-color: @light;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
// make this just for desktop view?
|
||||
// put sections in a single column on mobile/etc?
|
||||
.section {
|
||||
width: 20vw;
|
||||
height: 20vw;
|
||||
display: table-cell;
|
||||
.centre;
|
||||
|
||||
background-color: @light;
|
||||
color: @dark;
|
||||
width: 256px;
|
||||
//height: 512px;
|
||||
}
|
||||
|
||||
#brightness {
|
||||
|
|
@ -116,6 +126,12 @@ textarea, input {
|
|||
// todo make this match the croppie slider or vice versa
|
||||
}
|
||||
|
||||
#palettes {
|
||||
.box256;
|
||||
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#preview, #room-output {
|
||||
.centre;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,9 @@
|
|||
<!DOCTYPE html><html><head><!-- lodash--><script src="includes/lodash.min.js"></script><!-- jquery--><script src="includes/jquery.min.js"></script><!-- croppie--><link rel="stylesheet" href="includes/croppie.css"><script src="includes/croppie.js"></script><!-- main stuff--><link rel="stylesheet" type="text/css" href="includes/style.css"><script src="includes/script.js"></script></head><body><h1>image-to-bitsy</h1><p> convert any image to a <a href="https://ledoux.itch.io/bitsy">bitsy</a> room</p><p><a href="https://github.com/synth-ruiner/bitsy-image-to-room">about</a> | please contact me if you have any issues: <a href="https://twitter.com/synth_ruiner">twitter</a>, <a href="mailto:max@tinybird.info">email</a></p><div class="section" id="game-data"><h2>game data</h2><textarea id="bitsy-data" placeholder="Bitsy data or html">default game data
|
||||
<!DOCTYPE html><html><head><!-- lodash--><script src="includes/lodash.min.js"></script><!-- jquery--><script src="includes/jquery.min.js"></script><!-- croppie--><link rel="stylesheet" href="includes/croppie.css"><script src="includes/croppie.js"></script><!-- main stuff--><link rel="stylesheet" type="text/css" href="includes/style.css"><script src="includes/script.js"></script></head><body><header><h1>image-to-bitsy</h1><p>convert any image to a <a href="https://ledoux.itch.io/bitsy">bitsy</a> room</p><p><a href="https://github.com/synth-ruiner/bitsy-image-to-room">about</a>
|
||||
|
|
||||
please contact me if you have any issues:
|
||||
<a href="https://twitter.com/synth_ruiner">twitter</a>,
|
||||
<a href="mailto:max@tinybird.info">email</a>
|
||||
</p></header><div class="flex-container"><div class="section" id="game-data"><h2>game data</h2><textarea id="bitsy-data" placeholder="Bitsy data or html">default game data
|
||||
|
||||
# BITSY VERSION 4.5
|
||||
|
||||
|
|
@ -5229,4 +5234,4 @@ DLG ITM_0
|
|||
You found a nice warm cup of tea
|
||||
|
||||
VAR a
|
||||
42</textarea><p>paste your game data here </p><p>(maybe make a backup first)</p></div><div class="section" id="image"><h2>image</h2><div id="croppie"></div><input id="imageUpload" type="file" accepts="image/*"></div><div class="section" id="palette"><h2>palette</h2><form id="palettes"><table><tbody></tbody></table></form></div><div class="section" id="crop"><h2>preview</h2><canvas id="preview" width="128" height="128"></canvas><input id="brightness" type="range" min="-255" max="255" value="0"><label for="brightness">brightness</label><br><br><label id="never">never </label><input id="threshold" type="range" min="0" max="64" value="64"><label id="always"> always</label><br><label for="threshold">create new tiles</label><br></div><div class="section" id="output"><h2>output</h2><canvas id="room-output" width="128" height="128"></canvas><input id="roomName" type="text" placeholder="room name"><button id="save">write to game data</button></div></body></html>
|
||||
42</textarea><p><input class="game-data" type="file"></p><p>paste or upload your game data (or html) here</p><p>(maybe make a backup first)</p></div><div class="section" id="image"><h2>image</h2><div id="croppie"></div><input id="imageUpload" type="file" accepts="image/*"></div><div class="section" id="palette"><h2>palette</h2><form id="palettes"><table><tbody></tbody></table></form></div><div class="section" id="crop"><h2>preview</h2><canvas id="preview" width="128" height="128"></canvas><input id="brightness" type="range" min="-255" max="255" value="0"><label for="brightness">brightness</label><br><br><label id="never">never</label><input id="threshold" type="range" min="0" max="64" value="64"><label id="always"> always</label><br><label for="threshold">create new tiles</label><br></div><div class="section" id="output"><h2>output</h2><canvas id="room-output" width="128" height="128"></canvas><input id="roomName" type="text" placeholder="room name"><button id="save">write to game data</button></div></div></body></html>
|
||||
127
index.pug
127
index.pug
|
|
@ -15,81 +15,82 @@ html
|
|||
link(rel="stylesheet" type="text/css" href="includes/style.css")
|
||||
script(src="includes/script.js")
|
||||
body
|
||||
h1 image-to-bitsy
|
||||
p
|
||||
| convert any image to a
|
||||
a(href="https://ledoux.itch.io/bitsy") bitsy
|
||||
| room
|
||||
p
|
||||
a(href="https://github.com/synth-ruiner/bitsy-image-to-room") about
|
||||
| | please contact me if you have any issues:
|
||||
a(href="https://twitter.com/synth_ruiner") twitter
|
||||
| ,
|
||||
a(href="mailto:max@tinybird.info") email
|
||||
header
|
||||
h1 image-to-bitsy
|
||||
p convert any image to a #[a(href="https://ledoux.itch.io/bitsy") bitsy] room
|
||||
p.
|
||||
#[a(href="https://github.com/synth-ruiner/bitsy-image-to-room") about]
|
||||
|
|
||||
please contact me if you have any issues:
|
||||
#[a(href="https://twitter.com/synth_ruiner") twitter],
|
||||
#[a(href="mailto:max@tinybird.info") email]
|
||||
|
||||
#game-data.section
|
||||
h2 game data
|
||||
.flex-container
|
||||
#game-data.section
|
||||
h2 game data
|
||||
|
||||
textarea#bitsy-data(placeholder="Bitsy data or html")
|
||||
include includes/default.bitsy
|
||||
textarea#bitsy-data(placeholder="Bitsy data or html")
|
||||
include includes/default.bitsy
|
||||
|
||||
p paste your game data here
|
||||
p (maybe make a backup first)
|
||||
p
|
||||
input.game-data(type="file")
|
||||
p paste or upload your game data (or html) here
|
||||
p (maybe make a backup first)
|
||||
|
||||
#image.section
|
||||
h2 image
|
||||
#image.section
|
||||
h2 image
|
||||
|
||||
#croppie
|
||||
#croppie
|
||||
|
||||
input#imageUpload(type="file" accepts="image/*")
|
||||
input#imageUpload(type="file" accepts="image/*")
|
||||
|
||||
#palette.section
|
||||
h2 palette
|
||||
#palette.section
|
||||
h2 palette
|
||||
|
||||
form#palettes
|
||||
table
|
||||
tbody
|
||||
form#palettes
|
||||
table
|
||||
tbody
|
||||
|
||||
#crop.section
|
||||
h2 preview
|
||||
#crop.section
|
||||
h2 preview
|
||||
|
||||
canvas#preview(width=128, height=128)
|
||||
canvas#preview(width=128, height=128)
|
||||
|
||||
input#brightness(type="range" min=-255 max=255 value=0)
|
||||
input#brightness(type="range" min=-255 max=255 value=0)
|
||||
|
||||
label(for="brightness") brightness
|
||||
|
||||
br
|
||||
br
|
||||
|
||||
label#never never
|
||||
input#threshold(type="range" min=0 max=64 value=64)
|
||||
label#always always
|
||||
br
|
||||
label(for="threshold") create new tiles
|
||||
br
|
||||
|
||||
//- to do
|
||||
input#dithering(type="checkbox")
|
||||
label(for="dithering") dithering
|
||||
|
||||
//- to do
|
||||
input#smoothing(type="checkbox")
|
||||
label(for="smoothing") smoothing
|
||||
|
||||
#output.section
|
||||
h2 output
|
||||
|
||||
canvas#room-output(width=128, height=128)
|
||||
|
||||
input#roomName(type="text", placeholder="room name")
|
||||
|
||||
button#save write to game data
|
||||
|
||||
//- to do
|
||||
|
||||
//-label favour broad strokes | favour details
|
||||
label(for="brightness") brightness
|
||||
|
||||
br
|
||||
br
|
||||
|
||||
//-button Download
|
||||
label#never never
|
||||
input#threshold(type="range" min=0 max=64 value=64)
|
||||
label#always always
|
||||
br
|
||||
label(for="threshold") create new tiles
|
||||
br
|
||||
|
||||
//- to do
|
||||
input#dithering(type="checkbox")
|
||||
label(for="dithering") dithering
|
||||
|
||||
//- to do
|
||||
input#smoothing(type="checkbox")
|
||||
label(for="smoothing") smoothing
|
||||
|
||||
#output.section
|
||||
h2 output
|
||||
|
||||
canvas#room-output(width=128, height=128)
|
||||
|
||||
input#roomName(type="text", placeholder="room name")
|
||||
|
||||
button#save write to game data
|
||||
|
||||
//- to do
|
||||
|
||||
//-label favour broad strokes | favour details
|
||||
|
||||
br
|
||||
|
||||
//-button Download
|
||||
|
|
@ -50,8 +50,6 @@ if (src.match(/^(file|https)?:\/\/|^\/\//)) {
|
|||
* select all on clicking game data entry field
|
||||
* allow user to save output as image, or tweet it :)
|
||||
* *user can currently right-click -> Save As but the 128x128 size is not great*
|
||||
* re-style the damn thing
|
||||
* inc. mobile styles
|
||||
* animate animated tiles
|
||||
* profile script performance and optimise where most needed
|
||||
* make brightness slider trigger redraw every so often while being dragged, instead of waiting until drag stop
|
||||
|
|
|
|||
Loading…
Reference in New Issue