mirror of
https://github.com/lalbornoz/roar.git
synced 2024-11-22 23:36:36 +00:00
assets/{css,js,html}/*, index.html: clean up & correct {CSS,HTML}.
assets/text/TODO: updated.
This commit is contained in:
parent
80b89add02
commit
72cb6696b5
@ -1,39 +1,43 @@
|
|||||||
/*
|
/*
|
||||||
* Background mIRC colours
|
* Background mIRC colours
|
||||||
*/
|
*/
|
||||||
.ba {background-color: #FFFFFF}
|
.ba {background-color: #FFFFFF}
|
||||||
.bb {background-color: #000000}
|
.bb {background-color: #000000}
|
||||||
.bc {background-color: #00007F}
|
.bc {background-color: #00007F}
|
||||||
.bd {background-color: #009300}
|
.bd {background-color: #009300}
|
||||||
.be {background-color: #FF0000}
|
.be {background-color: #FF0000}
|
||||||
.bf {background-color: #7f0000}
|
.bf {background-color: #7f0000}
|
||||||
.bg {background-color: #9C009C}
|
.bg {background-color: #9C009C}
|
||||||
.bh {background-color: #FC7F00}
|
.bh {background-color: #FC7F00}
|
||||||
.bi {background-color: #FFFF00}
|
.bi {background-color: #FFFF00}
|
||||||
.bj {background-color: #00FC00}
|
.bj {background-color: #00FC00}
|
||||||
.bk {background-color: #009393}
|
.bk {background-color: #009393}
|
||||||
.bl {background-color: #00FFFF}
|
.bl {background-color: #00FFFF}
|
||||||
.bm {background-color: #0000FC}
|
.bm {background-color: #0000FC}
|
||||||
.bn {background-color: #FF00FF}
|
.bn {background-color: #FF00FF}
|
||||||
.bo {background-color: #7F7F7F}
|
.bo {background-color: #7F7F7F}
|
||||||
.bp {background-color: #D2D2D2}
|
.bp {background-color: #D2D2D2}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Foreground mIRC colours
|
* Foreground mIRC colours
|
||||||
*/
|
*/
|
||||||
.fa {color: #FFFFFF}
|
.fa {color: #FFFFFF}
|
||||||
.fb {color: #000000}
|
.fb {color: #000000}
|
||||||
.fc {color: #00007F}
|
.fc {color: #00007F}
|
||||||
.fd {color: #009300}
|
.fd {color: #009300}
|
||||||
.fe {color: #FF0000}
|
.fe {color: #FF0000}
|
||||||
.ff {color: #7F0000}
|
.ff {color: #7F0000}
|
||||||
.fg {color: #9C009C}
|
.fg {color: #9C009C}
|
||||||
.fh {color: #FC7F00}
|
.fh {color: #FC7F00}
|
||||||
.fi {color: #FFFF00}
|
.fi {color: #FFFF00}
|
||||||
.fj {color: #00FC00}
|
.fj {color: #00FC00}
|
||||||
.fk {color: #009393}
|
.fk {color: #009393}
|
||||||
.fl {color: #00FFFF}
|
.fl {color: #00FFFF}
|
||||||
.fm {color: #0000FC}
|
.fm {color: #0000FC}
|
||||||
.fn {color: #FF00FF}
|
.fn {color: #FF00FF}
|
||||||
.fo {color: #7F7F7F}
|
.fo {color: #7F7F7F}
|
||||||
.fp {color: #D2D2D2}
|
.fp {color: #D2D2D2}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* vim:ts=2 sw=2 expandtab fenc=utf-8 foldmethod=marker nowrap tw=0
|
||||||
|
*/
|
||||||
|
@ -1,3 +1,13 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'FixedsysExcelsior301Regular';
|
||||||
|
font-style: normal;
|
||||||
|
src: url('../fonts/fsex300-webfont.eot');
|
||||||
|
src: url('../fonts/fsex300-webfont.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('../fonts/fsex300-webfont.woff') format('woff'),
|
||||||
|
url('../fonts/fsex300-webfont.ttf') format('truetype'),
|
||||||
|
url('../fonts/fsex300-webfont.svg#FixedsysExcelsior301Regular') format('svg');
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: #000000;
|
background: #000000;
|
||||||
background-image: url('../images/tile.jpg');
|
background-image: url('../images/tile.jpg');
|
||||||
@ -40,3 +50,7 @@ p {
|
|||||||
pre {
|
pre {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* vim:ts=2 sw=2 expandtab fenc=utf-8 foldmethod=marker nowrap tw=0
|
||||||
|
*/
|
||||||
|
@ -1,188 +1,205 @@
|
|||||||
textarea,input[type=text],body {
|
@font-face {
|
||||||
margin:0;
|
font-family: 'FixedsysExcelsior301Regular';
|
||||||
font-family: 'FixedsysExcelsior301Regular';
|
font-style: normal;
|
||||||
font-size: 12pt;
|
src: url('../fonts/fsex300-webfont.eot');
|
||||||
font-weight: 100;
|
src: url('../fonts/fsex300-webfont.eot?#iefix') format('embedded-opentype'),
|
||||||
line-height: 11pt;
|
url('../fonts/fsex300-webfont.woff') format('woff'),
|
||||||
color: #6d6b6d;
|
url('../fonts/fsex300-webfont.ttf') format('truetype'),
|
||||||
-webkit-font-smoothing: antialiased !important;
|
url('../fonts/fsex300-webfont.svg#FixedsysExcelsior301Regular') format('svg');
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
background-color: #000000 !important;
|
background-color: #000000 !important;
|
||||||
}
|
transition: 0.1s linear;
|
||||||
@font-face {
|
|
||||||
font-family: 'FixedsysExcelsior301Regular';
|
|
||||||
src: url('../fonts/fsex300-webfont.eot');
|
|
||||||
src: url('../fonts/fsex300-webfont.eot?#iefix') format('embedded-opentype'),
|
|
||||||
url('../fonts/fsex300-webfont.woff') format('woff'),
|
|
||||||
url('../fonts/fsex300-webfont.ttf') format('truetype'),
|
|
||||||
url('../fonts/fsex300-webfont.svg#FixedsysExcelsior301Regular') format('svg');
|
|
||||||
font-style: normal;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a {display: block}
|
/* {{{ Element styles */
|
||||||
a:link, a:visited {text-decoration: none; color: #6b6760}
|
a {
|
||||||
a:hover { text-decoration: underline }
|
display: block;
|
||||||
|
|
||||||
.faded { color: #404040; }
|
|
||||||
.rapper, .block {
|
|
||||||
float: left;
|
|
||||||
height:auto;
|
|
||||||
width:auto;
|
|
||||||
background-color: #000000;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
}
|
||||||
.rapper {
|
a:link, a:visited {
|
||||||
white-space:pre-wrap;
|
color: #6B6760;
|
||||||
word-wrap: break-word;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
#ui_rapper .block {
|
a:hover {
|
||||||
width: 100px;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
.block {
|
span {
|
||||||
padding:4px;
|
display: inline-block;
|
||||||
|
line-height: 15px;
|
||||||
|
min-width: 8px;
|
||||||
}
|
}
|
||||||
.block:nth-child(n+2) {
|
textarea {
|
||||||
padding-left: 30px;
|
background: #001100;
|
||||||
|
border: 1px solid #333333;
|
||||||
|
color: #00FF00;
|
||||||
|
font-family: 'FixedsysExcelsior301Regular';
|
||||||
|
font-size: 12pt;
|
||||||
|
height: 300px;
|
||||||
|
outline: 0;
|
||||||
|
width: 37vw;
|
||||||
}
|
}
|
||||||
#textarea_mode { padding: 4px; }
|
textarea, input[type=text], body {
|
||||||
.tool {
|
color: #6D6B6D;
|
||||||
cursor: pointer;
|
font-family: 'FixedsysExcelsior301Regular';
|
||||||
|
line-height: 11pt;
|
||||||
|
font-size: 12pt;
|
||||||
|
font-weight: 100;
|
||||||
|
margin: 0;
|
||||||
|
-webkit-font-smoothing: antialiased !important;
|
||||||
}
|
}
|
||||||
.hidden {
|
/* }}} */
|
||||||
visibility: hidden;
|
/* {{{ BODY class styles */
|
||||||
|
body.grid div {
|
||||||
|
border-left: 1px solid #444444;
|
||||||
}
|
}
|
||||||
.tool.radio {
|
body.grid span {
|
||||||
margin: 0 8px 0 0;
|
border-bottom: 1px solid #444444;
|
||||||
|
border-right: 1px solid #444444;
|
||||||
}
|
}
|
||||||
.tool.radio.focused {
|
body.grid .tool {
|
||||||
color: #000;
|
border: 1px solid #444444;
|
||||||
|
|
||||||
background-color: #6d6d6d;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
}
|
||||||
.transparent {
|
body.grid #brush_wrapper > div:first-child,
|
||||||
background-color: transparent;
|
body.grid #canvas_wrapper > div:first-child,
|
||||||
background-image: url(../images/gray-dither.gif);
|
body.grid #letters_wrapper > div:first-child,
|
||||||
background-size: 8px 8px;
|
body.grid #palette_wrapper > div:first-child {
|
||||||
|
border-top: 1px solid #444444;
|
||||||
}
|
}
|
||||||
|
body.loading {
|
||||||
@media (-webkit-min-device-pixel-ratio: 2) {
|
opacity: 0;
|
||||||
.transparent {
|
|
||||||
background-size: 4px 4px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
span,a { min-width: 8px; line-height: 15px; display: inline-block; }
|
/* }}} */
|
||||||
.rapper { cursor: crosshair; }
|
/* {{{ Class styles */
|
||||||
body.grid span { border-right: 1px solid #444; border-bottom: 1px solid #444; }
|
|
||||||
body.grid div { border-left: 1px solid #444; }
|
|
||||||
body.grid #canvas_rapper > div:first-child,
|
|
||||||
body.grid #palette_rapper > div:first-child,
|
|
||||||
body.grid #letters_rapper > div:first-child,
|
|
||||||
body.grid #brush_rapper > div:first-child { border-top: 1px solid #444; }
|
|
||||||
body.grid .tool { border: 1px solid #444; }
|
|
||||||
.ed { color: #fff; }
|
|
||||||
.locked { border-bottom: 1px solid; color: #bbb; text-decoration: none; }
|
|
||||||
.tool.locked.focused { box-shadow: 0 0; }
|
|
||||||
.focused { box-shadow: inset 0 0px 2px #fff; border-color: #fff; }
|
|
||||||
.ba.focused { box-shadow: inset 0 0px 2px #000, inset 0 0px 2px #000; border-color: #000; }
|
.ba.focused { box-shadow: inset 0 0px 2px #000, inset 0 0px 2px #000; border-color: #000; }
|
||||||
.tool.focused, .ed.focused { color: white; text-decoration: underline; }
|
.block:nth-child(n+2) { padding-left: 30px; }
|
||||||
.focused { box-shadow: inset 1px 0 2px white, inset -1px 0 2px white, inset 0 1px 2px white, inset 0 -1px 2px white; }
|
.block { padding:4px; }
|
||||||
.faba.focused, .fbba.focused, .fcba.focused, .fdba.focused, .feba.focused, .ffba.focused, .fgba.focused, .fhba.focused,
|
.bucket #canvas_wrapper { cursor: url(../images/bucket.png) 3 15, auto; }
|
||||||
.fiba.focused, .fjba.focused, .fkba.focused, .flba.focused, .fmba.focused, .fnba.focused, .foba.focused, .fpba.focused
|
|
||||||
{ box-shadow: inset 1px 0 2px #888, inset -1px 0 2px #888, inset 0 1px 2px #888, inset 0 -1px 2px #888; }
|
|
||||||
body.loading { opacity: 0; }
|
|
||||||
body { transition: 0.1s linear; }
|
|
||||||
#import_textarea { font-size: 9pt; }
|
|
||||||
textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color: #0f0; border: 0; font-family: 'FixedsysExcelsior301Regular'; outline: 0; border: 1px solid #333; background:#010;}
|
|
||||||
#import_rapper { display: none; }
|
|
||||||
#canvas_rapper {
|
|
||||||
white-space: pre;
|
|
||||||
box-shadow: 0 0 2px rgba(255,255,255,0.3);
|
|
||||||
margin: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ui_rapper { clear:both; float: left; width: 100vw; }
|
|
||||||
#workspace_rapper { width: 100%; }
|
|
||||||
|
|
||||||
.loading .vertical #ui_rapper { clear: none }
|
|
||||||
.vertical #ui_rapper { width: 320px; float: left; clear: none; }
|
|
||||||
.vertical .rapper, .vertical .block { float: left; }
|
|
||||||
.vertical #canvas_rapper,
|
|
||||||
.vertical #canvas_rapper div,
|
|
||||||
.vertical #tools_rapper,
|
|
||||||
.vertical #palette_rapper,
|
|
||||||
.vertical #brush_container { display: inline-block; float: left; }
|
|
||||||
.vertical #workspace_rapper { width: auto; position: relative; float: left; }
|
|
||||||
.vertical #palette_rapper { margin-right: 10px; }
|
|
||||||
.vertical #tools_block { min-width: 100%; }
|
|
||||||
|
|
||||||
#secret_rapper { float: left; clear: right; }
|
|
||||||
#secret_rapper span { float: left; }
|
|
||||||
.vertical #secret_rapper { margin-right: 10px; }
|
|
||||||
.vertical #secret_rapper span { float: left; clear: both; }
|
|
||||||
|
|
||||||
#tools_block > * {
|
|
||||||
cursor: crosshair;
|
|
||||||
}
|
|
||||||
#brush_rapper, #letters_rapper {
|
|
||||||
cursor: crosshair;
|
|
||||||
}
|
|
||||||
.dropper #canvas_rapper {
|
|
||||||
cursor: url(../images/dropper.gif) 0 15, auto;
|
|
||||||
}
|
|
||||||
.bucket #canvas_rapper {
|
|
||||||
cursor: url(../images/bucket.png) 3 15, auto;
|
|
||||||
}
|
|
||||||
#brush_rapper {
|
|
||||||
border: 1px solid;
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 13px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
#letters_rapper {
|
|
||||||
display: inline-block;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
.close { position: absolute; top: 20px; right: 20px; z-index: 2; padding: 10px; background: black; cursor: pointer; }
|
.close { position: absolute; top: 20px; right: 20px; z-index: 2; padding: 10px; background: black; cursor: pointer; }
|
||||||
#experimental_palette_toggle.focused { box-shadow: none; }
|
.dropper #canvas_wrapper { cursor: url(../images/dropper.gif) 0 15, auto; }
|
||||||
#cursor_input { position: fixed; top: 0; right: 0; width:30px; opacity: 0; font-size: 16px; }
|
.ed { color: #fff; }
|
||||||
.selector_el {
|
.ed.focused { color: white; text-decoration: underline; }
|
||||||
border: 1px dashed #fff !important;
|
.faded { color: #404040; }
|
||||||
padding-top: 1px;
|
.focused { box-shadow: inset 0 0px 2px #fff; border-color: #fff; }
|
||||||
position:absolute;
|
.focused { box-shadow: inset 1px 0 2px white, inset -1px 0 2px white, inset 0 1px 2px white, inset 0 -1px 2px white; }
|
||||||
margin-top: -1px;
|
.hidden { visibility: hidden; }
|
||||||
top:-999px;left:-999px;
|
.loading .vertical #ui_wrapper { clear: none }
|
||||||
}
|
.locked { border-bottom: 1px solid; color: #bbb; text-decoration: none; }
|
||||||
.selector_el.dragging {
|
.selector_el.creating div { display: none; }
|
||||||
color: #0f0;
|
.selector_el.dragging { color: #0f0; }
|
||||||
}
|
.tool { cursor: pointer; }
|
||||||
.selector_el.creating div {
|
.tool.focused { color: white; text-decoration: underline; }
|
||||||
display: none;
|
.tool.locked.focused { box-shadow: 0 0; }
|
||||||
|
.tool.radio { margin: 0 8px 0 0; }
|
||||||
|
.vertical .wrapper, .vertical .block { float: left; }
|
||||||
|
.vertical #brush_container { display: inline-block; float: left; }
|
||||||
|
.vertical #canvas_wrapper,
|
||||||
|
.vertical #canvas_wrapper div,
|
||||||
|
.vertical #palette_wrapper,
|
||||||
|
.vertical #palette_wrapper { margin-right: 10px; }
|
||||||
|
.vertical #secret_wrapper { margin-right: 10px; }
|
||||||
|
.vertical #secret_wrapper span { float: left; clear: both; }
|
||||||
|
.vertical #tools_block { min-width: 100%; }
|
||||||
|
.vertical #tools_wrapper,
|
||||||
|
.vertical #ui_wrapper { width: 320px; float: left; clear: none; }
|
||||||
|
.vertical #workspace_wrapper { width: auto; position: relative; float: left; }
|
||||||
|
.wrapper { cursor: crosshair; }
|
||||||
|
|
||||||
|
.block {
|
||||||
|
background-color: #000000;
|
||||||
|
float: left;
|
||||||
|
height: auto;
|
||||||
|
user-select: none;
|
||||||
|
width: auto;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
}
|
}
|
||||||
.custom {
|
.custom {
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 5px;
|
margin-bottom: 5px;
|
||||||
margin-bottom: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
@keyframes rainbow {
|
.faba.focused, .fbba.focused, .fcba.focused, .fdba.focused, .feba.focused, .ffba.focused, .fgba.focused, .fhba.focused,
|
||||||
0% { color: hsl(0,100%,50%) }
|
.fiba.focused, .fjba.focused, .fkba.focused, .flba.focused, .fmba.focused, .fnba.focused, .foba.focused, .fpba.focused {
|
||||||
33% { color: hsl(90,100%,50%) }
|
box-shadow: inset 1px 0 2px #888888, inset -1px 0 2px #888888, inset 0 1px 2px #888888, inset 0 -1px 2px #888888;
|
||||||
50% { color: #fff }
|
|
||||||
66% { color: hsl(320,100%,50%) }
|
|
||||||
100% { color: hsl(360,100%,50%) }
|
|
||||||
}
|
}
|
||||||
|
.panke #add_custom_el,
|
||||||
.panke #load_el,
|
|
||||||
.panke #import_textarea,
|
|
||||||
.panke #doc_el,
|
.panke #doc_el,
|
||||||
.panke #export_button,
|
.panke #export_button,
|
||||||
|
.panke #format_el,
|
||||||
.panke #grid_el,
|
.panke #grid_el,
|
||||||
|
.panke #import_textarea,
|
||||||
|
.panke #load_el,
|
||||||
.panke #save_el,
|
.panke #save_el,
|
||||||
.panke #vertical_checkbox,
|
.panke #vertical_checkbox { }
|
||||||
.panke #add_custom_el,
|
.selector_el {
|
||||||
.panke #format_el { }
|
border: 1px dashed #fff !important;
|
||||||
|
left: -999px;
|
||||||
|
margin-top: -1px;
|
||||||
|
padding-top: 1px;
|
||||||
|
position: absolute;
|
||||||
|
top: -999px;
|
||||||
|
}
|
||||||
|
.tool.radio.focused {
|
||||||
|
background-color: #6D6D6D;
|
||||||
|
box-shadow: none;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
.transparent {
|
||||||
|
background-color: transparent;
|
||||||
|
background-image: url(../images/gray-dither.gif);
|
||||||
|
background-size: 8px 8px;
|
||||||
|
}
|
||||||
|
@media (-webkit-min-device-pixel-ratio: 2) {
|
||||||
|
.transparent {
|
||||||
|
background-size: 4px 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.wrapper {
|
||||||
|
background-color: #000000;
|
||||||
|
float: left;
|
||||||
|
height: auto;
|
||||||
|
user-select: none;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
width: auto;
|
||||||
|
word-wrap: break-word;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
}
|
||||||
|
/* }}} */
|
||||||
|
/* {{{ Id styles */
|
||||||
|
#brush_wrapper, #letters_wrapper { cursor: crosshair; }
|
||||||
|
#cursor_input { position: fixed; top: 0; right: 0; width:30px; opacity: 0; font-size: 16px; }
|
||||||
|
#experimental_palette_toggle.focused { box-shadow: none; }
|
||||||
|
#import_wrapper { display: none; }
|
||||||
|
#import_textarea { font-size: 9pt; }
|
||||||
|
#secret_wrapper { float: left; clear: right; }
|
||||||
|
#secret_wrapper span { float: left; }
|
||||||
|
#textarea_mode { padding: 4px; }
|
||||||
|
#tools_block > * { cursor: crosshair; }
|
||||||
|
#ui_wrapper .block { width: 100px; }
|
||||||
|
#ui_wrapper { clear:both; float: left; width: 100vw; }
|
||||||
|
#workspace_wrapper { width: 100%; }
|
||||||
|
|
||||||
|
#brush_wrapper {
|
||||||
|
border: 1px solid;
|
||||||
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
margin-bottom: 13px;
|
||||||
|
}
|
||||||
|
#canvas_wrapper {
|
||||||
|
box-shadow: 0 0 2px rgba(255,255,255,0.3);
|
||||||
|
margin: 3px;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
|
||||||
|
#letters_wrapper {
|
||||||
|
display: inline-block;
|
||||||
|
user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
}
|
||||||
|
/* }}} */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* vim:ts=2 sw=2 expandtab fenc=utf-8 foldmethod=marker nowrap tw=0
|
||||||
|
*/
|
||||||
|
@ -6,7 +6,6 @@
|
|||||||
<head>
|
<head>
|
||||||
<link charset="utf-8" href="../css/help.css" rel="stylesheet" type="text/css" />
|
<link charset="utf-8" href="../css/help.css" rel="stylesheet" type="text/css" />
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
|
|
||||||
<title>asciiblaster v1.0.6 documentation</title>
|
<title>asciiblaster v1.0.6 documentation</title>
|
||||||
</head>
|
</head>
|
||||||
<!-- }}} -->
|
<!-- }}} -->
|
||||||
@ -39,6 +38,8 @@
|
|||||||
encode to, assuming UTF-8, 2-3 bytes in total vs. one (1) byte for those part of the initial
|
encode to, assuming UTF-8, 2-3 bytes in total vs. one (1) byte for those part of the initial
|
||||||
set (e.g. 0-9, A-Z, a-z, etc.)<br />
|
set (e.g. 0-9, A-Z, a-z, etc.)<br />
|
||||||
<br />
|
<br />
|
||||||
|
Internet Explorer is explicitly unsupported.<br />
|
||||||
|
<br />
|
||||||
Repeating patterns of alternating back- and foreground colours, and vice versa, are encoded
|
Repeating patterns of alternating back- and foreground colours, and vice versa, are encoded
|
||||||
using a single (1) byte in mIRC format (video reverse) and as such save space, especially
|
using a single (1) byte in mIRC format (video reverse) and as such save space, especially
|
||||||
with large numbers of repetitions or alternations.
|
with large numbers of repetitions or alternations.
|
||||||
|
@ -17,10 +17,10 @@ function init () {
|
|||||||
bind()
|
bind()
|
||||||
}
|
}
|
||||||
function build () {
|
function build () {
|
||||||
canvas.append(canvas_rapper)
|
canvas.append(canvas_wrapper)
|
||||||
brush.append(brush_rapper)
|
brush.append(brush_wrapper)
|
||||||
palette.append(palette_rapper)
|
palette.append(palette_wrapper)
|
||||||
letters.append(letters_rapper)
|
letters.append(letters_wrapper)
|
||||||
letters.repaint("Basic Latin")
|
letters.repaint("Basic Latin")
|
||||||
|
|
||||||
controls.circle.focus()
|
controls.circle.focus()
|
||||||
@ -30,7 +30,7 @@ function build () {
|
|||||||
brush.build()
|
brush.build()
|
||||||
|
|
||||||
// controls.grid.use()
|
// controls.grid.use()
|
||||||
canvas.resize_rapper()
|
canvas.resize_wrapper()
|
||||||
}
|
}
|
||||||
function bind () {
|
function bind () {
|
||||||
canvas.bind()
|
canvas.bind()
|
||||||
|
@ -19,8 +19,8 @@ var clipboard = (function () {
|
|||||||
if (! clipboard.importing) { clipboard.export_data() }
|
if (! clipboard.importing) { clipboard.export_data() }
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
show: function () { import_rapper.style.display = "block"; clipboard.visible = true; changed = false },
|
show: function () { import_wrapper.style.display = "block"; clipboard.visible = true; changed = false },
|
||||||
hide: function () { import_rapper.style.display = "none"; clipboard.visible = false },
|
hide: function () { import_wrapper.style.display = "none"; clipboard.visible = false },
|
||||||
focus: function () {
|
focus: function () {
|
||||||
if (! clipboard.importing) {
|
if (! clipboard.importing) {
|
||||||
import_textarea.focus()
|
import_textarea.focus()
|
||||||
|
@ -58,8 +58,8 @@ Matrix.prototype.demolish = function (){
|
|||||||
this.forEach(function(lex){
|
this.forEach(function(lex){
|
||||||
lex.demolish()
|
lex.demolish()
|
||||||
})
|
})
|
||||||
while (this.rapper && this.rapper.firstChild) {
|
while (this.wrapper && this.wrapper.firstChild) {
|
||||||
this.rapper.removeChild(this.rapper.firstChild);
|
this.wrapper.removeChild(this.wrapper.firstChild);
|
||||||
}
|
}
|
||||||
this.aa.forEach(function(row){
|
this.aa.forEach(function(row){
|
||||||
row.length = 0
|
row.length = 0
|
||||||
@ -122,15 +122,15 @@ Matrix.prototype.build = function(){
|
|||||||
lex.build()
|
lex.build()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
Matrix.prototype.append = function(rapper){
|
Matrix.prototype.append = function(wrapper){
|
||||||
rapper = this.rapper = rapper || this.rapper
|
wrapper = this.wrapper = wrapper || this.wrapper
|
||||||
if (! this.rapper) return
|
if (! this.wrapper) return
|
||||||
this.aa.forEach(function(row, y){
|
this.aa.forEach(function(row, y){
|
||||||
var div = document.createElement("div")
|
var div = document.createElement("div")
|
||||||
row.forEach(function(lex, x) {
|
row.forEach(function(lex, x) {
|
||||||
div.appendChild(lex.span)
|
div.appendChild(lex.span)
|
||||||
})
|
})
|
||||||
rapper.appendChild( div )
|
wrapper.appendChild( div )
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
Matrix.prototype.region = function(w,h,x,y) {
|
Matrix.prototype.region = function(w,h,x,y) {
|
||||||
@ -164,7 +164,7 @@ Matrix.prototype.resize = function(w,h){
|
|||||||
h = h || canvas.h
|
h = h || canvas.h
|
||||||
var div, row, lex
|
var div, row, lex
|
||||||
var f = this.f, old_h = this.aa.length, old_w = this.aa[0].length
|
var f = this.f, old_h = this.aa.length, old_w = this.aa[0].length
|
||||||
var rapper = this.rapper
|
var wrapper = this.wrapper
|
||||||
w = max(w, 1)
|
w = max(w, 1)
|
||||||
h = max(h, 1)
|
h = max(h, 1)
|
||||||
if (h < old_h) {
|
if (h < old_h) {
|
||||||
@ -180,7 +180,7 @@ Matrix.prototype.resize = function(w,h){
|
|||||||
else if (h > old_h) {
|
else if (h > old_h) {
|
||||||
for (var y = old_h; y < h; y++) {
|
for (var y = old_h; y < h; y++) {
|
||||||
div = document.createElement("div")
|
div = document.createElement("div")
|
||||||
rapper.appendChild( div )
|
wrapper.appendChild( div )
|
||||||
this.aa[y] = new Array (w)
|
this.aa[y] = new Array (w)
|
||||||
for (var x = 0; x < w; x++) {
|
for (var x = 0; x < w; x++) {
|
||||||
lex = this.aa[y][x] = f(x,y)
|
lex = this.aa[y][x] = f(x,y)
|
||||||
@ -211,11 +211,11 @@ Matrix.prototype.resize = function(w,h){
|
|||||||
this.h = h
|
this.h = h
|
||||||
this.bind && this.bind()
|
this.bind && this.bind()
|
||||||
this.focus_clamp()
|
this.focus_clamp()
|
||||||
if (this.rapper && this.rapper.parentNode != document.body) {
|
if (this.wrapper && this.wrapper.parentNode != document.body) {
|
||||||
this.resize_rapper()
|
this.resize_wrapper()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Matrix.prototype.resize_rapper = function(){
|
Matrix.prototype.resize_wrapper = function(){
|
||||||
var cell = canvas.aa[0][0].span
|
var cell = canvas.aa[0][0].span
|
||||||
var cw = cell.offsetWidth
|
var cw = cell.offsetWidth
|
||||||
var ch = cell.offsetHeight
|
var ch = cell.offsetHeight
|
||||||
@ -223,10 +223,10 @@ Matrix.prototype.resize_rapper = function(){
|
|||||||
var width = cw * this.aa[0].length
|
var width = cw * this.aa[0].length
|
||||||
var height = ch * this.aa.length
|
var height = ch * this.aa.length
|
||||||
if (canvas.grid) { width++; height++ }
|
if (canvas.grid) { width++; height++ }
|
||||||
this.rapper.parentNode.style.height = ""
|
this.wrapper.parentNode.style.height = ""
|
||||||
this.rapper.style.width =
|
this.wrapper.style.width =
|
||||||
this.rapper.parentNode.style.width = (width) + "px"
|
this.wrapper.parentNode.style.width = (width) + "px"
|
||||||
this.rapper.style.top = ""
|
this.wrapper.style.top = ""
|
||||||
}
|
}
|
||||||
Matrix.prototype.ascii = function () {
|
Matrix.prototype.ascii = function () {
|
||||||
var lines = this.aa.map(function(row, y){
|
var lines = this.aa.map(function(row, y){
|
||||||
|
@ -113,14 +113,14 @@ var custom = (function(){
|
|||||||
|
|
||||||
exports.clone = function (){
|
exports.clone = function (){
|
||||||
var new_brush = brush.clone()
|
var new_brush = brush.clone()
|
||||||
var rapper = document.createElement("div")
|
var wrapper = document.createElement("div")
|
||||||
rapper.className = "custom"
|
wrapper.className = "custom"
|
||||||
new_brush.append(rapper)
|
new_brush.append(wrapper)
|
||||||
custom_rapper.appendChild(rapper)
|
custom_wrapper.appendChild(wrapper)
|
||||||
// store in localstorage?
|
// store in localstorage?
|
||||||
rapper.addEventListener("click", function(e){
|
wrapper.addEventListener("click", function(e){
|
||||||
if (e.shiftKey) {
|
if (e.shiftKey) {
|
||||||
rapper.parentNode.removeChild(rapper)
|
wrapper.parentNode.removeChild(wrapper)
|
||||||
delete new_brush
|
delete new_brush
|
||||||
} else {
|
} else {
|
||||||
// load this brush
|
// load this brush
|
||||||
|
6
assets/js/ui/controls.js
vendored
6
assets/js/ui/controls.js
vendored
@ -122,9 +122,9 @@ var controls = (function(){
|
|||||||
state = typeof state == "boolean" ? state : ! document.body.classList.contains("grid")
|
state = typeof state == "boolean" ? state : ! document.body.classList.contains("grid")
|
||||||
document.body.classList[ state ? "add" : "remove" ]('grid')
|
document.body.classList[ state ? "add" : "remove" ]('grid')
|
||||||
letters.grid = palette.grid = canvas.grid = state
|
letters.grid = palette.grid = canvas.grid = state
|
||||||
canvas.resize_rapper()
|
canvas.resize_wrapper()
|
||||||
palette.resize_rapper()
|
palette.resize_wrapper()
|
||||||
letters.resize_rapper()
|
letters.resize_wrapper()
|
||||||
if (! selection.hidden) selection.reposition()
|
if (! selection.hidden) selection.reposition()
|
||||||
this.update( state )
|
this.update( state )
|
||||||
}
|
}
|
||||||
|
@ -192,14 +192,14 @@ var palette = (function(){
|
|||||||
brush.char = lex.char
|
brush.char = lex.char
|
||||||
brush.opacity = lex.opacity
|
brush.opacity = lex.opacity
|
||||||
brush.generate()
|
brush.generate()
|
||||||
brush_rapper.style.borderColor = css_reverse_lookup[fillColor]
|
brush_wrapper.style.borderColor = css_reverse_lookup[fillColor]
|
||||||
return
|
return
|
||||||
})
|
})
|
||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
brush_rapper.style.borderColor = css_reverse_lookup[fillColor]
|
brush_wrapper.style.borderColor = css_reverse_lookup[fillColor]
|
||||||
|
|
||||||
return palette
|
return palette
|
||||||
|
|
||||||
|
@ -1,8 +1,7 @@
|
|||||||
1) bug: fix @ IE8?
|
1) feature: {bold,italic,underline} attributes
|
||||||
2) feature: {bold,italic,underline} attributes
|
2) feature: draw w/ keyboard instead of [LR]MB
|
||||||
3) feature: draw w/ keyboard instead of [LR]MB
|
3) feature: {line,measuring} tool
|
||||||
4) feature: {line,measuring} tool
|
4) feature: status bar w/ position, etc.
|
||||||
5) feature: status bar w/ position, etc.
|
5) feature: zoom {in,out} (esp. on Android)
|
||||||
6) feature: zoom {in,out} (esp. on Android)
|
6) reimplement: ANSI (maybe,) {save,upload} as PNG & gallery, cutoff (print line #(s) affected, tunably,) shaders (maybe)
|
||||||
7) reimplement: ANSI (maybe,) {save,upload} as PNG & gallery, cutoff (print line #(s) affected, tunably,) shaders (maybe)
|
7) releases: merge w/ MiRCARTools (into asciiblaster,) provide signed release APK
|
||||||
8) releases: merge w/ MiRCARTools (into asciiblaster,) provide signed release APK
|
|
||||||
|
28
index.html
28
index.html
@ -13,26 +13,26 @@
|
|||||||
<!-- }}} -->
|
<!-- }}} -->
|
||||||
<!-- {{{ BODY -->
|
<!-- {{{ BODY -->
|
||||||
<body class="loading panke">
|
<body class="loading panke">
|
||||||
<!-- {{{ DIV: workspace_rapper -->
|
<!-- {{{ DIV: workspace_wrapper -->
|
||||||
<div id="workspace_rapper">
|
<div id="workspace_wrapper">
|
||||||
<div id="canvas_rapper" class="rapper"></div>
|
<div id="canvas_wrapper" class="wrapper"></div>
|
||||||
</div>
|
</div>
|
||||||
<!-- }}} -->
|
<!-- }}} -->
|
||||||
<!-- {{{ DIV: ui_rapper -->
|
<!-- {{{ DIV: ui_wrapper -->
|
||||||
<div id="ui_rapper">
|
<div id="ui_wrapper">
|
||||||
<!-- {{{ DIV: tools_block -->
|
<!-- {{{ DIV: tools_block -->
|
||||||
<div class="block" id="tools_block">
|
<div class="block" id="tools_block">
|
||||||
<div id="palette_rapper"></div>
|
<div id="palette_wrapper"></div>
|
||||||
<div id="secret_rapper">
|
<div id="secret_wrapper">
|
||||||
<span id="experimental_palette_toggle">.</span>
|
<span id="experimental_palette_toggle">.</span>
|
||||||
</div>
|
</div>
|
||||||
<div id="letters_rapper"></div>
|
<div id="letters_wrapper"></div>
|
||||||
<div id="custom_rapper"></div>
|
<div id="custom_wrapper"></div>
|
||||||
</div>
|
</div>
|
||||||
<!-- }}} -->
|
<!-- }}} -->
|
||||||
<!-- {{{ DIV: brush_container -->
|
<!-- {{{ DIV: brush_container -->
|
||||||
<div id="brush_container" class="block">
|
<div id="brush_container" class="block">
|
||||||
<div id="brush_rapper">
|
<div id="brush_wrapper">
|
||||||
</div>
|
</div>
|
||||||
<span id="fg_checkbox" class="tool">x fg</span><br />
|
<span id="fg_checkbox" class="tool">x fg</span><br />
|
||||||
<span id="bg_checkbox" class="tool">x bg</span><br />
|
<span id="bg_checkbox" class="tool">x bg</span><br />
|
||||||
@ -43,8 +43,8 @@
|
|||||||
<span id="redo_el" class="tool hidden">redo</span><br />
|
<span id="redo_el" class="tool hidden">redo</span><br />
|
||||||
</div>
|
</div>
|
||||||
<!-- }}} -->
|
<!-- }}} -->
|
||||||
<!-- {{{ DIV: tools_rapper -->
|
<!-- {{{ DIV: tools_wrapper -->
|
||||||
<div id="tools_rapper" class="block">
|
<div id="tools_wrapper" class="block">
|
||||||
<span id="square_el" class="tool">square</span><br />
|
<span id="square_el" class="tool">square</span><br />
|
||||||
<span id="circle_el" class="tool">circle</span><br />
|
<span id="circle_el" class="tool">circle</span><br />
|
||||||
<span id="cross_el" class="tool">cross</span><br />
|
<span id="cross_el" class="tool">cross</span><br />
|
||||||
@ -72,12 +72,12 @@
|
|||||||
<span id="vertical_checkbox" class="tool">x vertical</span>
|
<span id="vertical_checkbox" class="tool">x vertical</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="import_rapper">
|
<div id="import_wrapper">
|
||||||
<span id="format_el">ascii *mirc</span>
|
<span id="format_el">ascii *mirc</span>
|
||||||
<span id="import_buttons">
|
<span id="import_buttons">
|
||||||
<button id="import_button">import</button>
|
<button id="import_button">import</button>
|
||||||
</span>
|
</span>
|
||||||
<div id="gallery_rapper" /><br />
|
<div id="gallery_wrapper" /><br />
|
||||||
<div id="cutoff_warning_el">character limit of 425 exceeded</div>
|
<div id="cutoff_warning_el">character limit of 425 exceeded</div>
|
||||||
<textarea id="import_textarea" cols="100" rows="30"></textarea>
|
<textarea id="import_textarea" cols="100" rows="30"></textarea>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user