assets/{css,js,html}/*, index.html: clean up & correct {CSS,HTML}.

assets/text/TODO: updated.
This commit is contained in:
Lucio Andrés Illanes Albornoz 2018-11-25 11:57:06 +01:00
parent 80b89add02
commit 72cb6696b5
12 changed files with 286 additions and 251 deletions

View File

@ -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
*/

View File

@ -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
*/

View File

@ -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
*/

View File

@ -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.

View File

@ -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()

View File

@ -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()

View File

@ -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){

View File

@ -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

View File

@ -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 )
} }

View File

@ -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

View File

@ -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

View File

@ -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>