DHBW/Projektmanagement-Game
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

Revert "Update readme"

Browse Source
This commit is contained in:
H4CK3R-01 2021-06-08 07:58:46 +02:00 committed by GitHub
parent 6f2aa2c682
commit d87b131a80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 16 additions and 386 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
README.md
View File

@ -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
```

9
public/css/game.css
View File

@ -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*/
}

11
public/css/index.css
View File

@ -1,11 +0,0 @@
#login {
display: block;
}
#game {
display: none;
}
#chat {
display: none;
}

BIN
public/img/background.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

BIN
public/img/card_stack.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 592 KiB

BIN
public/img/sprite.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 680 KiB

24
public/index.html
View File

@ -19,20 +19,7 @@
<div class="title">Projektmanagement Game</div>
</header>
<main>
<div id="login">
<form>
<label for="username">Anmeldename: </label>
<input type="text" name="username" id="username" placeholder="Benutzername">
<label for="room">Raumnummer: </label>
<input type="text" name="room" id="room" placeholder="Raumnummer">
<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 +36,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>

77
public/js/Button.js
View File

@ -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;
}
}

88
public/js/Card.js
View File

@ -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;
}
}

17
public/js/Sprite.js
View File

@ -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;
}
}

6
public/js/chat.js
View File

@ -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;

131
public/js/game.js
View File

@ -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();

14
public/js/index.js
View File

@ -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();
})