- Load game_board only if user is logged in

public/js/game.js

@@ -2,23 +2,25 @@ let answer = null;
 let show_card = false;
 
 let game = document.getElementById('game');
+let app;
 
 let game_board_size = 2000;
 let max_size = calculate_size();
 let sprite_size = Math.floor(game_board_size / 11);
 
-const app = new PIXI.Application({
+function start_game() {
+    app = new PIXI.Application({
         autoResize: true,
         resolution: devicePixelRatio,
         backgroundAlpha: 0,
         width: max_size / game_board_size,
         height: max_size / game_board_size
-});
+    });
-document.getElementById('game').appendChild(app.view);
+    document.getElementById('game').appendChild(app.view);
 
 
-// fields
+    // fields
-let sprites = [
+    let sprites = [
         // First row
         new Sprite(1, 1),
         new Sprite(3, 1),
@@ -44,55 +46,57 @@ let sprites = [
         new Sprite(5, 9),
         new Sprite(7, 9),
         new Sprite(9, 9),
-]
+    ]
 
-sprites.forEach(sprite => app.stage.addChild(sprite.getSprite()));
+    sprites.forEach(sprite => app.stage.addChild(sprite.getSprite()));
 
 
-// Red border
+    // Red border
-let red_border = generate_red_border(new PIXI.Graphics());
+    let red_border = generate_red_border(new PIXI.Graphics());
-app.stage.addChild(red_border);
+    app.stage.addChild(red_border);
 
 
-// White circles
+    // White circles
-let first_circle = generate_circle(new PIXI.Graphics(), 3, 9);
+    let first_circle = generate_circle(new PIXI.Graphics(), 3, 9);
-app.stage.addChild(first_circle);
+    app.stage.addChild(first_circle);
 
-let second_circle = generate_circle(new PIXI.Graphics(), 5, 9);
+    let second_circle = generate_circle(new PIXI.Graphics(), 5, 9);
-app.stage.addChild(second_circle);
+    app.stage.addChild(second_circle);
 
-let third_circle = generate_circle(new PIXI.Graphics(), 7, 9);
+    let third_circle = generate_circle(new PIXI.Graphics(), 7, 9);
-app.stage.addChild(third_circle);
+    app.stage.addChild(third_circle);
 
 
-// Card stacks
+    // Card stacks
-let cards_1 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 3, 3, function () {
+    let cards_1 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 3, 3, function () {
         if (!show_card) {
             console.log("1");
             new Card(game_board_size, "Ein Bäcker möchte eine neue Filiale eröffnen. Wie sollte er das Budget einteilen?", "a1", "a2", "a3", "a4", 1, 1).showCard();
             show_card = true;
         }
-});
+    });
-app.stage.addChild(cards_1);
+    app.stage.addChild(cards_1);
 
-let cards_2 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 5, 3, function () {
+    let cards_2 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 5, 3, function () {
         if (!show_card) {
             console.log("2");
             new Card(game_board_size, "Ein Bäcker möchte eine neue Filiale eröffnen. Wie sollte er das Budget einteilen?", "a1", "a2", "a3", "a4", 1, 1).showCard();
             show_card = true;
         }
-});
+    });
-app.stage.addChild(cards_2);
+    app.stage.addChild(cards_2);
 
-let cards_3 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 7, 3, function () {
+    let cards_3 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 7, 3, function () {
         if (!show_card) {
             console.log("3");
             new Card(game_board_size, "Ein Bäcker möchte eine neue Filiale eröffnen. Wie sollte er das Budget einteilen?", "a1", "a2", "a3", "a4", 1, 1).showCard();
             show_card = true;
         }
-});
+    });
-app.stage.addChild(cards_3);
+    app.stage.addChild(cards_3);
 
+    resize();
+}
 
 function generate_card_stack(sprite, x, y, onclick) {
     sprite.x = sprite_size * x - sprite_size * 0.2;
@@ -137,5 +141,3 @@ function resize() {
 
     app.renderer.resize(size, size)
 }
-
-resize();

public/js/index.js

@@ -14,5 +14,6 @@ document.getElementById('ok').addEventListener('click', function () {
     document.getElementById('game').style.display = 'flex';
     document.getElementById('chat').style.display = 'flex';
     start_chat();
+    start_game();
     resize();
 });