Update readme #2
@ -53,6 +53,9 @@
|
||||
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="js/chat.js"></script>
|
||||
<script src="js/game.js"></script>
|
||||
<script src="js/index.js"></script>
|
||||
|
||||
77
public/js/Button.js
Normal file
77
public/js/Button.js
Normal file
@ -0,0 +1,77 @@
|
||||
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
Normal file
88
public/js/Card.js
Normal file
@ -0,0 +1,88 @@
|
||||
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
Normal file
17
public/js/Sprite.js
Normal file
@ -0,0 +1,17 @@
|
||||
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,66 +1,52 @@
|
||||
let answer = null;
|
||||
let show_card = false;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let game = document.getElementById('game');
|
||||
|
||||
let game_board_size = 2000;
|
||||
let size = calculate_size();
|
||||
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: size / game_board_size,
|
||||
height: size / game_board_size
|
||||
width: max_size / game_board_size,
|
||||
height: max_size / game_board_size
|
||||
});
|
||||
document.getElementById('game').appendChild(app.view);
|
||||
|
||||
|
||||
// fields
|
||||
let sprites = {
|
||||
0: new Sprite(1, 1),
|
||||
1: new Sprite(3, 1),
|
||||
2: new Sprite(5, 1),
|
||||
3: new Sprite(7, 1),
|
||||
4: new Sprite(9, 1),
|
||||
let sprites = [
|
||||
// First row
|
||||
new Sprite(1, 1),
|
||||
new Sprite(3, 1),
|
||||
new Sprite(5, 1),
|
||||
new Sprite(7, 1),
|
||||
new Sprite(9, 1),
|
||||
|
||||
5: new Sprite(1, 3),
|
||||
6: new Sprite(9, 3),
|
||||
// Second row
|
||||
new Sprite(1, 3),
|
||||
new Sprite(9, 3),
|
||||
|
||||
7: new Sprite(1, 5),
|
||||
8: new Sprite(9, 5),
|
||||
// Third row
|
||||
new Sprite(1, 5),
|
||||
new Sprite(9, 5),
|
||||
|
||||
9: new Sprite(1, 7),
|
||||
10: new Sprite(9, 7),
|
||||
// Fourth row
|
||||
new Sprite(1, 7),
|
||||
new Sprite(9, 7),
|
||||
|
||||
11: new Sprite(1, 9),
|
||||
12: new Sprite(3, 9),
|
||||
13: new Sprite(5, 9),
|
||||
14: new Sprite(7, 9),
|
||||
15: new Sprite(9, 9),
|
||||
}
|
||||
// Fifth row
|
||||
new Sprite(1, 9),
|
||||
new Sprite(3, 9),
|
||||
new Sprite(5, 9),
|
||||
new Sprite(7, 9),
|
||||
new Sprite(9, 9),
|
||||
]
|
||||
|
||||
for (let i = 0; i < 16; i++) app.stage.addChild(sprites[i].getSprite());
|
||||
sprites.forEach(sprite => app.stage.addChild(sprite.getSprite()));
|
||||
|
||||
|
||||
// Red border
|
||||
@ -83,7 +69,7 @@ app.stage.addChild(third_circle);
|
||||
let cards_1 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 3, 3, function () {
|
||||
if (!show_card) {
|
||||
console.log("1");
|
||||
generate_card("Ein Bäcker möchte eine neue Filiale eröffnen. Wie sollte er das Budget einteilen?", "a1", "a2", "a3", "a4", 1, 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;
|
||||
}
|
||||
});
|
||||
@ -92,7 +78,7 @@ 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");
|
||||
generate_card("Ein Bäcker möchte eine neue Filiale eröffnen. Wie sollte er das Budget einteilen?", "a1", "a2", "a3", "a4", 1, 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;
|
||||
}
|
||||
});
|
||||
@ -101,7 +87,7 @@ 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");
|
||||
generate_card("Ein Bäcker möchte eine neue Filiale eröffnen. Wie sollte er das Budget einteilen?", "a1", "a2", "a3", "a4", 1, 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;
|
||||
}
|
||||
});
|
||||
@ -114,6 +100,8 @@ function generate_card_stack(sprite, x, y, onclick) {
|
||||
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
|
||||
}
|
||||
@ -132,155 +120,6 @@ function generate_circle(graphics, x, y) {
|
||||
return graphics;
|
||||
}
|
||||
|
||||
function generate_card(s, a1, a2, a3, a4, right_a, d) {
|
||||
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,
|
||||
});
|
||||
|
||||
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;
|
||||
card.lineStyle(20, 0x6C9A8B, 1);
|
||||
card.beginFill(0xffffff);
|
||||
card.drawRoundedRect(start_x, start_y, game_board_size * 0.5, game_board_size * 0.72, 10);
|
||||
card.endFill();
|
||||
|
||||
const header = new PIXI.Text("Schwierigkeit " + d, header_style);
|
||||
header.x = start_x + 20 + card.width / 2 - header.width / 2 - 2.5 - 20;
|
||||
header.y = start_y + 20;
|
||||
card.addChild(header);
|
||||
|
||||
const basicText = new PIXI.Text(s, style);
|
||||
basicText.x = start_x + 20;
|
||||
basicText.y = start_y + 50 + header.height;
|
||||
card.addChild(basicText);
|
||||
|
||||
|
||||
// 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();
|
||||
ok.lineStyle(4, 0x000000, 1);
|
||||
ok.beginFill(0xffffff);
|
||||
ok.drawRect(start_x, start_y, game_board_size * 0.5 - 40, 100);
|
||||
ok.endFill();
|
||||
ok.x = 20;
|
||||
ok.y = game_board_size * 0.72 - 120;
|
||||
card.addChild(ok);
|
||||
|
||||
const ok_text = new PIXI.Text('OK', style);
|
||||
ok_text.x = start_x + ok.x + ok.width / 2 - ok_text.width / 2;
|
||||
ok_text.y = start_y + ok.y + ok.height / 2 - ok_text.height / 2;
|
||||
card.addChild(ok_text);
|
||||
|
||||
ok.interactive = true;
|
||||
ok.on('click', function () {
|
||||
if (right_a === answer) {
|
||||
console.log("Richtig")
|
||||
} else {
|
||||
console.log("Falsch")
|
||||
}
|
||||
show_card = false;
|
||||
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(4, 0x000000, 1);
|
||||
answer.beginFill(color);
|
||||
answer.drawRect(start_x, start_y, game_board_size * 0.5 - 40, 150);
|
||||
answer.endFill();
|
||||
}
|
||||
|
||||
function generate_answer_button(answer, y, start_x, start_y, onclick) {
|
||||
draw_rect(answer, 0xffffff, start_x, start_y);
|
||||
|
||||
answer.x = 20;
|
||||
answer.y = game_board_size * 0.72 - 120 - 170 * y;
|
||||
|
||||
answer.interactive = true;
|
||||
answer.on('click', onclick);
|
||||
|
||||
return answer;
|
||||
}
|
||||
|
||||
function generate_answer_text(answer_text, rect, start_x, start_y) {
|
||||
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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user