+
+
+
+
+
@@ -36,8 +49,13 @@
-
-
+
+
+
+
+
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/chat.js b/public/js/chat.js
index c1612c5..1558691 100644
--- a/public/js/chat.js
+++ b/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;
diff --git a/public/js/game.js b/public/js/game.js
index 3ecefd4..9f00427 100644
--- a/public/js/game.js
+++ b/public/js/game.js
@@ -1,22 +1,141 @@
+let answer = null;
+let show_card = false;
+
+let game = document.getElementById('game');
+
+let game_board_size = 2000;
+let max_size = calculate_size();
+let sprite_size = Math.floor(game_board_size / 11);
+
const app = new PIXI.Application({
autoResize: true,
resolution: devicePixelRatio,
- backgroundColor: 0x0073db
+ backgroundAlpha: 0,
+ width: max_size / game_board_size,
+ height: max_size / game_board_size
});
document.getElementById('game').appendChild(app.view);
-// -------------------------------------- code --------------------------------------
+// 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),
-// ------------------------------------ end code ------------------------------------
+ // 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()));
-// Resize (Do Not modify)
+// Red border
+let red_border = generate_red_border(new PIXI.Graphics());
+app.stage.addChild(red_border);
+
+
+// White circles
+let first_circle = generate_circle(new PIXI.Graphics(), 3, 9);
+app.stage.addChild(first_circle);
+
+let second_circle = generate_circle(new PIXI.Graphics(), 5, 9);
+app.stage.addChild(second_circle);
+
+let third_circle = generate_circle(new PIXI.Graphics(), 7, 9);
+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");
+ 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;
+ }
+});
+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");
+ 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;
+ }
+});
+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");
+ 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;
+ }
+});
+app.stage.addChild(cards_3);
+
+
+function generate_card_stack(sprite, x, y, onclick) {
+ sprite.x = sprite_size * x - sprite_size * 0.2;
+ sprite.y = sprite_size * y - sprite_size * 0.2;
+ 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
+}
+
+function generate_red_border(graphics) {
+ graphics.lineStyle(sprite_size * 0.10, 0x862323, 1);
+ graphics.drawRect(sprite_size * 9 - sprite_size * 0.2, sprite_size * 9 - sprite_size * 0.2, sprite_size * 1.5, sprite_size * 1.5);
+ return graphics;
+}
+
+function generate_circle(graphics, x, y) {
+ graphics.lineStyle(0);
+ graphics.beginFill(0xffffff, 1);
+ graphics.drawCircle(sprite_size * x - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4);
+ graphics.endFill();
+ return graphics;
+}
+
+function calculate_size() {
+ if (game.offsetWidth > game.offsetHeight) {
+ return game.offsetHeight;
+ } else {
+ return game.offsetWidth;
+ }
+}
+
+// Resize
window.addEventListener('resize', resize);
function resize() {
- let game = document.getElementById('game');
- app.renderer.resize(game.offsetWidth, game.offsetHeight);
+ let size = calculate_size();
+ app.stage.scale.set(size / game_board_size, size / game_board_size);
+
+ app.renderer.resize(size, size)
}
resize();
\ No newline at end of file
diff --git a/public/js/index.js b/public/js/index.js
index c73fbce..2bbf417 100644
--- a/public/js/index.js
+++ b/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();
+});
\ No newline at end of file