diff --git a/public/img/dice.svg b/public/img/dice.svg
new file mode 100644
index 0000000..ad1083a
--- /dev/null
+++ b/public/img/dice.svg
@@ -0,0 +1,164 @@
+
+
+
+
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index a997d9e..b30a019 100644
--- a/public/index.html
+++ b/public/index.html
@@ -49,9 +49,8 @@
-
+
diff --git a/public/js/Card.js b/public/js/Card.js
index 14266b0..45442d3 100644
--- a/public/js/Card.js
+++ b/public/js/Card.js
@@ -48,19 +48,19 @@ function Card(game_board_size, s, a1, a2, a3, a4, d) {
this.card.addChild(basicText);
// 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.text, this.a1.status, true, function () {
+ this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, 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, _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.text, this.a2.status, true, function () {
+ this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, 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, _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.text, this.a3.status, true, function () {
+ this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, 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, _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.text, this.a4.status, true, function () {
+ this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, 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, _this.a4.text);
}));
@@ -69,17 +69,26 @@ function Card(game_board_size, s, a1, a2, a3, a4, d) {
// 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", null, false, function () {
- if (_this.right_answer === answer) {
- console.log("Richtig")
+ if (answer !== null) {
+ if (_this.right_answer === answer) {
+ console.log("Richtig");
+ } else {
+ console.log("Falsch");
+ }
+ show_card = false;
+ answer = null;
+ diced = false;
+ rolled_number = null;
+ rolled_number_text.destroy();
+ border_card_stack.clear();
+ _this.card.destroy();
} else {
- console.log("Falsch")
+ alert("Bitte wähle eine Antwortmöglichkeit aus");
}
- show_card = false;
- _this.card.destroy();
}).getButton());
app.stage.addChild(this.card);
- }
+ };
function select_answer(id, text) {
diff --git a/public/js/game.js b/public/js/game.js
index 42be662..8f4ec1f 100644
--- a/public/js/game.js
+++ b/public/js/game.js
@@ -1,13 +1,66 @@
+/*
+ Images
+ background.jpg: https://www.lignaushop.de/images/product_images/popup_images/treppenstufe-buecherregal-fensterbank-eiche-country-rustikal-unbehandelt-wuppertal.JPG
+ card_stack.png: https://www.google.de/url?sa=i&url=https%3A%2F%2Fwww.pngegg.com%2Fpt%2Fsearch%3Fq%3Drainha%2Bde%2Bcopas&psig=AOvVaw3wwfk87wAXBxqmdXnoGSfe&ust=1623254731054000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCMjUoaG1iPECFQAAAAAdAAAAABA5
+ dice.svg: https://www.svgrepo.com/download/198836/gambler-casino.svg
+ sprite.jpg: https://media.istockphoto.com/photos/gray-granite-stone-texture-seamless-square-background-tile-ready-picture-id1096464726
+*/
+let curr_player = 1;
+let player_array = [1, 1, 1, 1];
+let player_color = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00];
+let player_sprite_array = [];
+
let answer = null;
let show_card = false;
+let diced = false;
+let rolled_number = null;
let game = document.getElementById('game');
let app;
+let border_card_stack = new PIXI.Graphics();
let game_board_size = 2000;
let max_size = calculate_size();
let sprite_size = Math.floor(game_board_size / 11);
+const rolled_number_style = new PIXI.TextStyle({
+ fontFamily: 'Arial',
+ fontSize: 140,
+ fontWeight: 'bold',
+ wordWrap: true,
+ wordWrapWidth: game_board_size * 0.5 - 20,
+});
+let rolled_number_text = new PIXI.Text("", rolled_number_style);
+
+// 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),
+
+ // Third row
+ new Sprite(1, 5),
+ new Sprite(9, 5),
+
+ // 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),
+];
+
function start_game() {
app = new PIXI.Application({
autoResize: true,
@@ -18,36 +71,6 @@ function start_game() {
});
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),
-
- // Second row
- new Sprite(1, 3),
- new Sprite(9, 3),
-
- // Third row
- new Sprite(1, 5),
- new Sprite(9, 5),
-
- // 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),
- ]
-
sprites.forEach(sprite => app.stage.addChild(sprite.getSprite()));
@@ -69,7 +92,7 @@ function start_game() {
// Card stacks
let cards_1 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 3, 3, function () {
- if (!show_card) {
+ if (!show_card && rolled_number === 1) {
console.log("1");
socket.emit('get card', 1);
}
@@ -77,7 +100,7 @@ function start_game() {
app.stage.addChild(cards_1);
let cards_2 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 5, 3, function () {
- if (!show_card) {
+ if (!show_card && rolled_number === 2) {
console.log("2");
socket.emit('get card', 2);
}
@@ -85,21 +108,51 @@ function start_game() {
app.stage.addChild(cards_2);
let cards_3 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 7, 3, function () {
- if (!show_card) {
+ if (!show_card && rolled_number === 3) {
console.log("3");
socket.emit('get card', 3);
}
});
app.stage.addChild(cards_3);
- socket.on('dice', function (data) {
- console.log(data);
+
+ // Dice
+ let diceTexture = PIXI.Texture.from('/img/dice.svg');
+ let dice = new PIXI.Sprite(diceTexture);
+ dice.x = sprite_size * 7 - sprite_size * 0.2;
+ dice.y = sprite_size * 7 - sprite_size * 0.2;
+ dice.width = 200;
+ dice.height = 200;
+ dice.interactive = true;
+ dice.buttonMode = true;
+ dice.defaultCursor = 'pointer';
+ dice.on('click', function () {
+ if (!diced) {
+ socket.emit('roll dice');
+ }
+ });
+ app.stage.addChild(dice);
+
+ app.stage.addChild(border_card_stack);
+
+ socket.on('dice', function (randomInt) {
+ rolled_number = randomInt;
+ diced = true;
+ border_card_stack.clear();
+ border_card_stack.lineStyle(15, 0x862323, 1);
+ border_card_stack.drawRoundedRect(sprite_size * (1 + 2 * rolled_number) - sprite_size * 0.2, sprite_size * 3 - sprite_size * 0.2, sprite_size * 1.5, sprite_size * 3 * 0.72, 10);
+
+ rolled_number_text = new PIXI.Text(rolled_number, rolled_number_style);
+ rolled_number_text.x = sprite_size * 7 - sprite_size * 0.2 + dice.width / 2 - rolled_number_text.width / 2;
+ rolled_number_text.y = sprite_size * 6 - sprite_size * 0.2;
+ app.stage.addChild(rolled_number_text);
+
});
socket.on('card', function (data) {
- let q = data.question
- let a = data.answers
- let d = data.difficulty
+ 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;
});
@@ -116,7 +169,7 @@ function generate_card_stack(sprite, x, y, onclick) {
sprite.buttonMode = true;
sprite.defaultCursor = 'pointer';
sprite.on('click', onclick);
- return sprite
+ return sprite;
}
function generate_red_border(graphics) {
@@ -148,5 +201,5 @@ function resize() {
let size = calculate_size();
app.stage.scale.set(size / game_board_size, size / game_board_size);
- app.renderer.resize(size, size)
+ app.renderer.resize(size, size);
}
\ No newline at end of file