max
/
pixsy
1
0
Fork 0
Code Issues 8 Pull Requests Releases Wiki Activity

more responsive styling

This commit is contained in:
synth-ruiner 2018-03-03 11:55:42 +00:00
parent da05c45031
commit 93abf1cfcc
5 changed files with 110 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
includes/style.css
View File

@ -58,25 +58,32 @@ table th {
textarea { textarea {
height: 256px; height: 256px;
width: 256px; width: 256px;
margin: 0 1em;
font-family: monospace; font-family: monospace;
} }
textarea, textarea,
input { input {
text-align: left; text-align: left;
} }
.box256 {
height: 256px;
width: 256px;
}
.centre { .centre {
margin: 0 auto; margin: 0 auto;
} }
.croppie-container { .croppie-container {
height: auto; height: auto;
} }
.flex-container {
background-color: #d3cbd0;
display: flex;
flex-flow: row wrap;
}
.section { .section {
width: 20vw; margin: 0 auto;
height: 20vw;
display: table-cell;
background-color: #d3cbd0; background-color: #d3cbd0;
color: #594a54; color: #594a54;
width: 256px;
} }
#brightness { #brightness {
width: 256px; width: 256px;
@ -88,6 +95,11 @@ input {
#threshold + label { #threshold + label {
margin: 0 auto; margin: 0 auto;
} }
#palettes {
height: 256px;
width: 256px;
overflow-y: scroll;
}
#preview, #preview,
#room-output { #room-output {
margin: 0 auto; margin: 0 auto;

30
includes/style.less
View File

@ -71,9 +71,7 @@ table {
} }
textarea { textarea {
height: 256px; .box256;
width: 256px;
margin: 0 1em;
font-family: monospace; font-family: monospace;
} }
@ -82,6 +80,11 @@ textarea, input {
text-align: left; text-align: left;
} }
.box256 {
height: 256px;
width: 256px;
}
.centre { .centre {
margin: 0 auto; margin: 0 auto;
} }
@ -90,14 +93,21 @@ textarea, input {
height: auto; height: auto;
} }
.flex-container {
background-color: @light;
display: flex;
flex-flow: row wrap;
}
// make this just for desktop view? // make this just for desktop view?
// put sections in a single column on mobile/etc? // put sections in a single column on mobile/etc?
.section { .section {
width: 20vw; .centre;
height: 20vw;
display: table-cell;
background-color: @light; background-color: @light;
color: @dark; color: @dark;
width: 256px;
//height: 512px;
} }
#brightness { #brightness {
@ -116,6 +126,12 @@ textarea, input {
// todo make this match the croppie slider or vice versa // todo make this match the croppie slider or vice versa
} }
#palettes {
.box256;
overflow-y: scroll;
}
#preview, #room-output { #preview, #room-output {
.centre; .centre;
@ -124,4 +140,4 @@ textarea, input {
#save { #save {
margin-top: 0; margin-top: 0;
} }

9
index.html
View File

@ -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 # BITSY VERSION 4.5
@ -5229,4 +5234,4 @@ DLG ITM_0
You found a nice warm cup of tea You found a nice warm cup of tea
VAR a 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
View File

@ -15,81 +15,82 @@ html
link(rel="stylesheet" type="text/css" href="includes/style.css") link(rel="stylesheet" type="text/css" href="includes/style.css")
script(src="includes/script.js") script(src="includes/script.js")
body body
h1 image-to-bitsy header
p h1 image-to-bitsy
| convert any image to a p convert any image to a #[a(href="https://ledoux.itch.io/bitsy") bitsy] room
a(href="https://ledoux.itch.io/bitsy") bitsy p.
| room #[a(href="https://github.com/synth-ruiner/bitsy-image-to-room") about]
p |
a(href="https://github.com/synth-ruiner/bitsy-image-to-room") about please contact me if you have any issues:
| | please contact me if you have any issues: #[a(href="https://twitter.com/synth_ruiner") twitter],
a(href="https://twitter.com/synth_ruiner") twitter #[a(href="mailto:max@tinybird.info") email]
| ,
a(href="mailto:max@tinybird.info") email
#game-data.section .flex-container
h2 game data #game-data.section
h2 game data
textarea#bitsy-data(placeholder="Bitsy data or html") textarea#bitsy-data(placeholder="Bitsy data or html")
include includes/default.bitsy include includes/default.bitsy
p paste your game data here p
p (maybe make a backup first) input.game-data(type="file")
p paste or upload your game data (or html) here
p (maybe make a backup first)
#image.section #image.section
h2 image h2 image
#croppie #croppie
input#imageUpload(type="file" accepts="image/*") input#imageUpload(type="file" accepts="image/*")
#palette.section #palette.section
h2 palette h2 palette
form#palettes form#palettes
table table
tbody tbody
#crop.section #crop.section
h2 preview 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 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
br
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

2
readme.md
View File

@ -50,8 +50,6 @@ if (src.match(/^(file|https)?:\/\/|^\/\//)) {
* select all on clicking game data entry field * select all on clicking game data entry field
* allow user to save output as image, or tweet it :) * allow user to save output as image, or tweet it :)
* *user can currently right-click -> Save As but the 128x128 size is not great* * *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 * animate animated tiles
* profile script performance and optimise where most needed * 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 * make brightness slider trigger redraw every so often while being dragged, instead of waiting until drag stop