Merge game_bord and dev #6
25
README.md
25
README.md
@ -1,12 +1,31 @@
|
||||
# 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
|
||||
@ -1,8 +1,11 @@
|
||||
let express = require('express');
|
||||
let fs = require('fs');
|
||||
let app = express();
|
||||
let server = require('http').createServer(app);
|
||||
let {Server} = require("socket.io");
|
||||
let io = new Server(server);
|
||||
let {raw_data} = fs.readFileSync(__dirname + '/../data/cards.json');
|
||||
let cards = JSON.parse(raw_data);
|
||||
|
||||
let port = 5000;
|
||||
server.listen(port, function () {
|
||||
@ -46,6 +49,23 @@ io.on('connection', socket => {
|
||||
|
||||
generate_log_message(socket.room, socket.username, "LEFT", "");
|
||||
});
|
||||
|
||||
|
||||
// Game
|
||||
socket.on('roll dice', function () {
|
||||
let sides = 3;
|
||||
let randomNumber = Math.floor(Math.random() * sides) + 1;
|
||||
|
||||
io.in(socket.room).emit('dice', randomNumber);
|
||||
|
||||
generate_log_message(socket.room, socket.username, "DICE", randomNumber);
|
||||
});
|
||||
|
||||
socket.on('get card', function (difficulty) {
|
||||
io.in(socket.room).emit('card', getRandomCard(difficulty));
|
||||
|
||||
generate_log_message(socket.room, socket.username, "CARD", difficulty);
|
||||
});
|
||||
});
|
||||
|
||||
function generate_log_message(room, user, type, message) {
|
||||
@ -63,6 +83,9 @@ function generate_log_message(room, user, type, message) {
|
||||
case 'RUNNING':
|
||||
color = '\x1b[35m';
|
||||
break;
|
||||
case 'DICE':
|
||||
color = '\x1b[34m';
|
||||
break;
|
||||
default:
|
||||
color = '\x1b[0m';
|
||||
}
|
||||
@ -74,6 +97,23 @@ function generate_log_message(room, user, type, message) {
|
||||
console.info("%s[%s] [%s] [%s]\x1b[0m %s", color, room, user, type, reset_color, message);
|
||||
}
|
||||
|
||||
function getRandomCard(difficulty) {
|
||||
let filtered_cards = cards.filter(card => {
|
||||
return card.diffuculty === difficulty;
|
||||
});
|
||||
|
||||
return shuffleAnswers(filtered_cards[Math.floor(Math.random() * filtered_cards.length)]);
|
||||
}
|
||||
|
||||
function shuffleAnswers(card) {
|
||||
for (let i = card.answers.length - 1; i > 0; i--) {
|
||||
let j = Math.floor(Math.random() * (i + 1));
|
||||
[card.answers[i], card.answers[j]] = [card.answers[j], card.answers[i]];
|
||||
}
|
||||
return card;
|
||||
}
|
||||
|
||||
|
||||
function pad(width, string, padding) {
|
||||
if (string === undefined || string === null) return pad(width, " ", " ");
|
||||
return (width <= string.length) ? string : pad(width, string + padding, padding)
|
||||
|
||||
71
data/cards.json
Normal file
71
data/cards.json
Normal file
@ -0,0 +1,71 @@
|
||||
[
|
||||
{
|
||||
"id": 1,
|
||||
"diffuculty": 1,
|
||||
"question": "Was?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_a": "A",
|
||||
"status": false
|
||||
},
|
||||
{
|
||||
"answer_b": "B",
|
||||
"status": true
|
||||
},
|
||||
{
|
||||
"answer_c": "C",
|
||||
"status": false
|
||||
},
|
||||
{
|
||||
"answer_d": "D",
|
||||
"status": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"diffuculty": 2,
|
||||
"question": "Wie?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_a": "A",
|
||||
"status": false
|
||||
},
|
||||
{
|
||||
"answer_b": "B",
|
||||
"status": true
|
||||
},
|
||||
{
|
||||
"answer_c": "C",
|
||||
"status": false
|
||||
},
|
||||
{
|
||||
"answer_d": "D",
|
||||
"status": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"diffuculty": 3,
|
||||
"question": "Wo?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_a": "A",
|
||||
"status": false
|
||||
},
|
||||
{
|
||||
"answer_b": "B",
|
||||
"status": true
|
||||
},
|
||||
{
|
||||
"answer_c": "C",
|
||||
"status": false
|
||||
},
|
||||
{
|
||||
"answer_d": "D",
|
||||
"status": false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -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*/
|
||||
}
|
||||
@ -48,4 +48,4 @@
|
||||
#login button {
|
||||
background-color: #0062ff;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -30,9 +30,7 @@
|
||||
<button id="ok" type="button">Bestätigen</button>
|
||||
</form>
|
||||
</div>
|
||||
<div id="game">
|
||||
|
||||
</div>
|
||||
<div id="game"></div>
|
||||
<div id="chat">
|
||||
<div id="messages_received"></div>
|
||||
|
||||
@ -49,13 +47,8 @@
|
||||
|
||||
</footer>
|
||||
|
||||
<script crossorigin="anonymous"
|
||||
integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA=="
|
||||
referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.0.2/browser/pixi.js"></script>
|
||||
<script src="js/Card.js"></script>
|
||||
<script src="js/Button.js"></script>
|
||||
<script src="js/Sprite.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
|
||||
<script src="js/chat.js"></script>
|
||||
<script src="js/game.js"></script>
|
||||
<script src="js/index.js"></script>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -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();
|
||||
let game = document.getElementById('game');
|
||||
app.renderer.resize(game.offsetWidth, game.offsetHeight);
|
||||
}
|
||||
@ -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();
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user