test test
This commit is contained in:
parent
987e668e32
commit
7a8d362af1
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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``;
|
|
@ -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();
|
|
@ -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">
|
||||||
|
|
|
@ -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");
|
Loading…
Reference in New Issue
Block a user