diff --git a/public/js/game.js b/public/js/game.js index 9f00427..ef93700 100644 --- a/public/js/game.js +++ b/public/js/game.js @@ -2,97 +2,101 @@ 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({ - autoResize: true, - resolution: devicePixelRatio, - backgroundAlpha: 0, - width: max_size / game_board_size, - height: max_size / game_board_size -}); -document.getElementById('game').appendChild(app.view); +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); -// fields -let sprites = [ - // First row - new Sprite(1, 1), - new Sprite(3, 1), - new Sprite(5, 1), - new Sprite(7, 1), - new Sprite(9, 1), + // fields + let sprites = [ + // First row + new Sprite(1, 1), + new Sprite(3, 1), + new Sprite(5, 1), + new Sprite(7, 1), + new Sprite(9, 1), - // Second row - new Sprite(1, 3), - new Sprite(9, 3), + // Second row + new Sprite(1, 3), + new Sprite(9, 3), - // Third row - new Sprite(1, 5), - new Sprite(9, 5), + // Third row + new Sprite(1, 5), + new Sprite(9, 5), - // Fourth row - new Sprite(1, 7), - new Sprite(9, 7), + // Fourth row + new Sprite(1, 7), + new Sprite(9, 7), - // Fifth row - new Sprite(1, 9), - new Sprite(3, 9), - new Sprite(5, 9), - new Sprite(7, 9), - new Sprite(9, 9), -] + // Fifth row + new Sprite(1, 9), + new Sprite(3, 9), + 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 -let red_border = generate_red_border(new PIXI.Graphics()); -app.stage.addChild(red_border); + // Red border + let red_border = generate_red_border(new PIXI.Graphics()); + app.stage.addChild(red_border); -// White circles -let first_circle = generate_circle(new PIXI.Graphics(), 3, 9); -app.stage.addChild(first_circle); + // White circles + let first_circle = generate_circle(new PIXI.Graphics(), 3, 9); + app.stage.addChild(first_circle); -let second_circle = generate_circle(new PIXI.Graphics(), 5, 9); -app.stage.addChild(second_circle); + let second_circle = generate_circle(new PIXI.Graphics(), 5, 9); + app.stage.addChild(second_circle); -let third_circle = generate_circle(new PIXI.Graphics(), 7, 9); -app.stage.addChild(third_circle); + let third_circle = generate_circle(new PIXI.Graphics(), 7, 9); + app.stage.addChild(third_circle); -// Card stacks -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); + // Card stacks + 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); -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); + 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); -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); + 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); + resize(); +} function generate_card_stack(sprite, x, y, onclick) { sprite.x = sprite_size * x - sprite_size * 0.2; @@ -136,6 +140,4 @@ function resize() { app.stage.scale.set(size / game_board_size, size / game_board_size); app.renderer.resize(size, size) -} - -resize(); \ No newline at end of file +} \ No newline at end of file diff --git a/public/js/index.js b/public/js/index.js index 2bbf417..2a25b46 100644 --- a/public/js/index.js +++ b/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(); }); \ No newline at end of file