{% extends "/shared/_layout.html" %}

{% block content %}

        <script>
        function playCard(card) {
            let player = {{player}}
            window.game_socket.send("playcard "+player+":"+card)
        }

        function setTrumpColor(color) {
            let player = {{player}}
            window.game_socket.send("setTrumpColor "+player+":"+color)
        }
        </script>

        <div style="font-family:Wizzta; font-size:100px"></div>
        <div class="content">
            <script src="/js-cardgame/pixi.min.js"></script>
            <script src="/js-cardgame/js/card.js"></script>
            <script src="/js-cardgame/js/carddeck.js"></script>
            <script src="/js-cardgame/js/player.js"></script>
            <script src="/js-cardgame/js/game.js"></script>

            <script>

let game = null;

window.onload = function()
{

    PIXI.AbstractRenderer.autoDensity = true;
    let app = new PIXI.Application();
    app.renderer.view.style.position = "absolute";
    app.renderer.view.style.display = "block";

    function resize()
    {
        let width = 1920;
        let height = 1080;
        let w = window.innerWidth;
        let h = window.innerHeight;
        let scale = Math.min(w/width, h/height)
        app.stage.scale.x = scale;
        app.stage.scale.y = scale;
        app.renderer.resize(w, h);
    }

    function addResources(loader)
    {
        loader.add("mask", "https://www.denkmair.de/wizard-pixi/deck/mask.png");
        loader.add("back", "https://www.denkmair.de/wizard-pixi/deck/back1.jpg");
        for (let i = 0; i < 14; i++) {
            ["r", "g", "b", "y"].forEach(function (c) {
                let name = c + ((i < 10) ? "0" + i : i);
                loader.add(name, "https://www.denkmair.de/wizard-pixi/deck/" + name + ".jpg");
            });
        }
        for (let i = 1; i < 5; i++) {
            loader.add("z" + i, "https://www.denkmair.de/wizard-pixi/deck/z" + i + ".jpg");
            loader.add("n" + i, "https://www.denkmair.de/wizard-pixi/deck/n" + i + ".jpg");
        }
    }

    resize();
    window.addEventListener("resize", resize);

    app.renderer.backgroundColor = 0x222222;
    document.body.appendChild(app.view);

    let loader = PIXI.Loader.shared;
    addResources(loader);
    loader.load(function(loader, resources)
    {
        game = new Game(app.stage, resources);
        game.init(['Hubert', 'Struppi', 'Patrice', 'Steffi', "Max", "Renate"]);
        game.give_round(["z3", "b04", "r08", "g12", "y13", "r02", "b05", "b02", "b03", "g03", "g05"]);
        game.play_card(0, 0, "z3");
        game.play_card(1, 0, "y13");
        game.play_card(2, 0, "b02");
        game.play_card(3, 0, "r02");
        game.play_card(4, 0, "y05");
        game.play_card(5, 0, "g05");
        game.give_trick_to(0);
    });
};

</script>

        </div>



<!--        <div class="content">
            <h1><span class="font-semi-bold">Gambling Foo</span> <span class="smaller">A RESTful gaming service</span></h1>
            <p class="lead">
                Play a nice game of cards?<br>
                <br>
                <strong>Player {{player+1}} view</strong><br>
                <strong> Table </strong><br>
                {% for player,card in played_cards %}
                  ||
                  {{player.name}}: {{card}}
                {% endfor %}
                ||
                <br>
                <sub>
                <strong>Tricks:</strong>
                {% for player,_ in last_trick %}
                  ||
                  {{player.name}}: {{player.tricks_taken}}
                {% endfor %}
                ||
                <br>
                <strong>Last Trick:</strong>
                {% for player,card in last_trick %}
                  ||
                  {{player.name}}: {{card}}
                {% endfor %}
                ||
                </sub>
                <br>
                <strong> Your cards: </strong>
            <ul>
                <li>
                    <strong>Trump Card: {{trump_card}}</strong><br>
                    <strong>Trump Color: {{trump_color}}</strong><br>
                </li>

                {% for card in cards %}
                    <li>
                        <strong>>card {{loop.index}} is: {{card}} </strong><br>
                         {% if playerActive and not choose_trump_color %}
                            &lt;!&ndash;
                            <a href="/player/{{player}}/play/{{loop.index0}}">play card {{loop.index}}&lt;{{card}}&gt;</a>
                            <div style="background-color:#D94A38;width:170px;height:80px;margin:20px;padding-top:20px;color:#ffffff;font-weight:bold;font-size:18px;float:left;text-align:center;" onclick="playCard({{loop.index0}})">Play Me</div>
                            &ndash;&gt;
                        <button onclick="playCard({{loop.index0}})">Play {{card}}</button>
                        {% endif %}
                    </li>
                {% endfor %}
                {% if choose_trump_color and (player == choose_trump_player) %}
                <strong>Choose Trump Color:</strong>
                &lt;!&ndash;
                <a href="/player/{{player}}/set_trump/r">Red&gt;</a>
                <a href="/player/{{player}}/set_trump/g">Green&gt;</a>
                <a href="/player/{{player}}/set_trump/b">Blue&gt;</a>
                <a href="/player/{{player}}/set_trump/y">Yellow &gt;</a>
                &ndash;&gt;
                <button onclick="setTrumpColor('r')">Red</button>
                <button onclick="setTrumpColor('g')">Green</button>
                <button onclick="setTrumpColor('b')">Blue</button>
                <button onclick="setTrumpColor('y')">Yellow</button>
                {% endif %}
            &lt;!&ndash;
                <li>
                    <strong>Movie by IMDB code</strong><br>
                    <a href="/api/movie/tt0096754">GET /api/movie/{imdb_number}</a>
                </li>
                <li>
                    <strong>Top 10 Movies (by IMDB score)</strong><br>
                    <a href="/api/movie/top">GET /api/movie/top</a>
                </li>
                <li>
                    <strong>All genres</strong><br>
                    <a href="/api/movie/genre/all">GET /api/movie/genre/all</a>
                </li>
                <li>
                    <strong>Top movies for a given genres</strong><br>
                    <a href="/api/movie/genre/sci-fi">GET /api/movie/genre/{genre}</a>
                </li>
&ndash;&gt;
            </ul>
            </p>

            <p class="disclaimer">
                Spam Bacon Sausage + Spam
                Spam Spam Spam Spam Spam
                  Spam Baked Beans Spam
                  Spam Spam + Spam

            </p>
        </div>-->


{% endblock %}