Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Add settings button #468

Closed
wants to merge 3 commits into from
Closed

Add settings button #468

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b6fc1d8
adding setting button which opens a modal
BoazShalev Aug 9, 2023
041aab6
Add option to select/change theme
BoazShalev Aug 9, 2023
101d289
(fix) Undefined variable on load
BoazShalev Aug 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
42 changes: 41 additions & 1 deletion rose/web/game.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ body {
background-color: #222;
}

#start, #stop, #music_ctl {
#start, #stop, #music_ctl, #settings {
width: 120px;
padding: 8px 24px;
margin: 0;
Expand Down Expand Up @@ -129,3 +129,43 @@ body {
#game {
border: 1px #666 solid;
}


/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}

/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
85 changes: 70 additions & 15 deletions rose/web/game.js
View file
Open in desktop
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";

Expand Down Expand Up @@ -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);
// 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) {
Expand Down Expand Up @@ -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}`);
} );

});
}

Controller.prototype.start = function() {
Expand Down Expand Up @@ -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")
Expand Down Expand Up @@ -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;
});
}
Expand All @@ -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)
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) {
Expand All @@ -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;
});
}
Expand All @@ -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;
});
}
Expand Down
67 changes: 44 additions & 23 deletions rose/web/index.html
View file
Open in desktop
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">&times;</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>&ndash;</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>