From a2cbb934e6df8187f7c4abe44239cfc02436d364 Mon Sep 17 00:00:00 2001 From: H4CK3R-01 Date: Mon, 7 Jun 2021 22:01:23 +0200 Subject: [PATCH] - Cards, Buttons and Sprites are Objects now - Reformatting, Refactoring --- public/index.html | 3 + public/js/Button.js | 77 +++++++++++++++ public/js/Card.js | 88 +++++++++++++++++ public/js/Sprite.js | 17 ++++ public/js/game.js | 225 +++++++------------------------------------- 5 files changed, 217 insertions(+), 193 deletions(-) create mode 100644 public/js/Button.js create mode 100644 public/js/Card.js create mode 100644 public/js/Sprite.js diff --git a/public/index.html b/public/index.html index 6154ac1..b2f241d 100644 --- a/public/index.html +++ b/public/index.html @@ -53,6 +53,9 @@ integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"> + + + diff --git a/public/js/Button.js b/public/js/Button.js new file mode 100644 index 0000000..476c43e --- /dev/null +++ b/public/js/Button.js @@ -0,0 +1,77 @@ +function Button(default_color, hover_color, select_color, width, height, x, y, text, button_is_answer, click) { + this.graphics = new PIXI.Graphics(); + this.default_color = default_color; + this.hover_color = hover_color; + this.width = width; + this.height = height; + this.x = x; + this.y = y; + this.text = text; + this.button_is_answer = button_is_answer; + this.click = click; + this.selected = false; + let _this = this; + + this.changeButtonColor = function (color) { + this.graphics.clear(); + + this.graphics.lineStyle(4, 0x000000, 1); + this.graphics.beginFill(color); + this.graphics.drawRect(this.x, this.y, this.width, this.height); + this.graphics.endFill(); + } + + this.selectButton = function () { + this.selected = true; + this.changeButtonColor(select_color); + } + + this.unSelectButton = function () { + this.selected = false; + this.changeButtonColor(default_color); + } + + this.getButton = function () { + const style = new PIXI.TextStyle({ + fontFamily: 'Arial', + fontSize: 60, + wordWrap: true, + wordWrapWidth: game_board_size * 0.5 - 20, + }); + + this.graphics.clear(); + + this.graphics.lineStyle(4, 0x000000, 1); + this.graphics.beginFill(this.default_color); + this.graphics.drawRect(this.x, this.y, this.width, this.height); + this.graphics.endFill(); + + let text_field = new PIXI.Text(this.text, style); + text_field.x = this.x + this.width / 2 - text_field.width / 2; + text_field.y = this.y + this.height / 2 - text_field.height / 2; + this.graphics.addChild(text_field); + + this.graphics.interactive = true; + this.graphics.buttonMode = true; + this.graphics.defaultCursor = 'pointer'; + this.graphics.on('click', function () { + if (_this.button_is_answer) { + if (_this.selected === true) { + _this.unSelectButton(); + } else { + _this.selectButton(); + } + } + click(); + }); + this.graphics.on('mouseover', function () { + if (!_this.selected) { + _this.changeButtonColor(_this.hover_color); + } + }); + this.graphics.on('mouseout', function () { + if (!_this.selected) _this.changeButtonColor(_this.default_color); + }); + return this.graphics; + } +} diff --git a/public/js/Card.js b/public/js/Card.js new file mode 100644 index 0000000..6ec78b5 --- /dev/null +++ b/public/js/Card.js @@ -0,0 +1,88 @@ +function Card(game_board_size, s, a1, a2, a3, a4, right_answer, d) { + this.card = new PIXI.Graphics(); + this.s = s; + this.a1 = a1; + this.a2 = a2; + this.a3 = a3; + this.a4 = a4; + this.right_answer = right_answer; + this.d = d; + 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_height = game_board_size * 0.72; + this.card_width = game_board_size * 0.5; + this.buttons = []; + let _this = this; + + this.showCard = function () { + const style = new PIXI.TextStyle({ + fontFamily: 'Arial', + fontSize: 60, + wordWrap: true, + wordWrapWidth: game_board_size * 0.5 - 20, + }); + + const header_style = new PIXI.TextStyle({ + fontFamily: 'Arial', + fontSize: 70, + wordWrap: true, + wordWrapWidth: game_board_size * 0.5 - 20, + }); + + this.card.lineStyle(20, 0x6C9A8B, 1); + this.card.beginFill(0xffffff); + this.card.drawRoundedRect(this.card_x, this.card_y, this.card_width, this.card_height, 10); + this.card.endFill(); + + const header = new PIXI.Text("Schwierigkeit " + this.d, header_style); + header.x = this.card_x + 20 + this.card.width / 2 - header.width / 2 - 2.5 - 20; + header.y = this.card_y + 20; + this.card.addChild(header); + + const basicText = new PIXI.Text(this.s, style); + basicText.x = this.card_x + 20; + basicText.y = this.card_y + 50 + header.height; + 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, true, function () { + select_answer(0); + })); + + 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 () { + select_answer(1); + })); + + 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 () { + select_answer(2); + })); + + 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 () { + select_answer(3); + })); + + this.buttons.forEach(button => this.card.addChild(button.getButton())); + + + // 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 () { + if (_this.right_answer === answer) { + console.log("Richtig") + } else { + console.log("Falsch") + } + show_card = false; + _this.card.destroy(); + }).getButton()); + + app.stage.addChild(this.card); + } + + + function select_answer(id) { + console.log(id) + _this.buttons.forEach(button => button.unSelectButton()); + _this.buttons[id].selectButton(); + answer = id; + } +} \ No newline at end of file diff --git a/public/js/Sprite.js b/public/js/Sprite.js new file mode 100644 index 0000000..43b0fbb --- /dev/null +++ b/public/js/Sprite.js @@ -0,0 +1,17 @@ +function Sprite(x, y) { + this.sprite = PIXI.Sprite.from('/img/sprite.jpg'); + this.coord_x = x; + this.coord_y = y; + + this.getSprite = function () { + this.setSize(this.sprite, sprite_size); + return this.sprite; + } + + this.setSize = function (sprite, size) { + sprite.x = this.coord_x * size - size * 0.2; + sprite.y = this.coord_y * size - size * 0.2; + sprite.width = size * 1.5; + sprite.height = size * 1.5; + } +} \ No newline at end of file diff --git a/public/js/game.js b/public/js/game.js index a487676..9f00427 100644 --- a/public/js/game.js +++ b/public/js/game.js @@ -1,66 +1,52 @@ let answer = null; let show_card = false; -function Sprite(x, y) { - this.sprite = PIXI.Sprite.from('/img/sprite.jpg'); - this.coord_x = x; - this.coord_y = y; - - this.getSprite = function () { - this.setSize(this.sprite, sprite_size); - return this.sprite; - } - - this.setSize = function (sprite, size) { - sprite.x = this.coord_x * size - size * 0.2; - sprite.y = this.coord_y * size - size * 0.2; - sprite.width = size * 1.5; - sprite.height = size * 1.5; - } -} - - let game = document.getElementById('game'); let game_board_size = 2000; -let size = calculate_size(); +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: size / game_board_size, - height: size / game_board_size + width: max_size / game_board_size, + height: max_size / game_board_size }); document.getElementById('game').appendChild(app.view); // fields -let sprites = { - 0: new Sprite(1, 1), - 1: new Sprite(3, 1), - 2: new Sprite(5, 1), - 3: new Sprite(7, 1), - 4: new Sprite(9, 1), +let sprites = [ + // First row + new Sprite(1, 1), + new Sprite(3, 1), + new Sprite(5, 1), + new Sprite(7, 1), + new Sprite(9, 1), - 5: new Sprite(1, 3), - 6: new Sprite(9, 3), + // Second row + new Sprite(1, 3), + new Sprite(9, 3), - 7: new Sprite(1, 5), - 8: new Sprite(9, 5), + // Third row + new Sprite(1, 5), + new Sprite(9, 5), - 9: new Sprite(1, 7), - 10: new Sprite(9, 7), + // Fourth row + new Sprite(1, 7), + new Sprite(9, 7), - 11: new Sprite(1, 9), - 12: new Sprite(3, 9), - 13: new Sprite(5, 9), - 14: new Sprite(7, 9), - 15: 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), +] -for (let i = 0; i < 16; i++) app.stage.addChild(sprites[i].getSprite()); +sprites.forEach(sprite => app.stage.addChild(sprite.getSprite())); // Red border @@ -83,7 +69,7 @@ app.stage.addChild(third_circle); let cards_1 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 3, 3, function () { if (!show_card) { console.log("1"); - generate_card("Ein Bäcker möchte eine neue Filiale eröffnen. Wie sollte er das Budget einteilen?", "a1", "a2", "a3", "a4", 1, 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; } }); @@ -92,7 +78,7 @@ 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("Ein Bäcker möchte eine neue Filiale eröffnen. Wie sollte er das Budget einteilen?", "a1", "a2", "a3", "a4", 1, 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; } }); @@ -101,7 +87,7 @@ 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); + 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; } }); @@ -114,6 +100,8 @@ function generate_card_stack(sprite, x, y, onclick) { sprite.width = sprite_size * 1.5; sprite.height = sprite_size * 3 * 0.72; sprite.interactive = true; + sprite.buttonMode = true; + sprite.defaultCursor = 'pointer'; sprite.on('click', onclick); return sprite } @@ -132,155 +120,6 @@ function generate_circle(graphics, x, y) { return graphics; } -function generate_card(s, a1, a2, a3, a4, right_a, d) { - const style = new PIXI.TextStyle({ - fontFamily: 'Arial', - fontSize: 60, - wordWrap: true, - wordWrapWidth: game_board_size * 0.5 - 20, - }); - - const header_style = new PIXI.TextStyle({ - fontFamily: 'Arial', - fontSize: 70, - 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; - 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 + 20 + card.width / 2 - header.width / 2 - 2.5 - 20; - header.y = start_y + 20; - card.addChild(header); - - const basicText = new PIXI.Text(s, style); - basicText.x = start_x + 20; - basicText.y = start_y + 50 + header.height; - card.addChild(basicText); - - - // TODO Random answer order - let answer_1 = generate_answer_button(new PIXI.Graphics(), 1, start_x, start_y, function () { - select_answer(answer_1, answer_2, answer_3, answer_4, start_x, start_y, 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(); - ok.lineStyle(4, 0x000000, 1); - ok.beginFill(0xffffff); - ok.drawRect(start_x, start_y, game_board_size * 0.5 - 40, 100); - ok.endFill(); - ok.x = 20; - ok.y = game_board_size * 0.72 - 120; - card.addChild(ok); - - const ok_text = new PIXI.Text('OK', style); - ok_text.x = start_x + ok.x + ok.width / 2 - ok_text.width / 2; - ok_text.y = start_y + ok.y + ok.height / 2 - ok_text.height / 2; - card.addChild(ok_text); - - ok.interactive = true; - ok.on('click', function () { - if (right_a === answer) { - console.log("Richtig") - } else { - console.log("Falsch") - } - show_card = false; - 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(4, 0x000000, 1); - answer.beginFill(color); - 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 = 20; - answer.y = game_board_size * 0.72 - 120 - 170 * y; - - answer.interactive = true; - answer.on('click', onclick); - - return answer; -} - -function generate_answer_text(answer_text, rect, start_x, start_y) { - 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;