diff --git a/index.html b/index.html index 97375de..4322c43 100644 --- a/index.html +++ b/index.html @@ -76,10 +76,12 @@ iOS Android
By Logan Engstrom & Garrett Finucane -
+
-

Instructions

-

+

Instructions

+
+ The goal of Hextris is to stop blocks from leaving the inside of the outer gray hexagon +
diff --git a/js_v9/initialization.js b/js_v9/initialization.js index 7f76516..04207f7 100644 --- a/js_v9/initialization.js +++ b/js_v9/initialization.js @@ -112,7 +112,6 @@ function initialize(a) { comboTime: 240 }; - $("#inst_main_body").html("The goal of Hextris is to stop blocks from leaving the inside of the outer gray hexagon

" + (settings.platform != 'mobile' ? 'Press the right and left arrow keys' : 'tap the left and right sides of the screen') + " to rotate the Hexagon

Clear blocks and get points by making 3 or more blocks of the same color touch

Time left before your combo streak disappears is indicated shown by the colored lines in the outer hexagon

" + (settings.platform == 'mobile' ? 'Toggle speeding up the game by tapping the inner hexagon' : "Speed up the game 2x by holding the down arrow")); } if(/Android/i.test(navigator.userAgent)) { settings.os = "android"; @@ -279,8 +278,8 @@ function startBtnHandler() { if (!canRestart) return false; - if ($('#helpScreen').is(':visible')) { - $('#helpScreen').fadeOut(150, "linear"); + if ($('#openSideBar').is(':visible')) { + $('#openSideBar').fadeOut(150, "linear"); } if (importing == 1) { diff --git a/js_v9/input.js b/js_v9/input.js index 0590941..51fb8da 100644 --- a/js_v9/input.js +++ b/js_v9/input.js @@ -83,8 +83,8 @@ function addKeyListeners() { return; } - if ($('#helpScreen').is(":visible")) { - $('#helpScreen').fadeOut(150, "linear"); + if ($('#openSideBar').is(":visible")) { + $('#openSideBar').fadeOut(150, "linear"); } pause(); return false; diff --git a/js_v9/main.js b/js_v9/main.js index c985718..ebfcbde 100644 --- a/js_v9/main.js +++ b/js_v9/main.js @@ -44,7 +44,7 @@ function resumeGame() { startTime = Date.now(); setTimeout(function() { if ((gameState == 1 || gameState == 2) && !$('#helpScreen').is(':visible')) { - $('.helpText').fadeOut(150, "linear"); + $('#openSideBar').fadeOut(150, "linear"); } }, 7000); @@ -52,7 +52,7 @@ function resumeGame() { } function checkVisualElements() { - if (!$('.helpText').is(":visible")) $('.helpText').fadeIn(150, "linear"); + if ($('#openSideBar').is(":visible")) $('#openSideBar').fadeOut(150, "linear"); if (!$('#pauseBtn').is(':visible')) $('#pauseBtn').fadeIn(150, "linear"); $('#fork-ribbon').fadeOut(150); if (!$('#restartBtn').is(':visible')) $('#restartBtn').fadeOut(150, "linear"); @@ -72,19 +72,20 @@ function init(b) { hidebottombar(); + $("#pauseBtn").attr('src',"./images/btn_pause.svg"); if ($('#helpScreen').is(":visible")) { $('#helpScreen').fadeOut(150, "linear"); } setTimeout(function() { - $('.helpText').fadeOut(150, "linear"); + $('#openSideBar').fadeOut(150, "linear"); infobuttonfading = false; }, 7000); clearSaveState(); } infobuttonfading = true; - $("#pauseBtn").html(''); + $("#pauseBtn").attr('src',"./images/btn_pause.svg"); hideUIElements(); var saveState = localStorage.getItem("saveState") || "{}"; saveState = JSONfn.parse(saveState); @@ -242,7 +243,7 @@ function animLoop() { if ($('#pauseBtn').is(':visible')) $('#pauseBtn').fadeOut(150, "linear"); if ($('#restartBtn').is(':visible')) $('#restartBtn').fadeOut(150, "linear"); - if (!$('.helpText').is(':visible')) $('.helpText').fadeIn(150, "linear"); + if ($('#openSideBar').is(':visible')) $('.openSideBar').fadeOut(150, "linear"); showbottombar(); canRestart = 0; @@ -332,7 +333,7 @@ function showHelp() { pause(); } - if($("#pauseBtn").children()[0].src.replace(/^.*[\\\/]/, '') == "btn_pause.svg" && gameState != 0 && !infobuttonfading) { + if($("#pauseBtn").attr('src') == "btn_pause.svg" && gameState != 0 && !infobuttonfading) { return; } diff --git a/style/style.css b/style/style.css index 6e1c839..17e5657 100644 --- a/style/style.css +++ b/style/style.css @@ -7,6 +7,7 @@ user-select: none; padding:0; margin:0; + -webkit-tap-highlight-color: rgba(0,0,0,0); } #HIGHSCORE { @@ -93,15 +94,15 @@ button:focus { width:72px; height:72px; margin-left: 11px; - z-index: 3000; + z-index: 3003; color:#232323; cursor:pointer; top:0; left:0; - z-index:99; } + #pauseBtn { display:none; position: fixed; @@ -130,19 +131,28 @@ button:focus { bottom:0; z-index:99; } +#startBtn { + position:absolute; + left:40%; + top:38%; + height:25%; + width:25%; + z-index:99999999; + cursor:pointer; +} #helpScreen { - height:480px; - width:320px; + height:100%; + width:100%; z-index:3001; position:fixed; - top:18px; + top:0; margin:0; font-size:15px; text-align:center; display:none; color:#232323; - background-color:rgba(236,240,241,.7); + background-color:rgba(236,240,241,1); } #colorBlindBtn { @@ -157,9 +167,16 @@ button:focus { color:#232323; cursor:pointer; } + + .instructions_body { margin-left:3px; width:calc(100% - 12px) ! important; + margin-top:2%; +} + +#instructions_head { + margin-top:15%; } @media only screen and (min-device-width : 320px) @@ -173,14 +190,31 @@ and (max-device-width : 480px) { height:100%; font-size:13px; text-align:center; - background-color:rgba(255,255,255,0.9); + background-color:rgba(255,255,255,1); + } + #inst_main_body{ + width:70% !important; + padding-left:15% !important; + margin-left:0; } - .instructions_body { - /*margin-top:20px;*/ - margin-left:3px; - width:calc(100% - 12px) ! important; - } + #instructions_head { + padding-left:0%; + } + #openSideBar{ + width:60px; + height:60px; + } + #pauseBtn { + width:60px; + height:60px; + } + #restartBtn { + width:60px; + height:60px; + } + + } .overlay {