test test

This commit is contained in:
Flummi 2018-08-15 17:52:50 +02:00
parent 987e668e32
commit 7a8d362af1
6 changed files with 30 additions and 26 deletions

View File

@ -215,7 +215,8 @@ div[dropable=true] > * > * {
} }
.player::before { .player::before {
content: 'Spielername'; /*content: 'Spielername';*/
content: attr(data-name);
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
display: block; display: block;

View File

@ -24,7 +24,7 @@
<div id="p0_pile_card_3" class="pile"></div> <div id="p0_pile_card_3" class="pile"></div>
<div id="p0_pile_card_4" class="pile"></div> <div id="p0_pile_card_4" class="pile"></div>
</div> </div>
<div id="p0_discard" class="player"> <div id="p0_discard" class="player" data-name="blah0">
<div id="p0_discard_0" class="pile"></div> <div id="p0_discard_0" class="pile"></div>
<div></div> <div></div>
<div id="p0_discard_1" class="pile" dropable="true"></div> <div id="p0_discard_1" class="pile" dropable="true"></div>
@ -32,7 +32,7 @@
<div id="p0_discard_3" class="pile" dropable="true"></div> <div id="p0_discard_3" class="pile" dropable="true"></div>
<div id="p0_discard_4" class="pile" dropable="true"></div> <div id="p0_discard_4" class="pile" dropable="true"></div>
</div> </div>
<div id="p1" class="player"> <div id="p1" class="player" data-name="blah1">
<div id="p1_pile_card_0" class="pile"></div> <div id="p1_pile_card_0" class="pile"></div>
<div></div> <div></div>
<div id="p1_pile_card_1" class="pile"></div> <div id="p1_pile_card_1" class="pile"></div>
@ -40,7 +40,7 @@
<div id="p1_pile_card_3" class="pile"></div> <div id="p1_pile_card_3" class="pile"></div>
<div id="p1_pile_card_4" class="pile"></div> <div id="p1_pile_card_4" class="pile"></div>
</div> </div>
<div id="p2" class="player"> <div id="p2" class="player" data-name="blah2">
<div id="p2_pile_card_0" class="pile"></div> <div id="p2_pile_card_0" class="pile"></div>
<div></div> <div></div>
<div id="p2_pile_card_1" class="pile"></div> <div id="p2_pile_card_1" class="pile"></div>
@ -48,7 +48,7 @@
<div id="p2_pile_card_3" class="pile"></div> <div id="p2_pile_card_3" class="pile"></div>
<div id="p2_pile_card_4" class="pile"></div> <div id="p2_pile_card_4" class="pile"></div>
</div> </div>
<div id="p3" class="player"> <div id="p3" class="player" data-name="blah3">
<div id="p3_pile_card_0" class="pile"></div> <div id="p3_pile_card_0" class="pile"></div>
<div></div> <div></div>
<div id="p3_pile_card_1" class="pile"></div> <div id="p3_pile_card_1" class="pile"></div>

View File

@ -1,9 +1,11 @@
const colors = [...Array(12)].map((_,i) => ["blue","green","red"][i % 3]).sort(); const colors = [...Array(12)].map((_,i) => ["blue","green","red"][i % 3]).sort();
export const card = ({ val, drag, joker = false }) => const cardtpl = ({ val, drag, joker = false }) =>
`<div class="card_outer" data-val="${val}"${drag ? 'draggable="true"' : ''}> `<div class="card_outer" data-val="${val}"${drag ? 'draggable="true"' : ''}>
<div class="card_tri card_color_${joker?"joker":colors[val]}"></div> <div class="card_tri card_color_${joker?"joker":colors[val-1]}"></div>
<div class="card_number card_number${joker?"_joker":""}_1">${val>0?val:""}</div> <div class="card_number card_number${joker?"_joker":""}_1">${val>0?val:""}</div>
<div class="card_number${joker?"_joker":""}_middle ${joker?"":colors[val]}">${joker?"Skip-Bo":val}</div> <div class="card_number${joker?"_joker":""}_middle ${joker?"":colors[val-1]}">${joker?"Skip-Bo":val}</div>
<div class="card_number card_number${joker?"_joker":""}_2">${val>0?val:""}</div> <div class="card_number card_number${joker?"_joker":""}_2">${val>0?val:""}</div>
</div>`; </div>`;
export const card = e => [e].map(cardtpl).join``;

View File

@ -10,11 +10,15 @@ document.querySelector("#menu button.menu_join").addEventListener("click", () =>
msgBox("joinGame"); msgBox("joinGame");
}); });
document.querySelector("#p0_pile_card_0").insertAdjacentHTML("beforeend", document.querySelector("#p0_discard_1").insertAdjacentHTML("beforeend",
[{ val: 0, drag: true, joker: true }].map(card).join`` card({ val: 0, drag: true, joker: true })
); );
document.querySelector("#p0_pile_card_1").insertAdjacentHTML("beforeend", document.querySelector("#p0_pile_card_1").insertAdjacentHTML("beforeend",
[{ val: 1, drag: true, joker: false }].map(card).join`` card({ val: 1, drag: true, joker: false })
);
document.querySelector("#mainstack_card_1").insertAdjacentHTML("beforeend",
card({ val: 4 })
); );
events.createCardEvents(); events.createCardEvents();

View File

@ -1,3 +1,5 @@
import { connect } from "./socket.js";
const msgBoxes = { const msgBoxes = {
tpl: ({ title, content, buttons }) => ` tpl: ({ title, content, buttons }) => `
<div class="msgBox"> <div class="msgBox">

View File

@ -1,3 +1,5 @@
import { msgBox, removeAllmsgBox } from "./msgbox.js";
let socket = false let socket = false
, _playername , _playername
, _gameroom; , _gameroom;
@ -36,20 +38,13 @@ const socketevents = () => {
document.querySelector("#menu").style.display = "none"; document.querySelector("#menu").style.display = "none";
document.querySelector("#black").style.display = "none"; document.querySelector("#black").style.display = "none";
render.renderAll();
_game.player.forEach((player, i) => { _game.player.forEach((player, i) => {
game.stackables.set(player[0], new game.player(i)); console.log(player);
const _player = game.stackables.get(player[0]);
_player.id = i;
if(i === 0) {
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.stock.push(new game.card({ type: card === 13 ? "joker" : "normal", val: card === 13 ? "" : card }));
});
render.renderAll();
}); });
}); });
}; };
const clear = playerid => {
console.log([...document.querySelectorAll(`div[id^='p${playerid}_']:not(#p0_discard)`)]);
}
clear("1");