Merge branch 'clay-improvements' of https://github.com/Hextris/hextris into clay-improvements
This commit is contained in:
commit
f0a8287dfc
5 changed files with 62 additions and 26 deletions
|
@ -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>
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue