document.addEventListener('DOMContentLoaded', ()=>{
   const pos = {
       x: 5,
       y: 10,
       d: 0,
   };

   const pan = {
       x: 0,
       y: 0
   };

   const labels = document.getElementById('labels');
   const txtBox = document.getElementById('txtBox');
   const data= document.getElementById('data');
   const importBtn = document.getElementById('importBtn');
   const can = document.getElementById('can');
   const ctx = can.getContext("2d");

   ctx.translate(0.5,0.5);
   ctx.imageSmoothingEnabled= false;

   const coffset = {
       x: can.getBoundingClientRect().left,
       y: can.getBoundingClientRect().top
   };

   let doorStyle=false;
   let chromaBg=false;

   let graph = [{"t":"seen","x":10,"y":5},{"t":"lvlup","x":10,"y":5},{"t":"seen","x":10,"y":6},{"t":"seen","x":10,"y":7},{"t":"seen","x":10,"y":9},{"t":"seen","x":11,"y":9},{"t":"seen","x":12,"y":9},{"t":"seen","x":12,"y":10},{"t":"seen","x":12,"y":11},{"t":"lvldn","x":12,"y":11},{"t":"seen","x":12,"y":7},{"t":"seen","x":12,"y":6},{"t":"seen","x":12,"y":5},{"t":"seen","x":13,"y":7},{"t":"seen","x":14,"y":7},{"t":"seen","x":14,"y":6},{"t":"seen","x":14,"y":5},{"t":"seen","x":15,"y":5},{"t":"seen","x":16,"y":5},{"t":"seen","x":17,"y":5},{"t":"seen","x":18,"y":5},{"t":"seen","x":12,"y":12},{"t":"seen","x":12,"y":13},{"t":"seen","x":13,"y":13},{"t":"seen","x":14,"y":13},{"t":"seen","x":16,"y":13},{"t":"seen","x":17,"y":13},{"t":"seen","x":18,"y":13},{"t":"seen","x":16,"y":12},{"t":"seen","x":16,"y":11},{"t":"seen","x":16,"y":10},{"t":"seen","x":16,"y":9},{"t":"seen","x":15,"y":9},{"t":"seen","x":14,"y":9},{"t":"seen","x":14,"y":10},{"t":"seen","x":14,"y":11},{"t":"seen","x":17,"y":9},{"t":"seen","x":18,"y":9},{"t":"seen","x":18,"y":8},{"t":"seen","x":18,"y":7},{"t":"seen","x":18,"y":11},{"t":"seen","x":18,"y":12},{"t":"seen","x":16,"y":7},{"t":"seen","x":14,"y":21},{"t":"lvlup","x":14,"y":21},{"t":"seen","x":13,"y":21},{"t":"half","x":13,"y":22},{"t":"seen","x":12,"y":21},{"t":"half","x":11,"y":22},{"t":"seen","x":11,"y":21},{"t":"seen","x":15,"y":21},{"t":"seen","x":16,"y":21},{"t":"fence","d":"v","x":17,"y":21},{"t":"seen","x":18,"y":21},{"t":"half","x":18,"y":22},{"t":"seen","x":19,"y":21},{"t":"seen","x":20,"y":21},{"t":"half","x":20,"y":20},{"t":"seen","x":16,"y":20},{"t":"seen","x":16,"y":19},{"t":"txt","v":"Mines of Mt. Drash","x":10,"y":3},{"t":"txt","v":"Level 1","x":13,"y":8},{"t":"txt","v":"Level 2","x":14,"y":22},{"t":"door","d":"h","x":16,"y":22,"hidden":false},{"t":"door","d":"h","x":18,"y":10,"hidden":false},{"t":"door","d":"v","x":15,"y":11,"hidden":false},{"t":"door","d":"h","x":18,"y":6,"hidden":true},{"t":"door","d":"h","x":16,"y":6,"hidden":false},{"t":"door","d":"v","x":13,"y":11,"hidden":false},{"t":"door","d":"h","x":12,"y":8,"hidden":false},{"t":"door","d":"h","x":10,"y":8,"hidden":true},{"t":"door","d":"v","x":11,"y":5,"hidden":false},{"t":"door","d":"v","x":13,"y":9,"hidden":false},{"t":"door","d":"v","x":15,"y":7,"hidden":false},{"t":"door","d":"v","x":15,"y":13,"hidden":false},{"t":"door","d":"h","x":16,"y":8,"hidden":false}];

   function draw() {
       ctx.save();
       ctx.clearRect(0,0, can.width, can.height);
       if(chromaBg) {
           ctx.rect(0,0, can.width, can.height);
           ctx.fillStyle = "#00ffff";
           ctx.fill();
           ctx.fillStyle="black";

       }
       ctx.transform(1, 0, 0, 1, pan.x*64, pan.y*64);

       // Draw stuff from graph
       labels.innerHTML='';
       graph.forEach( item=>{
           drawFunc[item.t](item);
           if(item.t === 'txt') {
               addLabel(item);
           }
       });
       // Draw cursor
       ctx.beginPath();
       ctx.arc( pos.x*32, pos.y*32, 10,0,  2*Math.PI);
       ctx.fillStyle = 'rgba(255,255,0,0.5)';
       ctx.fill();
       ctx.stroke();
       ctx.fillStyle = "red";

       ctx.beginPath();
       switch(pos.d) {
           case 0:
               ctx.arc(pos.x*32, pos.y*32-5 ,3, 0, 2*Math.PI);
               break;
           case 1:
               ctx.arc(pos.x*32+5, pos.y*32, 3, 0, 2*Math.PI);
               break;
           case 2:
               ctx.arc(pos.x*32, pos.y*32+5, 3, 0, 2*Math.PI);
               break;
           case 3:
               ctx.arc(pos.x*32-5, pos.y*32, 3, 0, 2*Math.PI);
               break;
       }
       ctx.fill();

       ctx.restore();
       data.value = JSON.stringify(graph, null, 4);
   }

   function addLabel(item) {
       const link = document.createElement('a');
       const br = document.createElement('br');
       const linkTxt = document.createTextNode(item.v);
       link.appendChild(linkTxt);
       link.title='Show '+item.v;
       link.onclick=panTo.bind(null, item);
       link.href='#';
       labels.appendChild(link);
       labels.appendChild(br);
   }


   function panTo(item) {
       pan.x = -(item.x/2);
       pan.y = -(item.y/2);
       pan.x += 4;
       pan.y += 4;
       draw();
   }

   const drawFunc = {
       seen: drawSeen,
       half: drawHalfSeen,
       lvlup: drawLvlUp,
       lvldn: drawLvlDown,
       door: drawDoor,
       fence: drawFence,
       txt: drawTxt,
   };

   function drawTxt(item) {
       ctx.fillStyle = "green";
       ctx.font = "16px Arial";
       ctx.fillText(item.v, item.x*32-10, item.y*32+6);
   }
   function drawSeen(item) {
       if(item.hidden) {
           drawHalfSeen(item);
           return;
       }

       ctx.beginPath();
       ctx.rect( item.x*32-16, item.y*32-16, 32, 32);
       ctx.fillStyle='#aaaaff';
       ctx.fill();

       //For each wall
       //Top:
       if(nothing(item.x, item.y-1)) {
           ctx.beginPath();
           ctx.moveTo( item.x*32-16, item.y*32-16 );
           ctx.lineTo( item.x*32+16, item.y*32-16);
           ctx.stroke();
       }
       //bottom:
       if(nothing(item.x, item.y+1)) {
           ctx.beginPath();
           ctx.moveTo( item.x*32-16, item.y*32+16 );
           ctx.lineTo( item.x*32+16, item.y*32+16);
           ctx.stroke();
       }
       //left
       if(nothing(item.x-1, item.y)) {
           ctx.beginPath();
           ctx.moveTo( item.x*32-16, item.y*32+16 );
           ctx.lineTo( item.x*32-16, item.y*32-16);
           ctx.stroke();
       }
       //right
       if(nothing(item.x+1, item.y)) {
           ctx.beginPath();
           ctx.moveTo( item.x*32+16, item.y*32+16 );
           ctx.lineTo( item.x*32+16, item.y*32-16);
           ctx.stroke();
       }
   }

   function nothing(x,y) {
       return !graph.some( item=> (item.x===x && item.y===y && item.t !== 'txt'));
   }

   function drawHalfSeen(item) {
       ctx.beginPath();
       ctx.rect( item.x*32-16, item.y*32-16, 32, 32);
       ctx.fillStyle='#aaaaaa';
       ctx.fill();

   }

   function drawLvlUp(item) {
       drawSeen(item);
       ctx.beginPath();
       ctx.moveTo( item.x*32 , item.y*32-9  ); // top
       ctx.lineTo( item.x*32+9 , item.y*32+9  ); // right
       ctx.lineTo( item.x*32-9 , item.y*32+9  ); // left
       ctx.closePath();
       ctx.fillStyle ='#348078';
       ctx.fill();
   }

   function drawLvlDown(item) {
       drawSeen(item);
       ctx.beginPath();
       ctx.moveTo( item.x*32 , item.y*32+9  ); // bottom
       ctx.lineTo( item.x*32+9 , item.y*32-9  ); // right
       ctx.lineTo( item.x*32-9 , item.y*32-9  ); // left
       ctx.closePath();
       ctx.fillStyle ='#348078';
       ctx.fill();
   }

   function drawFence(item) {
       drawSeen(item);

       ctx.beginPath();
       if(item.d === 'v') {
           ctx.moveTo( item.x*32, item.y*32 - 16);
           ctx.lineTo( item.x*32, item.y*32+16);
       } else {
           ctx.moveTo( item.x*32-16, item.y*32);
           ctx.lineTo( item.x*32+16, item.y*32);
       }
       ctx.strokeStyle="brown";
       ctx.stroke();
       ctx.strokeStyle="black";
   }

   function drawDoor(item) {

       drawSeen({x:item.x, y:item.y});
       ctx.beginPath();
       switch(item.d) {
           case 'h':
               if(doorStyle) {
                   ctx.moveTo( item.x*32-16, item.y*32-16)
                   ctx.lineTo( item.x*32+16, item.y*32-16);
                   ctx.moveTo( item.x*32-16, item.y*32+16)
                   ctx.lineTo( item.x*32+16, item.y*32+16);
                   ctx.stroke();
                   ctx.beginPath();
                   ctx.rect( item.x*32-8, item.y*32-18, 16, 5);
                   ctx.rect( item.x*32-8, item.y*32+14, 16, 5);
               } else {
                   ctx.moveTo( item.x*32-16, item.y*32)
                   ctx.lineTo( item.x*32+16, item.y*32);
                   ctx.stroke();
                   ctx.beginPath();
                   ctx.rect( item.x*32-8, item.y*32-2, 16, 5);
               }
               break;
           case 'v':
               if(doorStyle) {
                   ctx.moveTo( item.x*32+16, item.y*32+16)
                   ctx.lineTo( item.x*32+16, item.y*32-16);
                   ctx.moveTo( item.x*32-16, item.y*32+16)
                   ctx.lineTo( item.x*32-16, item.y*32-16);
                   ctx.stroke();
                   ctx.beginPath();
                   ctx.rect( item.x*32-18, item.y*32-8, 5, 16);
                   ctx.rect( item.x*32+14, item.y*32-8, 5, 16);
               } else {
                   ctx.moveTo( item.x*32, item.y*32+16)
                   ctx.lineTo( item.x*32, item.y*32-16);
                   ctx.stroke();
                   ctx.beginPath();
                   ctx.rect( item.x*32-2, item.y*32-8, 5, 16);
               }
               break;
       }

       if(item.hidden) {
           ctx.fillStyle = '#a86f32';
       } else {
           ctx.fillStyle = "#bebebe";
       }

       ctx.fill();
       ctx.stroke();


   }

   window.addEventListener('keydown', (e)=>{
       if(document.activeElement.tagName !== 'BODY') {
           return;
       }
       let prevent=true;
       switch(e.which) {
           case 38: // up
               pos.y--;
               pos.d=0;
               updatePanForCursor();
               break;
           case 40: // down
               pos.y++;
               pos.d=2;
               updatePanForCursor();
               break;
           case 37: // left
               pos.x--;
               pos.d=3;
               updatePanForCursor();
               break;
           case 39: // right
               pos.x++;
               pos.d=1;
               updatePanForCursor();
               break;
           case 32: // spacebar
               toggleCellSeen(1);
               break;
//            case 17: // Ctrl
               break;
           case 49: // 1: doors
               toggleCellSeen(2);
               break;
           case 50: // 2: half-seen
               toggleCellSeen(1,true);
               break;
           case 51: // 3:  lvl up
               toggleCellSeen(4);
               break;
           case 52:
               toggleCellSeen(5);
               break;
           case 16: // shift
               toggleHidden();
               break;
           case 53: // 5: vfence
               toggleCellSeen(6);
               break;
           case 54: // 6:
               break;
           case 104: // keypad up: pan
               pan.y++;
               break;
           case 98: // keypad down
           case 101: // keypad down
               pan.y--;
               break;
           case 100: // left
               pan.x++;
               break;
           case 102:
               pan.x--;
               break;
           case 13: // Enter = text
               toggleCellSeen(8);
               break;
           case 82: // r = rotate
               pos.d++;
               if(pos.d===4) pos.d=0;
               break;
           case 69: // e = rotate the other way
               pos.d--;
               if(pos.d <0) pos.d =3;
               break;
           case 68: // d = doorStyle
               doorStyle = !doorStyle;
               break;
           case 67: // c = toggle chroma bg
               chromaBg = !chromaBg;
               break;
           default:
               console.log('unhandled keycode: '+e.which);
               prevent=false;
       }

       if(prevent) {
           e.preventDefault();
       }


       draw();

   });

   function updatePanForCursor() {
       if(pos.x*32 + pan.x*64 > 512) {
           pan.x--;
       }
       if(pos.x*32 + pan.x*64 < 0) {
           pan.x++;
       }
       if(pos.y*32 + pan.y*64 > 512) {
           pan.y--;
       }
       if(pos.y*32 + pan.y*64 < 0) {
           pan.y++;
       }
   }

   function toggleHidden() {
       graph.forEach( item=> {
           if(item.x === pos.x && item.y === pos.y) {
               item.hidden=!item.hidden;
           }
       });
   }

   function toggleCellSeen(type, hidden) {

       //Find any cells at cursor pos
       let found=false;
       graph = graph.filter( item =>{
           if(item.x === pos.x && item.y === pos.y ) {
               found=true;
               return false;
           }
           return true;
       });

       if(!found) {
           switch(type) {
               case 1:
                   graph.push( { t: 'seen', x: pos.x, y: pos.y, hidden:hidden});
                   break;
               case 2: // doors
                   addInline('door');
                   break;
               case 4: // level up
                   graph.push( { t:'lvlup', x: pos.x, y: pos.y } );
                   break;
               case 5: // level down
                   graph.push( { t:'lvldn', x: pos.x, y: pos.y } );
                   break;
               case 6: // fence
                   addInline('fence');
                   break;
               case 8: //text
                   graph.push( { t: 'txt', v: txtBox.value, x: pos.x, y: pos.y });
                   break;
           }
       }

       // Sort the array, doors last!
       graph = graph.sort( (a,b)=>{
           if(a.t === 'door') {
               return 1;
           }
           return -1;
       });



   }

   function addInline(t) {
       if( !nothing(pos.x, pos.y-1) || !nothing(pos.x, pos.y+1))
       {
                   graph.push( { t, d:'h', x: pos.x, y: pos.y } );
       } else if(!nothing(pos.x-1, pos.y) || !nothing(pos.x+1, pos.y) ) {
                   graph.push( { t, d:'v', x: pos.x, y: pos.y } );
       }
   }


   can.addEventListener('click', (e)=>{
       const x = e.layerX - coffset.x;
       const y = e.layerY - coffset.y;
       pos.x = Math.round( ((x - pan.x*64)/32) );
       pos.y = Math.round( ((y - pan.y*64)/32) );
       draw();
   });

   importBtn.addEventListener('click', ()=> {
       try {
           graph = JSON.parse(data.value);
       } catch(ignored) {
           graph = [];
       }

       draw();
   });

   draw();
});

You are viewing proxied material from dusted.dk. The copyright of proxied material belongs to its original authors. Any comments or complaints in relation to proxied material should be directed to the original authors of the content concerned. Please see the disclaimer for more details.