added scripts for review

pages/elevator.html

@@ -67,16 +67,16 @@
   <script>
     let rooms = [
       {
-        'room': 'downstairs.json',
+        'room': 'clubhaus_downstairs.json',
         'name': 'downstairs'
       }, {
-        'room': 'main.json',
+        'room': 'clubhaus.json',
         'name': 'main floor'
       }, {
-        'room': 'upstairs.json',
+        'room': 'clubhaus_upstairs.json',
         'name': 'first floor'
       }, {
-        'room': 'roof.json',
+        'room': 'clubhaus_roof.json',
         'name': 'roof'
       }
     ];
@@ -131,4 +131,4 @@
   </script>
 </body>
 
-</html>
+</html>

scripts/downstairs.js

@@ -0,0 +1,20 @@
+import("./scripting-api-extra.js");
+import { TicTacToe } from "./tictactoe_module.js";
+
+new TicTacToe({
+    gamestate_variable : 'tictactoe',
+    layer_moves : 'tictactoe/moves',
+    layer_overlay : 'tictactoe/overlay',
+    layer_game : 'tictactoe/game',
+    layer_blue : 'tictactoe/blue',
+    layer_green : 'tictactoe/green',
+    layer_board : 'tictactoe/board',
+    layer_exit : 'tictactoe/leave',
+    popup : 'tictactoe',
+    board_x : 51,
+    board_y : 6,
+    blue_x : 54,
+    blue_y : 8,
+    green_x : 50,
+    green_y : 8
+});

scripts/tictactoe_module.js

@@ -0,0 +1,307 @@
+export class TicTacToe {
+
+    gamestate_variable = 'gamestate';
+    layer_moves = 'moves';
+    layer_overlay = 'overlay';
+    layer_game = 'game';
+    layer_blue = 'blue';
+    layer_green = 'green';
+    layer_board = 'board';
+    layer_exit = 'exit';
+    popup = 'popup';
+    board_x = 4;
+    board_y = 3;
+    blue_x = 3;
+    blue_y = 2;
+    green_x = 3;
+    green_y = 6;
+
+    gamestate = {};
+    is_player = false;
+    on_board = false;
+    on_game = false;
+    welcome = false;
+    move_message;
+    color;
+    game_message;
+
+    constructor(config) {
+        this.gamestate_variable = config.gamestate_variable || 'gamestate';
+        this.layer_moves = config.layer_moves || 'moves';
+        this.layer_overlay = config.layer_overlay || 'overlay';
+        this.layer_game = config.layer_game || 'game';
+        this.layer_blue = config.layer_blue || 'blue';
+        this.layer_green = config.layer_green || 'green';
+        this.layer_board = config.layer_board || 'board';
+        this.layer_exit = config.layer_exit || 'exit';
+        this.popup = config.popup || 'popup';
+        this.board_x = config.board_x || 4;
+        this.board_y = config.board_y || 3;
+        this.blue_x = config.blue_x || 3;
+        this.blue_y = config.blue_y || 2;
+        this.green_x = config.green_x || 3;
+        this.green_y = config.green_y || 6;
+
+        WA.onInit().then(() => {
+            this.waInit();
+        });
+    }
+
+
+    applyGameState = function () {
+        this.is_player = false;
+        this.color = '';
+        if (this.gamestate.blue) {
+            if (this.gamestate.blue == WA.player.id) {
+                this.color = 'blue';
+                this.is_player = true;
+            }
+            WA.room.setTiles([
+                { x: this.blue_x, y: this.blue_y, tile: null, layer: this.layer_blue }
+            ]);
+        } else {
+            WA.room.setTiles([
+                { x: this.blue_x, y: this.blue_y, tile: 'blue', layer: this.layer_blue }
+            ]);
+        }
+
+        if (this.gamestate.green) {
+            if (this.gamestate.green == WA.player.id) {
+                this.color = 'green';
+                this.is_player = true;
+            }
+            WA.room.setTiles([
+                { x: this.green_x, y: this.green_y, tile: null, layer: this.layer_green }
+            ]);
+        } else {
+            WA.room.setTiles([
+                { x: this.green_x, y: this.green_y, tile: 'green', layer: this.layer_green }
+            ]);
+        }
+
+        for (let x = 0; x < 3; x++) {
+            for (let y = 0; y < 3; y++) {
+                let index = x + y * 3;
+                if (this.gamestate.board && this.gamestate.board[index]) {
+                    if (this.gamestate.board[index] == 'blue' || this.gamestate.board[index] == 'green') {
+                        WA.room.setTiles([
+                            { x: this.board_x + x, y: this.board_y + y, tile: this.gamestate.board[index], layer: this.layer_moves }
+                        ]);
+                    }
+                } else {
+                    WA.room.setTiles([
+                        { x: this.board_x + x, y: this.board_y + y, tile: null, layer: this.layer_moves }
+                    ]);
+                }
+            }
+        }
+
+        if (this.gamestate.win) {
+            let win_text = this.gamestate.win_name + ' wins!';
+
+            if (this.is_player) {
+                if (this.gamestate.win_player == WA.player.id) {
+                    win_text = 'You win!'
+                } else {
+                    win_text = 'You loose! ' + win_text;
+                }
+                this.newGame();
+            }
+
+            this.game_message = WA.ui.openPopup(this.popup, win_text, [{
+                label: 'New Game',
+                className: '',
+                callback: (popup) => {
+                    popup.close();
+                }
+            }]);
+        } else if (this.gamestate.deuce) {
+            if (this.is_player) {
+                this.newGame();
+            }
+            this.game_message = WA.ui.openPopup(this.popup, 'Deuce!', [{
+                label: 'New Game',
+                className: '',
+                callback: (popup) => {
+                    popup.close();
+                }
+            }]);
+        }
+    }
+
+    newGame = function () {
+        this.gamestate = {};
+        WA.state.saveVariable(this.gamestate_variable, this.gamestate);
+    }
+
+    waInit = function () {
+        this.gamestate = WA.state.loadVariable(this.gamestate_variable) || {};
+        this.applyGameState();
+
+        WA.state.onVariableChange(this.gamestate_variable).subscribe((value) => {
+            console.log("gamestate", value);
+            this.gamestate = value || {};
+            this.applyGameState();
+        });
+
+        WA.room.onEnterLayer(this.layer_game).subscribe(() => {
+            this.on_game = true;
+            if (!this.welcome && !this.is_player && (!this.gamestate.blue || !this.gamestate.green)) {
+                this.welcome = true;
+                let pickText = 'Pick a color to start game.';
+
+                if (this.gamestate.blue) {
+                    pickText = 'Pick green to join game.';
+                } else if (this.gamestate.green) {
+                    pickText = 'Pick blue to join game.';
+                }
+
+                this.game_message = WA.ui.openPopup(this.popup, pickText, [{
+                    label: 'Ok',
+                    className: '',
+                    callback: (popup) => {
+                        popup.close();
+                        this.game_message = null;
+                    }
+                }]);
+            }
+        });
+
+
+        WA.room.onLeaveLayer(this.layer_game).subscribe(() => {
+            if (this.game_message) {
+                this.game_message.close();
+                this.game_message = null;
+            }
+        })
+
+        WA.room.onEnterLayer(this.layer_exit).subscribe(() => {
+            if (this.is_player && this.on_game) {
+                this.newGame();
+            }
+            this.welcome = false;
+        });
+
+        WA.room.onEnterLayer(this.layer_blue).subscribe(() => {
+            if (!this.gamestate.green || this.gamestate.green != WA.player.id) {
+                this.gamestate.blue = WA.player.id;
+                if (this.game_message) {
+                    this.game_message.close();
+                    this.game_message = null;
+                }
+                if (this.gamestate.green) {
+                    this.gamestate.current = this.gamestate.green;
+                }
+                WA.state.saveVariable(this.gamestate_variable, this.gamestate);
+            }
+        });
+
+        WA.room.onEnterLayer(this.layer_green).subscribe(() => {
+            if (!this.gamestate.blue || this.gamestate.blue != WA.player.id) {
+                this.gamestate.green = WA.player.id;
+                if (this.game_message) {
+                    this.game_message.close();
+                    this.game_message = null;
+                }
+                if (this.gamestate.blue) {
+                    this.gamestate.current = this.gamestate.blue;
+                }
+                WA.state.saveVariable(this.gamestate_variable, this.gamestate);
+            }
+        });
+
+
+        WA.room.onEnterLayer(this.layer_board).subscribe(() => {
+            this.on_board = true;
+        });
+
+        WA.room.onLeaveLayer(this.layer_board).subscribe(() => {
+            this.on_board = false;
+        });
+
+        WA.player.onPlayerMove((event) => {
+            if (this.on_board && WA.player.id) {
+                for (let x = 0; x < 3; x++) {
+                    for (let y = 0; y < 3; y++) {
+                        WA.room.setTiles([
+                            { x: this.board_x + x, y: this.board_y + y, tile: null, layer: this.layer_overlay }
+                        ]);
+                    }
+                }
+
+                if (!event.moving && this.on_board && this.gamestate.current == WA.player.id && !this.gamestate.win) {
+                    const x = Math.ceil(event.x / 32) - this.board_x - 1;
+                    const y = Math.ceil(event.y / 32) - this.board_y - 1;
+                    const index = x + y * 3;
+                    if (!this.gamestate.board) {
+                        this.gamestate.board = [];
+                    }
+                    if (index >= 0 && index < 9 && !this.gamestate.board[index]) {
+                        if (this.move_message) {
+                            this.move_message.remove();
+                        }
+
+                        WA.room.setTiles([
+                            { x: this.board_x + (index % 3), y: this.board_y + Math.floor(index / 3), tile: this.color + '_overlay', layer: this.layer_overlay }
+                        ]);
+
+
+                        this.move_message = WA.ui.displayActionMessage({
+                            message: 'Press SPACE or touch here to place move',
+                            callback: () => {
+                                this.gamestate.board[index] = this.color;
+                                if (this.color == 'blue') {
+                                    this.gamestate.current = this.gamestate.green;
+                                } else if (this.color == 'green') {
+                                    this.gamestate.current = this.gamestate.blue;
+                                }
+
+                                var wins = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6]]
+
+                                let win_move = false;
+                                for (var i = 0; i < wins.length; i++) {
+                                    let win = wins[i];
+                                    let matches = 0;
+                                    for (var j = 0; j < win.length; j++) {
+                                        if (this.gamestate.board[win[j]] === this.color) {
+                                            matches++
+                                        }
+                                    }
+                                    if (matches == 3) {
+                                        win_move = true;
+                                        break;
+                                    }
+                                }
+
+                                if (win_move) {
+                                    this.gamestate.win = true;
+                                    this.gamestate.win_player = WA.player.id;
+                                    this.gamestate.win_name = WA.player.name;
+                                    this.gamestate.win_color = this.color;
+                                }
+
+                                if (!this.gamestate.win) {
+                                    let moves = 0;
+                                    for (let i = 0; i < 9; i++) {
+                                        if (this.gamestate.board[i]) {
+                                            moves++;
+                                        }
+                                    }
+
+                                    if (moves == 9) {
+                                        this.gamestate.deuce = true;
+                                    }
+                                }
+
+                                WA.state.saveVariable(this.gamestate_variable, this.gamestate);
+                            }
+                        });
+                    }
+                } else if (this.move_message) {
+                    this.move_message.remove();
+                }
+            }
+        });
+    }
+
+}