@@ -49,13 +47,8 @@
-
-
-
-
-
+
+
diff --git a/public/js/Button.js b/public/js/Button.js
deleted file mode 100644
index 476c43e..0000000
--- a/public/js/Button.js
+++ /dev/null
@@ -1,77 +0,0 @@
-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
deleted file mode 100644
index 6ec78b5..0000000
--- a/public/js/Card.js
+++ /dev/null
@@ -1,88 +0,0 @@
-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
deleted file mode 100644
index 43b0fbb..0000000
--- a/public/js/Sprite.js
+++ /dev/null
@@ -1,17 +0,0 @@
-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 1558691..c1612c5 100644
--- a/public/js/chat.js
+++ b/public/js/chat.js
@@ -1,7 +1,9 @@
let socket;
+let username = prompt("Please enter your name");
+let room_name = prompt("Please enter room name");
let connected = false;
-function start_chat() {
+window.addEventListener('load', function () {
socket = io();
socket.on('login', function () {
@@ -23,7 +25,7 @@ function start_chat() {
// 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 9f00427..b2ef4d3 100644
--- a/public/js/game.js
+++ b/public/js/game.js
@@ -1,141 +1,27 @@
-let answer = null;
-let show_card = false;
+let app;
-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,
- backgroundAlpha: 0,
- width: max_size / game_board_size,
- height: max_size / game_board_size
-});
-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()));
-
-
-// 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);
+window.addEventListener('load', function () {
+ app = new PIXI.Application({
+ autoResize: true,
+ resolution: devicePixelRatio,
+ backgroundColor: 0x0073db
+ });
+ document.getElementById('game').appendChild(app.view);
+
+
+ socket.on('dice', function (data) {
+ console.log(data);
+ });
+
+ socket.on('card', function (data) {
+ console.log(data);
+ });
+
+ resize();
+});
function resize() {
- 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
+ let game = document.getElementById('game');
+ app.renderer.resize(game.offsetWidth, game.offsetHeight);
+}
\ No newline at end of file
diff --git a/public/js/index.js b/public/js/index.js
index 70c92ba..c73fbce 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -1,18 +1,4 @@
-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