Projektmanagement-Game/public/js/game.js

let answer = null;

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.resize = function (sprite_size) {
        this.setSize(this.sprite, sprite_size);
    }

    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 = calculate_size();
let sprite_size = Math.floor(game_board_size / 11);

const app = new PIXI.Application({
    autoResize: true,
    resolution: devicePixelRatio,
    backgroundAlpha: 0,
    width: game_board_size,
    height: 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),

    5: new Sprite(1, 3),
    6: new Sprite(9, 3),

    7: new Sprite(1, 5),
    8: new Sprite(9, 5),

    9: new Sprite(1, 7),
    10: 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),
}

for (let i = 0; i < 16; i++) app.stage.addChild(sprites[i].getSprite());


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

let 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);

let cards_3 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 7, 3, function () {
    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);
});
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.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 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;
    card.lineStyle(5, 0x000000, 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 + 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 + 20 + 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(2, 0x000000, 1);
    ok.beginFill(0xffffff);
    ok.drawRect(start_x, start_y, game_board_size * 0.5 - 20, 50);
    ok.endFill();
    ok.x = 10;
    ok.y = game_board_size * 0.72 - 60;
    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")
        }
        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;
    } else {
        return game.offsetWidth;
    }
}

// Resize
window.addEventListener('resize', resize);

function resize() {
    game_board_size = calculate_size();
    sprite_size = Math.floor(game_board_size / 11);


    // Resize container
    app.renderer.resize(game_board_size, game_board_size);

    // Resize fields
    for (let i = 0; i < 16; i++) {
        sprites[i].resize(Math.floor(game_board_size / 11));
    }

    // Resize red border
    red_border.clear();
    red_border = generate_red_border(new PIXI.Graphics());
    app.stage.addChild(red_border);

    // Resize circles
    first_circle.clear();
    first_circle = generate_circle(new PIXI.Graphics(), 3, 9);
    app.stage.addChild(first_circle);

    second_circle.clear();
    second_circle = generate_circle(new PIXI.Graphics(), 5, 9);
    app.stage.addChild(second_circle);

    third_circle.clear();
    third_circle = generate_circle(new PIXI.Graphics(), 7, 9);
    app.stage.addChild(third_circle);

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