Skip to content

Commit

Permalink
frames are much closer to working.
Browse files Browse the repository at this point in the history
  • Loading branch information
@echo-bravo-yahoo
echo-bravo-yahoo committed Feb 2, 2015
1 parent 47d8930 commit 0360765
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 11 deletions.
8 changes: 6 additions & 2 deletions css/micropaint.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
}
.little-pixel {
float: left;
height: 9px;
width: 9px;
height: 2px;
width: 2px;
margin-left: 0px;
margin-top: 0px;
}
Expand Down Expand Up @@ -81,6 +81,10 @@
height: 150px;
overflow: hidden;
float: left;
cursor: pointer;
}
.activeFrame {
cursor: auto !important;
}
.clearfix:after {
content: ".";
Expand Down
4 changes: 2 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ <h4 class="modal-title">Import From C++ Header</h4>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<body style="cursor: crosshair; margin: 0px;" unselectable="on" class="unselectable">
<body style="margin: 0px;" unselectable="on" class="unselectable">
<div id="parent" class="parent">
<div id="controls" class="controls">
<div id="openingTabGuard" tabIndex="1"></div>
Expand All @@ -64,7 +64,7 @@ <h4 class="modal-title">Import From C++ Header</h4>
<button id="importButton" class="btn btn-large btn-default" data-toggle="modal" data-target="#importModal" style="width:100%;" tabIndex="6">Import</button>
<div id="closingTabGuard" tabIndex="6"></div>
</div>
<div id="pixelParent" class="pixelParent clearfix"></div>
<div id="pixelParent" style="cursor: crosshair;" class="pixelParent clearfix"></div>
<div id="toolbar" class="toolbar">
<div id="frame0" class="frame"></div>
<button id="addFrameButton" class="btn btn-large btn-default">Add Frame</button>
Expand Down
33 changes: 26 additions & 7 deletions micropaint.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
var isMouseDown = false;
var drawMode = 'TOGGLE';
var frameCounter = 1;
var frameCounter = 0;
var activeFrame = 0;

document.onmousedown = function() {
isMouseDown = true;
Expand Down Expand Up @@ -102,9 +103,9 @@ function setupButtons() {
});

$('#addFrameButton').click(function() {
frameCounter++;
$('#addFrameButton').before('<div id=frame'+frameCounter+' class=\'frame\'></div>');
generateScreen('frame'+frameCounter, false);
frameCounter++;
});

$('#exportModal').on('shown.bs.modal', function () {
Expand Down Expand Up @@ -168,12 +169,19 @@ function importFromHeader(header) {
// NOTE: get rid of 384 / magic numbers
var temp = ("00000000" + parseInt(tokenList[tokenCounter]).toString(2)).slice(-8);
for (var bitCounter = 0; bitCounter < 8; bitCounter++) {
var id = String(Math.min(tokenCounter%64 + bitCounter*64 + Math.floor(tokenCounter/64)*8*64, 3071));
var pixel = $('#pixel-'+id)
var littlePixel = $('#frame'+activeFrame+'-little-pixel-'+id);
if(parseInt(temp[7-bitCounter], 2) === 1) {
$('#pixel-'+String(Math.min(tokenCounter%64 + bitCounter*64 + Math.floor(tokenCounter/64)*8*64, 3071))).addClass('on');
$('#pixel-'+String(Math.min(tokenCounter%64 + bitCounter*64 + Math.floor(tokenCounter/64)*8*64, 3071))).removeClass('off');
pixel.addClass('on');
pixel.removeClass('off');
littlePixel.addClass('on');
littlePixel.removeClass('off');
} else {
$('#pixel-'+String(Math.min(tokenCounter%64 + bitCounter*64 + Math.floor(tokenCounter/64)*8*64, 3071))).addClass('off');
$('#pixel-'+String(Math.min(tokenCounter%64 + bitCounter*64 + Math.floor(tokenCounter/64)*8*64, 3071))).removeClass('on');
pixel.addClass('off');
pixel.removeClass('on');
littlePixel.addClass('off');
littlePixel.removeClass('on');
}
}
}
Expand Down Expand Up @@ -206,11 +214,14 @@ function generateScreen(parentID, isMainScreen) {
if(isMainScreen) {
$('#'+parentID).mousedown(function(event) {
var target = event.target;
var littleTarget = $('#frame'+activeFrame+'-little-pixel-'+event.target.id.split('-').pop())[0];
//console.log(this);
// if the pixel is on and our drawmode is TOGGLE or NEGATIVE, then turn the pixel off
if(target.classList.contains('on') && (drawMode === 'TOGGLE' || drawMode === 'NEGATIVE')) {
target.classList.remove('on');
target.classList.add('off');
littleTarget.classList.remove('on');
littleTarget.classList.add('off');
saveStateDebounced();
// if the pixel is on and our drawmode is POSITIVE, then do nothing
} else if(target.classList.contains('on') && drawMode === 'POSITIVE') {
Expand All @@ -219,6 +230,8 @@ function generateScreen(parentID, isMainScreen) {
} else if(target.classList.contains('off') && (drawMode === 'TOGGLE' || drawMode === 'POSITIVE')) {
target.classList.remove('off');
target.classList.add('on');
littleTarget.classList.remove('off');
littleTarget.classList.add('on');
saveStateDebounced();
// if the pixel is on and our drawmode is POSITIVE, then do nothing
} else if(target.classList.contains('off') && drawMode === 'NEGATIVE') {
Expand All @@ -228,12 +241,15 @@ function generateScreen(parentID, isMainScreen) {
});
$('#'+parentID).mouseover(function(event) {
var target = event.target;
var littleTarget = $('#frame'+activeFrame+'-little-pixel-'+event.target.id.split('-').pop())[0];
if(isMouseDown) {
//console.log(target);
// if the pixel is on and our drawmode is TOGGLE or NEGATIVE, then turn the pixel off
if(target.classList.contains('on') && (drawMode === 'TOGGLE' || drawMode === 'NEGATIVE')) {
target.classList.remove('on');
target.classList.add('off');
littleTarget.classList.remove('on');
littleTarget.classList.add('off');
saveStateDebounced();
// if the pixel is on and our drawmode is POSITIVE, then do nothing
} else if(target.classList.contains('on') && drawMode === 'POSITIVE') {
Expand All @@ -242,6 +258,8 @@ function generateScreen(parentID, isMainScreen) {
} else if(target.classList.contains('off') && (drawMode === 'TOGGLE' || drawMode === 'POSITIVE')) {
target.classList.remove('off');
target.classList.add('on');
littleTarget.classList.remove('off');
littleTarget.classList.add('on');
saveStateDebounced();
// if the pixel is on and our drawmode is POSITIVE, then do nothing
} else if(target.classList.contains('off') && drawMode === 'NEGATIVE') {
Expand All @@ -260,7 +278,7 @@ function generateScreen(parentID, isMainScreen) {
temp.className += ' off';
temp.className += ' unselectable';
} else {
temp.id = 'little-pixel-' + (rowCounter * 64 + colCounter);
temp.id = parentID+'-little-pixel-' + (rowCounter * 64 + colCounter);
temp.className = 'little-pixel';
temp.className += ' off';
temp.className += ' unselectable';
Expand All @@ -277,5 +295,6 @@ function generateScreen(parentID, isMainScreen) {

generateScreen('pixelParent', true);
generateScreen('frame0', false);
$('#frame'+activeFrame).addClass('activeFrame');
setupButtons();
loadState();

0 comments on commit 0360765

Please sign in to comment.