Merge branch 'clay-improvements' of https://github.com/Hextris/hextris into clay-improvements

This commit is contained in:
lengstrom 2015-05-24 12:36:13 -04:00
commit f0a8287dfc
5 changed files with 62 additions and 26 deletions

View file

@ -76,10 +76,12 @@
<a href = 'https://itunes.apple.com/us/app/id903769553?mt=8'><b>iOS</b></a> <a href ='https://play.google.com/store/apps/details?id=com.hextris.hextris'><b>Android</b></a><br> <a href = 'https://itunes.apple.com/us/app/id903769553?mt=8'><b>iOS</b></a> <a href ='https://play.google.com/store/apps/details?id=com.hextris.hextris'><b>Android</b></a><br>
By <a href="http://loganengstrom.com/" target="_blank">Logan Engstrom</a> & <a href='garrettdreyfus.github.io' target="_blank">Garrett Finucane</a> By <a href="http://loganengstrom.com/" target="_blank">Logan Engstrom</a> & <a href='garrettdreyfus.github.io' target="_blank">Garrett Finucane</a>
</div> </div>
<div id='startBtn' style='position:absolute;left:40%;top:38%;height:25%;width:25%;z-index:99999999;cursor:pointer;'></div> <div id='startBtn' ></div>
<div id="helpScreen" class = 'unselectable'> <div id="helpScreen" class = 'unselectable'>
<h1 class = 'instructions_body'>Instructions</h1> <h1 class = 'instructions_body' id = "instructions_head">Instructions</h1>
<p class = 'instructions_body' id = 'inst_main_body'></p> <div class = 'instructions_body' id = 'inst_main_body'>
The goal of Hextris is to stop blocks from leaving the inside of the outer gray hexagon
</div>
</div> </div>
<img id="openSideBar" class = 'helpText' src="./images/btn_help.svg" /> <img id="openSideBar" class = 'helpText' src="./images/btn_help.svg" />
<div class="faded overlay"></div> <div class="faded overlay"></div>

View file

@ -112,7 +112,6 @@ function initialize(a) {
comboTime: 240 comboTime: 240
}; };
$("#inst_main_body").html("The goal of Hextris is to stop blocks from leaving the inside of the outer gray hexagon<br><br>" + (settings.platform != 'mobile' ? 'Press the right and left arrow keys' : 'tap the left and right sides of the screen') + " to rotate the Hexagon<br><br>Clear blocks and get points by making 3 or more blocks of the same color touch<br><br>Time left before your combo streak disappears is indicated shown by <span style='color:#f1c40f;'>the</span> <span style='color:#e74c3c'>colored</span> <span style='color:#3498db'>lines</span> <span style='color:#2ecc71'>in</span> the outer hexagon<br><br> " + (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)) { if(/Android/i.test(navigator.userAgent)) {
settings.os = "android"; settings.os = "android";
@ -279,8 +278,8 @@ function startBtnHandler() {
if (!canRestart) return false; if (!canRestart) return false;
if ($('#helpScreen').is(':visible')) { if ($('#openSideBar').is(':visible')) {
$('#helpScreen').fadeOut(150, "linear"); $('#openSideBar').fadeOut(150, "linear");
} }
if (importing == 1) { if (importing == 1) {

View file

@ -83,8 +83,8 @@ function addKeyListeners() {
return; return;
} }
if ($('#helpScreen').is(":visible")) { if ($('#openSideBar').is(":visible")) {
$('#helpScreen').fadeOut(150, "linear"); $('#openSideBar').fadeOut(150, "linear");
} }
pause(); pause();
return false; return false;

View file

@ -44,7 +44,7 @@ function resumeGame() {
startTime = Date.now(); startTime = Date.now();
setTimeout(function() { setTimeout(function() {
if ((gameState == 1 || gameState == 2) && !$('#helpScreen').is(':visible')) { if ((gameState == 1 || gameState == 2) && !$('#helpScreen').is(':visible')) {
$('.helpText').fadeOut(150, "linear"); $('#openSideBar').fadeOut(150, "linear");
} }
}, 7000); }, 7000);
@ -52,7 +52,7 @@ function resumeGame() {
} }
function checkVisualElements() { 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"); if (!$('#pauseBtn').is(':visible')) $('#pauseBtn').fadeIn(150, "linear");
$('#fork-ribbon').fadeOut(150); $('#fork-ribbon').fadeOut(150);
if (!$('#restartBtn').is(':visible')) $('#restartBtn').fadeOut(150, "linear"); if (!$('#restartBtn').is(':visible')) $('#restartBtn').fadeOut(150, "linear");
@ -72,19 +72,20 @@ function init(b) {
hidebottombar(); hidebottombar();
$("#pauseBtn").attr('src',"./images/btn_pause.svg");
if ($('#helpScreen').is(":visible")) { if ($('#helpScreen').is(":visible")) {
$('#helpScreen').fadeOut(150, "linear"); $('#helpScreen').fadeOut(150, "linear");
} }
setTimeout(function() { setTimeout(function() {
$('.helpText').fadeOut(150, "linear"); $('#openSideBar').fadeOut(150, "linear");
infobuttonfading = false; infobuttonfading = false;
}, 7000); }, 7000);
clearSaveState(); clearSaveState();
} }
infobuttonfading = true; infobuttonfading = true;
$("#pauseBtn").html('<img src="./images/btn_pause.svg">'); $("#pauseBtn").attr('src',"./images/btn_pause.svg");
hideUIElements(); hideUIElements();
var saveState = localStorage.getItem("saveState") || "{}"; var saveState = localStorage.getItem("saveState") || "{}";
saveState = JSONfn.parse(saveState); saveState = JSONfn.parse(saveState);
@ -242,7 +243,7 @@ function animLoop() {
if ($('#pauseBtn').is(':visible')) $('#pauseBtn').fadeOut(150, "linear"); if ($('#pauseBtn').is(':visible')) $('#pauseBtn').fadeOut(150, "linear");
if ($('#restartBtn').is(':visible')) $('#restartBtn').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(); showbottombar();
canRestart = 0; canRestart = 0;
@ -332,7 +333,7 @@ function showHelp() {
pause(); pause();
} }
if($("#pauseBtn").children()[0].src.replace(/^.*[\\\/]/, '') == "btn_pause.svg" && gameState != 0 && !infobuttonfading) { if($("#pauseBtn").attr('src') == "btn_pause.svg" && gameState != 0 && !infobuttonfading) {
return; return;
} }

View file

@ -7,6 +7,7 @@
user-select: none; user-select: none;
padding:0; padding:0;
margin:0; margin:0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
} }
#HIGHSCORE { #HIGHSCORE {
@ -93,15 +94,15 @@ button:focus {
width:72px; width:72px;
height:72px; height:72px;
margin-left: 11px; margin-left: 11px;
z-index: 3000; z-index: 3003;
color:#232323; color:#232323;
cursor:pointer; cursor:pointer;
top:0; top:0;
left:0; left:0;
z-index:99;
} }
#pauseBtn { #pauseBtn {
display:none; display:none;
position: fixed; position: fixed;
@ -130,19 +131,28 @@ button:focus {
bottom:0; bottom:0;
z-index:99; z-index:99;
} }
#startBtn {
position:absolute;
left:40%;
top:38%;
height:25%;
width:25%;
z-index:99999999;
cursor:pointer;
}
#helpScreen { #helpScreen {
height:480px; height:100%;
width:320px; width:100%;
z-index:3001; z-index:3001;
position:fixed; position:fixed;
top:18px; top:0;
margin:0; margin:0;
font-size:15px; font-size:15px;
text-align:center; text-align:center;
display:none; display:none;
color:#232323; color:#232323;
background-color:rgba(236,240,241,.7); background-color:rgba(236,240,241,1);
} }
#colorBlindBtn { #colorBlindBtn {
@ -157,9 +167,16 @@ button:focus {
color:#232323; color:#232323;
cursor:pointer; cursor:pointer;
} }
.instructions_body { .instructions_body {
margin-left:3px; margin-left:3px;
width:calc(100% - 12px) ! important; width:calc(100% - 12px) ! important;
margin-top:2%;
}
#instructions_head {
margin-top:15%;
} }
@media only screen and (min-device-width : 320px) @media only screen and (min-device-width : 320px)
@ -173,14 +190,31 @@ and (max-device-width : 480px) {
height:100%; height:100%;
font-size:13px; font-size:13px;
text-align:center; 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 { #instructions_head {
/*margin-top:20px;*/ padding-left:0%;
margin-left:3px; }
width:calc(100% - 12px) ! important; #openSideBar{
} width:60px;
height:60px;
}
#pauseBtn {
width:60px;
height:60px;
}
#restartBtn {
width:60px;
height:60px;
}
} }
.overlay { .overlay {