-
Notifications
You must be signed in to change notification settings - Fork 125
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add theme support #474
Add theme support #474
Changes from all commits
0a2f763
0dc1805
ccd43fe
0e388bb
fbbf596
f38b238
d152687
4c9eec0
783e4d6
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,14 @@ | ||
function GetParameterValues(param) { | ||
var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); | ||
for (var i = 0; i < url.length; i++) { | ||
var urlparam = url[i].split('='); | ||
if (urlparam[0] == param) { | ||
return urlparam[1]; | ||
} | ||
} | ||
return 'default'; | ||
} | ||
var theme = GetParameterValues("theme"); | ||
var ROSE = (function() { | ||
"use strict"; | ||
|
||
|
@@ -27,7 +38,19 @@ var ROSE = (function() { | |
this.obstacles = new Obstacles(image_loader); | ||
this.cars = new Cars(image_loader); | ||
this.finish_line = new FinishLine(image_loader); | ||
this.sound = new Sound("res/soundtrack/Nyan_Cat.ogg"); | ||
this.sound = new Sound(`res/themes/${theme}/soundtrack/soundtrack.ogg`); | ||
|
||
console.log(this.theme); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Remove debug code |
||
// Get the <span> element that closes the modal | ||
var modal = document.getElementById("myModal"); | ||
|
||
var span = document.getElementsByClassName("close")[0]; | ||
|
||
// When the user clicks on <span> (x), close the modal | ||
span.onclick = function() { | ||
modal.style.display = "none"; | ||
} | ||
|
||
} | ||
|
||
App.prototype.onmessage = function(m) { | ||
|
@@ -102,6 +125,19 @@ var ROSE = (function() { | |
event.preventDefault(); | ||
self.stop(); | ||
}); | ||
|
||
$("#settings").click(function(event) { | ||
event.preventDefault(); | ||
// self.settings(); | ||
var modal = document.getElementById("myModal"); | ||
modal.style.display = "block"; | ||
|
||
$( "#theme" ).on( "change", function() { | ||
var theme = $( "#theme").val(); | ||
window.location.replace(`http://127.0.0.1:8880/?theme=${theme}`); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You can't use 127.0.0.1, you need to extract the URL from the browser. Use |
||
} ); | ||
|
||
}); | ||
} | ||
|
||
Controller.prototype.start = function() { | ||
|
@@ -130,6 +166,10 @@ var ROSE = (function() { | |
}) | ||
} | ||
|
||
Controller.prototype.settings = function(){ | ||
|
||
} | ||
|
||
Controller.prototype.update = function(state) { | ||
if(state.players.length == 0){ | ||
$("#info").text("No players connected") | ||
|
@@ -267,22 +307,22 @@ var ROSE = (function() { | |
this.textures = {}; | ||
var self = this; | ||
|
||
loader.load("res/obstacles/barrier.png", function(img) { | ||
loader.load(`res/themes/${theme}/obstacles/barrier.png`, function(img) { | ||
self.textures["barrier"] = img; | ||
}); | ||
loader.load("res/obstacles/bike.png", function(img) { | ||
loader.load(`res/themes/${theme}/obstacles/bike.png`, function(img) { | ||
self.textures["bike"] = img; | ||
}); | ||
loader.load("res/obstacles/crack.png", function(img) { | ||
loader.load(`res/themes/${theme}/obstacles/crack.png`, function(img) { | ||
self.textures["crack"] = img; | ||
}); | ||
loader.load("res/obstacles/penguin.png", function(img) { | ||
loader.load(`res/themes/${theme}/obstacles/penguin.png`, function(img) { | ||
self.textures["penguin"] = img; | ||
}); | ||
loader.load("res/obstacles/trash.png", function(img) { | ||
loader.load(`res/themes/${theme}/obstacles/trash.png`, function(img) { | ||
self.textures["trash"] = img; | ||
}); | ||
loader.load("res/obstacles/water.png", function(img) { | ||
loader.load(`res/themes/${theme}/obstacles/water.png`, function(img) { | ||
self.textures["water"] = img; | ||
}); | ||
} | ||
|
@@ -306,22 +346,37 @@ var ROSE = (function() { | |
this.players = null; | ||
this.textures = [null, null, null, null]; | ||
var self = this; | ||
loader.load("res/cars/car1.png", function(img) { | ||
loader.load(`res/themes/${theme}/cars/car1.png`, function(img) { | ||
self.textures[0] = img; | ||
}); | ||
loader.load("res/cars/car2.png", function(img) { | ||
loader.load(`res/themes/${theme}/cars/car2.png`, function(img) { | ||
self.textures[1] = img; | ||
}); | ||
loader.load("res/cars/car3.png", function(img) { | ||
loader.load(`res/themes/${theme}/cars/car3.png`, function(img) { | ||
self.textures[2] = img; | ||
}); | ||
loader.load("res/cars/car4.png", function(img) { | ||
loader.load(`res/themes/${theme}/cars/car4.png`, function(img) { | ||
self.textures[3] = img; | ||
}); | ||
} | ||
|
||
Cars.prototype.update = function(state) { | ||
this.players = state.players; | ||
this.effect = new Audio(); | ||
this.effect.src = "res/points_effects.mpeg"; | ||
this.players = state.players; | ||
console.log(state) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Debug code, |
||
var i; | ||
for(i = 0; i < state.track.length; i++){ | ||
if (state.track[i]['x'] == state.players[0]['x'] && state.track[i]['y'] == state.players[0]['y']){ | ||
|
||
this.effect.play(); | ||
|
||
|
||
|
||
} | ||
|
||
} | ||
} | ||
|
||
Cars.prototype.draw = function(ctx) { | ||
|
@@ -346,7 +401,7 @@ var ROSE = (function() { | |
this.texture = null; | ||
this.timeleft = null; | ||
var self = this; | ||
loader.load("res/end/final_flag.png", function(img) { | ||
loader.load(`res/themes/${theme}/end/final_flag.png`, function(img) { | ||
self.texture = img; | ||
}); | ||
} | ||
|
@@ -370,13 +425,13 @@ var ROSE = (function() { | |
this.textures = [null, null, null]; | ||
var self = this; | ||
|
||
loader.load("res/bg/bg_1.png", function(img) { | ||
loader.load(`res/themes/${theme}/bg/bg_1.png`, function(img) { | ||
self.textures[0] = img; | ||
}); | ||
loader.load("res/bg/bg_2.png", function(img) { | ||
loader.load(`res/themes/${theme}/bg/bg_2.png`, function(img) { | ||
self.textures[1] = img; | ||
}); | ||
loader.load("res/bg/bg_3.png", function(img) { | ||
loader.load(`res/themes/${theme}/bg/bg_3.png`, function(img) { | ||
self.textures[2] = img; | ||
}); | ||
} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,55 +1,76 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
|
||
<head> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<title>ROSE Game</title> | ||
<link rel="stylesheet" type="text/css" href="game.css"> | ||
</head> | ||
</head> | ||
|
||
<body> | ||
<div id="content"> | ||
<body> | ||
|
||
<form id="control"> | ||
<div id="myModal" class="modal"> | ||
|
||
<!-- Modal content --> | ||
<div class="modal-content"> | ||
<span class="close">×</span> | ||
<p>Theme</p> | ||
<select id="theme"> | ||
<option name="choose">choose</option> | ||
<option name="default">default</option> | ||
<option name="wild_west">wildwest</option> | ||
<option name="river">amazonas</option> | ||
</select> | ||
</div> | ||
|
||
</div> | ||
<div id="content"> | ||
|
||
|
||
<form id="control"> | ||
|
||
<button id="start" disabled>Start</button> | ||
<button id="stop" disabled>Stop</button> | ||
<button id="stop" disabled>Stop</button> | ||
<button id="music_ctl">Play</button> | ||
<button id="settings">Settings</button> | ||
<label id="info"></label> | ||
|
||
<div id="rate_ctl"> | ||
<label>Speed</label> | ||
<span class="group"> | ||
<label>Speed</label> | ||
<span class="group"> | ||
<button id="dec_rate" disabled>–</button> | ||
<button id="cur_rate" disabled>FPS</button> | ||
<button id="inc_rate" disabled>+</button> | ||
|
||
</span> | ||
</div> | ||
</form> | ||
<div id="players"> | ||
</form> | ||
<div id="players"> | ||
<div id="left" class="player"> | ||
<div class="name"></div> | ||
<div class="score" ></div> | ||
<div class="name"></div> | ||
<div class="score"></div> | ||
</div> | ||
<div id="time_left">60</div> | ||
<div id="right" class="player"> | ||
<div class="name"></div> | ||
<div class="score"></div> | ||
<div class="name"></div> | ||
<div class="score"></div> | ||
</div> | ||
</div> | ||
<canvas id="game" width="910" height="585"> | ||
</div> | ||
<canvas id="game" width="910" height="585"> | ||
<h2>Unsupported browser</h2> | ||
</canvas> | ||
</canvas> | ||
|
||
</div> | ||
</div> | ||
|
||
<script src="jquery-3.2.1.min.js"></script> | ||
<script src="game.js"></script> | ||
<script src="jquery-3.2.1.min.js"></script> | ||
<script src="game.js"></script> | ||
|
||
<script> | ||
<script> | ||
$(document).ready(function() { | ||
ROSE.ready(); | ||
}); | ||
</script> | ||
</body> | ||
|
||
|
||
</script> | ||
</body> | ||
</html> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think we need all this styles if we import the bootstrap library, but I don't see this commit in this PR.