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

Merge branch 'main' into logic

Browse Source 
# Conflicts:
#	public/js/game.js
This commit is contained in:
Thorsten Rausch
2021-06-15 17:42:42 +02:00
parent 10e69084bc 1e0f6aa4fe
commit 2ac1733251
18 changed files with 7328 additions and 610 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
public/js/Button.js
View File

@@ -1,4 +1,4 @@
function Button(default_color, hover_color, select_color, width, height, x, y, text, status, button_is_answer, click) {
function Button(default_color, hover_color, select_color, width, height, x, y, text, status, click) {
this.graphics = new PIXI.Graphics();
this.default_color = default_color;
this.hover_color = hover_color;
@@ -8,8 +8,7 @@ function Button(default_color, hover_color, select_color, width, height, x, y, t
this.y = y;
this.text = text;
this.status = status;
this.button_is_answer = button_is_answer;
this.click = click;
this.pointerdown = click;
this.selected = false;
let _this = this;
@@ -20,24 +19,26 @@ function Button(default_color, hover_color, select_color, width, height, x, y, t
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,
fontSize: 40,
wordWrap: true,
wordWrapWidth: game_board_size * 0.5 - 20,
wordWrapWidth: this.width,
breakWords: true,
padding: 50
});
this.graphics.clear();
@@ -55,14 +56,7 @@ function Button(default_color, hover_color, select_color, width, height, x, y, t
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();
}
}
this.graphics.on('pointerdown', function () {
click();
});
this.graphics.on('mouseover', function () {
@@ -74,5 +68,5 @@ function Button(default_color, hover_color, select_color, width, height, x, y, t
if (!_this.selected) _this.changeButtonColor(_this.default_color);
});
return this.graphics;
}
};
}

40
public/js/Card.js
View File

@@ -1,4 +1,4 @@
function Card(game_board_size, s, a1, a2, a3, a4, d) {
function Card(game_board_size, s, a1, a2, a3, a4, d, your_turn) {
this.card = new PIXI.Graphics();
this.s = s;
this.a1 = a1;
@@ -10,6 +10,7 @@ function Card(game_board_size, s, a1, a2, a3, a4, d) {
if (a3.status) this.right_answer = this.a3.text;
if (a4.status) this.right_answer = this.a4.text;
this.d = d;
this.your_turn = your_turn;
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;
@@ -20,7 +21,7 @@ function Card(game_board_size, s, a1, a2, a3, a4, d) {
this.showCard = function () {
const style = new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 60,
fontSize: 50,
wordWrap: true,
wordWrapWidth: game_board_size * 0.5 - 20,
});
@@ -48,27 +49,35 @@ function Card(game_board_size, s, a1, a2, a3, a4, d) {
this.card.addChild(basicText);
// Answers
this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 4, this.a1.text, this.a1.status, true, function () {
select_answer(0, _this.a1.text);
this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 200, this.card_x + 20, this.card_y + this.card_height - 120 - 220 * 4, this.a1.text, this.a1.status, function () {
if (_this.your_turn) {
select_answer(0, _this.a1.text);
}
}));
this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 3, this.a2.text, this.a2.status, true, function () {
select_answer(1, _this.a2.text);
this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 200, this.card_x + 20, this.card_y + this.card_height - 120 - 220 * 3, this.a2.text, this.a2.status, function () {
if (_this.your_turn) {
select_answer(1, _this.a2.text);
}
}));
this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 2, this.a3.text, this.a3.status, true, function () {
select_answer(2, _this.a3.text);
this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 200, this.card_x + 20, this.card_y + this.card_height - 120 - 220 * 2, this.a3.text, this.a3.status, function () {
if (_this.your_turn) {
select_answer(2, _this.a3.text);
}
}));
this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 1, this.a4.text, this.a4.status, true, function () {
select_answer(3, _this.a4.text);
this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 200, this.card_x + 20, this.card_y + this.card_height - 120 - 220 * 1, this.a4.text, this.a4.status, function () {
if (_this.your_turn) {
select_answer(3, _this.a4.text);
}
}));
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", null, false, function () {
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", null, function () {
if (answer !== null) {
if (_this.right_answer === answer) {
console.log("Richtig");
@@ -79,9 +88,7 @@ function Card(game_board_size, s, a1, a2, a3, a4, d) {
answer = null;
diced = false;
rolled_number = null;
rolled_number_text.destroy();
border_card_stack.clear();
_this.card.destroy();
socket.emit('card finished', d);
} else {
alert("Bitte wähle eine Antwortmöglichkeit aus");
}
@@ -90,6 +97,11 @@ function Card(game_board_size, s, a1, a2, a3, a4, d) {
app.stage.addChild(this.card);
};
this.destroyCard = function () {
if (this.card !== null) {
this.card.destroy();
}
};
function select_answer(id, text) {
_this.buttons.forEach(button => button.unSelectButton());

4
public/js/Sprite.js
View File

@@ -6,12 +6,12 @@ function Sprite(x, 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;
}
};
}

15
public/js/chat.js
View File

@@ -2,7 +2,9 @@ let socket;
let connected = false;
function start_chat() {
socket = io();
socket = io("/", {
closeOnBeforeunload: false
});
socket.on('login', function () {
connected = true;
@@ -43,6 +45,7 @@ function addLogMessage(message) {
li.innerText = message;
document.getElementById("messages_received").appendChild(li);
document.getElementById("messages_received").scrollTop = document.getElementById("messages_received").scrollHeight;
}
function addChatMessage(data) {
@@ -65,4 +68,12 @@ function addChatMessage(data) {
messageDiv.appendChild(messageBody);
document.getElementById('messages_received').append(messageDiv);
}
document.getElementById("messages_received").scrollTop = document.getElementById("messages_received").scrollHeight;
}
document.getElementById('message_input').onkeydown = function (e) {
if (e.key === "Enter") {
sendMessage();
e.preventDefault();
}
};

46
public/js/game.js
View File

@@ -11,6 +11,7 @@ let player_color = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00];
let player_sprite_array = [];
let hunter = new Hunter();
let card;
let answer = null;
let show_card = false;
let diced = false;
@@ -56,7 +57,7 @@ let sprites = [
function start_game() {
app = new PIXI.Application({
autoResize: true,
resolution: devicePixelRatio,
resolution: 1,
backgroundAlpha: 0,
width: max_size / game_board_size,
height: max_size / game_board_size
@@ -117,7 +118,7 @@ function start_game() {
dice.interactive = true;
dice.buttonMode = true;
dice.defaultCursor = 'pointer';
dice.on('click', function () {
dice.on('pointerdown', function () {
if (!diced) {
socket.emit('roll dice');
}
@@ -147,17 +148,26 @@ function start_game() {
rolled_number_text.x = sprite_size * 7 - sprite_size * 0.2 + dice.width / 2 - rolled_number_text.width / 2;
rolled_number_text.y = sprite_size * 6 - sprite_size * 0.2;
app.stage.addChild(rolled_number_text);
});
socket.on('card', function (data) {
let q = data.question;
let a = data.answers;
let d = data.difficulty;
new Card(game_board_size, q, a[0], a[1], a[2], a[3], d).showCard();
let u = data.username;
let q = data.card.question;
let a = data.card.answers;
let d = data.card.difficulty;
card = new Card(game_board_size, q, a[0], a[1], a[2], a[3], d, u === username);
card.showCard();
show_card = true;
});
socket.on('card destroyed', function () {
diced = false;
show_card = false;
card.destroyCard();
rolled_number_text.destroy();
border_card_stack.clear();
});
resize();
}
@@ -169,7 +179,7 @@ function generate_card_stack(sprite, x, y, onclick) {
sprite.interactive = true;
sprite.buttonMode = true;
sprite.defaultCursor = 'pointer';
sprite.on('click', onclick);
sprite.on('pointerdown', onclick);
return sprite;
}
@@ -188,10 +198,24 @@ function generate_circle(graphics, x, y) {
}
function calculate_size() {
if (game.offsetWidth > game.offsetHeight) {
return game.offsetHeight;
let width;
let height;
if (game.offsetWidth > window.innerWidth) {
width = window.innerWidth - document.getElementById('chat').offsetWidth;
} else {
return game.offsetWidth;
width = game.offsetWidth;
}
if (game.offsetHeight > window.innerHeight) {
height = window.innerHeight - document.getElementsByTagName('header')[0].offsetHeight;
} else {
height = game.offsetHeight;
}
if (width > height) {
return height;
} else {
return width;
}
}