Merge pull request CoDaS-Lab#48 from CoDaS-Lab/develop

Multiplayer changes, instruction changes, survey changes and randomization of navigation map

config/survey_v0.1.json → config/survey_v0.2.json

@@ -32,9 +32,9 @@
                     "choicesOrder":"random"},
                     {"type": "radiogroup",
                     "name": "q4",
-                    "title": "What does a grey background on the minimap mean?",
+                    "title": "What does it mean if the minimap has a bluish grey background?",
                     "isRequired":true,
-                    "choices": [{"value": "correct", "text": "That you have accurate information of blockages and openings for that section of the building"},
+                    "choices": [{"value": "correct", "text": "That the minimap shows you accurate information of blockages and openings"},
                                 {"value": "item2", "text": "That you know where the victims are for that section of the building"},
                                 {"value": "item3", "text": "That there has been a fire in that section"},
                                 {"value": "item4", "text": "That you don’t have any up-to-date information for that section of the building"}],

public/index.html

@@ -9,6 +9,7 @@
   <link href="https://surveyjs.azureedge.net/1.8.11/modern.css" type="text/css" rel="stylesheet" />
   <script src="https://surveyjs.azureedge.net/1.8.11/survey.jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.2.0/socket.io.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/seedrandom/3.0.5/seedrandom.min.js"></script>
   <script src="/js/lib/easytimer.min.js"></script>
   <script src="/js/lib/phaser.min.js"></script>
   <script src="/js/lib/mmturkey.js"></script>
@@ -49,7 +50,7 @@ <h2>Terms and Conditions
     </div>
   </div>
   <div style='display: none;' class="container" id="quiz-success">
-    <h1 class="font-weight-bold" style='text-align:center; margin:10%; color:chocolate;'>Succeded Attention Check Screen.</h1>
+    <h1 class="font-weight-bold" style='text-align:center; margin:10%; color:chocolate;'>Succeeded Attention Check Screen.</h1>
     <h2 class="font-weight-bold" style='text-align:center; margin:10%; color:darkslategray;'>That is correct. You may now start the game. Good luck!</h2>
     <a class="btn btn-primary btn-lg btn-block" id="join-room">
       Click to Join Game Room
@@ -88,15 +89,7 @@ <h2>
         </h2>
         <h3> Please pay attention to these task instructions, you will be asked questions to test your comprehension, 
         and you won’t be able to start the task until you answer them accurately.</h3>
-        <p>To help you navigate the building, the blueprint will appear at the left of your screen as a minimap.
-        This minimap will not show where the victims are but may help you to plan your path through the building so 
-        you can find and save all the victims more quickly. The sections of the minimap that are based on the 
-        pre-earthquake blueprint (that may be unreliable) has a white background, whereas the sections that are 
-        based on the accurate post-earthquake blueprints have a grey background. Entryways into rooms are highlighted 
-        in blue, whereas rubble from the earthquake is highlighted in red. What section of the map uses what blueprint 
-        is randomised, so you might see a minimap with an entirely white background or an entirely grey background, or 
-        with different regions with different background colors. It is important that you pay attention so that you know 
-        how reliable the map is, and can plan accordingly.
+        <p>To help you navigate the building, the blueprint will appear at the left of your screen as a minimap.This minimap will not show where the victims are but may help you to plan your path through the building so you can find and save all the victims more quickly. The minimap based on the pre-earthquake blueprint (that may be unreliable) has a white background, whereas the accurate post-earthquake minimap has a grey background. Entryways into rooms are highlighted in blue, whereas rubble from the earthquake is highlighted in red. You will not know what type of map you will see before the game starts. It is important that you pay attention so that you know how reliable the map is, and can plan accordingly.
         </p>
         <p>
           There are 24 victims to save in total. You will see how many victims are left to save at the top of the screen. Good luck!

public/js/config.js

@@ -55,13 +55,38 @@ var getNavigationMapData = function(){
 
 var getGameData = function(){
     //game time '00' or minutes like '2'. If it was '2' that is timer with deadline, gameTimeArg would be {precision: 'secondTenths', countdown: true, startValues: {minutes: gameTime}}
-    let gameSetUpData = {"roundCount":0, "roundLimit":20000000, "playerX":5, "playerY":75, "playerName":"dude", "playerFrameWidth":32,
-    "playerFrameHeight":48,"leaderName":null, "leaderDelay":null, "leaderX":null, "leaderY":null, 
-    gameTime:"00", gameTimeArg:{}}
+    let gameSetUpData = {
+        "roundCount":0,
+        "roundLimit":20000000,
+        "players":[{
+            "playerX":5,
+            "playerY":75,
+            "playerName":"dude",
+            "playerFrameWidth":32,
+            "playerFrameHeight":48,
+        }
+        // {
+        //     "playerX":6,
+        //     "playerY":77,
+        //     "playerName":"player1",
+        //     "playerFrameWidth":32,
+        //     "playerFrameHeight":48,
+        // }
+    ],
+        "leaderName":null,
+        "leaderDelay":null,
+        "leaderX":null,
+        "leaderY":null,
+        "leaderFrameWidth":32,
+        "leaderFrameHeight":48,
+        gameTime:"00",
+        gameTimeArg:{}
+    }
     return gameSetUpData
 }
 
-var getRandomConfig = function(){
+var getRandomConfig = function(seed){
+    Math.seedrandom(seed);
     var mapData = getMapData();
     var victimIndexes = new Array();
     var roomVictimMapping = {};

public/js/index.js

@@ -18,6 +18,7 @@ var gamePlayState = new Phaser.Class({
         console.log("GamePlay init");
         Phaser.Scene.call(this, {key: 'GamePlay'});
         socket.on('player_move_success', (message)=>{this._playersMovementDisplay(message)});
+        socket.on('rescue_success', (message)=>{this._rescueDisplay(message)});
 
         gameTimer.addEventListener('targetAchieved', ()=>{
             this.input.keyboard.removeAllKeys()
@@ -37,7 +38,7 @@ var gamePlayState = new Phaser.Class({
         console.log("GamePlay preload");
         this.mapConfig = getMapData();
         this.gameConfig = getGameData();
-        let randomSelectionValues = getRandomConfig();
+        let randomSelectionValues = getRandomConfig(roomIdx);
         if (randomSelectionValues!=null){
             this._updateGameConfig(randomSelectionValues)
         }
@@ -51,18 +52,24 @@ var gamePlayState = new Phaser.Class({
             {frameWidth: this.gameConfig["playerFrameWidth"], frameHeight: this.gameConfig["playerFrameHeight"]});
         }
 
-        this.load.spritesheet(this.gameConfig["playerName"], "/assets/"+this.gameConfig["playerName"]+".png",
-        {frameWidth: this.gameConfig["playerFrameWidth"], frameHeight: this.gameConfig["playerFrameHeight"]});
+        for (let i = 0; i < this.gameConfig.players.length; ++i) {
+            let player = this.gameConfig.players[i];
+            this.load.spritesheet(player["playerName"], "/assets/"+player["playerName"]+".png",
+            {frameWidth: player["playerFrameWidth"], frameHeight: player["playerFrameHeight"]});
+        }
     },
     create: function() {
         console.log("GamePlay create");
         this.gameState = new GameState(this.mapConfig, this)
 
         this.playerList = Array();
         this.playersCurrentLoc = Array();
-        this.playerDude = new PlayerDisplay(this, {"x": this.gameConfig.playerX, "y":this.gameConfig.playerY, "name":this.gameConfig["playerName"]});
-        this.playersCurrentLoc.push((this.playerDude.y*this.mapConfig.cols)+ this.playerDude.x);
-        this.playerList.push(this.playerDude);
+        for (let i = 0; i < this.gameConfig.players.length; ++i) {
+            let player = this.gameConfig.players[i];
+            let playerDude = new PlayerDisplay(this, {"x": player.playerX, "y":player.playerY, "name":player.playerName});
+            this.playersCurrentLoc.push((playerDude.y*this.mapConfig.cols)+ playerDude.x);
+            this.playerList.push(playerDude);
+        }
 
         gameTimer.start(this.gameConfig["gameTimeArg"])
 
@@ -81,7 +88,7 @@ var gamePlayState = new Phaser.Class({
 
         this.cameras.main.setBounds(0, 0, 775, 625).setName('main');
         this.cameras.main.setZoom(4);
-        this.cameras.main.startFollow(this.playerDude.physicsObj);
+        this.cameras.main.startFollow(this.playerList[playerId].physicsObj);
         this.cameras.main.setLerp(0.2);
 
         var keys = this.input.keyboard.addKeys('UP, DOWN, RIGHT, LEFT, R')
@@ -138,21 +145,31 @@ var gamePlayState = new Phaser.Class({
         for(const victimIndex of this.gameState.set_victims){
             if (rescueIndexes.includes(victimIndex)){
                 if (this.gameState.set_victims.has(victimIndex)){
-                    socket.emit("rescue_success", {'x': this.playerList[playerId].x, 'y': this.playerList[playerId].y,
+                    socket.emit("rescue", {'x': this.playerList[playerId].x, 'y': this.playerList[playerId].y,
                     "event":"rs", "aws_id": turk.emit(), 'rm_id':roomIdx, "socket_id":socketId, 'p_id': playerId, "victims_alive": Array.from(this.gameState.set_victims),
                     "victim":victimIndex, "time":new Date().toISOString()})
-                    this.gameState.victimObj[String(victimIndex)].fillColor = "0xf6fa78";
-                    this.gameState.set_victims.delete(victimIndex);
-                    victimCount = this.gameState.set_victims.size
-                    if (this.gameState.set_victims.size === 0){
-                        console.log("SUCCESS")
-                        this.input.keyboard.removeAllKeys()
-                        sessionId = endSession(game, socket, gameTimer, playerId, roomIdx, sessionId, turk.emit(), socketId, "go_victim", sessionLimit, "Victim Saved")
-                    }
                 }
             }
         }
     },
+
+    _rescueDisplay (message){
+        let victimIndex = message["victim"];
+        if (this.gameState.set_victims.has(victimIndex)){
+            socket.emit("rescue_displayed", {'x': this.playerList[playerId].x, 'y': this.playerList[playerId].y,
+            "event":"rs", "aws_id": turk.emit(), 'rm_id':roomIdx, "socket_id":socketId, 'p_id': playerId, "victims_alive": Array.from(this.gameState.set_victims),
+            "victim":victimIndex, "time":new Date().toISOString()})
+            this.gameState.victimObj[String(victimIndex)].fillColor = "0xf6fa78";
+            this.gameState.set_victims.delete(victimIndex);
+            victimCount = this.gameState.set_victims.size
+            if (this.gameState.set_victims.size === 0){
+                console.log("SUCCESS")
+                this.input.keyboard.removeAllKeys()
+                sessionId = endSession(game, socket, gameTimer, playerId, roomIdx, sessionId, turk.emit(), socketId, "go_victim", sessionLimit, "Victim Saved")
+            }
+        }
+    },
+
     _playerMove: function(x, y, direction){
         console.log(x,y, direction);
         let newIdx = (y*this.mapConfig.cols)+ x;
@@ -183,7 +200,7 @@ var gameInfoState = new Phaser.Class({
 
     },
     create: function() {
-        this._setNavigationMapCondition(["noKnowledgeCondition", "noKnowledgeCondition", "noKnowledgeCondition", "noKnowledgeCondition"]);
+        this._setNavigationMapCondition();
         this.navigationMapData = getNavigationMapData()
         this._createNavigationMapConfigData()
         this.gameNavigationInfo = new NavigationMap(this.navigationMapConfig, this)
@@ -223,26 +240,11 @@ var gameInfoState = new Phaser.Class({
             this.tr = "noKnowledgeCondition";
             this.bl = "noKnowledgeCondition";
             this.br = "noKnowledgeCondition";
-            if(Math.random() < .3){ // first randomization
-                if (Math.random() < .5){ // post accident*/
-                    this.tl = "knowledgeCondition";
-                    this.tr = "knowledgeCondition";
-                    this.bl = "knowledgeCondition";
-                    this.br = "knowledgeCondition";
-                }
-            }else{ // second randomization
-                if(Math.random() < .5){
-                    this.tl = "knowledgeCondition";
-                }
-                if(Math.random() < .5){
-                    this.tr = "knowledgeCondition";
-                }
-                if(Math.random() < .5){
-                    this.bl = "knowledgeCondition";
-                }
-                if(Math.random() < .5){
-                    this.br = "knowledgeCondition";
-                }
+            if(Math.random() < .5){
+                this.tl = "knowledgeCondition";
+                this.tr = "knowledgeCondition";
+                this.bl = "knowledgeCondition";
+                this.br = "knowledgeCondition";
             }
         }
         socket.emit("game_info", {"event": "navigation_map", "socket_id":socketId, "aws_id": turk.emit(), 'rm_id':roomIdx, 'p_id': playerId, "time":new Date().toISOString(),

server.js

@@ -7,7 +7,7 @@ app.use('/', express.static(public));
 const game_config = require('./config/game-map_v0.1.json');
 console.log("MapCols:", game_config.cols + ' | MapRows:' + game_config.rows)
 
-const survey_config = require('./config/survey_v0.1.json');
+const survey_config = require('./config/survey_v0.2.json');
 
 const navigation_config = require('./config/navigation-map_v0.1.json');