table
each valRow in [0,1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11,12,13,14,15]
tr
each valCol in [0,1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11,12,13,14,15]
td(id="c"+valRow+"-"+valCol, class="cell")
textarea#map
table
each valRow in [0,1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11,12,13,14,15]
tr
each valCol in [0,1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11,12,13,14,15]
td(id="d"+valRow+"-"+valCol, class="cell preview")
hr
button#clear clear
| |
button#reset reset
| |
button#savef save Frame
| |
button#newf new Frame
#frames
input#animation(type='text')
button#loadAnimation load Animation
button#run play
br
button#export export
button#import import
br
textarea#exported
table
border-collapse collapse
display block
float left
margin 10px
tr
border none
td.cell
width 20px
height 20px
background rgb(33,33,33)
border none
margin 0
padding 0
border 1px dotted #999
&:hover
cursor pointer
background #f00
&.black
background rgb(251,251,251)
&:hover
background #f00
&.preview
border 0
width: 1px
height: 1px
textarea
text-align center
margin 10px
width 370px
height 350px
font-size 20px
letter-spacing 8px
line-height 21px
padding 0 0 0 8px
hr
display block
margin 0 2% 10px
width 96%
.frame
background #AA0
.active
background #ff0
color #000
#exported
border none
var map = document.getElementById('map');
var pixelMatriz = [];
function updateMap(){
var data = '';
for(var j = 0;j<16; j++){
console.log(j);
data += pixelMatriz[j].join('')+'\n';
};
map.value = data.substring(0, data.length-1);
}
function toggleClass(cellx, clase){
cellx.className = 'cell '+(cellx.className.indexOf(clase)!=-1?'':clase);
var idc = cellx.id;
var indx = idc.indexOf('-');
var j = parseInt(idc.substring(1, indx));
var i = parseInt(idc.substring(indx+1, idc.length));
pixelMatriz[j][i] = pixelMatriz[j][i]=='_'?'M':'_';
updateMap();
}
for(var i = 0;i<16; i++){
pixelMatriz.push([]);
for(var j = 0;j<16; j++){
pixelMatriz[i].push('_');
var cellx = document.getElementById('c'+j+'-'+i);
map.innerHTML+='_';
cellx.onclick = function(evt){
toggleClass(this, 'black');
let target = evt.target
var id = target.id.toString().replace('c', 'd')
document.getElementById(id).classList.toggle('black')
}
}
map.innerHTML+='\n';
}
renderMapFromText = function(data){
//var data = map.value;
//console.log('map:', map.value);
var rows = data.split('\n');
//console.log(rows);
for(var j =0; j<16;j++){
for(var i=0; i<16; i++){
pixelMatriz[j][i]=rows[j][i];
var cellx = document.getElementById('c'+j+'-'+i);
var cellpre = document.getElementById('d'+j+'-'+i);
//cellx.className = 'cell';
cellx.className = 'cell ' + (pixelMatriz[j][i]=='M'?'black':'');
cellpre.className = 'cell preview ' + (pixelMatriz[j][i]=='M'?'black':'');
}
}
};
var clear = document.getElementById('clear');
clear.onclick = function(){
for(var i=0; i<256; i++){
pixelMatriz[Math.floor(i/16)][i%16] = "_";
updateMap();
document.getElementById('c'+Math.round(i/16)+'-'+(i%16)).className = 'cell';
}
};
//default hero
var defaultHero = "________________\n"+
"________________\n"+
"_______MM_______\n"+
"_______MM_______\n"+
"________________\n"+
"______MMM_______\n"+
"_____M_M_M______\n"+
"_____M_M_M______\n"+
"____M__M__M_____\n"+
"____M_MMM_M_____\n"+
"______M_M_______\n"+
"______M_M_______\n"+
"______M_M_______\n"+
"______M_M_______\n"+
"_____MM_MM______\n"+
"________________";
var loadSample = document.getElementById('reset');
loadSample.onclick = function(){
map.value = defaultHero;
renderMapFromText(map.value);
};
map.onkeyup = function(){
renderMapFromText(map.value);
}
map.value = defaultHero;
renderMapFromText(defaultHero);
var frames = [];
var framesDom = document.getElementById('frames');
var saveF = document.getElementById('savef');
var newF = document.getElementById('newf');
var currentFrame = 0;
function setCurrentFrame(index){
document.getElementById('f'+currentFrame).className = 'frame';
currentFrame = index;
document.getElementById('f'+currentFrame).className = 'frame active';
};
newF.onclick = function(){
var fbutton = document.createElement("BUTTON");
fbutton.className = 'frame';
fbutton.innerHTML =frames.length;
fbutton.id='f'+ frames.length;
framesDom.appendChild(fbutton);
fbutton.onclick = (function(){
var index = frames.length;
return function(){
setCurrentFrame(index);
map.value = frames[index];
renderMapFromText(map.value);
}
})();
setCurrentFrame(frames.length);
frames.push(map.value);
};
saveF.onclick = function(){
if(frames.length==0){
newf.onclick();
}else{
frames[currentFrame] = map.value;
}
}
//stands hero...'
// load presets
// create frame
// create animation...
var animationFrames = [];
var loadAnimation = document.getElementById('loadAnimation');
console.log(loadAnimation);
var animation = document.getElementById('animation');
console.log(animation);
var pause = true;
var play = document.getElementById('run');
console.log(play);
play.onclick = function(){
pause =!pause;
play.innerHTML = pause?'play':'pause';
};
loadAnimation.onclick = function(){
animationFrames = animation.value.split(',');
};
var cont = 0;
var updateLoop = 0;
function loop(){
if(++updateLoop%4==0&&!pause){
setCurrentFrame(animationFrames[cont]);
map.value = frames[currentFrame];
renderMapFromText(map.value);
if(++cont>=animationFrames.length){
cont=0;
}
updateLoop=0;
}
requestAnimationFrame(loop);
};
requestAnimationFrame(loop);
var exportb = document.getElementById('export');
var exported = document.getElementById('exported');
exportb.onclick = function(){
exported.value = frames.join('\n//new Frame\n') + '\nAnimation:\n'+animation.value;
};
var importb = document.getElementById('import');
importb.onclick = function(){
frames = exported.value.split('\n//new Frame\n');
currentFrame = 0;
framesDom.innerHTML = '';
for(var i =0; i<frames.length;i++){
var fbutton = document.createElement("BUTTON");
fbutton.className = 'frame';
fbutton.innerHTML =i;
fbutton.id='f'+ i;
framesDom.appendChild(fbutton);
fbutton.onclick = (function(){
var index = i;
return function(){
setCurrentFrame(index);
map.value = frames[index];
renderMapFromText(map.value);
}
})();
}
};
Also see: Tab Triggers