tabbed + more changes
This commit is contained in:
lengstrom
parent
10aa54b947
commit
ac6d5d0b89
4 changed files with 147 additions and 125 deletions
|
|
@ -31,8 +31,9 @@
|
|||
<meta property="twitter:app:url:ipad" content="itunes.apple.com/us/app/id903769553?mt=8">
|
||||
<meta property="twitter:app:url:googleplay" content="https://play.google.com/store/apps/details?id=com.hextris.hextris">
|
||||
<link rel="icon" type="image/png" href="favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="style/style.css">
|
||||
<link href='http://fonts.googleapis.com/css?family=Exo+2' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="style/fa/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="style/style.css">
|
||||
<script type = 'text/javascript' src="vendor/hammer.min.js"></script>
|
||||
<script type = 'text/javascript' src="vendor/jsonfn.min.js"></script>
|
||||
<script type = 'text/javascript' src="vendor/keypress.min.js"></script>
|
||||
|
|
@ -92,6 +93,7 @@
|
|||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
||||
<iframe id = 'ghl' src="//ghbtns.com/github-btn.html?user=Hextris&repo=Hextris&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="90" height="20" onload='showbottombar()'></iframe>
|
||||
</div>
|
||||
<div id = 'HIGHSCORE'>HIGH SCORE</div>
|
||||
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-51272720-2', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -29,9 +29,13 @@ function render() {
|
|||
}
|
||||
|
||||
MainHex.draw();
|
||||
if (gameState ==1 || gameState ==-1 || gameState === 0) {
|
||||
drawScoreboard();
|
||||
}
|
||||
if (gameState ==1 || gameState ==-1 || gameState === 0) {
|
||||
drawScoreboard();
|
||||
}
|
||||
|
||||
if (gameState != 0 && gameState != 2) {
|
||||
|
||||
}
|
||||
|
||||
for (i = 0; i < MainHex.texts.length; i++) {
|
||||
var alive = MainHex.texts[i].draw();
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ function easeOutCubic(t, b, c, d) {
|
|||
}
|
||||
|
||||
function renderText(x, y, fontSize, color, text, font) {
|
||||
if (text == 'HIGH SCORE') debugger;
|
||||
ctx.save();
|
||||
if (!font) {
|
||||
font = 'px/0 Roboto';
|
||||
|
|
|
|||
257
style/style.css
257
style/style.css
|
|
@ -1,28 +1,43 @@
|
|||
* {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
#HIGHSCORE {
|
||||
position:absolute;
|
||||
left:50%;
|
||||
width:250px;
|
||||
overflow: visible;
|
||||
margin-left: -175px;
|
||||
font-family: Exo;
|
||||
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Exo;
|
||||
src: url("style/fonts/Exo2-Regular.otf") format("opentype");
|
||||
}
|
||||
|
||||
.tweet {
|
||||
font-size:2rem;
|
||||
color:#4099FF;
|
||||
font-size:2rem;
|
||||
color:#4099FF;
|
||||
}
|
||||
@media only screen
|
||||
and (min-device-width : 320px)
|
||||
and (max-device-width : 480px) {
|
||||
.tweet{
|
||||
font-size:1rem;
|
||||
}
|
||||
and (max-device-width : 480px) {
|
||||
.tweet{
|
||||
font-size:1rem;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color:#232323;
|
||||
color:#232323;
|
||||
}
|
||||
|
||||
.twitter-share-button { width: 90px !important; }
|
||||
|
|
@ -73,38 +88,38 @@ button:focus {
|
|||
}
|
||||
|
||||
#openSideBar {
|
||||
position: absolute;
|
||||
width:60px;
|
||||
height:60px;
|
||||
top: 2px;
|
||||
left: 4px;
|
||||
z-index: 3002;
|
||||
color:#232323;
|
||||
cursor:pointer;
|
||||
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;
|
||||
width:60px;
|
||||
height:60px;
|
||||
margin-right: 25px;
|
||||
z-index: 3000;
|
||||
color:#232323;
|
||||
cursor:pointer;
|
||||
position:absolute;
|
||||
right:0;
|
||||
bottom:0;
|
||||
z-index:99;
|
||||
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;
|
||||
left:0;
|
||||
width:60px;
|
||||
height:60px;
|
||||
bottom:0;
|
||||
z-index:99;
|
||||
position: absolute;
|
||||
margin-bottom: 18px;
|
||||
margin-left: 10px;
|
||||
|
|
@ -119,9 +134,9 @@ button:focus {
|
|||
z-index:3001;
|
||||
position:fixed;
|
||||
top:18px;
|
||||
margin:0;
|
||||
font-size:15px;
|
||||
text-align:center;
|
||||
margin:0;
|
||||
font-size:15px;
|
||||
text-align:center;
|
||||
display:none;
|
||||
color:#232323;
|
||||
background-color:rgba(236,240,241,.7);
|
||||
|
|
@ -140,46 +155,46 @@ button:focus {
|
|||
cursor:pointer;
|
||||
}
|
||||
.instructions_body {
|
||||
margin-left:3px;
|
||||
width:calc(100% - 12px) ! important;
|
||||
margin-left:3px;
|
||||
width:calc(100% - 12px) ! important;
|
||||
}
|
||||
|
||||
@media only screen and (min-device-width : 320px)
|
||||
and (max-device-width : 480px) {
|
||||
#helpScreen {
|
||||
position:fixed;
|
||||
top:2px;
|
||||
padding-top:20px;
|
||||
margin:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
font-size:13px;
|
||||
text-align:center;
|
||||
background-color:rgba(255,255,255,0.9);
|
||||
}
|
||||
#helpScreen {
|
||||
position:fixed;
|
||||
top:2px;
|
||||
padding-top:20px;
|
||||
margin:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
font-size:13px;
|
||||
text-align:center;
|
||||
background-color:rgba(255,255,255,0.9);
|
||||
}
|
||||
|
||||
.instructions_body {
|
||||
/*margin-top:20px;*/
|
||||
margin-left:3px;
|
||||
width:calc(100% - 12px) ! important;
|
||||
}
|
||||
.instructions_body {
|
||||
/*margin-top:20px;*/
|
||||
margin-left:3px;
|
||||
width:calc(100% - 12px) ! important;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position:absolute;
|
||||
height:20%;
|
||||
width:100%;
|
||||
left:50%;
|
||||
top:50%;
|
||||
margin-left:-50%;
|
||||
margin-top:-10%;
|
||||
z-index:3000;
|
||||
color:#232323;
|
||||
text-align:center;
|
||||
position:absolute;
|
||||
height:20%;
|
||||
width:100%;
|
||||
left:50%;
|
||||
top:50%;
|
||||
margin-left:-50%;
|
||||
margin-top:-10%;
|
||||
z-index:3000;
|
||||
color:#232323;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.helpText {
|
||||
z-index:3001;
|
||||
z-index:3001;
|
||||
}
|
||||
|
||||
.centeredHeader {
|
||||
|
|
@ -195,100 +210,100 @@ and (max-device-width : 480px) {
|
|||
}
|
||||
|
||||
.centeredSubSubHeader {
|
||||
font-size:1.4rem;
|
||||
text-align:center;
|
||||
font-size:1.4rem;
|
||||
text-align:center;
|
||||
}
|
||||
#attributions {
|
||||
color:#232323;
|
||||
position:absolute;
|
||||
width:100%;
|
||||
left: 0%;
|
||||
top: 80%;
|
||||
text-align:center;
|
||||
font-size:1.25rem;
|
||||
z-index:98;
|
||||
color:#232323;
|
||||
position:absolute;
|
||||
width:100%;
|
||||
left: 0%;
|
||||
top: 80%;
|
||||
text-align:center;
|
||||
font-size:1.25rem;
|
||||
z-index:98;
|
||||
}
|
||||
|
||||
@media only screen
|
||||
and (min-device-width : 320px)
|
||||
and (max-device-width : 580px) {
|
||||
.centeredHeader {
|
||||
font-size:2rem;
|
||||
text-align:center;
|
||||
line-height:0.6rem;
|
||||
}
|
||||
.centeredHeader {
|
||||
font-size:2rem;
|
||||
text-align:center;
|
||||
line-height:0.6rem;
|
||||
}
|
||||
|
||||
#attributions {
|
||||
font-size:.7rem;
|
||||
}
|
||||
#attributions {
|
||||
font-size:.7rem;
|
||||
}
|
||||
|
||||
.centeredSubHeader {
|
||||
font-size:1rem;
|
||||
text-align:center;
|
||||
}
|
||||
.centeredSubHeader {
|
||||
font-size:1rem;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
margin-top: -20%;
|
||||
}
|
||||
.overlay {
|
||||
margin-top: -20%;
|
||||
}
|
||||
}
|
||||
.blur {
|
||||
opacity:0.1;
|
||||
opacity:0.1;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Regular'), local('Roboto-Regular'), url("fonts/roboto.woff") format('woff');
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Regular'), local('Roboto-Regular'), url("fonts/roboto.woff") format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Q';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Q Regular'), local('Q-Regular'), url("fonts/QuattrocentoSans-Regular.ttf") format('ttf');
|
||||
font-family: 'Q';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Q Regular'), local('Q-Regular'), url("fonts/QuattrocentoSans-Regular.ttf") format('ttf');
|
||||
}
|
||||
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #ecf0f1;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color:#ecf0f1;
|
||||
color: #ecf0f1;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color:#ecf0f1;
|
||||
}
|
||||
|
||||
#clickToExit {
|
||||
cursor:pointer;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
transition: all 0.5s ease;
|
||||
position: absolute;
|
||||
left:0;
|
||||
right:0;
|
||||
transition: all 0.5s ease;
|
||||
position: absolute;
|
||||
left:0;
|
||||
right:0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
background-color:#ecf0f1;
|
||||
z-index:3;
|
||||
background-color:#ecf0f1;
|
||||
z-index:3;
|
||||
}
|
||||
|
||||
#title {
|
||||
z-index:99;
|
||||
margin-top:20px;
|
||||
color:#2c3e50;
|
||||
z-index:99;
|
||||
margin-top:20px;
|
||||
color:#2c3e50;
|
||||
}
|
||||
|
||||
.unselectable {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#bottombar {
|
||||
|
|
@ -297,7 +312,7 @@ body {
|
|||
width:1000px;
|
||||
text-align:center;
|
||||
left:50%;
|
||||
margin-left:-500px;
|
||||
margin-left:-500px;
|
||||
bottom:10px;
|
||||
z-index:98;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue