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

Update readme #2

Merged
H4CK3R-01 merged 8 commits from update_readme into main 2021-06-07 20:07:34 +00:00
Conversation 0 Commits 8 Files Changed 13 +181 -21
5 changed files with 181 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c4c2b34c08 - Show all commits

11
public/css/index.css
View File

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

15
public/index.html
View File

@ -19,7 +19,20 @@
<div class="title">Projektmanagement Game</div>
</header>
<main>
<div id="game"></div>
<!-- <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="chat">
<div id="messages_received"></div>

6
public/js/chat.js
View File

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

156
public/js/game.js
View File

@ -1,3 +1,5 @@
let answer = null;
function Sprite(x, y) {
this.sprite = PIXI.Sprite.from('/img/sprite.jpg');
this.coord_x = x;
@ -94,7 +96,7 @@ app.stage.addChild(cards_2);
let cards_3 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 7, 3, function () {
console.log("3");
generate_card("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.");
generate_card("Ein Bäcker möchte eine neue Filiale eröffnen. Wie sollte er das Budget einteilen?", "a1", "a2", "a3", "a4", 1, 1);
});
app.stage.addChild(cards_3);
@ -123,7 +125,21 @@ function generate_circle(graphics, x, y) {
return graphics;
}
function generate_card(s) {
function generate_card(s, a1, a2, a3, a4, right_a, d) {
const style = new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 20,
wordWrap: true,
wordWrapWidth: game_board_size * 0.5 - 20,
});
const header_style = new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 25,
wordWrap: true,
wordWrapWidth: game_board_size * 0.5 - 20,
});
const card = new PIXI.Graphics();
let start_x = game_board_size * 0.25 + 2.5;
let start_y = game_board_size / 2 - game_board_size * 0.72 / 2 + 2.5;
@ -132,22 +148,47 @@ function generate_card(s) {
card.drawRoundedRect(start_x, start_y, game_board_size * 0.5, game_board_size * 0.72, 10);
card.endFill();
const style = new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 15,
wordWrap: true,
wordWrapWidth: game_board_size * 0.5 - 10,
});
const header = new PIXI.Text("Schwierigkeit " + d, header_style);
header.x = start_x + 10 + card.width / 2 - header.width / 2 - 2.5 - 10;
header.y = start_y + 10;
card.addChild(header);
const basicText = new PIXI.Text(s, style);
basicText.x = start_x + 10;
basicText.y = start_y + 10;
basicText.y = start_y + 20 + header.height;
card.addChild(basicText);
// const answer_1 = new PIXI.Text(s, style);
// answer_1.x = start_x + 10;
// answer_1.y = start_y + 100;
// card.addChild(answer_1);
// TODO Random answer order
let answer_1 = generate_answer_button(new PIXI.Graphics(), 1, start_x, start_y, function () {
select_answer(answer_1, answer_2, answer_3, answer_4, start_x, start_y, 1);
});
let answer_1_text = generate_answer_text(new PIXI.Text(a1, style), answer_1, start_x, start_y);
card.addChild(answer_1);
card.addChild(answer_1_text);
let answer_2 = generate_answer_button(new PIXI.Graphics(), 2, start_x, start_y, function () {
select_answer(answer_1, answer_2, answer_3, answer_4, start_x, start_y, 2);
});
let answer_2_text = generate_answer_text(new PIXI.Text(a2, style), answer_2, start_x, start_y);
card.addChild(answer_2);
card.addChild(answer_2_text);
let answer_3 = generate_answer_button(new PIXI.Graphics(), 3, start_x, start_y, function () {
select_answer(answer_1, answer_2, answer_3, answer_4, start_x, start_y, 3);
});
let answer_3_text = generate_answer_text(new PIXI.Text(a3, style), answer_3, start_x, start_y);
card.addChild(answer_3);
card.addChild(answer_3_text);
let answer_4 = generate_answer_button(new PIXI.Graphics(), 4, start_x, start_y, function () {
select_answer(answer_1, answer_2, answer_3, answer_4, start_x, start_y, 4);
});
let answer_4_text = generate_answer_text(new PIXI.Text("a4", style), answer_4, start_x, start_y);
card.addChild(answer_4);
card.addChild(answer_4_text);
// OK-Button
const ok = new PIXI.Graphics();
@ -157,7 +198,6 @@ function generate_card(s) {
ok.endFill();
ok.x = 10;
ok.y = game_board_size * 0.72 - 60;
card.addChild(ok);
const ok_text = new PIXI.Text('OK', style);
@ -167,13 +207,74 @@ function generate_card(s) {
ok.interactive = true;
ok.on('click', function () {
console.log("OK");
if(right_a === answer) {
console.log("Richtig")
} else {
console.log("Falsch")
}
card.destroy();
});
app.stage.addChild(card);
}
function select_answer(answer_1, answer_2, answer_3, answer_4, start_x, start_y, id) {
if(answer === null) {
answer = id;
switch(answer) {
case 1:
draw_rect(answer_1, 0xff00ff, start_x, start_y);
break;
case 2:
draw_rect(answer_2, 0xff00ff, start_x, start_y);
break;
case 3:
draw_rect(answer_3, 0xff00ff, start_x, start_y);
break;
case 4:
draw_rect(answer_4, 0xff00ff, start_x, start_y);
break;
}
} else {
draw_rect(answer_1, 0xffffff, start_x, start_y);
draw_rect(answer_2, 0xffffff, start_x, start_y);
draw_rect(answer_3, 0xffffff, start_x, start_y);
draw_rect(answer_4, 0xffffff, start_x, start_y);
answer = null;
select_answer(answer_1, answer_2, answer_3, answer_4, start_x, start_y, id);
}
}
function draw_rect(answer, color, start_x, start_y) {
answer.clear();
answer.lineStyle(2, 0x000000, 1);
answer.beginFill(color);
answer.drawRect(start_x, start_y, game_board_size * 0.5 - 20, 75);
answer.endFill();
}
function generate_answer_button(answer, y, start_x, start_y, onclick) {
draw_rect(answer, 0xffffff, start_x, start_y);
answer.x = 10;
answer.y = game_board_size * 0.72 - 60 - 85 * y;
answer.interactive = true;
answer.on('click', onclick);
return answer;
}
function generate_answer_text(answer_text, rect, start_x, start_y) {
console.log(rect.width)
answer_text.x = start_x + rect.x + rect.width / 2 - answer_text.width / 2;
answer_text.y = start_y + rect.y + rect.height / 2 - answer_text.height / 2;
return answer_text
}
function calculate_size() {
if (game.offsetWidth > game.offsetHeight) {
return game.offsetHeight;
@ -216,7 +317,30 @@ function resize() {
third_circle = generate_circle(new PIXI.Graphics(), 7, 9);
app.stage.addChild(third_circle);
// TODO card and card stacks
// card stacks
cards_1.destroy();
cards_1 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 3, 3, function () {
console.log("1");
generate_card("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.");
});
app.stage.addChild(cards_1);
cards_2.destroy();
cards_2 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 5, 3, function () {
console.log("2");
generate_card("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.");
});
app.stage.addChild(cards_2);
cards_3.destroy();
cards_3 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 7, 3, function () {
console.log("3");
generate_card("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.");
});
app.stage.addChild(cards_3);
// card
}
resize();

14
public/js/index.js
View File

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