DHBW/Projektmanagement-Game
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

Get card data from server and display it #9

Merged
H4CK3R-01 merged 1 commits from load_card_from_server_and_display_it into main 2021-06-08 15:34:20 +00:00
Conversation 0 Commits 1 Files Changed 5 +42 -38
5 changed files with 42 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Webservice/server.js
View File

@ -98,7 +98,7 @@ function generate_log_message(room, user, type, message) {
function getRandomCard(difficulty) { function getRandomCard(difficulty) {
let filtered_cards = cards.filter(card => { let filtered_cards = cards.filter(card => {
return card.diffuculty === difficulty; return card.difficulty === difficulty;
}); });
return shuffleAnswers(filtered_cards[Math.floor(Math.random() * filtered_cards.length)]); return shuffleAnswers(filtered_cards[Math.floor(Math.random() * filtered_cards.length)]);

30
data/cards.json
View File

@ -1,69 +1,69 @@
[ [
{ {
"id": 1, "id": 1,
"diffuculty": 1, "difficulty": 1,
"question": "Was?", "question": "Was?",
"answers": [ "answers": [
{ {
"answer_a": "A", "text": "A",
"status": false "status": false
}, },
{ {
"answer_b": "B", "text": "B",
"status": true "status": true
}, },
{ {
"answer_c": "C", "text": "C",
"status": false "status": false
}, },
{ {
"answer_d": "D", "text": "D",
"status": false "status": false
} }
] ]
}, },
{ {
"id": 2, "id": 2,
"diffuculty": 2, "difficulty": 2,
"question": "Wie?", "question": "Wie?",
"answers": [ "answers": [
{ {
"answer_a": "A", "text": "A",
"status": false "status": false
}, },
{ {
"answer_b": "B", "text": "B",
"status": true "status": true
}, },
{ {
"answer_c": "C", "text": "C",
"status": false "status": false
}, },
{ {
"answer_d": "D", "text": "D",
"status": false "status": false
} }
] ]
}, },
{ {
"id": 3, "id": 3,
"diffuculty": 3, "difficulty": 3,
"question": "Wo?", "question": "Wo?",
"answers": [ "answers": [
{ {
"answer_a": "A", "text": "A",
"status": false "status": false
}, },
{ {
"answer_b": "B", "text": "B",
"status": true "status": true
}, },
{ {
"answer_c": "C", "text": "C",
"status": false "status": false
}, },
{ {
"answer_d": "D", "text": "D",
"status": false "status": false
} }
] ]

3
public/js/Button.js
View File

@ -1,4 +1,4 @@
function Button(default_color, hover_color, select_color, width, height, x, y, text, button_is_answer, click) { function Button(default_color, hover_color, select_color, width, height, x, y, text, status, button_is_answer, click) {
this.graphics = new PIXI.Graphics(); this.graphics = new PIXI.Graphics();
this.default_color = default_color; this.default_color = default_color;
this.hover_color = hover_color; this.hover_color = hover_color;
@ -7,6 +7,7 @@ function Button(default_color, hover_color, select_color, width, height, x, y, t
this.x = x; this.x = x;
this.y = y; this.y = y;
this.text = text; this.text = text;
this.status = status;
this.button_is_answer = button_is_answer; this.button_is_answer = button_is_answer;
this.click = click; this.click = click;
this.selected = false; this.selected = false;

30
public/js/Card.js
View File

@ -1,11 +1,14 @@
function Card(game_board_size, s, a1, a2, a3, a4, right_answer, d) { function Card(game_board_size, s, a1, a2, a3, a4, d) {
this.card = new PIXI.Graphics(); this.card = new PIXI.Graphics();
this.s = s; this.s = s;
this.a1 = a1; this.a1 = a1;
this.a2 = a2; this.a2 = a2;
this.a3 = a3; this.a3 = a3;
this.a4 = a4; this.a4 = a4;
this.right_answer = right_answer; if (a1.status) this.right_answer = this.a1.text;
if (a2.status) this.right_answer = this.a2.text;
if (a3.status) this.right_answer = this.a3.text;
if (a4.status) this.right_answer = this.a4.text;
this.d = d; this.d = d;
this.card_x = game_board_size * 0.25 + 2.5; this.card_x = game_board_size * 0.25 + 2.5;
this.card_y = game_board_size / 2 - game_board_size * 0.72 / 2 + 2.5; this.card_y = game_board_size / 2 - game_board_size * 0.72 / 2 + 2.5;
@ -45,27 +48,27 @@ function Card(game_board_size, s, a1, a2, a3, a4, right_answer, d) {
this.card.addChild(basicText); this.card.addChild(basicText);
// Answers // Answers
this.buttons.push(new Button(0xffffff, 0xcccccc, 0xff00ff, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 4, this.a1, true, function () { this.buttons.push(new Button(0xffffff, 0xcccccc, 0xff00ff, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 4, this.a1.text, this.a1.status, true, function () {
select_answer(0); select_answer(0, _this.a1.text);
})); }));
this.buttons.push(new Button(0xffffff, 0xcccccc, 0xff00ff, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 3, this.a2, true, function () { this.buttons.push(new Button(0xffffff, 0xcccccc, 0xff00ff, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 3, this.a2.text, this.a2.status, true, function () {
select_answer(1); select_answer(1, _this.a2.text);
})); }));
this.buttons.push(new Button(0xffffff, 0xcccccc, 0xff00ff, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 2, this.a3, true, function () { this.buttons.push(new Button(0xffffff, 0xcccccc, 0xff00ff, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 2, this.a3.text, this.a3.status, true, function () {
select_answer(2); select_answer(2, _this.a3.text);
})); }));
this.buttons.push(new Button(0xffffff, 0xcccccc, 0xff00ff, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 1, this.a4, true, function () { this.buttons.push(new Button(0xffffff, 0xcccccc, 0xff00ff, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 1, this.a4.text, this.a4.status, true, function () {
select_answer(3); select_answer(3, _this.a4.text);
})); }));
this.buttons.forEach(button => this.card.addChild(button.getButton())); this.buttons.forEach(button => this.card.addChild(button.getButton()));
// OK-Button // OK-Button
this.card.addChild(new Button(0xffffff, 0xcccccc, 0xffffff, this.card_width - 40, 100, this.card_x + 20, this.card_y + this.card_height - 120, "OK", false, function () { this.card.addChild(new Button(0xffffff, 0xcccccc, 0xffffff, this.card_width - 40, 100, this.card_x + 20, this.card_y + this.card_height - 120, "OK", null, false, function () {
if (_this.right_answer === answer) { if (_this.right_answer === answer) {
console.log("Richtig") console.log("Richtig")
} else { } else {
@ -79,10 +82,9 @@ function Card(game_board_size, s, a1, a2, a3, a4, right_answer, d) {
} }
function select_answer(id) { function select_answer(id, text) {
console.log(id)
_this.buttons.forEach(button => button.unSelectButton()); _this.buttons.forEach(button => button.unSelectButton());
_this.buttons[id].selectButton(); _this.buttons[id].selectButton();
answer = id; answer = text;
} }
} }

15
public/js/game.js
View File

@ -71,8 +71,7 @@ function start_game() {
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) { if (!show_card) {
console.log("1"); 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(); socket.emit('get card', 1);
show_card = true;
} }
}); });
app.stage.addChild(cards_1); app.stage.addChild(cards_1);
@ -80,8 +79,7 @@ function start_game() {
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) { if (!show_card) {
console.log("2"); 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(); socket.emit('get card', 2);
show_card = true;
} }
}); });
app.stage.addChild(cards_2); app.stage.addChild(cards_2);
@ -89,8 +87,7 @@ function start_game() {
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) { if (!show_card) {
console.log("3"); 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(); socket.emit('get card', 3);
show_card = true;
} }
}); });
app.stage.addChild(cards_3); app.stage.addChild(cards_3);
@ -100,7 +97,11 @@ function start_game() {
}); });
socket.on('card', function (data) { socket.on('card', function (data) {
console.log(data); let q = data.question
let a = data.answers
let d = data.difficulty
new Card(game_board_size, q, a[0], a[1], a[2], a[3], d).showCard();
show_card = true;
}); });
resize(); resize();