Skip to content

Commit

Permalink
Added check for html5 canvas (with error page)
Browse files Browse the repository at this point in the history
  • Loading branch information
phtrivier committed Sep 9, 2010
1 parent b519db1 commit cc0ddf9
Show file tree
Hide file tree
Showing 12 changed files with 225 additions and 38 deletions.
Binary file added data/images/logos/chrome.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added data/images/logos/firefox.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions org/todo.org
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
** DONE Hardcode it
** DONE Generate the page
* TODO Various cleanups
+ [ ] Make sure every string is translated
+ [X] Make sure every string is translated
+ [ ] Add a check so that if the canvas is not supported,
an error occurs
+ [ ] Remove the older 'jsube.js'
+ [X] Remove the older 'jsube.html'

29 changes: 15 additions & 14 deletions src/css/home.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,26 @@ h1, h2, h3, h4, h5, h6 {
color : white;
}


#header {
text-align : center;
font-size : medium;
}

a {
color : white;
}

a:link {text-decoration: none;}
a:visited {text-decoration: none ; }
a:active {text-decoration: none ; }
a:hover {text-decoration: underline; }

#footer {
text-align : center;
}

/* ---------- */

#chapter-navigation {
text-align : center;
font-size : large;
Expand Down Expand Up @@ -52,10 +66,6 @@ h1, h2, h3, h4, h5, h6 {
padding-bottom : 2px;
}

#footer {
text-align : center;
}

.level-header {
font-size : large;
}
Expand All @@ -64,15 +74,6 @@ h1, h2, h3, h4, h5, h6 {
font-size : medium;
}

a {
color : white;
}

a:link {text-decoration: none;}
a:visited {text-decoration: none ; }
a:active {text-decoration: none ; }
a:hover {text-decoration: underline; }

#level-navigation {
padding-right : 5px;
padding-left : 5px;
Expand Down
55 changes: 55 additions & 0 deletions src/css/no_canvas.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
/* TODO factor this */
home, body {
font-family : Helvetica;
background-color : black;
color : white;
}

h1, h2, h3, h4, h5, h6 {
color : white;
}

#header {
text-align : center;
font-size : large;
}

a {
color : white;
}

a:link {text-decoration: none;}
a:visited {text-decoration: none ; }
a:active {text-decoration: none ; }
a:hover {text-decoration: underline; }

#footer {
text-align : center;
}

#footer a {
font-size : small;
}

/* --------- */

#intro {
font-size : large;
}

#other_browsers {
text-align : center;
}

#suggestion {
font-size : medium;
}

a {
font-size : large;
}

#details {
font-size : small;
font-style : italic;
}
18 changes: 9 additions & 9 deletions src/html/home.html
Original file line number Diff line number Diff line change
Expand Up @@ -30,37 +30,37 @@
<script type="text/javascript" charset="UTF-8" src="../js/levels.js"></script>
<script type="text/javascript" charset="UTF-8" src="../js/drawer.js"></script>
<script type="text/javascript" charset="UTF-8" src="../js/i18n.js"></script>
<script type="text/javascript" charset="UTF-8" src="../js/canvas_checker.js"></script>
<script type="text/javascript" charset="UTF-8" src="../js/home.js"></script>

<div id="outer" class="container prepend-4 prepend-top">

<div id="header" class="span-20 last">
<h3>Welcome to UBE</h3>
<h3 id="welcome"></h3>
<div class="span-12 prepend-4 last">
<p>Ube is a puzzle game, where you try to reach the exit with only a few moves available.</p>
<p id="intro"></p>
</div>
</div>

<div id="chapter-navigation" class="span-20 last">
<div id="chapter_0" class="tab-header-selected span-10 selected-chapter">Play Tutorial</div>
<div id="chapter_1" class="tab-header-unselected span-10 last unselected-chapter">Play Game (Coming soon)</div>
<div id="chapter_0" class="tab-header-selected span-10 selected-chapter"></div>
<div id="chapter_1" class="tab-header-unselected span-10 last unselected-chapter"></div>
</div>

<div id="level-navigation" class="span-21 last">

<div id="level-list" class="span-7 prepend-top append-bottom">
<h3 id='levels-header'></h3>
<h3 id="levels-header"></h3>
<ul id="levels" class="span-7 last">
</ul>
</div>

<div id="level-preview" class="span-13 last prepend-top prepend-1 append-bottom">
<h4 class="span-12 last">Level preview</h4>
<h4 id="level-preview-header" class="span-12 last"></h4>
<canvas id="playground" class="span-12 append-bottom" width="352px" height="176px"></canvas>
<div id="preview_stub" class="span-12">
Click on a level name to display a preview
<div id="preview-stub" class="span-12">
</div>
<div id="preview_footer" class="span-12 prepend-4 append-bottom">
<div id="preview-footer" class="span-12 prepend-4 append-bottom">
</div>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/html/in-game.html
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
<script type="text/javascript" charset="UTF-8" src="../js/puzzles.js"></script>
<script type="text/javascript" charset="UTF-8" src="../js/levels.js"></script>
<script type="text/javascript" charset="UTF-8" src="../js/drawer.js"></script>
<script type="text/javascript" charset="UTF-8" src="../js/canvas_checker.js"></script>
<script type="text/javascript" charset="UTF-8" src="../js/jsube.js"></script>

<div id="outer" class="container prepend-2">
Expand Down
68 changes: 68 additions & 0 deletions src/html/no_canvas.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<html>
<head>
<title>UBE</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" type="image/x-icon" href="../../data/images/ico/player.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="../../data/images/png/player.png" />
<link rel="stylesheet" href="../css/blueprint/screen.css" type="text/css" media="screen, projection"></link>
<link rel="stylesheet" href="../css/blueprint/print.css" type="text/css" media="print"></link>
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<link type="text/css" rel="stylesheet" href="../css/dark-hive/jquery-ui-1.8.2.custom.css"/>
<link type="text/css" rel="stylesheet" href="../css/no_canvas.css"/>
</head>
<body>

<script type="text/javascript" charset="UTF-8" src="../js/lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="../js/lib/jquery.url.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="../js/lib/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="../js/i18n.js"></script>
<script type="text/javascript" charset="UTF-8" src="../js/no_canvas.js"></script>

<div id="outer" class="container prepend-4 prepend-top">

<div id="header" class="span-20 last">
<h3 id="sorry">Sorry...</h3>
<div class="span-12 prepend-4 last">
<p id="intro">The browser you're using can not play UBE.</p>
</div>
</div>

<div id="other_browsers" class="span-20 last">
<div id="suggestion">
<p>Why don't you try with another browser ?<br/>Ube works (at least) with the latest versions of the following browsers : </p>
</div>

<div class="span-9 prepend-top">
<div class="span-5 prepend-3 last">
<a href="http://www.mozilla-europe.org/fr/firefox/">
<img class="span-5 last"
src="../../data/images/logos/firefox.png" alt="Firefox"/>
</a>
<a class="span-5 last" href="http://www.mozilla-europe.org/fr/firefox/">Mozilla Firefox &nbsp; (version 3.6)</a>
</div>
</div>

<div class="span-9 prepend-top">
<div class="span-5 prepend-3 last">
<a href="http://www.google.com/chrome">
<img class="span-5 last"
src="../../data/images/logos/chrome.png" alt="Chrome"/>
</a>
<a class="span-5 last" href="http://www.google.com/chrome">Google Chrome &nbsp; (version 6)</a>
</div>
</div>

<br/>
<br/>

<div id="details" class="span-20 prepend-top last">
<p>For those interested, UBE uses HTML5 'canvas' element, which is not yet available everywhere.<br/>Besides, those browsers are based on free software, which is a Good Thing (tm).</p>
</div>
</div>

<div id="footer" class="span-20 last prepend-top">
Copyright 2010 - <a href="mailto:[email protected]">Pierre-Henri Trivier</a>
</div>

</body>
</html>
12 changes: 12 additions & 0 deletions src/js/canvas_checker.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
CanvasChecker = function () {
}

CanvasChecker.prototype.has_canvas = function () {
return !!document.createElement('canvas').getContext;
}

CanvasChecker.prototype.check_canvas = function () {
if (!this.has_canvas()) {
window.location = "no_canvas.html"
}
}
49 changes: 38 additions & 11 deletions src/js/home.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,21 @@
g_home_i18n = {
"en" : { "level.choose" : "Choose a level",
"level.preview" : "Level preview",
"play" : "Play" },
"welcome" : "Welcome to UBE",
"intro" : "Ube is a puzzle game, where you try to reach the exit with only a few moves available.",
"play.tutorial" : "Play tutorial",
"play.game" : "Play game (coming soon !)",
"level.preview" : "Level preview",
"level.preview.stub" : "Click on a level name to display a preview",
"play" : "Play"},
"fr" : { "level.choose" : "Choisissez un niveau",
"level.preview" : "Aperçu du niveau",
"welcome": "Bienvenue dans UBE",
"intro" : "Ube est un casse-tête. Vous devez atteindre la sortie d'un labyrinthe, mais seuls certains mouvements sont possibles !",
"play.tutorial" : "Tutoriel",
"play.game" : "Jeu complet (c'est pour bientôt !)",
"level.preview" : "Aperçu du niveau",
"level.preview.stub" : "Cliquez sur le titre d'un niveau pour afficher un aperçu",
"play" : "Jouer" }
};

Expand All @@ -17,14 +29,25 @@ Home.prototype.puzzle_href = function (puzzle_id) {
return "in-game.html?puzzle_id=" + puzzle_id;
}

Home.prototype.append_i18n = function (selector, lg, key) {
$(selector).append(g_home_i18n[lg][key]);
}

Home.prototype.load_translated_text = function(lg) {
$('#levels-header').append(g_home_i18n[lg]['level.choose']);
$('#levels-header').mousedown(function (event) {
if (event.preventDefault) {
event.preventDefault();
}
});
}
this.append_i18n('#welcome', lg, "welcome");
this.append_i18n('#intro', lg, "intro");
this.append_i18n('#chapter_0', lg, "play.tutorial");
this.append_i18n('#chapter_1', lg, "play.game");
this.append_i18n("#levels-header", lg, "level.choose");
this.append_i18n("#level-preview-header", lg, "level.preview");
this.append_i18n("#preview-stub", lg, "level.preview.stub");

$('#levels-header').mousedown(function (event) {
if (event.preventDefault) {
event.preventDefault();
}
});
}

Home.prototype.on_level_selected = function(li, level_index) {
$("#levels > li").each(function (k) {
Expand All @@ -37,10 +60,11 @@ Home.prototype.on_level_selected = function(li, level_index) {
this.drawer.draw_puzzle(this.puzzle);

if (!this.has_puzzle) {
$("#preview_stub").remove();
$("#preview-stub").remove();
var play_div = $("<div id='play' class='button span-4 last'><div>");
play_div.append("<a id='play_link'>Play</a>");
$("#preview_footer").append(play_div);
play_div.append("<a id='play_link'></a>");
$("#preview-footer").append(play_div);
this.append_i18n("#play_link", get_lg(), "play");
this.has_puzzle = true;
}

Expand Down Expand Up @@ -78,6 +102,9 @@ Home.prototype.load_tutorial_level_list = function(lg) {
}

$(document).ready(function(){

new CanvasChecker().check_canvas();

var h = new Home
h.drawer.load_images(function () {
var lg = get_lg();
Expand Down
6 changes: 4 additions & 2 deletions src/js/jsube.js
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,8 @@ function next_puzzle() {

$(document).ready(function(){

new CanvasChecker().check_canvas();

// TODO(pht) : check that Canvas is supported (and complain appropriately)

g_drawer = new Drawer(32);
Expand All @@ -139,8 +141,8 @@ $(document).ready(function(){
g_puzzle = load_puzzle();

if (g_puzzle == null) {
alert("Unable to load puzzle, sorry");
window.location = "jsube.html";
alert("Unable to load puzzle, sorry.");
window.location = "home.html";
}

$("a.transition").click(function (event) {
Expand Down
21 changes: 21 additions & 0 deletions src/js/no_canvas.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
var g_i18n = {
"en" : {

},
"fr" : {

}
};

NoCanvas = function () {
};

NoCanvas.prototype.append_i18n = function (selector, lg, key) {
$(selector).append(g_home_i18n[lg][key]);
}

$(document).ready(function () {
var lg = get_lg();
n = new NoCanvas();
// n.append_i18n("#sorry")
});

0 comments on commit cc0ddf9

Please sign in to comment.