diff --git a/README.md b/README.md index 5c7d1c9..67ea5b9 100644 --- a/README.md +++ b/README.md @@ -1,31 +1,12 @@ # Projektmanagement Game -## Docker - -### Build +## Build ``` docker build Projektmanagement-Game/ -t pm-game ``` -### Deploy - +## Deploy ``` docker run -d -p 80:5000 pm-game -``` - -### Check if it works - -Open `http://127.0.0.1` in your Browser - -## Without docker - -### Run - -``` -node Webservice/server.js -``` - -### Check if it works - -Open `http://127.0.0.1:5000` in your Browser \ No newline at end of file +``` \ No newline at end of file diff --git a/public/css/game.css b/public/css/game.css index 23fa8ea..e8f4e34 100644 --- a/public/css/game.css +++ b/public/css/game.css @@ -1,13 +1,4 @@ #game { height: 100%; - width: 100%; grid-column-start: 1; - display: flex; - justify-content: center; - align-items: center; - background: url(/img/background.jpg) no-repeat center center fixed; - -webkit-background-size: cover; /* For WebKit*/ - -moz-background-size: cover; /* Mozilla*/ - -o-background-size: cover; /* Opera*/ - background-size: cover; /* Generic*/ } \ No newline at end of file diff --git a/public/css/index.css b/public/css/index.css index 40c2465..e69de29 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -1,11 +0,0 @@ -#login { - display: block; -} - -#game { - display: none; -} - -#chat { - display: none; -} \ No newline at end of file diff --git a/public/img/background.jpg b/public/img/background.jpg deleted file mode 100644 index 50362e3..0000000 Binary files a/public/img/background.jpg and /dev/null differ diff --git a/public/img/card_stack.png b/public/img/card_stack.png deleted file mode 100644 index 4ca59d2..0000000 Binary files a/public/img/card_stack.png and /dev/null differ diff --git a/public/img/sprite.jpg b/public/img/sprite.jpg deleted file mode 100644 index 2e8254d..0000000 Binary files a/public/img/sprite.jpg and /dev/null differ diff --git a/public/index.html b/public/index.html index b2f241d..a5d651a 100644 --- a/public/index.html +++ b/public/index.html @@ -19,20 +19,7 @@
Projektmanagement Game
-
-
- - - - - - - -
-
-
- -
+
@@ -49,13 +36,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..3ecefd4 100644 --- a/public/js/game.js +++ b/public/js/game.js @@ -1,141 +1,22 @@ -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, - backgroundAlpha: 0, - width: max_size / game_board_size, - height: max_size / game_board_size + backgroundColor: 0x0073db }); 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), +// -------------------------------------- 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())); +// ------------------------------------ end code ------------------------------------ -// 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 +// Resize (Do Not modify) window.addEventListener('resize', resize); function resize() { - let size = calculate_size(); - app.stage.scale.set(size / game_board_size, size / game_board_size); - - app.renderer.resize(size, size) + let game = document.getElementById('game'); + app.renderer.resize(game.offsetWidth, game.offsetHeight); } resize(); \ 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