- Fixed resizing

- Optimized colors
- Fixed click listener

public/js/game.js

@@ -1,4 +1,5 @@
 let answer = null;
+let show_card = false;
 
 function Sprite(x, y) {
     this.sprite = PIXI.Sprite.from('/img/sprite.jpg');
@@ -10,10 +11,6 @@ function Sprite(x, y) {
         return this.sprite;
     }
 
-    this.resize = function (sprite_size) {
-        this.setSize(this.sprite, sprite_size);
-    }
-
     this.setSize = function (sprite, size) {
         sprite.x = this.coord_x * size - size * 0.2;
         sprite.y = this.coord_y * size - size * 0.2;
@@ -25,15 +22,16 @@ function Sprite(x, y) {
 
 let game = document.getElementById('game');
 
-let game_board_size = calculate_size();
+let game_board_size = 2000;
+let size = calculate_size();
 let sprite_size = Math.floor(game_board_size / 11);
 
 const app = new PIXI.Application({
     autoResize: true,
     resolution: devicePixelRatio,
     backgroundAlpha: 0,
-    width: game_board_size,
+    width: size / game_board_size,
-    height: game_board_size
+    height: size / game_board_size
 });
 document.getElementById('game').appendChild(app.view);
 
@@ -83,20 +81,27 @@ 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");
-    generate_card("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.");
+        generate_card("Ein Bäcker möchte eine neue Filiale eröffnen. Wie sollte er das Budget einteilen?", "a1", "a2", "a3", "a4", 1, 1);
-});
+        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");
-    generate_card("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.");
+        generate_card("Ein Bäcker möchte eine neue Filiale eröffnen. Wie sollte er das Budget einteilen?", "a1", "a2", "a3", "a4", 1, 1);
-});
+        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");
         generate_card("Ein Bäcker möchte eine neue Filiale eröffnen. Wie sollte er das Budget einteilen?", "a1", "a2", "a3", "a4", 1, 1);
+        show_card = true;
+    }
 });
 app.stage.addChild(cards_3);
 
@@ -128,14 +133,14 @@ function generate_circle(graphics, x, y) {
 function generate_card(s, a1, a2, a3, a4, right_a, d) {
     const style = new PIXI.TextStyle({
         fontFamily: 'Arial',
-        fontSize: 20,
+        fontSize: 60,
         wordWrap: true,
         wordWrapWidth: game_board_size * 0.5 - 20,
     });
 
     const header_style = new PIXI.TextStyle({
         fontFamily: 'Arial',
-        fontSize: 25,
+        fontSize: 70,
         wordWrap: true,
         wordWrapWidth: game_board_size * 0.5 - 20,
     });
@@ -143,19 +148,19 @@ function generate_card(s, a1, a2, a3, a4, right_a, d) {
     const card = new PIXI.Graphics();
     let start_x = game_board_size * 0.25 + 2.5;
     let start_y = game_board_size / 2 - game_board_size * 0.72 / 2 + 2.5;
-    card.lineStyle(5, 0x000000, 1);
+    card.lineStyle(20, 0x6C9A8B, 1);
     card.beginFill(0xffffff);
     card.drawRoundedRect(start_x, start_y, game_board_size * 0.5, game_board_size * 0.72, 10);
     card.endFill();
 
     const header = new PIXI.Text("Schwierigkeit " + d, header_style);
-    header.x = start_x + 10 + card.width / 2 - header.width / 2 - 2.5 - 10;
+    header.x = start_x + 20 + card.width / 2 - header.width / 2 - 2.5 - 20;
-    header.y = start_y + 10;
+    header.y = start_y + 20;
     card.addChild(header);
 
     const basicText = new PIXI.Text(s, style);
-    basicText.x = start_x + 10;
+    basicText.x = start_x + 20;
-    basicText.y = start_y + 20 + header.height;
+    basicText.y = start_y + 50 + header.height;
     card.addChild(basicText);
 
 
@@ -189,15 +194,14 @@ function generate_card(s, a1, a2, a3, a4, right_a, d) {
     card.addChild(answer_4_text);
 
 
-
     // OK-Button
     const ok = new PIXI.Graphics();
-    ok.lineStyle(2, 0x000000, 1);
+    ok.lineStyle(4, 0x000000, 1);
     ok.beginFill(0xffffff);
-    ok.drawRect(start_x, start_y, game_board_size * 0.5 - 20, 50);
+    ok.drawRect(start_x, start_y, game_board_size * 0.5 - 40, 100);
     ok.endFill();
-    ok.x = 10;
+    ok.x = 20;
-    ok.y = game_board_size * 0.72 - 60;
+    ok.y = game_board_size * 0.72 - 120;
     card.addChild(ok);
 
     const ok_text = new PIXI.Text('OK', style);
@@ -212,6 +216,7 @@ function generate_card(s, a1, a2, a3, a4, right_a, d) {
         } else {
             console.log("Falsch")
         }
+        show_card = false;
         card.destroy();
     });
 
@@ -250,17 +255,17 @@ function select_answer(answer_1, answer_2, answer_3, answer_4, start_x, start_y,
 function draw_rect(answer, color, start_x, start_y) {
     answer.clear();
 
-    answer.lineStyle(2, 0x000000, 1);
+    answer.lineStyle(4, 0x000000, 1);
     answer.beginFill(color);
-    answer.drawRect(start_x, start_y, game_board_size * 0.5 - 20, 75);
+    answer.drawRect(start_x, start_y, game_board_size * 0.5 - 40, 150);
     answer.endFill();
 }
 
 function generate_answer_button(answer, y, start_x, start_y, onclick) {
     draw_rect(answer, 0xffffff, start_x, start_y);
 
-    answer.x = 10;
+    answer.x = 20;
-    answer.y = game_board_size * 0.72 - 60 - 85 * y;
+    answer.y = game_board_size * 0.72 - 120 - 170 * y;
 
     answer.interactive = true;
     answer.on('click', onclick);
@@ -269,7 +274,6 @@ function generate_answer_button(answer, y, start_x, start_y, onclick) {
 }
 
 function generate_answer_text(answer_text, rect, start_x, start_y) {
-    console.log(rect.width)
     answer_text.x = start_x + rect.x + rect.width / 2 - answer_text.width / 2;
     answer_text.y = start_y + rect.y + rect.height / 2 - answer_text.height / 2;
     return answer_text
@@ -287,60 +291,10 @@ function calculate_size() {
 window.addEventListener('resize', resize);
 
 function resize() {
-    game_board_size = calculate_size();
+    let size = calculate_size();
-    sprite_size = Math.floor(game_board_size / 11);
+    app.stage.scale.set(size / game_board_size, size / game_board_size);
-
-
-    // Resize container
-    app.renderer.resize(game_board_size, game_board_size);
-
-    // Resize fields
-    for (let i = 0; i < 16; i++) {
-        sprites[i].resize(Math.floor(game_board_size / 11));
-    }
-
-    // Resize red border
-    red_border.clear();
-    red_border = generate_red_border(new PIXI.Graphics());
-    app.stage.addChild(red_border);
-
-    // Resize circles
-    first_circle.clear();
-    first_circle = generate_circle(new PIXI.Graphics(), 3, 9);
-    app.stage.addChild(first_circle);
-
-    second_circle.clear();
-    second_circle = generate_circle(new PIXI.Graphics(), 5, 9);
-    app.stage.addChild(second_circle);
-
-    third_circle.clear();
-    third_circle = generate_circle(new PIXI.Graphics(), 7, 9);
-    app.stage.addChild(third_circle);
-
-    // card stacks
-    cards_1.destroy();
-    cards_1 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 3, 3, function () {
-        console.log("1");
-        generate_card("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.");
-    });
-    app.stage.addChild(cards_1);
-
-    cards_2.destroy();
-    cards_2 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 5, 3, function () {
-        console.log("2");
-        generate_card("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.");
-    });
-    app.stage.addChild(cards_2);
-
-    cards_3.destroy();
-    cards_3 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 7, 3, function () {
-        console.log("3");
-        generate_card("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.");
-    });
-    app.stage.addChild(cards_3);
-
-    // card
 
+    app.renderer.resize(size, size)
 }
 
 resize();