From e2f5424d1e132fc03c2e1af71b6dda2b0ee71ddb Mon Sep 17 00:00:00 2001 From: Garrett Finucane Date: Sat, 14 Mar 2015 15:47:52 -0400 Subject: [PATCH 1/3] good enough --- js_v9/render.js | 33 +++++++++++---------------------- style/style.css | 7 ++++++- 2 files changed, 17 insertions(+), 23 deletions(-) diff --git a/js_v9/render.js b/js_v9/render.js index 977be12..3625de7 100644 --- a/js_v9/render.js +++ b/js_v9/render.js @@ -67,30 +67,21 @@ function render() { } function renderBeginningText() { - renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/2 - 35 - 208 * settings.scale, 35, '#2c3e50', 'Controls', '35px Roboto'); - renderText((trueCanvas.width)/2 - 85 * settings.scale, (trueCanvas.height)/2 - 35 - 169 * settings.scale, 20, '#2c3e50', 'Rotation:', '20px Roboto'); - renderText((trueCanvas.width)/2 - 21 * settings.scale, (trueCanvas.height)/2 - 35 - 141 * settings.scale, 12, '#2c3e50', 'Left', '12px Roboto'); - renderText((trueCanvas.width)/2 + 25 * settings.scale, (trueCanvas.height)/2 - 35 - 141 * settings.scale, 12, '#2c3e50', 'Right', '12px Roboto'); - drawKey("right",(trueCanvas.width)/2 + 23 * settings.scale - 35/2 * settings.scale, (trueCanvas.height)/2 - 35 - 195 * settings.scale); - drawKey("left",(trueCanvas.width)/2 - 23 * settings.scale - 35/2 * settings.scale, (trueCanvas.height)/2 - 35 - 195 * settings.scale); - renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/2 - 35 - 125 * settings.scale, 20, '#2c3e50', 'Rotate the Hexagon to make combos of 3+ touching blocks!', '20px Roboto'); - renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/2 - 35 - 105 * settings.scale, 20, '#2c3e50', 'Make combos in a row to receive a score multiplier!', '20px Roboto'); - renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/2 - 35 - 85 * settings.scale, 20, '#2c3e50', 'Don\'t let the blocks stack outside of the gray Hexagon!', '20px Roboto'); - renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/2 - 35 - 65 * settings.scale, 20, '#2c3e50', (settings.platform == 'mobile' ? 'Tap the middle to toggle 2x speed!' : 'Hold the down arrow to toggle 2x speed!'), '20px Roboto'); + renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/3 - 35 - 135 * settings.scale, 20, '#2c3e50', 'Tap on the left or the right of the screen', '20px Roboto'); + renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/3 - 35 - 105 * settings.scale, 20, '#2c3e50', 'to rotate the hexagon.', '20px Roboto'); + drawKey("",(trueCanvas.width)/2 + 1.5 * settings.scale - 5 , (trueCanvas.height)/3 - 35 - 107 * settings.scale); + renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height * 3.1)/3 - 35 - 135 * settings.scale, 20, '#2c3e50', 'Match 3+ blocks to score points.', '20px Roboto'); + renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height * 3.1 )/3 - 35 - 105 * settings.scale, 20, '#2c3e50', 'Tap the center to double the speed.', '20px Roboto'); + + //renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/2 - 35 - 65 * settings.scale, 20, '#2c3e50', (settings.platform == 'mobile' ? 'Tap the middle to toggle 2x speed!' : 'Hold the down arrow to toggle 2x speed!'), '20px Roboto'); } function drawKey(key, x, y) { ctx.save(); - ctx.beginPath(); - ctx.fillStyle = '#2c3e50'; - ctx.strokeStyle = '#2c3e50'; - ctx.lineWidth = 4 * settings.scale; - ctx.rect(x + 2.5 * settings.scale, y + 2.5 * settings.scale, 35 * settings.scale, 35 * settings.scale); - ctx.stroke(); switch (key) { case "left": - ctx.translate(x + settings.scale * 28, y + settings.scale * 13); + ctx.translate(x, y + settings.scale * 13); ctx.rotate(3.14159); ctx.font = "20px Fontawesome"; ctx.scale(settings.scale, settings.scale); @@ -98,16 +89,14 @@ function drawKey(key, x, y) { break; case "right": ctx.font = "20px Fontawesome"; - ctx.translate(x + settings.scale * 12.5, y + settings.scale * 27.5); + ctx.translate(x , y + settings.scale * 27.5); ctx.scale(settings.scale, settings.scale); ctx.fillText(String.fromCharCode("0xf04b"), 0, 0); break; default: - ctx.font = "35px Roboto"; - ctx.translate(x + settings.scale * 25 , y + settings.scale * 39.5); - ctx.scale(settings.scale, settings.scale); - ctx.fillText(key, 0, 0); + drawKey("left", x - 5, y); + drawKey("right", x + 5, y); } ctx.restore(); diff --git a/style/style.css b/style/style.css index 958169c..8979971 100644 --- a/style/style.css +++ b/style/style.css @@ -241,7 +241,12 @@ and (max-device-width : 580px) { font-weight: 400; src: local('Roboto Regular'), local('Roboto-Regular'), url("fonts/roboto.woff") format('woff'); } - +@font-face { + font-family: 'icomoon'; + font-style: normal; + font-weight: 400; + src: local('icomoon Regular'), url("fonts/icomoon.ttf"), format('ttf'); +} @font-face { font-family: 'Q'; font-style: normal; From dee6a3c8b985a28d0ac572dbea78e82fa02cd35c Mon Sep 17 00:00:00 2001 From: Garrett Finucane Date: Sat, 14 Mar 2015 16:00:03 -0400 Subject: [PATCH 2/3] no more alert --- js_v9/input.js | 1 - vendor/sweet-alert.min.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/js_v9/input.js b/js_v9/input.js index 893f57c..1736619 100644 --- a/js_v9/input.js +++ b/js_v9/input.js @@ -79,7 +79,6 @@ function addKeyListeners() { $("#pauseBtn").on('touchstart mousedown', function() { - alert("hey"); if (gameState != 1 && gameState != -1) { return; } diff --git a/vendor/sweet-alert.min.js b/vendor/sweet-alert.min.js index 4e2c804..a0c8c3c 100644 --- a/vendor/sweet-alert.min.js +++ b/vendor/sweet-alert.min.js @@ -1 +1 @@ -!function(e,t,n){function o(e){var t=x(),n=t.querySelector("h2"),o=t.querySelector("p"),a=t.querySelector("button.cancel"),r=t.querySelector("button.confirm");if(n.innerHTML=e.html?e.title:E(e.title).split("\n").join("
"),o.innerHTML=e.html?e.text:E(e.text||"").split("\n").join("
"),e.text&&A(o),e.customClass)T(t,e.customClass),t.setAttribute("data-custom-class",e.customClass);else{var s=t.getAttribute("data-custom-class");B(t,s),t.setAttribute("data-custom-class","")}if(O(t.querySelectorAll(".sa-icon")),e.type&&!u()){for(var c=!1,l=0;lo;o++)n=parseInt(e.substr(2*o,2),16),n=Math.round(Math.min(Math.max(0,n+n*t),255)).toString(16),a+=("00"+n).substr(n.length);return a}function r(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n]);return e}function s(e){var t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?parseInt(t[1],16)+", "+parseInt(t[2],16)+", "+parseInt(t[3],16):null}function i(e,t){var n=s(t);e.style.boxShadow="0 0 2px rgba("+n+", 0.8), inset 0 0 0 1px rgba(0, 0, 0, 0.05)"}function c(){var e=x();H(k(),10),A(e),T(e,"showSweetAlert"),B(e,"hideSweetAlert"),d=t.activeElement;var n=e.querySelector("button.confirm");n.focus(),setTimeout(function(){T(e,"visible")},500);var o=e.getAttribute("data-timer");"null"!==o&&""!==o&&(e.timeout=setTimeout(function(){v.close()},o))}function l(){var e=x();e.style.marginTop=D(x())}function u(){return e.attachEvent&&!e.addEventListener?!0:!1}function f(t){e.console&&e.console.log("SweetAlert: "+t)}var d,m,p,y,v,b,g=".sweet-alert",w=".sweet-overlay",h=["error","warning","info","success"],S={title:"",text:"",type:null,allowOutsideClick:!1,showConfirmButton:!0,showCancelButton:!1,closeOnConfirm:!0,closeOnCancel:!0,confirmButtonText:"OK",confirmButtonColor:"#AEDEF4",cancelButtonText:"Cancel",imageUrl:null,imageSize:null,timer:null,customClass:"",html:!1,animation:!0,allowEscapeKey:!0},x=function(){var e=t.querySelector(g);return e||(j(),e=x()),e},k=function(){return t.querySelector(w)},C=function(e,t){return new RegExp(" "+t+" ").test(" "+e.className+" ")},T=function(e,t){C(e,t)||(e.className+=" "+t)},B=function(e,t){var n=" "+e.className.replace(/[\t\r\n]/g," ")+" ";if(C(e,t)){for(;n.indexOf(" "+t+" ")>=0;)n=n.replace(" "+t+" "," ");e.className=n.replace(/^\s+|\s+$/g,"")}},E=function(e){var n=t.createElement("div");return n.appendChild(t.createTextNode(e)),n.innerHTML},q=function(e){e.style.opacity="",e.style.display="block"},A=function(e){if(e&&!e.length)return q(e);for(var t=0;t0?setTimeout(o,t):e.style.display="none"};o()},N=function(n){if("function"==typeof MouseEvent){var o=new MouseEvent("click",{view:e,bubbles:!1,cancelable:!0});n.dispatchEvent(o)}else if(t.createEvent){var a=t.createEvent("MouseEvents");a.initEvent("click",!1,!1),n.dispatchEvent(a)}else t.createEventObject?n.fireEvent("onclick"):"function"==typeof n.onclick&&n.onclick()},P=function(t){"function"==typeof t.stopPropagation?(t.stopPropagation(),t.preventDefault()):e.event&&e.event.hasOwnProperty("cancelBubble")&&(e.event.cancelBubble=!0)},j=function(){var e='

Title

Text

',n=t.createElement("div");for(n.innerHTML=e;n.firstChild;)t.body.appendChild(n.firstChild)};v=b=function(){function s(e){var t=b;return"undefined"!=typeof t[e]?t[e]:S[e]}function u(t){var o=t||e.event,a=o.keyCode||o.which;if(-1!==[9,13,32,27].indexOf(a)){for(var r=o.target||o.srcElement,s=-1,c=0;ck;k++){var T=w[k];g[T]=s(T)}g.confirmButtonText=g.showCancelButton?"Confirm":S.confirmButtonText,g.confirmButtonText=s("confirmButtonText"),g.doneFunction=arguments[1]||null;break;default:return f('Unexpected type of argument! Expected "string" or "object", got '+typeof arguments[0]),!1}o(g),l(),c();for(var B=x(),E=function(t){var n=t||e.event,o=n.target||n.srcElement,r=-1!==o.className.indexOf("confirm"),s=C(B,"visible"),i=g.doneFunction&&"true"===B.getAttribute("data-has-done-function");switch(n.type){case"mouseover":r&&(o.style.backgroundColor=a(g.confirmButtonColor,-.04));break;case"mouseout":r&&(o.style.backgroundColor=g.confirmButtonColor);break;case"mousedown":r&&(o.style.backgroundColor=a(g.confirmButtonColor,-.14));break;case"mouseup":r&&(o.style.backgroundColor=a(g.confirmButtonColor,-.04));break;case"focus":var c=B.querySelector("button.confirm"),l=B.querySelector("button.cancel");r?l.style.boxShadow="none":c.style.boxShadow="none";break;case"click":if(r&&i&&s)g.doneFunction(!0),g.closeOnConfirm&&v.close();else if(i&&s){var u=String(g.doneFunction).replace(/\s/g,""),f="function("===u.substring(0,9)&&")"!==u.substring(9,10);f&&g.doneFunction(!1),g.closeOnCancel&&v.close()}else v.close()}},q=B.querySelectorAll("button"),A=0;A"),o.innerHTML=e.html?e.text:E(e.text||"").split("\n").join("
"),e.text&&A(o),e.customClass)T(t,e.customClass),t.setAttribute("data-custom-class",e.customClass);else{var s=t.getAttribute("data-custom-class");B(t,s),t.setAttribute("data-custom-class","")}if(O(t.querySelectorAll(".sa-icon")),e.type&&!u()){for(var c=!1,l=0;lo;o++)n=parseInt(e.substr(2*o,2),16),n=Math.round(Math.min(Math.max(0,n+n*t),255)).toString(16),a+=("00"+n).substr(n.length);return a}function r(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n]);return e}function s(e){var t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?parseInt(t[1],16)+", "+parseInt(t[2],16)+", "+parseInt(t[3],16):null}function i(e,t){var n=s(t);e.style.boxShadow="0 0 2px rgba("+n+", 0.8), inset 0 0 0 1px rgba(0, 0, 0, 0.05)"}function c(){var e=x();H(k(),10),A(e),T(e,"showSweetAlert"),B(e,"hideSweetAlert"),d=t.activeElement;var n=e.querySelector("button.confirm");n.focus(),setTimeout(function(){T(e,"visible")},500);var o=e.getAttribute("data-timer");"null"!==o&&""!==o&&(e.timeout=setTimeout(function(){v.close()},o))}function l(){var e=x();e.style.marginTop=D(x())}function u(){return e.attachEvent&&!e.addEventListener?!0:!1}function f(t){e.console&&e.console.log("SweetAlert: "+t)}var d,m,p,y,v,b,g=".sweet-alert",w=".sweet-overlay",h=["error","warning","info","success"],S={title:"",text:"",type:null,allowOutsideClick:!1,showConfirmButton:!0,showCancelButton:!1,closeOnConfirm:!0,closeOnCancel:!0,confirmButtonText:"OK",confirmButtonColor:"#AEDEF4",cancelButtonText:"Cancel",imageUrl:null,imageSize:null,timer:null,customClass:"",html:!1,animation:!0,allowEscapeKey:!0},x=function(){var e=t.querySelector(g);return e||(j(),e=x()),e},k=function(){return t.querySelector(w)},C=function(e,t){return new RegExp(" "+t+" ").test(" "+e.className+" ")},T=function(e,t){C(e,t)||(e.className+=" "+t)},B=function(e,t){var n=" "+e.className.replace(/[\t\r\n]/g," ")+" ";if(C(e,t)){for(;n.indexOf(" "+t+" ")>=0;)n=n.replace(" "+t+" "," ");e.className=n.replace(/^\s+|\s+$/g,"")}},E=function(e){var n=t.createElement("div");return n.appendChild(t.createTextNode(e)),n.innerHTML},q=function(e){e.style.opacity="",e.style.display="block"},A=function(e){if(e&&!e.length)return q(e);for(var t=0;t0?setTimeout(o,t):e.style.display="none"};o()},N=function(n){if("function"==typeof MouseEvent){var o=new MouseEvent("click",{view:e,bubbles:!1,cancelable:!0});n.dispatchEvent(o)}else if(t.createEvent){var a=t.createEvent("MouseEvents");a.initEvent("click",!1,!1),n.dispatchEvent(a)}else t.createEventObject?n.fireEvent("onclick"):"function"==typeof n.onclick&&n.onclick()},P=function(t){"function"==typeof t.stopPropagation?(t.stopPropagation(),t.preventDefault()):e.event&&e.event.hasOwnProperty("cancelBubble")&&(e.event.cancelBubble=!0)},j=function(){var e='

Title

Text

',n=t.createElement("div");for(n.innerHTML=e;n.firstChild;)t.body.appendChild(n.firstChild)};v=b=function(){function s(e){var t=b;return"undefined"!=typeof t[e]?t[e]:S[e]}function u(t){var o=t||e.event,a=o.keyCode||o.which;if(-1!==[9,13,32,27].indexOf(a)){for(var r=o.target||o.srcElement,s=-1,c=0;ck;k++){var T=w[k];g[T]=s(T)}g.confirmButtonText=g.showCancelButton?"Confirm":S.confirmButtonText,g.confirmButtonText=s("confirmButtonText"),g.doneFunction=arguments[1]||null;break;default:return f('Unexpected type of argument! Expected "string" or "object", got '+typeof arguments[0]),!1}o(g),l(),c();for(var B=x(),E=function(t){var n=t||e.event,o=n.target||n.srcElement,r=-1!==o.className.indexOf("confirm"),s=C(B,"visible"),i=g.doneFunction&&"true"===B.getAttribute("data-has-done-function");switch(n.type){case"mouseover":r&&(o.style.backgroundColor=a(g.confirmButtonColor,-.04));break;case"mouseout":r&&(o.style.backgroundColor=g.confirmButtonColor);break;case"mousedown":r&&(o.style.backgroundColor=a(g.confirmButtonColor,-.14));break;case"mouseup":r&&(o.style.backgroundColor=a(g.confirmButtonColor,-.04));break;case"focus":var c=B.querySelector("button.confirm"),l=B.querySelector("button.cancel");r?l.style.boxShadow="none":c.style.boxShadow="none";break;case"click":if(r&&i&&s)g.doneFunction(!0),g.closeOnConfirm&&v.close();else if(i&&s){var u=String(g.doneFunction).replace(/\s/g,""),f="function("===u.substring(0,9)&&")"!==u.substring(9,10);f&&g.doneFunction(!1),g.closeOnCancel&&v.close()}else v.close()}},q=B.querySelectorAll("button"),A=0;A Date: Sat, 14 Mar 2015 16:26:06 -0400 Subject: [PATCH 3/3] bigger buttons and even --- index.html | 2 +- style/style.css | 55 +++++++++++++++++++++++++------------------------ 2 files changed, 29 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index 973427b..f9a3ab7 100644 --- a/index.html +++ b/index.html @@ -83,7 +83,7 @@
-
+
diff --git a/style/style.css b/style/style.css index 8979971..334dcdb 100644 --- a/style/style.css +++ b/style/style.css @@ -73,44 +73,45 @@ button:focus { } #openSideBar { - position: absolute; - width:60px; - height:60px; - top: 2px; - left: 4px; - z-index: 3002; - color:#232323; - cursor:pointer; -} - -#pauseBtn { - position: absolute; - margin-bottom: 20px; - width:60px; - height:60px; - margin-right: 25px; + position: fixed; + margin-top: 10px; + width:72px; + height:72px; + margin-left: 15px; + z-index: 3000; + color:#232323; + cursor:pointer; + top:0; + left:0; + z-index:99; + +} + +#pauseBtn { + position: fixed; + margin-bottom: 10px; + width:72px; + height:72px; + margin-right: 15px; z-index: 3000; color:#232323; cursor:pointer; - position:absolute; right:0; bottom:0; z-index:99; } #restartBtn { - position:absolute; - left:0; - width:60px; - height:60px; - bottom:0; - z-index:99; - position: absolute; - margin-bottom: 18px; - margin-left: 10px; - z-index:99; + position: fixed; + margin-bottom: 10px; + width:72px; + height:72px; + margin-left: 15px; + z-index: 3000; color:#232323; cursor:pointer; + bottom:0; + z-index:99; } #helpScreen {