haskal
/
asciiflow2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Updated menu icons etc and added desktop input support

This commit is contained in:
Lewis Hemens 2014-01-20 23:58:33 +00:00
parent 475fef7323
commit 5ab4ce0e85
3 changed files with 114 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
index.html
View File

@ -6,15 +6,10 @@
<title>ASCIIFlow Infinity</title> <title>ASCIIFlow Infinity</title>
<style> <style>
#menu { #menu {
margin-left: auto;
margin-right: auto;
position: absolute; position: absolute;
top: 5px; top: 95px;
left: 0px; left: 0px;
right: 0px;
z-index: 100; z-index: 100;
width: 400px;
text-align: center;
} }
.dialog { .dialog {
@ -32,19 +27,19 @@
} }
button { button {
width: 15%; display: block;
margin: 3px;
width: 60px;
height: 30px; height: 30px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
border-radius: 5px; background: #F8F8F8;
background: #DEF;
outline: 0 !important; outline: 0 !important;
border-width: 1px; border-width: 1px;
border-color: #DDD; border-color: #444;
} }
button.active { button.active {
border-color: #444;
background: #D0E0FF; background: #D0E0FF;
} }
@ -59,9 +54,31 @@ button.active {
height: 100px; height: 100px;
} }
#logo {
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
background: #F8F8F8;
border-right: 1px solid #444;
border-bottom: 1px solid #444;
}
#logo pre {
margin: 0px;
}
</style> </style>
</head> </head>
<body> <body>
<div id="logo"><pre>
__ ____ ____ _ _ ____ _____ _ __
/ \ | ___|| ___||_||_| / ___|| | _ | \ __ / /
/ /\ \|_ \ | | _ _ / / | | | | | |\ \/ \/ /
/ __ \_\ \ | |__ | || |/ __| | |_| |_| | \ /
/__/ \__\___||____||_||_|_/ |____|____| \_/\_/
</pre></div>
<div id="menu"> <div id="menu">
<div id="buttons"> <div id="buttons">
<button id="box-button" class="active">Box</button> <button id="box-button" class="active">Box</button>
@ -69,7 +86,9 @@ button.active {
<button id="freeform-button">Draw</button> <button id="freeform-button">Draw</button>
<button id="erase-button">Erase</button> <button id="erase-button">Erase</button>
<button id="move-button">Resize</button> <button id="move-button">Resize</button>
<button id="menu-button">Menu</button> <button id="text-button">Text</button>
<!-- <button id="select-button">Select</button> -->
<!-- <button id="menu-button">Menu</button> -->
</div> </div>
<div id="menu-button-dialog" class="dialog"> <div id="menu-button-dialog" class="dialog">
<pre id="export-area">BLAH</pre> <pre id="export-area">BLAH</pre>

22
js-lib/controller.js
View File

@ -153,6 +153,10 @@ ascii.Controller.prototype.installBindings = function() {
$('#buttons > button').click(function(e) { $('#buttons > button').click(function(e) {
this.updateButtons(e.target.id); this.updateButtons(e.target.id);
}.bind(this)); }.bind(this));
$(window).keypress(function(e) {
this.handleKeyPress(e.keyCode);
}.bind(this));
}; };
/** /**
@ -182,4 +186,22 @@ ascii.Controller.prototype.updateButtons = function(id) {
if (id == 'move-button') { if (id == 'move-button') {
this.drawFunction = new ascii.DrawMove(this.state); this.drawFunction = new ascii.DrawMove(this.state);
} }
if (id == 'text-button') {
this.drawFunction = new ascii.DrawText(this.state);
}
};
/**
* Handles key presses.
* @param {number} keyCode
*/
ascii.Controller.prototype.handleKeyPress = function(keyCode) {
// TODO: Handle undo, redo, and ctrl+c and ctrl+v.
var stringValue = String.fromCharCode(keyCode);
// Override some special characters so that can be handled in one place.
if (keyCode == 13) {
stringValue = '\n';
}
this.drawFunction.handleKey(stringValue);
this.view.dirty = true;
}; };

63
js-lib/draw.js
View File

@ -49,6 +49,8 @@ ascii.DrawFunction.prototype.end = function(position) {};
* @return {string} * @return {string}
*/ */
ascii.DrawFunction.prototype.getCursor = function(position) {}; ascii.DrawFunction.prototype.getCursor = function(position) {};
/** Handle the key with given value being pressed. @param {string} value */
ascii.DrawFunction.prototype.handleKey = function(value) {};
/** /**
* @constructor * @constructor
@ -75,6 +77,7 @@ ascii.DrawBox.prototype.end = function(position) {
ascii.DrawBox.prototype.getCursor = function(position) { ascii.DrawBox.prototype.getCursor = function(position) {
return 'crosshair'; return 'crosshair';
}; };
ascii.DrawBox.prototype.handleKey = function(value) {};
/** /**
* @constructor * @constructor
@ -107,6 +110,7 @@ ascii.DrawLine.prototype.end = function(position) {
ascii.DrawLine.prototype.getCursor = function(position) { ascii.DrawLine.prototype.getCursor = function(position) {
return 'crosshair'; return 'crosshair';
}; };
ascii.DrawLine.prototype.handleKey = function(value) {};
/** /**
* @constructor * @constructor
@ -131,6 +135,58 @@ ascii.DrawFreeform.prototype.end = function(position) {
ascii.DrawFreeform.prototype.getCursor = function(position) { ascii.DrawFreeform.prototype.getCursor = function(position) {
return 'crosshair'; return 'crosshair';
}; };
ascii.DrawFreeform.prototype.handleKey = function(value) {};
/**
* @constructor
* @implements {ascii.DrawFunction}
* @param {ascii.State} state
*/
ascii.DrawText = function(state) {
this.state = state;
this.startPosition = null;
this.currentPosition = null;
};
ascii.DrawText.prototype.start = function(position) {
this.startPosition = position;
this.currentPosition = position;
// Clean up any existing draws.
this.state.clearDraw();
// Effectively highlights the starting cell.
var currentValue = this.state.getCell(position).getRawValue();
this.state.drawValue(position, currentValue == null ? ' ' : currentValue);
};
ascii.DrawText.prototype.move = function(position) {};
ascii.DrawText.prototype.end = function(position) {};
ascii.DrawText.prototype.getCursor = function(position) {
return 'text';
};
ascii.DrawText.prototype.handleKey = function(value) {
if (this.currentPosition == null) {
return;
}
if (value == '\n') {
// Pressed return key, so clear this cell.
this.state.clearDraw();
} else {
// Draw the value and commit it.
this.state.drawValue(this.currentPosition, value);
this.state.commitDraw();
}
var nextPosition = this.currentPosition.add(new ascii.Vector(1, 0));
// Check for hitting edge of box or return character, then line wrap.
if (value == '\n' || this.state.getCell(nextPosition).isSpecial()) {
nextPosition = this.startPosition.add(new ascii.Vector(0, 1));
this.startPosition = nextPosition;
}
// Highlight the next cell.
this.currentPosition = nextPosition;
var nextValue = this.state.getCell(nextPosition).getRawValue();
this.state.drawValue(nextPosition, nextValue == null ? ' ' : nextValue);
};
/** /**
* @constructor * @constructor
@ -156,8 +212,8 @@ ascii.DrawErase.prototype.move = function(position) {
var endX = Math.max(this.startPosition.x, this.endPosition.x); var endX = Math.max(this.startPosition.x, this.endPosition.x);
var endY = Math.max(this.startPosition.y, this.endPosition.y); var endY = Math.max(this.startPosition.y, this.endPosition.y);
for (var i = startX; i < endX; i++) { for (var i = startX; i <= endX; i++) {
for (var j = startY; j < endY; j++) { for (var j = startY; j <= endY; j++) {
this.state.drawValue(new ascii.Vector(i, j), ' '); this.state.drawValue(new ascii.Vector(i, j), ' ');
} }
} }
@ -168,6 +224,7 @@ ascii.DrawErase.prototype.end = function(position) {
ascii.DrawErase.prototype.getCursor = function(position) { ascii.DrawErase.prototype.getCursor = function(position) {
return 'crosshair'; return 'crosshair';
}; };
ascii.DrawErase.prototype.handleKey = function(value) {};
/** /**
* @constructor * @constructor
@ -279,3 +336,5 @@ ascii.DrawMove.prototype.getCursor = function(position) {
} }
}; };
ascii.DrawMove.prototype.handleKey = function(value) {};