Add theme support

rose/web/game.css

@@ -35,7 +35,7 @@ body {
     background-color: #222;
 }
 
-#start, #stop, #music_ctl {
+#start, #stop, #music_ctl, #settings {
     width: 120px;
     padding: 8px 24px;
     margin: 0;
@@ -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;
+}

rose/web/game.js

@@ -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);
+        // 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}`);
+            } );
+
+        });
     }
 
     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)
+        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;
         });
     }

rose/web/index.html

@@ -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>