From 7dd4413540b1de5d6b0ccca8d6778cf980833a43 Mon Sep 17 00:00:00 2001 From: vjsingh Date: Sun, 19 Jun 2016 17:47:58 -0400 Subject: [PATCH] updated index page including adding a working theater mode --- css/styles.css | 115 +++++++++++++++++++++++++++++++++++++++++++ high_scores_state.js | 12 ++--- index.html | 95 +++++++++++++++++++++++++---------- 3 files changed, 191 insertions(+), 31 deletions(-) diff --git a/css/styles.css b/css/styles.css index 44efae4..74e42fe 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,3 +1,9 @@ +body { + background: black; + color: white; + font-family: Arial, sans-serif; + overflow:none; +} canvas { border: 3px solid gray; z-index: 1; @@ -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; +} diff --git a/high_scores_state.js b/high_scores_state.js index 4f3583f..cef6eb8 100644 --- a/high_scores_state.js +++ b/high_scores_state.js @@ -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 : { @@ -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( - "
Loading high score data...
" - ); + //$("#scores-wrap").prepend( + //"
Loading high score data...
" + //); // show the div - $("#scores-wrap").show(); + //$("#scores-wrap").show(); // update and render scores // TODO what if it fails? scores.do_scores(); diff --git a/index.html b/index.html index c9a9c68..69254b9 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,8 @@ - + + - -
+
+
+ + - - Your browser does not support the HTML5 canvas element. Upgrade to Chrome, Firefox 4, Safari, or Opera to play this game. - +
+ + Your browser does not support the HTML5 canvas element. Upgrade to Chrome, Firefox 4, Safari, or Opera to play this game. + +
+
+
+
Theater Mode
+
Try it, I triple-dog-dare you.
+
Enable
+
+
+
High Scores
+
Log in with Facebook to track your high scores and see your friends':
+
(We promise no cookie-loving ghosts will sneak into your bedroom and steal all your personal information)
+
+ +
+
+
+
Like it?
+ If you like the game, prove it! +
+ +
+
+
-
- -
-
- Note: Virion was built entirely using the new open HTML5 standard and the Processing.js 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:

+
+
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. +
+
Note: Virion was built entirely using the new open HTML5 standard and the Processing.js 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:

Google Chrome has no problems, and is highly recommended for the best overall performance
If you are using Firefox 3 and the game is not loading or running slowly, try updating to Firefox 4
If you are using Safari and seeing performance issues, try turning off the sound effects
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. +


-Fork me on GitHub +Fork me on GitHub