cowiz20/templates/home/gplayer.html

206 lines
7.1 KiB
HTML
Raw Normal View History

{% extends "/shared/_layout.html" %}
{% block content %}
<script>
function playCard(card) {
2020-12-06 22:28:45 +01:00
let player = "{{player}}";
let c = card.toString();
var msg = {
type: "message",
fct: "playcard",
player: player,
card: c
};
let t = JSON.stringify(msg);
window.game_socket.send(t);
}
function setTrumpColor(color) {
2020-12-06 22:28:45 +01:00
let player = "{{player}}"
var msg = {
type: "message",
fct: "setTrumpColor",
player: player,
color: color
};
let t = JSON.stringify(msg);
window.game_socket.send(t);
}
2020-12-14 23:07:03 +01:00
</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>
2020-12-14 23:07:03 +01:00
<script>
//let game = null;
//window.game = null;
2020-12-06 22:28:45 +01:00
//window.onload = function()
2020-12-14 23:07:03 +01:00
function setupGame(names, hand)
{
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)
{
2020-11-30 23:16:05 +01:00
loader.add("mask", "/js-cardgame/deck/mask.png");
loader.add("back", "/js-cardgame/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);
2020-11-30 23:16:05 +01:00
loader.add(name, "/js-cardgame/deck/" + name + ".jpg");
});
}
for (let i = 1; i < 5; i++) {
2020-11-30 23:16:05 +01:00
loader.add("z" + i, "/js-cardgame/deck/z" + i + ".jpg");
loader.add("n" + i, "/js-cardgame/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);
2020-12-06 22:28:45 +01:00
//game.init(['Hubert', 'Struppi', 'Patrice', 'Steffi', "Max", "Renate"]);
game.init(names)
2020-12-14 23:07:03 +01:00
game.give_round(hand)
//game.give_round(["z3", "b04", "r08", "g12", "y13", "r02", "b05", "b02", "b03", "g03", "g05"]);
2020-12-06 22:28:45 +01:00
//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);
2021-01-20 22:38:12 +01:00
window.the_game = game;
});
};
</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 %}