Flummi/skipbo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

...

Browse Source
This commit is contained in:
Flummi
2018-08-13 10:18:51 +02:00
parent 671dab33d4
commit 2061d936b7
6 changed files with 44 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/static/index.html
View File

@@ -5,7 +5,7 @@
<link rel="stylesheet" href="./css/msgbox.css" /> <link rel="stylesheet" href="./css/msgbox.css" />
</head> </head>
<body> <body>
<div id="menu" style="display: none"> <div id="menu" style="display: block">
<div id="menu_title">Menu</div> <div id="menu_title">Menu</div>
<div class="menu_new"> <div class="menu_new">
<button class="menu_new">new</button> <button class="menu_new">new</button>
@@ -14,7 +14,7 @@
<button class="menu_join">join</button> <button class="menu_join">join</button>
</div> </div>
</div> </div>
<div id="black" style="display: none"></div> <div id="black" style="display: block"></div>
<div id="layer_game"> <div id="layer_game">
<div id="debug" style="display: none"> <div id="debug" style="display: none">
<a href="#" id="newcard">new card</a> <a href="#" id="newcard">new card</a>
@@ -29,8 +29,18 @@
<div id="log"></div> <div id="log"></div>
<div id="spielfeld" style="display: block"> <div id="spielfeld" style="display: block">
<div id="player"> <div id="player">
<div id="player1" class="player">
<div id="player1_name" class="playername">Spieler 2</div>
<div id="player1_pile" class="pile">
<div id="player1_stock" class="pileslot"></div>
<div id="player1_pile_slot_0" class="pileslot"></div>
<div id="player1_pile_slot_1" class="pileslot"></div>
<div id="player1_pile_slot_2" class="pileslot"></div>
<div id="player1_pile_slot_3" class="pileslot"></div>
</div>
</div>
<div id="player2" class="player"> <div id="player2" class="player">
<div id="player2_name" class="playername">Spieler 2</div> <div id="player2_name" class="playername">Spieler 3</div>
<div id="player2_pile" class="pile"> <div id="player2_pile" class="pile">
<div id="player2_stock" class="pileslot"></div> <div id="player2_stock" class="pileslot"></div>
<div id="player2_pile_slot_0" class="pileslot"></div> <div id="player2_pile_slot_0" class="pileslot"></div>
@@ -39,16 +49,6 @@
<div id="player2_pile_slot_3" class="pileslot"></div> <div id="player2_pile_slot_3" class="pileslot"></div>
</div> </div>
</div> </div>
<div id="player3" class="player">
<div id="player3_name" class="playername">Spieler 3</div>
<div id="player3_pile" class="pile">
<div id="player3_stock" class="pileslot"></div>
<div id="player3_pile_slot_0" class="pileslot"></div>
<div id="player3_pile_slot_1" class="pileslot"></div>
<div id="player3_pile_slot_2" class="pileslot"></div>
<div id="player3_pile_slot_3" class="pileslot"></div>
</div>
</div>
</div> </div>
<div id="mainstock"> <div id="mainstock">
<div id="mainstock_pile"> <div id="mainstock_pile">
@@ -59,22 +59,22 @@
</div> </div>
</div> </div>
<div id="player_self" class="player"> <div id="player_self" class="player">
<div id="player1_name" class="playername">Spieler 1</div> <div id="player0_name" class="playername">Spieler 1</div>
<div id="player1_pile" class="pile"> <div id="player0_pile" class="pile">
<div id="player1_stock" class="pileslot"></div> <div id="player0_stock" class="pileslot"></div>
<div id="player1_pile_slot_0" class="pileslot" dropable="true"></div> <div id="player0_pile_slot_0" class="pileslot" dropable="true"></div>
<div id="player1_pile_slot_1" class="pileslot" dropable="true"></div> <div id="player0_pile_slot_1" class="pileslot" dropable="true"></div>
<div id="player1_pile_slot_2" class="pileslot" dropable="true"></div> <div id="player0_pile_slot_2" class="pileslot" dropable="true"></div>
<div id="player1_pile_slot_3" class="pileslot" dropable="true"></div> <div id="player0_pile_slot_3" class="pileslot" dropable="true"></div>
</div> </div>
<div id="player1_hand" class="pile"> <div id="player0_hand" class="pile">
<div id="player1_hand_slot_0" class="handslot"></div> <div id="player0_hand_slot_0" class="handslot"></div>
<div id="player1_hand_slot_1" class="handslot"></div> <div id="player0_hand_slot_1" class="handslot"></div>
<div id="player1_hand_slot_2" class="handslot"></div> <div id="player0_hand_slot_2" class="handslot"></div>
<div id="player1_hand_slot_3" class="handslot"></div> <div id="player0_hand_slot_3" class="handslot"></div>
<div id="player1_hand_slot_4" class="handslot"></div> <div id="player0_hand_slot_4" class="handslot"></div>
</div> </div>
</div> </div>
</div> </div>

7
src/static/js/events.js
View File

@@ -26,8 +26,11 @@ const dragEnd = e => {
if(dropto !== null) { if(dropto !== null) {
const [pstack, ptype, , ppileid] = activeElement.parentNode.id.split("_"); const [pstack, ptype, , ppileid] = activeElement.parentNode.id.split("_");
const [mstack, , , mpileid] = dropto.id.split("_"); const [mstack, , , mpileid] = dropto.id.split("_");
const pile = game.stackables.getID(parseInt(pstack.slice(-1)))[ptype][ppileid]; const pile = game.stackables.getID(parseInt(pstack.slice(-1)))[ptype][ppileid];
let from = pile.splice(-1)[0]; console.log(pile);
/*let from = pile.splice(-1)[0];
let to = game.mainstack[mpileid]; let to = game.mainstack[mpileid];
let last = to[to.length - 1] || { val: 0 }; let last = to[to.length - 1] || { val: 0 };
@@ -43,7 +46,7 @@ const dragEnd = e => {
log.scrollTop = log.scrollHeight; log.scrollTop = log.scrollHeight;
render.render(game.stackables.getName(parseInt(pstack.slice(-1)))); render.render(game.stackables.getName(parseInt(pstack.slice(-1))));
render.renderMain(); render.renderMain();*/
} }
activeElement.style.display = "block"; activeElement.style.display = "block";
activeElement = null; activeElement = null;

2
src/static/js/game.js
View File

@@ -14,7 +14,7 @@ export function player(id) {
Map.prototype.getID = function(id) { Map.prototype.getID = function(id) {
for(let [key, val] of this.entries()) for(let [key, val] of this.entries())
if(val.id === id) if(val.id === parseInt(id))
return val; return val;
}; };
Map.prototype.getName = function(id) { Map.prototype.getName = function(id) {

8
src/static/js/render.js
View File

@@ -7,7 +7,7 @@ const clear = player => {
_player.pile.forEach((slots, slotid) => { _player.pile.forEach((slots, slotid) => {
document.querySelector(`#player${_player.id}_pile_slot_${slotid}`).innerHTML = ""; document.querySelector(`#player${_player.id}_pile_slot_${slotid}`).innerHTML = "";
}); });
if(_player.id === 1) { if(_player.id === 0) {
_player.hand.forEach((slots, slotid) => { _player.hand.forEach((slots, slotid) => {
document.querySelector(`#player${_player.id}_hand_slot_${slotid}`).innerHTML = ""; document.querySelector(`#player${_player.id}_hand_slot_${slotid}`).innerHTML = "";
}); });
@@ -26,7 +26,7 @@ export const render = player => {
_player.pile.forEach((slots, slotid) => { _player.pile.forEach((slots, slotid) => {
slots.forEach(card => { slots.forEach(card => {
document.querySelector(`#player${_player.id}_pile_slot_${slotid}`).insertAdjacentHTML("beforeend", document.querySelector(`#player${_player.id}_pile_slot_${slotid}`).insertAdjacentHTML("beforeend",
[{ val: card.val, draggable: _player.id === 1 }].map(card.type === "joker" ? tpl.joker : tpl.card).join`` [{ val: card.val, draggable: _player.id === 0 }].map(card.type === "joker" ? tpl.joker : tpl.card).join``
); );
}); });
}); });
@@ -34,7 +34,7 @@ export const render = player => {
if(_player.hand) { if(_player.hand) {
_player.hand.forEach((card, slotid) => { _player.hand.forEach((card, slotid) => {
document.querySelector(`#player${_player.id}_hand_slot_${slotid}`).insertAdjacentHTML("beforeend", document.querySelector(`#player${_player.id}_hand_slot_${slotid}`).insertAdjacentHTML("beforeend",
[{ val: card.val, draggable: _player.id === 1 }].map(card.type === "joker" ? tpl.joker : tpl.card).join`` [{ val: card.val, draggable: _player.id === 0 }].map(card.type === "joker" ? tpl.joker : tpl.card).join``
); );
}); });
} }
@@ -42,7 +42,7 @@ export const render = player => {
_player.stock.forEach(card => { _player.stock.forEach(card => {
console.log(card); console.log(card);
document.querySelector(`#player${_player.id}_stock`).insertAdjacentHTML("beforeend", document.querySelector(`#player${_player.id}_stock`).insertAdjacentHTML("beforeend",
[{ val: card.val, draggable: _player.id === 1 }].map(card.type === "joker" ? tpl.joker : tpl.card).join`` [{ val: card.val, draggable: _player.id === 0 }].map(card.type === "joker" ? tpl.joker : tpl.card).join``
); );
}); });
} }

11
src/static/js/socket.js
View File

@@ -42,12 +42,15 @@ const socketevents = () => {
render.renderAll(); render.renderAll();
_game.player.forEach((player, i) => { _game.player.forEach((player, i) => {
game.stackables.set(player[0], new game.player(i+1)); game.stackables.set(player[0], new game.player(i));
const _player = game.stackables.get(player[0]); const _player = game.stackables.get(player[0]);
_player.id = i;
player[1].cards.hand.forEach(card => { if(i === 0) {
_player.hand.push(new game.card({ type: card === 13 ? "joker" : "normal", val: card === 13 ? "" : card })); player[1].cards.hand.forEach(card => {
}); _player.hand.push(new game.card({ type: card === 13 ? "joker" : "normal", val: card === 13 ? "" : card }));
});
}
player[1].cards.stock.forEach(card => { player[1].cards.stock.forEach(card => {
_player.stock.push(new game.card({ type: card === 13 ? "joker" : "normal", val: card === 13 ? "" : card })); _player.stock.push(new game.card({ type: card === 13 ? "joker" : "normal", val: card === 13 ? "" : card }));
}); });

2
src/static/js/tpl.js
View File

@@ -13,7 +13,7 @@ const colors = {
10: "red", 10: "red",
11: "red", 11: "red",
12: "red" 12: "red"
} };
export const tpl = { export const tpl = {
card: ({ val, draggable = false }) => ` card: ({ val, draggable = false }) => `