Updated menu icons etc and added desktop input support
This commit is contained in:
parent
475fef7323
commit
5ab4ce0e85
43
index.html
43
index.html
|
@ -6,15 +6,10 @@
|
|||
<title>ASCIIFlow Infinity</title>
|
||||
<style>
|
||||
#menu {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
top: 95px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
z-index: 100;
|
||||
width: 400px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
|
@ -32,19 +27,19 @@
|
|||
}
|
||||
|
||||
button {
|
||||
width: 15%;
|
||||
display: block;
|
||||
margin: 3px;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
background: #DEF;
|
||||
background: #F8F8F8;
|
||||
outline: 0 !important;
|
||||
border-width: 1px;
|
||||
border-color: #DDD;
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
button.active {
|
||||
border-color: #444;
|
||||
background: #D0E0FF;
|
||||
}
|
||||
|
||||
|
@ -59,9 +54,31 @@ button.active {
|
|||
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>
|
||||
</head>
|
||||
<body>
|
||||
<div id="logo"><pre>
|
||||
__ ____ ____ _ _ ____ _____ _ __
|
||||
/ \ | ___|| ___||_||_| / ___|| | _ | \ __ / /
|
||||
/ /\ \|_ \ | | _ _ / / | | | | | |\ \/ \/ /
|
||||
/ __ \_\ \ | |__ | || |/ __| | |_| |_| | \ /
|
||||
/__/ \__\___||____||_||_|_/ |____|____| \_/\_/
|
||||
|
||||
</pre></div>
|
||||
<div id="menu">
|
||||
<div id="buttons">
|
||||
<button id="box-button" class="active">Box</button>
|
||||
|
@ -69,7 +86,9 @@ button.active {
|
|||
<button id="freeform-button">Draw</button>
|
||||
<button id="erase-button">Erase</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 id="menu-button-dialog" class="dialog">
|
||||
<pre id="export-area">BLAH</pre>
|
||||
|
|
|
@ -153,6 +153,10 @@ ascii.Controller.prototype.installBindings = function() {
|
|||
$('#buttons > button').click(function(e) {
|
||||
this.updateButtons(e.target.id);
|
||||
}.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') {
|
||||
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;
|
||||
};
|
||||
|
|
|
@ -49,6 +49,8 @@ ascii.DrawFunction.prototype.end = function(position) {};
|
|||
* @return {string}
|
||||
*/
|
||||
ascii.DrawFunction.prototype.getCursor = function(position) {};
|
||||
/** Handle the key with given value being pressed. @param {string} value */
|
||||
ascii.DrawFunction.prototype.handleKey = function(value) {};
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
|
@ -75,6 +77,7 @@ ascii.DrawBox.prototype.end = function(position) {
|
|||
ascii.DrawBox.prototype.getCursor = function(position) {
|
||||
return 'crosshair';
|
||||
};
|
||||
ascii.DrawBox.prototype.handleKey = function(value) {};
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
|
@ -107,6 +110,7 @@ ascii.DrawLine.prototype.end = function(position) {
|
|||
ascii.DrawLine.prototype.getCursor = function(position) {
|
||||
return 'crosshair';
|
||||
};
|
||||
ascii.DrawLine.prototype.handleKey = function(value) {};
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
|
@ -131,6 +135,58 @@ ascii.DrawFreeform.prototype.end = function(position) {
|
|||
ascii.DrawFreeform.prototype.getCursor = function(position) {
|
||||
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
|
||||
|
@ -156,8 +212,8 @@ ascii.DrawErase.prototype.move = function(position) {
|
|||
var endX = Math.max(this.startPosition.x, this.endPosition.x);
|
||||
var endY = Math.max(this.startPosition.y, this.endPosition.y);
|
||||
|
||||
for (var i = startX; i < endX; i++) {
|
||||
for (var j = startY; j < endY; j++) {
|
||||
for (var i = startX; i <= endX; i++) {
|
||||
for (var j = startY; j <= endY; 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) {
|
||||
return 'crosshair';
|
||||
};
|
||||
ascii.DrawErase.prototype.handleKey = function(value) {};
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
|
@ -279,3 +336,5 @@ ascii.DrawMove.prototype.getCursor = function(position) {
|
|||
}
|
||||
};
|
||||
|
||||
ascii.DrawMove.prototype.handleKey = function(value) {};
|
||||
|
||||
|
|
Loading…
Reference in New Issue