From 11a66a1c5d0c1c8a78ee0e33bff822be13dfa955 Mon Sep 17 00:00:00 2001 From: Patrick Davison Date: Tue, 21 Aug 2012 15:04:33 -0700 Subject: Multipath support for UI --- js/mapspecs.js | 204 +++++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 148 insertions(+), 56 deletions(-) (limited to 'js/mapspecs.js') diff --git a/js/mapspecs.js b/js/mapspecs.js index 4d4acbe..cbb642c 100644 --- a/js/mapspecs.js +++ b/js/mapspecs.js @@ -268,7 +268,7 @@ function request_path_done() { mixpanel.track('click go', { 'speed': speed, 'mute': mute, - 'mapid': JO.mapid, + 'mapid': mapid, 'type': mapType, 'response time': responseTime }); @@ -284,9 +284,16 @@ function request_path_done() { var disptext = "Record: "+JO.best+" by "+JO.bestby; updateDsp(JO.mapid, 'dspID', disptext); - animatePath(JO.path1.path, JO.mapid, JO.path1.start); - - animatePath(JO.path2.path, JO.mapid, JO.path2.start); + mapdata[mapid].moveCount = new Object; + mapdata[mapid].restoreTiles = new Array(); + mapdata[mapid].pathColor = new Object; + + for(var i in JO.path) { + mapdata[mapid].moveCount[i] = 0; + mapdata[mapid].pathColor[i] = '#ffffff'; + animatePath(JO.path[i].path, mapid, JO.path[i].start, i); + } + mapdata[JO.mapid].pathsPending = i; } function decryptJSON(text) { @@ -300,7 +307,7 @@ function decryptJSON(text) { } -function animatePath(path, mapid, start) { +function animatePath(path, mapid, start, pathNumber) { tmp = start.split(','); y = tmp[0]; x = tmp[1]; @@ -310,12 +317,14 @@ function animatePath(path, mapid, start) { t = ''; //count[mapid] = 0; document.getElementById(mapid+',btn').disabled = true; - doanimate(x, y, p, t, mapid); + doanimate(x, y, p, t, mapid, pathNumber); //setTimeout("doanimate("+x+","+y+",'"+p+"',"+t+")",500); } function animatePathDone(mapid) { - // console.log('Animate Path Done', mapid); + + //console.log('Animate Path Done', mapid); + scoresRequestPage(mapid, currentPage[mapid]); document.getElementById(mapid+',btn').disabled = false; if (isChallenge == true) { @@ -334,8 +343,7 @@ function checkSound(mapid) { } var snake = new Array(); -var snakeeffected = new Array(); -function doanimate(x, y, p, c, mapid) { +function doanimate(x, y, p, c, mapid, pathNumber) { //x, y position //p path string being trunicated. @@ -349,19 +357,22 @@ function doanimate(x, y, p, c, mapid) { } if (snake[mapid] == undefined) { snake[mapid] = new Array(); - snake[mapid]['color'] = '#ccc'; + mapdata[mapid].pathColor[pathNumber] = '#ccc'; } if (count[mapid] == 0) { if (t == 'a') { - snake[mapid]['color'] = '#F777FF'; + mapdata[mapid].pathColor[pathNumber] = '#F777FF'; } if (t == 'f') { - snake[mapid]['color'] = '#ccc'; + mapdata[mapid].pathColor[pathNumber] = '#ccc'; } } //Display movecount - updateDsp(mapid, 'dspCount', count[mapid]+ " moves"); + if (mapdata[mapid].moveCount[1] > 0) { + updateDsp(mapid, 'dspCount', mapdata[mapid].moveCount[0] + ' + ' + mapdata[mapid].moveCount[1] + ' = ' + count[mapid] + " moves"); + } else + updateDsp(mapid, 'dspCount', count[mapid]+ " moves"); //document.getElementById(mapid+',dspCount').innerHTML = count[mapid]+ " moves"; //Get a handle on the element. @@ -376,15 +387,15 @@ function doanimate(x, y, p, c, mapid) { //Maintain our original classname, no matter the cost! origclass = handle.className; - if ( origclass == 'grid_td_path1' || - origclass == 'grid_td_path2' || - origclass == 'grid_td_path3' || - origclass == 'grid_td_path4' ) { + if ( origclass == 'grid_td_path'+pathNumber+'-1' || + origclass == 'grid_td_path'+pathNumber+'-2' || + origclass == 'grid_td_path'+pathNumber+'-3' || + origclass == 'grid_td_path'+pathNumber+'-4' ) { // if (origclass == 'grid_td_animate' || origclass == 'grid_td_animate_pre' ) { origclass = handle.classOrigName; //setTimeout(handle.setAttribute('class', origclass), 850); } - //handle.style.backgroundColor = snake[mapid]['color']; + //handle.style.backgroundColor = mapdata[mapid].pathColor[pathNumber]; handle.classOrigName = origclass; @@ -395,16 +406,19 @@ function doanimate(x, y, p, c, mapid) { if (count[mapid] !== 0) break; count[mapid]--; + mapdata[mapid].moveCount[pathNumber]--; + //break; case '1': //1 - Up case '2': //2 - Right case '3': //3 - Down case '4': //4 - Left count[mapid]++; + mapdata[mapid].moveCount[pathNumber]++; //Starting; switch(count[mapid]) { case mapjson[mapid].best: - flashelement(mapid+',dspCount', 4, "#FF0000"); + //flashelement(mapid+',dspCount', 4, "#FF0000"); break; case 500: case 400: @@ -425,47 +439,68 @@ function doanimate(x, y, p, c, mapid) { childdiv = document.getElementById('child_'+handle.id); if (childdiv.className != 'grid_td_walls') { - childdiv.setAttribute('class', 'grid_td_path'+c); - - handle.style.backgroundColor = snake[mapid]['color']; - var origColor = handle.style.backgroundColor; + childdiv.setAttribute('class', 'grid_td_path'+pathNumber+'-'+c); + + var origColor = rgbStringToHex(handle.style.backgroundColor); + console.log("OriginalColor", origColor); + + handle.style.backgroundColor = mapdata[mapid].pathColor[pathNumber]; - string = "if (document.getElementById('"+'child_'+eid+"').className == 'grid_td_path"+c+"')"; + + string = "if (document.getElementById('"+'child_'+eid+"').className == 'grid_td_path"+pathNumber+'-'+c+"')"; string += "document.getElementById('"+'child_'+eid+"').removeAttribute('class');"; setTimeout(string, 855); + //Reset our color back to the way it was. + //setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '"+origColor+"';", 865); //Maintain disabled appearnce of checkpoints if (handle.pressed == true) { - setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '#dddddd';", 865); + setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '"+origColor+"';", 865); } else { setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '';", 865); } } - break; //Teleports - case 't': - //case 'u': - case 'm': - case 'g': - case 'i': - case 'k': + case 't': case 'u': case 'm': case 'g': case 'i': case 'k': case 'q': //Teleport out; - case 'b': //Checkpoints - case 'c': - case 'd': - case 'e': + //Checkpoints case 'r': + if (handle.pressed == true) + break; + case 'b': case 'c': case 'd': case 'e': + + //handle.setAttribute('class', 'grid_td_pressed'); //handle.classOrigName = 'grid_td_pressed'; - snakeeffected.push("document.getElementById('"+eid+"').style.backgroundColor = '';"); - snakeeffected.push("document.getElementById('"+eid+"').pressed = false;"); - handle.style.backgroundColor = '#dddddd'; - setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '#dddddd';", 865); + if (handle.pressed == true) { + handle.style.backgroundColor = '#dddddd'; + setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '#dddddd';", 865); + //alert("Pressed Point Solid Grayed is " + c); + break; + } + + var currentColor = rgbStringToHex(handle.style.backgroundColor); + if (currentColor == '') + break; + + var dulled = '#'+dullColor(currentColor, .6); + + console.log('bgcolor', dulled, currentColor); + //handle.style.backgroundColor = '#dddddd'; + + handle.style.backgroundColor = dulled; + setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '"+dulled+"';", 865); + handle.pressed = true; + mapdata[mapid].restoreTiles.push("document.getElementById('"+eid+"').style.backgroundColor = '';"); + mapdata[mapid].restoreTiles.push("document.getElementById('"+eid+"').pressed = false;"); + + //alert(mapdata[mapid].pathColor[pathNumber]); + break; } @@ -483,6 +518,13 @@ function doanimate(x, y, p, c, mapid) { //Speaking of the next tile - does it exist? //End of the line? if (t == '') { + + mapdata[mapid].pathsPending--; + //console.log('path pending', mapdata[mapid].pathsPending); + if (mapdata[mapid].pathsPending >= 0) + return; + + //console.log('path pending complete', mapdata[mapid].pathsPending); //Did we beat or tie any records? //Saw someone do this, thought it was clever. @@ -524,14 +566,14 @@ function doanimate(x, y, p, c, mapid) { //This is the end, lets reset stuff to defaults. count[mapid] = 0; - snake[mapid]['color'] = '#ffffff'; + mapdata[mapid].pathColor[pathNumber] = '#ffffff'; //Bring the color back to our checkpoints/teleports. - for(var i in snakeeffected) { - //eval(snakeeffected[i]); - setTimeout((snakeeffected[i]), 2000); + for(var i in mapdata[mapid].restoreTiles) { + //eval(mapdata[mapid].restoreTiles[i]); + setTimeout((mapdata[mapid].restoreTiles[i]), 2000); } //Clear - snakeeffected = new Array(); + mapdata[mapid].restoreTiles = new Array(); //We're done, animatePathDone(mapid); return; @@ -575,29 +617,29 @@ function doanimate(x, y, p, c, mapid) { //Checkpoint targets: case 'a': // rs = rs * 9; - snake[mapid]['color'] = '#F777FF'; + mapdata[mapid].pathColor[pathNumber] = '#F777FF'; break; case 'b': rs = rs + 410; - snake[mapid]['color'] = '#FFFF11'; + mapdata[mapid].pathColor[pathNumber] = '#FFFF11'; //handle.style.backgroundColor = "#000000"; break; case 'c': rs = rs + 410; - snake[mapid]['color'] = '#FF4466'; + mapdata[mapid].pathColor[pathNumber] = '#FF4466'; break; case 'd': rs = rs + 410; - snake[mapid]['color'] = '#ff9911'; + mapdata[mapid].pathColor[pathNumber] = '#ff9911'; break; case 'e': rs = rs + 410; - snake[mapid]['color'] = '#00FFFF'; + mapdata[mapid].pathColor[pathNumber] = '#00FFFF'; break; //Finish target case 'f': rs = rs + 410; - snake[mapid]['color'] = '#ccc'; + mapdata[mapid].pathColor[pathNumber] = '#ccc'; break; //Hey, we've ran into a teleport. @@ -622,21 +664,22 @@ function doanimate(x, y, p, c, mapid) { document.getElementById(eid).style.backgroundColor='#CCCCCC'; document.getElementById(tpEid).style.backgroundColor='#CCCCCC'; - flashelement(tpEid, 8, snake[mapid]['color']); + flashelement(tpEid, 8, mapdata[mapid].pathColor[pathNumber]); //The path once teleported - and an r to indicate to gray the teleport-out too. p = 'q'+tmp[2]; //Slow down rs = rs + 1200; - setTimeout("doanimate("+x+","+y+",'"+p+"','"+t+"',"+mapid+")",rs); - return; break; } //Remove move from p p = p.substring(1); //rs = (10 * p.length) + 40; + // if (mapdata[mapid].moveCount[1] < mapdata[mapid].moveCount[pathNumber] - 2 + // || mapdata[mapid].moveCount[0] < mapdata[mapid].moveCount[pathNumber] - 2) + // rs = rs + 100; - setTimeout("doanimate("+x+","+y+",'"+p+"','"+t+"','"+mapid+"')",rs); + setTimeout("doanimate("+x+","+y+",'"+p+"','"+t+"','"+mapid+"','"+pathNumber+"')",rs); } function flashelement(eid, times, color, speed) { @@ -673,6 +716,56 @@ function flashelement(eid, times, color, speed) { } +function dullColor(colorAsHex, value) { + var r = hexToR(colorAsHex); + var g = hexToG(colorAsHex); + var b = hexToB(colorAsHex); + + r = r + ((221 - r) * value) + g = g + ((221 - g) * value) + b = b + ((221 - b) * value) + r = parseInt(r); + g = parseInt(g); + b = parseInt(b); + // r = r + value; + // g = g + value; + // b = b + value; + return rgbToHex(r, g, b); +} + +//Color modifications +// Thanks javascripter.net +function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)} +function toHex(n) { + n = parseInt(n,10); + if (isNaN(n)) return "00"; + n = Math.max(0,Math.min(n,255)); + return "0123456789ABCDEF".charAt((n-n%16)/16) + + "0123456789ABCDEF".charAt(n%16); +} +function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)} +function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)} +function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)} +function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h} + +//Thanks stackExchange +function rgbStringToHex(rgbString) { + if (rgbString == '') + return ''; + // var rgbString = "rgb(0, 70, 255)"; // get this in whatever way. + + var parts = rgbString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); + // parts now should be ["rgb(0, 70, 255", "0", "70", "255"] + + delete (parts[0]); + for (var i = 1; i <= 3; ++i) { + parts[i] = parseInt(parts[i]).toString(16); + if (parts[i].length == 1) parts[i] = '0' + parts[i]; + } + return hexString ='#'+parts.join('').toUpperCase(); // "#0070FF" +} + + function savePref(pref, value) { setCookie('pref_'+pref, value,31); @@ -702,7 +795,6 @@ for (i=0;i