- Card functionality

- landing page

public/css/index.css

@@ -0,0 +1,11 @@
+/*#login {*/
+/*    display: block;*/
+/*}*/
+
+/*#game {*/
+/*    display: none;*/
+/*}*/
+
+/*#chat {*/
+/*    display: none;*/
+/*}*/

public/index.html

@@ -19,7 +19,20 @@
     <div class="title">Projektmanagement Game</div>
 </header>
 <main>
-    <div id="game"></div>
+<!--    <div id="login">-->
+<!--        <form>-->
+<!--            <label for="username">Anmeldename: </label>-->
+<!--            <input type="text" name="username" id="username" placeholder="Benutzername">-->
+
+<!--            <label for="room">Raumnummer: </label>-->
+<!--            <input type="text" name="room" id="room" placeholder="Raumnummer">-->
+
+<!--            <button id="ok" type="button">Bestätigen</button>-->
+<!--        </form>-->
+<!--    </div>-->
+    <div id="game">
+
+    </div>
     <div id="chat">
         <div id="messages_received"></div>
 

public/js/chat.js

@@ -1,9 +1,7 @@
 let socket;
-let username = prompt("Please enter your name");
-let room_name = prompt("Please enter room name");
 let connected = false;
 
-window.addEventListener('load', function () {
+function start_chat() {
     socket = io();
 
     socket.on('login', function () {
@@ -25,7 +23,7 @@ window.addEventListener('load', function () {
 
     // Login
     socket.emit('add user', {'username': username, 'room_name': room_name});
-});
+}
 
 function sendMessage() {
     let message = document.getElementById('message_input').value;

public/js/game.js

@@ -1,3 +1,5 @@
+let answer = null;
+
 function Sprite(x, y) {
     this.sprite = PIXI.Sprite.from('/img/sprite.jpg');
     this.coord_x = x;
@@ -94,7 +96,7 @@ app.stage.addChild(cards_2);
 
 let 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.");
+    generate_card("Ein Bäcker möchte eine neue Filiale eröffnen. Wie sollte er das Budget einteilen?", "a1", "a2", "a3", "a4", 1, 1);
 });
 app.stage.addChild(cards_3);
 
@@ -123,7 +125,21 @@ function generate_circle(graphics, x, y) {
     return graphics;
 }
 
-function generate_card(s) {
+function generate_card(s, a1, a2, a3, a4, right_a, d) {
+    const style = new PIXI.TextStyle({
+        fontFamily: 'Arial',
+        fontSize: 20,
+        wordWrap: true,
+        wordWrapWidth: game_board_size * 0.5 - 20,
+    });
+
+    const header_style = new PIXI.TextStyle({
+        fontFamily: 'Arial',
+        fontSize: 25,
+        wordWrap: true,
+        wordWrapWidth: game_board_size * 0.5 - 20,
+    });
+
     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;
@@ -132,22 +148,47 @@ function generate_card(s) {
     card.drawRoundedRect(start_x, start_y, game_board_size * 0.5, game_board_size * 0.72, 10);
     card.endFill();
 
-    const style = new PIXI.TextStyle({
+    const header = new PIXI.Text("Schwierigkeit " + d, header_style);
-        fontFamily: 'Arial',
+    header.x = start_x + 10 + card.width / 2 - header.width / 2 - 2.5 - 10;
-        fontSize: 15,
+    header.y = start_y + 10;
-        wordWrap: true,
+    card.addChild(header);
-        wordWrapWidth: game_board_size * 0.5 - 10,
+
-    });
     const basicText = new PIXI.Text(s, style);
     basicText.x = start_x + 10;
-    basicText.y = start_y + 10;
+    basicText.y = start_y + 20 + header.height;
     card.addChild(basicText);
 
 
-    // const answer_1 = new PIXI.Text(s, style);
+    // TODO Random answer order
-    // answer_1.x = start_x + 10;
+    let answer_1 = generate_answer_button(new PIXI.Graphics(), 1, start_x, start_y, function () {
-    // answer_1.y = start_y + 100;
+        select_answer(answer_1, answer_2, answer_3, answer_4, start_x, start_y, 1);
-    // card.addChild(answer_1);
+    });
+    let answer_1_text = generate_answer_text(new PIXI.Text(a1, style), answer_1, start_x, start_y);
+    card.addChild(answer_1);
+    card.addChild(answer_1_text);
+
+    let answer_2 = generate_answer_button(new PIXI.Graphics(), 2, start_x, start_y, function () {
+        select_answer(answer_1, answer_2, answer_3, answer_4, start_x, start_y, 2);
+    });
+    let answer_2_text = generate_answer_text(new PIXI.Text(a2, style), answer_2, start_x, start_y);
+    card.addChild(answer_2);
+    card.addChild(answer_2_text);
+
+    let answer_3 = generate_answer_button(new PIXI.Graphics(), 3, start_x, start_y, function () {
+        select_answer(answer_1, answer_2, answer_3, answer_4, start_x, start_y, 3);
+    });
+    let answer_3_text = generate_answer_text(new PIXI.Text(a3, style), answer_3, start_x, start_y);
+    card.addChild(answer_3);
+    card.addChild(answer_3_text);
+
+    let answer_4 = generate_answer_button(new PIXI.Graphics(), 4, start_x, start_y, function () {
+        select_answer(answer_1, answer_2, answer_3, answer_4, start_x, start_y, 4);
+    });
+    let answer_4_text = generate_answer_text(new PIXI.Text("a4", style), answer_4, start_x, start_y);
+    card.addChild(answer_4);
+    card.addChild(answer_4_text);
+
+
 
     // OK-Button
     const ok = new PIXI.Graphics();
@@ -157,7 +198,6 @@ function generate_card(s) {
     ok.endFill();
     ok.x = 10;
     ok.y = game_board_size * 0.72 - 60;
-
     card.addChild(ok);
 
     const ok_text = new PIXI.Text('OK', style);
@@ -167,13 +207,74 @@ function generate_card(s) {
 
     ok.interactive = true;
     ok.on('click', function () {
-        console.log("OK");
+        if(right_a === answer) {
+            console.log("Richtig")
+        } else {
+            console.log("Falsch")
+        }
+        card.destroy();
     });
 
     app.stage.addChild(card);
 }
 
 
+function select_answer(answer_1, answer_2, answer_3, answer_4, start_x, start_y, id) {
+    if(answer === null) {
+        answer = id;
+        switch(answer) {
+            case 1:
+                draw_rect(answer_1, 0xff00ff, start_x, start_y);
+                break;
+            case 2:
+                draw_rect(answer_2, 0xff00ff, start_x, start_y);
+                break;
+            case 3:
+                draw_rect(answer_3, 0xff00ff, start_x, start_y);
+                break;
+            case 4:
+                draw_rect(answer_4, 0xff00ff, start_x, start_y);
+                break;
+        }
+    } else {
+        draw_rect(answer_1, 0xffffff, start_x, start_y);
+        draw_rect(answer_2, 0xffffff, start_x, start_y);
+        draw_rect(answer_3, 0xffffff, start_x, start_y);
+        draw_rect(answer_4, 0xffffff, start_x, start_y);
+        answer = null;
+
+        select_answer(answer_1, answer_2, answer_3, answer_4, start_x, start_y, id);
+    }
+}
+
+function draw_rect(answer, color, start_x, start_y) {
+    answer.clear();
+
+    answer.lineStyle(2, 0x000000, 1);
+    answer.beginFill(color);
+    answer.drawRect(start_x, start_y, game_board_size * 0.5 - 20, 75);
+    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.y = game_board_size * 0.72 - 60 - 85 * y;
+
+    answer.interactive = true;
+    answer.on('click', onclick);
+
+    return answer;
+}
+
+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
+}
+
 function calculate_size() {
     if (game.offsetWidth > game.offsetHeight) {
         return game.offsetHeight;
@@ -216,7 +317,30 @@ function resize() {
     third_circle = generate_circle(new PIXI.Graphics(), 7, 9);
     app.stage.addChild(third_circle);
 
-    // TODO card and card stacks
+    // 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
+
 }
 
 resize();

public/js/index.js

@@ -1,4 +1,18 @@
+let username;
+let room_name;
+
 window.addEventListener('beforeunload', function (e) {
     // Prevent user from exiting page
     e.preventDefault();
 });
+
+// document.getElementById('ok').addEventListener('click', function () {
+//     username = document.getElementById('username').value;
+//     room_name = document.getElementById('room').value;
+//
+//     document.getElementById('login').style.display = 'none';
+//     document.getElementById('game').style.display = 'flex';
+//     document.getElementById('chat').style.display = 'flex';
+//     start_chat();
+//     resize();
+// })