Updated index files to have both mobile and desktop version co-habiting.

This commit is contained in:
Thibaut Despoulain
2013-11-30 13:59:13 -08:00
parent 40aafe04c8
commit 8c420e548b
5 changed files with 406 additions and 405 deletions
+2
View File
@@ -19,6 +19,8 @@ If you feel like you deserve another license for a special case, [drop me a note
python -m SimpleHTTPServer
chromium index.html
To use full size textures, swap the two textures/ and textures.full/ directories.
## Regarding the code
As of now the code is pretty much raw and undocumented. I'll be commenting it someday, but that won't be until I've finished the next content update and code refactoring sorry!
-117
View File
@@ -1,117 +0,0 @@
<!doctype html>
<html lang="en" manifest="cache.appcache">
<head>
<title>HexGL dev page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/fonts.css" type="text/css" charset="utf-8">
<style>
body {
background:#ccc;
padding:0;
margin:0;
overflow:hidden;
font-family:georgia;
text-align:center;
color: #666;
}
h1 {color: #666 ; }
a { color:skyblue }
canvas { pointer-events:none; }
#overlay{
position: absolute;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="overlay"></div>
<div id="main"></div>
<script src="libs/Three.dev.js"></script>
<script src="libs/ShaderExtras.js"></script>
<script src="libs/postprocessing/EffectComposer.js"></script>
<script src="libs/postprocessing/RenderPass.js"></script>
<script src="libs/postprocessing/BloomPass.js"></script>
<script src="libs/postprocessing/ShaderPass.js"></script>
<script src="libs/postprocessing/MaskPass.js"></script>
<script src="libs/Detector.js"></script>
<script src="libs/Stats.js"></script>
<script src="libs/DAT.GUI.min.js"></script>
<script src="bkcore.coffee/controllers/TouchController.js"></script>
<script src="bkcore.coffee/controllers/OrientationController.js"></script>
<script src="bkcore/Timer.js"></script>
<script src="bkcore/ImageData.js"></script>
<script src="bkcore/Utils.js"></script>
<script src="bkcore/threejs/RenderManager.js"></script>
<script src="bkcore/threejs/Shaders.js"></script>
<script src="bkcore/threejs/Particles.js"></script>
<script src="bkcore/threejs/Loader.js"></script>
<script src="bkcore/hexgl/HUD.js"></script>
<script src="bkcore/hexgl/RaceData.js"></script>
<script src="bkcore/hexgl/ShipControls.js"></script>
<script src="bkcore/hexgl/ShipEffects.js"></script>
<script src="bkcore/hexgl/CameraChase.js"></script>
<script src="bkcore/hexgl/Gameplay.js"></script>
<script src="bkcore/hexgl/tracks/Cityscape.js"></script>
<script src="bkcore/hexgl/HexGL.js"></script>
<script>
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container, hudcontainer;
var hexGL;
function init() {
hudcontainer = document.getElementById("overlay");
container = document.getElementById("main");
hexGL = new bkcore.hexgl.HexGL({
document: document,
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT,
container: container,
overlay: overlay,
quality: bkcore.Utils.getURLParameter('quality'),
difficulty: bkcore.Utils.getURLParameter('difficulty'),
half: bkcore.Utils.getURLParameter('half'),
mode: bkcore.Utils.getURLParameter('mode'),
track: 'Cityscape'
});
hexGL.load({
onLoad: function(){
console.log("ALL LOADED.");
hexGL.init();
hexGL.start();
},
onError: function(s){
console.log("ERROR ON "+s+".");
},
onProgress: function(p, t, n)
{
console.log("LOADED "+t+" : "+n+" ( "+p.loaded+" / "+p.total+" ).");
}
});
}
init();
</script>
</body>
</html>
+304
View File
@@ -0,0 +1,304 @@
<!doctype html>
<html lang="en" manifest="cache.appcache">
<head>
<title>HexGL</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/fonts.css" type="text/css" charset="utf-8">
<link rel="icon" href="/icon_256.png" type="image/png">
<link rel="shortcut icon" href="/icon_256.png" type="image/png">
<style>
html { background: #000000; }
body {
background: url('css/mobile.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding:0;
margin:0;
overflow:hidden;
font-family:georgia;
text-align:center;
color: #666;
}
h1 {color: #666 ; }
a { color:skyblue }
/*canvas { pointer-events:none; }*/
html, body, #main, #titles, #controls, #over, #loading, canvas { width: 100%; height: 100%;}
#overlay, #titles, #controls-1, #controls-2, #over, #loading {
position: absolute;
z-index: 1000;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#titles{
z-index: 1001;
}
#controls-1{
z-index: 1002;
background: url('css/mobile-controls-1.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: none;
}
#controls-2{
z-index: 1003;
background: url('css/mobile-controls-2.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: none;
}
#over{
z-index: 1004;
background: url('css/mobile-over.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: none;
}
#loading{
display: none;
color: #fff;
}
#loading div{
position: absolute;
bottom: 20px;
right: 20px;
text-align: right;
font-size: 3em;
font-weight: bold;
font-family: arial, sans-serif;
}
#titles-logo{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 40%;
text-align: center;
font-size: 4em;
font-weight: bold;
font-family: arial, sans-serif;
text-decoration: none;
color: #444444;
text-indent: -99999px;
}
#titles-logo div{
display: block;
top: 50%;
position: absolute;
margin-top: -40px;
line-height: 80px;
width: 100%;
text-align: center;
}
#titles-buttons{
position: absolute;
left: 60%;
width: 40%;
height: 100%;
border: none;
border-collapse: collapse;
}
#titles-button tr td{
}
.titles-button{
vertical-align: middle;
text-align: center;
font-size: 2em;
font-weight: bold;
font-family: arial, sans-serif;
text-decoration: none;
color: #ffffff;
cursor: pointer;
}
.titles-button:active, .titles-button:focus{
color: skyblue;
}
</style>
<link rel="stylesheet" href="css/touchcontroller.css" type="text/css" charset="utf-8">
</head>
<body>
<div id="titles">
<div id="titles-logo"><div>HexGL</div></div>
<table id="titles-buttons">
<tr><td class="titles-button" id="s-quality" onclick="rollQuality();">QUALITY: SD</td></tr>
<tr><td class="titles-button" id="s-controls" onclick="rollControls();">CONTROLS: TOUCH</td></tr>
<tr><td class="titles-button" onclick="init();">START</td></tr>
</table>
</div>
<div id="controls-1" onclick="start();"></div>
<div id="controls-2" onclick="start();"></div>
<div id="over" onclick="restart();"></div>
<div id="loading"><div>Loading...</div></div>
<div id="overlay"></div>
<div id="main"></div>
<script src="libs/Three.dev.js"></script>
<script src="libs/ShaderExtras.js"></script>
<script src="libs/postprocessing/EffectComposer.js"></script>
<script src="libs/postprocessing/RenderPass.js"></script>
<script src="libs/postprocessing/BloomPass.js"></script>
<script src="libs/postprocessing/ShaderPass.js"></script>
<script src="libs/postprocessing/MaskPass.js"></script>
<script src="libs/Detector.js"></script>
<script src="libs/Stats.js"></script>
<script src="libs/DAT.GUI.min.js"></script>
<script src="bkcore.coffee/controllers/TouchController.js"></script>
<script src="bkcore.coffee/controllers/OrientationController.js"></script>
<script src="bkcore/Timer.js"></script>
<script src="bkcore/ImageData.js"></script>
<script src="bkcore/Utils.js"></script>
<script src="bkcore/threejs/RenderManager.js"></script>
<script src="bkcore/threejs/Shaders.js"></script>
<script src="bkcore/threejs/Particles.js"></script>
<script src="bkcore/threejs/Loader.js"></script>
<script src="bkcore/hexgl/HUD.js"></script>
<script src="bkcore/hexgl/RaceData.js"></script>
<script src="bkcore/hexgl/ShipControls.js"></script>
<script src="bkcore/hexgl/ShipEffects.js"></script>
<script src="bkcore/hexgl/CameraChase.js"></script>
<script src="bkcore/hexgl/Gameplay.js"></script>
<script src="bkcore/hexgl/tracks/Cityscape.js"></script>
<script src="bkcore/hexgl/HexGL.js"></script>
<script>
try {
var request = navigator.mozApps.getSelf();
request.onsuccess = function() {
if (request.result) {
// we're installed
} else {
// not installed
var conf = confirm('Would you like to install HexGL as an app?');
if(conf)
{
var irequest = navigator.mozApps.install("http://ffos.hexgl.bkcore.com/package.webapp");
irequest.onsuccess = function() {
alert('HexGL is now installed. Please launch the app from the homescreen to cache assets.');
};
irequest.onerror = function(e) {
alert('Error: '+irequest.error.name);
};
}
}
};
request.onerror = function() {
console.warn('Error checking installation status: ' + this.error.message);
};
}catch(e){
//TODO
}
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container, hudcontainer;
var hexGL;
var q = 0, qmax = 2, c = 1, cmax = 2;
var sq = ['SD', 'HD', 'ULTRA'];
var sc = ['NONE', 'TOUCH', 'MOTION'];
var titles = document.getElementById("titles")
var hudcontainer = document.getElementById("overlay");
var gameover = document.getElementById("over");
var controls1 = document.getElementById("controls-1");
var controls2 = document.getElementById("controls-2");
var squality = document.getElementById("s-quality");
var scontrols = document.getElementById("s-controls");
var loading = document.getElementById("loading");
var container = document.getElementById("main");
function rollQuality() {
q++;
if(q > qmax) q = 0;
squality.innerHTML = "QUALITY: " + sq[q];
}
function rollControls() {
c++;
if(c > cmax) c = 1;
scontrols.innerHTML = "CONTROLS: " + sc[c];
}
function init() {
titles.style.display = "none";
this['controls'+c].style.display = "block";
}
function restart() {
/*titles.style.display = "block";
gameover.style.display = "none";*/
location.reload(false);
}
function start() {
controls1.style.display = "none";
controls2.style.display = "none";
container.style.display = "block";
loading.style.display = "block";
quality = q < 2 ? 0 : 1;
half = q < 1;
hexGL = new bkcore.hexgl.HexGL({
document: document,
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT,
container: container,
overlay: overlay,
gameover: gameover,
quality: quality,
track: 'Cityscape',
hud: false,
half: half,
mobile: true,
controlType: c,
godmode: true
});
hexGL.load({
onLoad: function(){
console.log("ALL LOADED.");
hexGL.init();
loading.style.display = "none";
hexGL.start();
},
onError: function(s){
console.log("ERROR ON "+s+".");
},
onProgress: function(p, t, n)
{
console.log("LOADED "+t+" : "+n+" ( "+p.loaded+" / "+p.total+" ).");
}
});
}
//init();
</script>
</body>
</html>
+14 -202
View File
@@ -1,21 +1,13 @@
<!doctype html>
<html lang="en" manifest="cache.appcache">
<html lang="en">
<head>
<title>HexGL</title>
<title>HexGL dev page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/fonts.css" type="text/css" charset="utf-8">
<link rel="icon" href="/icon_256.png" type="image/png">
<link rel="shortcut icon" href="/icon_256.png" type="image/png">
<style>
html { background: #000000; }
body {
background: url('css/mobile.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
background:#ccc;
padding:0;
margin:0;
overflow:hidden;
@@ -25,125 +17,18 @@
}
h1 {color: #666 ; }
a { color:skyblue }
/*canvas { pointer-events:none; }*/
html, body, #main, #titles, #controls, #over, #loading, canvas { width: 100%; height: 100%;}
#overlay, #titles, #controls-1, #controls-2, #over, #loading {
canvas { pointer-events:none; }
#overlay{
position: absolute;
z-index: 1000;
z-index: 9999;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#titles{
z-index: 1001;
}
#controls-1{
z-index: 1002;
background: url('css/mobile-controls-1.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: none;
}
#controls-2{
z-index: 1003;
background: url('css/mobile-controls-2.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: none;
}
#over{
z-index: 1004;
background: url('css/mobile-over.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: none;
}
#loading{
display: none;
color: #fff;
}
#loading div{
position: absolute;
bottom: 20px;
right: 20px;
text-align: right;
font-size: 3em;
font-weight: bold;
font-family: arial, sans-serif;
}
#titles-logo{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 40%;
text-align: center;
font-size: 4em;
font-weight: bold;
font-family: arial, sans-serif;
text-decoration: none;
color: #444444;
text-indent: -99999px;
}
#titles-logo div{
display: block;
top: 50%;
position: absolute;
margin-top: -40px;
line-height: 80px;
width: 100%;
text-align: center;
}
#titles-buttons{
position: absolute;
left: 60%;
width: 40%;
height: 100%;
border: none;
border-collapse: collapse;
}
#titles-button tr td{
}
.titles-button{
vertical-align: middle;
text-align: center;
font-size: 2em;
font-weight: bold;
font-family: arial, sans-serif;
text-decoration: none;
color: #ffffff;
cursor: pointer;
}
.titles-button:active, .titles-button:focus{
color: skyblue;
}
</style>
<link rel="stylesheet" href="css/touchcontroller.css" type="text/css" charset="utf-8">
</head>
<body>
<div id="titles">
<div id="titles-logo"><div>HexGL</div></div>
<table id="titles-buttons">
<tr><td class="titles-button" id="s-quality" onclick="rollQuality();">QUALITY: SD</td></tr>
<tr><td class="titles-button" id="s-controls" onclick="rollControls();">CONTROLS: TOUCH</td></tr>
<tr><td class="titles-button" onclick="init();">START</td></tr>
</table>
</div>
<div id="controls-1" onclick="start();"></div>
<div id="controls-2" onclick="start();"></div>
<div id="over" onclick="restart();"></div>
<div id="loading"><div>Loading...</div></div>
<div id="overlay"></div>
<div id="main"></div>
@@ -182,32 +67,6 @@
<script src="bkcore/hexgl/HexGL.js"></script>
<script>
try {
var request = navigator.mozApps.getSelf();
request.onsuccess = function() {
if (request.result) {
// we're installed
} else {
// not installed
var conf = confirm('Would you like to install HexGL as an app?');
if(conf)
{
var irequest = navigator.mozApps.install("http://ffos.hexgl.bkcore.com/package.webapp");
irequest.onsuccess = function() {
alert('HexGL is now installed. Please launch the app from the homescreen to cache assets.');
};
irequest.onerror = function(e) {
alert('Error: '+irequest.error.name);
};
}
}
};
request.onerror = function() {
console.warn('Error checking installation status: ' + this.error.message);
};
}catch(e){
//TODO
}
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
@@ -216,52 +75,9 @@
var hexGL;
var q = 0, qmax = 2, c = 1, cmax = 2;
var sq = ['SD', 'HD', 'ULTRA'];
var sc = ['NONE', 'TOUCH', 'MOTION'];
var titles = document.getElementById("titles")
var hudcontainer = document.getElementById("overlay");
var gameover = document.getElementById("over");
var controls1 = document.getElementById("controls-1");
var controls2 = document.getElementById("controls-2");
var squality = document.getElementById("s-quality");
var scontrols = document.getElementById("s-controls");
var loading = document.getElementById("loading");
var container = document.getElementById("main");
function rollQuality() {
q++;
if(q > qmax) q = 0;
squality.innerHTML = "QUALITY: " + sq[q];
}
function rollControls() {
c++;
if(c > cmax) c = 1;
scontrols.innerHTML = "CONTROLS: " + sc[c];
}
function init() {
titles.style.display = "none";
this['controls'+c].style.display = "block";
}
function restart() {
/*titles.style.display = "block";
gameover.style.display = "none";*/
location.reload(false);
}
function start() {
controls1.style.display = "none";
controls2.style.display = "none";
container.style.display = "block";
loading.style.display = "block";
quality = q < 2 ? 0 : 1;
half = q < 1;
hudcontainer = document.getElementById("overlay");
container = document.getElementById("main");
hexGL = new bkcore.hexgl.HexGL({
document: document,
@@ -269,21 +85,17 @@
height: SCREEN_HEIGHT,
container: container,
overlay: overlay,
gameover: gameover,
quality: quality,
track: 'Cityscape',
hud: false,
half: half,
mobile: true,
controlType: c,
godmode: true
quality: bkcore.Utils.getURLParameter('quality'),
difficulty: bkcore.Utils.getURLParameter('difficulty'),
half: bkcore.Utils.getURLParameter('half'),
mode: bkcore.Utils.getURLParameter('mode'),
track: 'Cityscape'
});
hexGL.load({
onLoad: function(){
console.log("ALL LOADED.");
hexGL.init();
loading.style.display = "none";
hexGL.start();
},
onError: function(s){
@@ -296,7 +108,7 @@
});
}
//init();
init();
</script>
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "HexGL",
"description": "HexGL v1.0.1-ffos",
"launch_path": "/index.html",
"launch_path": "/index-mobile.html",
"icons": {
"32": "/icon_32.png",
"64": "/icon_64.png",