175 lines
6.9 KiB
JavaScript
175 lines
6.9 KiB
JavaScript
function Card(game_board_size, question, answer_1, answer_2, answer_3, answer_4, difficulty, your_turn, game_state) {
|
|
this.card = new PIXI.Graphics();
|
|
this.question = question;
|
|
this.answer_1 = answer_1;
|
|
this.answer_2 = answer_2;
|
|
this.answer_3 = answer_3;
|
|
this.answer_4 = answer_4;
|
|
if (answer_1.status) this.right_answer = this.answer_1.text;
|
|
if (answer_2.status) this.right_answer = this.answer_2.text;
|
|
if (answer_3.status) this.right_answer = this.answer_3.text;
|
|
if (answer_4.status) this.right_answer = this.answer_4.text;
|
|
this.difficulty = difficulty;
|
|
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;
|
|
this.card_width = game_board_size * 0.5;
|
|
this.buttons = [];
|
|
let _this = this;
|
|
|
|
this.showCard = function () {
|
|
const style = new PIXI.TextStyle({
|
|
fontFamily: 'Arial',
|
|
fontSize: 50,
|
|
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.beginFill(0xffffff);
|
|
switch (difficulty) {
|
|
case 1:
|
|
this.card.lineStyle(30, 0x6C9A8B, 1);
|
|
break;
|
|
case 2:
|
|
this.card.lineStyle(30, 0xFFDDA1, 1);
|
|
break;
|
|
case 3:
|
|
this.card.lineStyle(30, 0xF47A93, 1);
|
|
break;
|
|
}
|
|
this.card.beginFill(0xFFFFFF);
|
|
this.card.moveTo(this.card_x + 50, this.card_y);
|
|
this.card.lineTo(this.card_x + 0, this.card_y + 50);
|
|
this.card.lineTo(this.card_x + 0, this.card_y + this.card_height);
|
|
this.card.lineTo(this.card_x + 50, this.card_y + this.card_height + 50);
|
|
this.card.lineTo(this.card_x + this.card_width - 50, this.card_y + this.card_height + 50);
|
|
this.card.lineTo(this.card_x + this.card_width, this.card_y + this.card_height);
|
|
this.card.lineTo(this.card_x + this.card_width, this.card_y + 50);
|
|
this.card.lineTo(this.card_x + this.card_width - 50, this.card_y + 0);
|
|
this.card.closePath();
|
|
this.card.endFill();
|
|
|
|
let header;
|
|
if (this.difficulty === 0) {
|
|
header = new PIXI.Text("Scoreboard", header_style);
|
|
} else {
|
|
header = new PIXI.Text("Schwierigkeit " + this.difficulty, 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);
|
|
|
|
if (difficulty === 0) {
|
|
if (game_state === 3) {
|
|
for (let i = 0; i < positions.length; i++) {
|
|
if (positions[i] > 15) this.question = "Gewinner: " + playerNames[i];
|
|
}
|
|
} else if (game_state === 2) {
|
|
this.question = "Unentschieden.";
|
|
}
|
|
}
|
|
|
|
const basicText = new PIXI.Text(this.question, style);
|
|
basicText.x = this.card_x + 20;
|
|
basicText.y = this.card_y + 50 + header.height;
|
|
this.card.addChild(basicText);
|
|
|
|
// Answers
|
|
let color = 0xffffff;
|
|
if (this.difficulty === 0) {
|
|
color = 0xFFDDA1;
|
|
}
|
|
this.buttons.push(new Button(color, 0xcccccc, 0x4169E1, this.card_width - 40, 200, this.card_x + 20, this.card_y + this.card_height - 120 - 220 * 4, this.answer_1.text, this.answer_1.status, function () {
|
|
if (_this.your_turn) {
|
|
select_answer(0, _this.answer_1.text);
|
|
}
|
|
}));
|
|
|
|
color = 0xffffff;
|
|
if (this.difficulty === 0) {
|
|
color = 0x4169E1;
|
|
}
|
|
this.buttons.push(new Button(color, 0xcccccc, 0x4169E1, this.card_width - 40, 200, this.card_x + 20, this.card_y + this.card_height - 120 - 220 * 3, this.answer_2.text, this.answer_2.status, function () {
|
|
if (_this.your_turn) {
|
|
select_answer(1, _this.answer_2.text);
|
|
}
|
|
}));
|
|
|
|
color = 0xffffff;
|
|
if (this.difficulty === 0) {
|
|
color = 0x6C9A8B;
|
|
}
|
|
this.buttons.push(new Button(color, 0xcccccc, 0x4169E1, this.card_width - 40, 200, this.card_x + 20, this.card_y + this.card_height - 120 - 220 * 2, this.answer_3.text, this.answer_3.status, function () {
|
|
if (_this.your_turn) {
|
|
select_answer(2, _this.answer_3.text);
|
|
}
|
|
}));
|
|
|
|
color = 0xffffff;
|
|
if (this.difficulty === 0) {
|
|
color = 0xF47A93;
|
|
}
|
|
this.buttons.push(new Button(color, 0xcccccc, 0x4169E1, this.card_width - 40, 200, this.card_x + 20, this.card_y + this.card_height - 120 - 220, this.answer_4.text, this.answer_4.status, function () {
|
|
if (_this.your_turn) {
|
|
select_answer(3, _this.answer_4.text);
|
|
}
|
|
}));
|
|
|
|
this.buttons.forEach(button => this.card.addChild(button.getButton()));
|
|
|
|
|
|
// OK-Button
|
|
if (game_state === 2 || game_state === 3) {
|
|
this.card.addChild(new Button(0xffffff, 0xcccccc, 0xffffff, this.card_width - 40, 100, this.card_x + 20, this.card_y + this.card_height - 120, "New Game", null, function () {
|
|
window.location.reload();
|
|
}).getButton());
|
|
} else {
|
|
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) { //TODO: do this in backend instead to prevent cheating
|
|
socket.emit('card finished', difficulty, true);
|
|
} else {
|
|
socket.emit('card finished', difficulty, false);
|
|
}
|
|
show_card = false;
|
|
answer = null;
|
|
diced = false;
|
|
rolled_number = null;
|
|
} else {
|
|
if (your_turn === true) {
|
|
alert("Please choose your answer!");
|
|
} else {
|
|
show_card = false;
|
|
answer = null;
|
|
diced = false;
|
|
rolled_number = null;
|
|
card.destroyCard();
|
|
border_card_stack.clear();
|
|
}
|
|
}
|
|
}).getButton());
|
|
}
|
|
|
|
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());
|
|
_this.buttons[id].selectButton();
|
|
answer = text;
|
|
}
|
|
} |