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