Skip to content

Commit

Permalink
updated index page including adding a working theater mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@vjsingh
vjsingh committed Jun 19, 2016
1 parent aafb3a2 commit 7dd4413
Show file tree
Hide file tree
Showing 3 changed files with 191 additions and 31 deletions.
115 changes: 115 additions & 0 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
body {
background: black;
color: white;
font-family: Arial, sans-serif;
overflow:none;
}
canvas {
border: 3px solid gray;
z-index: 1;
Expand Down Expand Up @@ -58,3 +64,112 @@ table.score-table {
.Date-header {
width: 100;
}

.below-game-section {
vertical-align: top;
display: inline-block;
}
.below-game-section-border {
border-right: 2px solid white;
}
.below-game-header {
font-size: 40px;
text-align: center;
}
.theater-mode-enable {
text-align: center;
width: 70%;
margin: 0 auto; /* Center */
}

/* PURE BUTTON */
.pure-button {
/* Structure */
display: inline-block;
zoom: 1;
line-height: normal;
white-space: nowrap;
vertical-align: middle;
text-align: center;
cursor: pointer;
-webkit-user-drag: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* Firefox: Get rid of the inner focus border */
.pure-button::-moz-focus-inner {
padding: 0;
border: 0;
}

.pure-button {
font-family: inherit;
font-size: 100%;
padding: 0.5em 1em;
color: #444; /* rgba not supported (IE 8) */
color: rgba(0, 0, 0, 0.80); /* rgba supported */
border: 1px solid #999; /*IE 6/7/8*/
border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/
background-color: #E6E6E6;
text-decoration: none;
border-radius: 2px;
}

.pure-button-hover,
.pure-button:hover,
.pure-button:focus {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
}
.pure-button:focus {
outline: 0;
}
.pure-button-active,
.pure-button:active {
box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
border-color: #000\9;
}

.pure-button[disabled],
.pure-button-disabled,
.pure-button-disabled:hover,
.pure-button-disabled:focus,
.pure-button-disabled:active {
border: none;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
filter: alpha(opacity=40);
-khtml-opacity: 0.40;
-moz-opacity: 0.40;
opacity: 0.40;
cursor: not-allowed;
box-shadow: none;
}

.pure-button-hidden {
display: none;
}

/* Firefox: Get rid of the inner focus border */
.pure-button::-moz-focus-inner{
padding: 0;
border: 0;
}

.pure-button-primary,
.pure-button-selected,
a.pure-button-primary,
a.pure-button-selected {
background-color: rgb(0, 120, 231);
color: #fff;
}
12 changes: 6 additions & 6 deletions high_scores_state.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ var high_scores_state = function (p, prev_state) {
sounds.play_button_back();

// hide the div
$("#scores-wrap").hide();
$("#scores").tabs("destroy");
//$("#scores-wrap").hide();
//$("#scores").tabs("destroy");
return prev_state;//splash_state(p);
},
rect : {
Expand Down Expand Up @@ -68,12 +68,12 @@ var high_scores_state = function (p, prev_state) {
// init the scores immediately
var init = (function() {
// add a loading message to be removed on load
$("#scores-wrap").prepend(
"<div id='scores-loading' style='height:400; background: black; text-align:center;' ><div style='position:relative; top:50%; color:white;'>Loading high score data...</div></div>"
);
//$("#scores-wrap").prepend(
//"<div id='scores-loading' style='height:400; background: black; text-align:center;' ><div style='position:relative; top:50%; color:white;'>Loading high score data...</div></div>"
//);

// show the div
$("#scores-wrap").show();
//$("#scores-wrap").show();
// update and render scores
// TODO what if it fails?
scores.do_scores();
Expand Down
95 changes: 70 additions & 25 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,8 @@
<link rel="shortcut icon" href="images/logo/logo32.png" />
<link type="text/css" href="css/ui-darkness/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<link type="text/css" href="css/styles.css" rel="stylesheet" />
<style>
body {
background: white;
color: black;
font-family: Arial, sans-serif;
overflow:none;
}
</style>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<script typ

<script type="text/javascript">

Expand Down Expand Up @@ -161,41 +155,68 @@

<!-- <div id="fb_name_div"> You are not Logged In</div> -->

<div style="margin: 1em; width: 700; align:center;">
<script>
if (fb_login_button) {
document.write(fb_login_button);
}
</script>

<div style="margin-top:1em; position:relative;">
<div>
<div style="margin-top:1em; font-family: Roboto sans-serif; font-size: 20px">
<!-- Score -->
<!-- Removing because its annoying when hiding all divs for theater mode. I don't think we're even using it anymore?
<div id="scores-wrap">
<div id="scores">
Could not load high scores! You may want to check your internet connection.
</div>
</div>
-->
<div class="pure-button theater-disable" style="display: none; font-size: 14px"> Disable Theater Mode </div>
<!-- Game Canvas -->
<canvas width="700" height="600" id="test_canvas">
Your browser does not support the HTML5 canvas element. Upgrade to Chrome, Firefox 4, Safari, or Opera to play this game.
</canvas>
<div class="dont-hide-in-theater canvas-wrapper" style="width: 700px; height: 600px; margin: 0 auto"> <!-- margin here is to center horizontally" margin: 0 auto-->
<canvas class="dont-hide-in-theater" width="700" height="600" id="test_canvas">
Your browser does not support the HTML5 canvas element. Upgrade to Chrome, Firefox 4, Safari, or Opera to play this game.
</canvas>
</div>
<div style="width: 100%; background: #151515; margin-top: 60px;">
<div class="below-game-section below-game-section-border" style="width: 20%;">
<div class="below-game-header"> Theater Mode</div>
<div style="margin-bottom: 10px"> Try it, I triple-dog-dare you. </div>
<div class="pure-button theater-enable"> Enable </div>
</div>
<div class="below-game-section below-game-section-border" style="width: 50%;">
<div class="below-game-header"> High Scores </div>
<div>Log in with Facebook to track your high scores and see your friends':</div>
<div style="margin-bottom: 10px">(We promise no cookie-loving ghosts will sneak into your bedroom and steal all your personal information)</div>
<div style="width: 275px; margin: 0 auto"> <!-- Center horizontally -->
<script>
if (fb_login_button) {
document.write(fb_login_button);
}
</script>
</div>
</div>
<div class="below-game-section" style="width: 20%;">
<div class="below-game-header">Like it?</div>
If you like the game, prove it!
<div style="margin-top:0.8em;">
<fb:like href="http://www.facebook.com/apps/application.php?id=179028108782663" show_faces="true" width="450" colorscheme="dark"></fb:like>
</div>
</div>
</div>
<!--<div style="float:right; margin: 1.5em -5px 0.5em 1.5em; padding:0.5em; border: 1px dashed black; font-size:0.8em; width:200;">
<div style="margin-bottom:0.5em; font-weight:bold;">Virion was the first place finisher in the 2010-2011 Hidden Agenda Competition!</div>
<a href="http://www.facebook.com/haproject" target="_blank"><img src="images/halogo.jpg" width="200" /></a>
</div>-->
<div style="margin-top:0.8em;">
<fb:like href="http://www.facebook.com/apps/application.php?id=179028108782663" show_faces="true" width="450"></fb:like>
</div>
<div style="margin-top: 1.5em; /*margin-bottom:4em;*/ font-size: 0.8em;">
<strong>Note:</strong> Virion was built entirely using the new open HTML5 standard and the <a href="http://processingjs.org">Processing.js</a> JavaScript library. This means that you will never have to install a proprietary plugin to play our game, and in the near future will be able to play our game on any browser on any platform. Currently, however, some browsers do not yet have full support for the HTML5 standard, so please note the following browser compatibility issues: <br/> <br/>
<div style="margin-top: 1.5em; /*margin-bottom:4em;*/ font-size: 1em;">
<div> Virion was the winner of the 2011 Hidden Agenda educational game competition. The game is intended to teach kids (or adults!) about the basic workings of the human immune system.

Players who fully grasp the mechanics of the game will also have absorbed a general intuition about the first line of defence in our bodies, including macrophages, antibodies, T-Cells, and granulocytes.
</div>
<div style="margin-top: 10px"> <strong>Note:</strong> Virion was built entirely using the new open HTML5 standard and the <a href="http://processingjs.org">Processing.js</a> JavaScript library. This means that you will never have to install a proprietary plugin to play our game, and in the near future will be able to play our game on any browser on any platform. Currently, however, some browsers do not yet have full support for the HTML5 standard, so please note the following browser compatibility issues: <br/> <br/>
Google Chrome has no problems, and is highly recommended for the best overall performance<br/>
If you are using Firefox 3 and the game is not loading or running slowly, try updating to Firefox 4<br/>
If you are using Safari and seeing performance issues, try turning off the sound effects<br/>
If you are using Internet Explorer, please ensure that you have updated to the latest version (Internet Explorer 9), or the game will not run.
</div>
<br/><br/> </div>
</div>
</div>
<a href="https://github.com/vjsingh/Virus-Game"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>
<a target="_blank" href="https://github.com/vjsingh/Virus-Game"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>


<!-- Jplayer divs
Expand Down Expand Up @@ -302,3 +323,27 @@
//scores.do_scores();
</script>

<script>
$(document).ready(function() {
$('.theater-enable').click(function() {
$('.dont-hide-in-theater').siblings().hide();
$('.theater-disable').show();

// center horizontally and vertically
$('.canvas-wrapper').css('position', 'absolute');
$('.canvas-wrapper').css('top', '50%');
$('.canvas-wrapper').css('left', '50%');
$('.canvas-wrapper').css('transform', 'translateX(-50%) translateY(-50%)');
});
$('.theater-disable').click(function() {
$('.dont-hide-in-theater').siblings().show();
$('.theater-disable').hide();

// remove added styling
$('.canvas-wrapper').css('position', '');
$('.canvas-wrapper').css('top', '');
$('.canvas-wrapper').css('left', '');
$('.canvas-wrapper').css('transform', '');
});
});
</script>

0 comments on commit 7dd4413

Please sign in to comment.