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

...

Browse Source
This commit is contained in:
Flummi 2018-08-06 20:34:05 +02:00
parent 5eea2c82ec
commit 39dff70a1b
6 changed files with 378 additions and 298 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/static/index.html
View File

@ -1,7 +1,7 @@
<!doctype blah> <!doctype blah>
<html> <html>
<head> <head>
<link rel="stylesheet" href="./test.css" /> <link rel="stylesheet" href="./main.css" />
</head> </head>
<body> <body>
<div id="debug"> <div id="debug">
@ -13,7 +13,6 @@
<option>10</option><option>11</option><option>12</option> <option>10</option><option>11</option><option>12</option>
<option>Skip-Bo</option> <option>Skip-Bo</option>
</select> </select>
<a href="#" id="delcard">del card</a>
</div> </div>
<div id="spielfeld"> <div id="spielfeld">
<div id="player"> <div id="player">
@ -21,39 +20,48 @@
<div id="player2_name" class="playername">Spieler 2</div> <div id="player2_name" class="playername">Spieler 2</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_slot0" class="pileslot"></div> <div id="player2_pile_slot_0" class="pileslot"></div>
<div id="player2_pile_slot1" class="pileslot"></div> <div id="player2_pile_slot_1" class="pileslot"></div>
<div id="player2_pile_slot2" class="pileslot"></div> <div id="player2_pile_slot_2" class="pileslot"></div>
<div id="player2_pile_slot3" class="pileslot"></div> <div id="player2_pile_slot_3" class="pileslot"></div>
</div> </div>
</div> </div>
<div id="player3" class="player"> <div id="player3" class="player">
<div id="player3_name" class="playername">Spieler 3</div> <div id="player3_name" class="playername">Spieler 3</div>
<div id="player3_pile" class="pile"> <div id="player3_pile" class="pile">
<div id="player3_stock" class="pileslot"></div> <div id="player3_stock" class="pileslot"></div>
<div id="player3_pile_slot0" class="pileslot"></div> <div id="player3_pile_slot_0" class="pileslot"></div>
<div id="player3_pile_slot1" class="pileslot"></div> <div id="player3_pile_slot_1" class="pileslot"></div>
<div id="player3_pile_slot2" class="pileslot"></div> <div id="player3_pile_slot_2" class="pileslot"></div>
<div id="player3_pile_slot3" class="pileslot"></div> <div id="player3_pile_slot_3" class="pileslot"></div>
</div> </div>
</div> </div>
</div> </div>
<div id="mainstock"> <div id="mainstock">
<div id="mainstock_pile"> <div id="mainstock_pile">
<div id="mainstock_pile_slot0" class="mainstock_pile"></div> <div id="mainstock_pile_slot_0" class="mainstock_pile" dropable="true"></div>
<div id="mainstock_pile_slot1" class="mainstock_pile"></div> <div id="mainstock_pile_slot_1" class="mainstock_pile" dropable="true"></div>
<div id="mainstock_pile_slot2" class="mainstock_pile"></div> <div id="mainstock_pile_slot_2" class="mainstock_pile" dropable="true"></div>
<div id="mainstock_pile_slot3" class="mainstock_pile"></div> <div id="mainstock_pile_slot_3" class="mainstock_pile" dropable="true"></div>
</div> </div>
</div> </div>
<div id="player1" class="player"> <div id="player_self" class="player">
<div id="player1_name" class="playername">Spieler 1</div> <div id="player1_name" class="playername">Spieler 1</div>
<div id="player1_pile" class="pile"> <div id="player1_pile" class="pile">
<div id="player1_stock" class="pileslot"></div> <div id="player1_stock" class="pileslot"></div>
<div id="player1_pile_slot0" class="pileslot"></div> <div id="player1_pile_slot_0" class="pileslot"></div>
<div id="player1_pile_slot1" class="pileslot"></div> <div id="player1_pile_slot_1" class="pileslot"></div>
<div id="player1_pile_slot2" class="pileslot"></div> <div id="player1_pile_slot_2" class="pileslot"></div>
<div id="player1_pile_slot3" class="pileslot"></div> <div id="player1_pile_slot_3" class="pileslot"></div>
</div>
<div id="player1_hand" class="pile">
<div id="player1_hand_slot_0" class="handslot"></div>
<div id="player1_hand_slot_1" class="handslot"></div>
<div id="player1_hand_slot_2" class="handslot"></div>
<div id="player1_hand_slot_3" class="handslot"></div>
<div id="player1_hand_slot_4" class="handslot"></div>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,7 +1,15 @@
import * as render from "./render.js";
let debug = true;
let activeElement, droptimer; let activeElement, droptimer;
let dropto = null; let dropto = null;
const allowDrop = e => {
if(debug) console.log("dropover");
e.preventDefault();
};
const dragstart = e => { const dragstart = e => {
if(debug) console.log("dragstart");
e.dataTransfer.setData("text", e.target.id); e.dataTransfer.setData("text", e.target.id);
activeElement = e.target; activeElement = e.target;
setTimeout(() => { setTimeout(() => {
@ -10,36 +18,71 @@ const dragstart = e => {
}; };
const dragEnd = e => { const dragEnd = e => {
if(debug) console.log("dragend");
e.preventDefault(); e.preventDefault();
if(dropto !== null) { if(dropto !== null) {
activeElement.parentNode.removeChild(activeElement); const [pstack, , , ppileid] = activeElement.parentNode.id.split("_");
dropto.insertAdjacentHTML("beforeend", activeElement.innerHTML); const [mstack, , , mpileid] = dropto.id.split("_");
const pile = render.stackables.getID(parseInt(pstack.slice(-1))).pile[ppileid];
let from = pile.splice(-1)[0];
let to = render.mainstack[mpileid];
let last = to[to.length - 1] || { val: 0 };
if(from.type === "joker")
from.val = last.val + 1;
(last.val + 1 === from.val ? to : pile).push(from);
if(last.val + 1 === 12) {
console.log(from.val);
render.mainstack[mpileid] = [];
console.log(render.mainstack);
}
render.renderAll();
//dropto.insertAdjacentHTML("beforeend", `<div class="card_outer" data-val="${activeElement.dataset.val}">${activeElement.innerHTML}</div>`);
//activeElement.parentNode.removeChild(activeElement);
} }
activeElement.style.display = "block"; activeElement.style.display = "block";
activeElement = null; activeElement = null;
dragleave(e);
}; };
document.querySelectorAll(".mainstock_pile").forEach(slot => { const dragenter = e => {
slot.addEventListener("dragenter", e => { if(debug) console.log("dragenter");
e.preventDefault(); e.preventDefault();
clearTimeout(droptimer); clearTimeout(droptimer);
e.target.classList.add("over"); e.target.classList.add("over");
dropto = e.target; dropto = e.target;
}); };
slot.addEventListener("dragleave", e => {
e.preventDefault(); const dragleave = e => {
e.target.classList.remove("over"); if(debug) console.log("dragleave");
droptimer = setTimeout(() => { e.preventDefault();
dropto = null; removeOver();
}, 100); droptimer = setTimeout(() => {
dropto = null;
}, 100);
};
const removeOver = () => {
document.querySelectorAll("div[dropable='true']").forEach(slot => {
slot.classList.remove("over");
}); });
};
document.querySelectorAll("div[dropable='true']").forEach(slot => {
slot.addEventListener("dragover", allowDrop);
slot.addEventListener("dragenter", dragenter);
slot.addEventListener("dragleave", dragleave);
}); });
export default ({ export default ({
createCardEvents: () => { createCardEvents: () => {
document.querySelectorAll(".card_outer").forEach(card => { document.querySelectorAll(".card_outer[draggable='true']").forEach(card => {
card.addEventListener("dragstart", dragstart); card.addEventListener("dragstart", dragstart);
card.addEventListener("dragend", dragEnd); card.addEventListener("dragend", dragEnd);
}); });
} }
}); });

34
src/static/js/main.js
View File

@ -14,18 +14,24 @@ function player(id) {
this.stock = []; this.stock = [];
} }
render.stackables.set("Test", new player(2)); render.stackables.set("P1", new player(1));
render.stackables.get("Test").pile[0].push(new card({ type: "joker", val: 12 })); render.stackables.get("P1").pile[0].push(new card({ val: 12 }));
render.stackables.get("Test").pile[1].push(new card({ val: 3 })); render.stackables.get("P1").pile[1].push(new card({ val: 11 }));
render.stackables.get("Test").pile[2].push(new card({ val: 4 })); render.stackables.get("P1").pile[2].push(new card({ val: 2 }));
render.stackables.get("Test").pile[2].push(new card({ val: 12 })); render.stackables.get("P1").pile[2].push(new card({ val: 1 }));
render.stackables.get("P1").pile[2].push(new card({ type: "joker" }));
render.stackables.set("blah", new player(3)); render.stackables.set("P2", new player(2));
render.stackables.get("blah").pile[2].push(new card({ val: 5 })); render.stackables.get("P2").pile[0].push(new card({ type: "joker", val: 12 }));
render.stackables.get("P2").pile[1].push(new card({ val: 3 }));
render.stackables.get("P2").pile[2].push(new card({ val: 4 }));
render.stackables.get("P2").pile[2].push(new card({ val: 12 }));
render.mainstack[1].push(new card({ val: 2 })); render.stackables.set("P3", new player(3));
render.stackables.get("P3").pile[2].push(new card({ val: 5 }));
render.mainstack[1].push(new card({ val: 10 }));
render.renderAll(); render.renderAll();
render.clear("Test");
document.querySelector("#debug > #newcard").addEventListener("click", () => { document.querySelector("#debug > #newcard").addEventListener("click", () => {
const selcard = document.querySelector("#debug > #selcard"); const selcard = document.querySelector("#debug > #selcard");
@ -37,13 +43,3 @@ document.querySelector("#debug > #newcard").addEventListener("click", () => {
})); }));
render.render("Test"); render.render("Test");
}); });
document.querySelector("#debug > #delcard").addEventListener("click", () => {
/*document.querySelector("#player2_pile_slot2").removeChild(
document.querySelector("#player2_pile_slot2 > .card_outer:last-child")
);*/
console.log(render.stackables.get("Test").pile[0]);
render.stackables.get("Test").pile[0].pop();
console.log(render.stackables.get("Test").pile[0]);
render.render("Test");
});

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

@ -7,25 +7,24 @@ export let mainstack = Array(4).fill().map(()=>[]);
export const clear = player => { export const clear = player => {
const _player = stackables.get(player); const _player = stackables.get(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 = "";
}); });
}; };
const clearMain = () => { const clearMain = () => {
mainstack.forEach((cards, slotid) => { mainstack.forEach((cards, slotid) => document.querySelector(`#mainstock_pile_slot_${slotid}`).innerHTML = "");
document.querySelector(`#mainstock_pile_slot${slotid}`).innerHTML = "";
});
}; };
const clearAll = () => { export const clearAll = () => {
clearMain();
stackables.forEach((e, player) => clear(player));
}; };
export const render = player => { export const render = player => {
clear(player);
const _player = stackables.get(player); const _player = stackables.get(player);
document.querySelector(`#player${_player.id}_name`).innerHTML = player.toString();
_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 }].map(card.type === "joker" ? tpl.joker : tpl.card).join`` [{ val: card.val, draggable: _player.id === 1 }].map(card.type === "joker" ? tpl.joker : tpl.card).join``
); );
}); });
}); });
@ -34,13 +33,20 @@ export const render = player => {
export const renderMain = () => { export const renderMain = () => {
mainstack.forEach((cards, slotid) => { mainstack.forEach((cards, slotid) => {
cards.forEach(card => { cards.forEach(card => {
document.querySelector(`#mainstock_pile_slot${slotid}`).insertAdjacentHTML("beforeend", document.querySelector(`#mainstock_pile_slot_${slotid}`).insertAdjacentHTML("beforeend",
[{ val: card.val }].map(card.type === "joker" ? tpl.joker : tpl.card).join`` [{ val: card.val }].map(card.type === "joker" ? tpl.joker : tpl.card).join``
); );
}); });
}); });
}; };
export const renderAll = () => { export const renderAll = () => {
clearAll();
stackables.forEach((e, player) => render(player)); stackables.forEach((e, player) => render(player));
renderMain(); renderMain();
};
Map.prototype.getID = function(id) {
for(let [key, val] of this.entries())
if(val.id === id)
return val;
}; };

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

@ -14,16 +14,16 @@ const colors = {
} }
export default { export default {
card: ({ val }) => ` card: ({ val, draggable = false }) => `
<div class="card_outer" draggable="true"> <div class="card_outer"${draggable?" draggable=true":""} data-val="${val}">
<div class="card_tri card_color_${colors[val]}"></div> <div class="card_tri card_color_${colors[val]}"></div>
<div class="card_number card_number_1">${val}</div> <div class="card_number card_number_1">${val}</div>
<div class="card_number_middle ${colors[val]}">${val}</div> <div class="card_number_middle ${colors[val]}">${val}</div>
<div class="card_number card_number_2">${val}</div> <div class="card_number card_number_2">${val}</div>
</div> </div>
`, `,
joker: ({ val = 0 }) => ` joker: ({ val = 0, draggable = false }) => `
<div class="card_outer" draggable="true"> <div class="card_outer"${draggable?" draggable=true":""} data-val="${val}">
<div class="card_tri card_color_joker"></div> <div class="card_tri card_color_joker"></div>
<div class="card_number card_number_joker_1">${val}</div> <div class="card_number card_number_joker_1">${val}</div>
<div class="card_number_joker_middle">Skip-Bo</div> <div class="card_number_joker_middle">Skip-Bo</div>

485
src/static/test.css → src/static/main.css
View File

@ -1,230 +1,257 @@
* { html, body {
margin: 0; height: 100%;
padding: 0; min-height: 100%;
overflow: hidden; }
position: relative; * {
background-color: rgb(18, 153, 0); margin: 0;
} padding: 0;
overflow: hidden;
#debug { position: relative;
position: absolute; user-drag: none;
bottom: 0; user-select: none;
z-index: 999; }
}
#debug {
#spielfeld { position: absolute;
display: grid; bottom: 0;
grid-template-rows: 1fr auto 1fr; z-index: 999;
grid-template-columns: 1fr; }
grid-row-gap: 40px;
height: 100%; .player {
} height: 200px;
box-sizing: border-box;
#player { border-style: none solid solid solid;
width: 98%; border-bottom-left-radius: 10px;
height: 200px; border-bottom-right-radius: 10px;
margin: auto; }
display: grid; .playername {
grid-column-gap: 5px; text-align: center;
grid-template-columns: repeat(2, 1fr); font-weight: bold;
} }
.player { .pile {
box-sizing: border-box; width: 95%;
border-style: none solid solid solid; margin: auto;
border-bottom-left-radius: 10px; height: 160px;
border-bottom-right-radius: 10px; display: grid;
} grid-template-columns: 2fr repeat(4, 1fr);
#player1 { grid-column-gap: 2px;
width: 95%; }
margin: auto; .pileslot {
border-top-left-radius: 10px; width: 110px;
border-top-right-radius: 10px; border: 1px solid #000;
border-bottom-left-radius: 0 !important; background-color: #fff;
border-bottom-right-radius: 0 !important; border-radius: 10px;
border-style: solid solid none solid; }
} .handslot {
.playername { width: 110px;
text-align: center; border: 1px solid #000;
font-weight: bold; background-color: #fff;
} border-radius: 10px;
}
.pile {
width: 95%; #mainstock_pile {
margin: auto; width: 500px;
height: 160px; height: 200px;
display: grid; display: grid;
grid-template-columns: 2fr repeat(4, 1fr); margin: auto;
grid-column-gap: 2px; grid-template-columns: repeat(4, 1fr);
} }
.pileslot { .mainstock_pile {
width: 110px; width: 110px;
border: 1px solid #000; height: 160px;
background-color: #fff !important; border: 1px solid #000;
border-radius: 10px; background-color: #fff;
} border-radius: 10px;
}
.pileslot:nth-child(0) {
border: 0; .card_outer {
} height: 100%;
width: 100%;
#mainstock_pile { position: absolute;
width: 500px; }
height: 200px; .card_tri {
display: grid; position: absolute;
margin: auto; height: 140px;
grid-template-columns: repeat(4, 1fr); width: 90px;
} top: 50%;
.mainstock_pile { left: 50%;
width: 110px; transform: translate(-50%, -50%);
height: 160px; border-radius: 10px;
border: 1px solid #000; }
background-color: #fff; .card_color_green {
border-radius: 10px; background: linear-gradient(
} 45deg,
#63b846 20%,
.card_outer { white 20%,
height: 100%; white 80%,
width: 100%; #63b846 80%
background-color: #fff; );
position: absolute; }
} .card_color_red {
.card_tri { background: linear-gradient(
position: absolute; 45deg,
height: 140px; #d41389 20%,
width: 90px; white 20%,
top: 50%; white 80%,
left: 50%; #d41389 80%
transform: translate(-50%, -50%); );
border-radius: 10px; }
} .card_color_blue {
.card_color_green { background: linear-gradient(
background: linear-gradient( 45deg,
45deg, #27388b 20%,
#63b846 20%, white 20%,
white 20%, white 80%,
white 80%, #27388b 80%
#63b846 80%, );
white 80%, }
#63b846 80% .green {
); color: #63b846;
} }
.card_color_red { .red {
background: linear-gradient( color: #d41389;
45deg, }
#d41389 20%, .blue {
white 20%, color: #27388b;
white 80%, }
#d41389 80%, .card_color_joker {
white 80%, background: linear-gradient(
#d41389 80% 45deg,
); #27388b 6.66%,
} #63b846 6.66%,
.card_color_blue { #63b846 13.33%,
background: linear-gradient( #d41389 13.33%,
45deg, #d41389 20%,
#27388b 20%, white 20%,
white 20%, white 80%,
white 80%, #d41389 80%,
#27388b 80%, #d41389 86.66%,
white 80%, #63b846 86.66%,
#27388b 80% #63b846 93.33%,
); #27388b 93.33%
} );
.green { }
color: #63b846; .card_number {
} position: absolute;
.red { font-size: 18pt;
color: #d41389; font-weight: bold;
} }
.blue { .card_number_middle {
color: #27388b; position: absolute;
} top: 50%;
.card_color_joker { left: 50%;
background: linear-gradient( transform: translate(-50%, -50%);
45deg, font-size: 30pt;
#27388b 6.66%, font-weight: bold;
#63b846 6.66%, }
#63b846 13.33%, .card_number_1 {
#d41389 13.33%, top: 10px;
#d41389 20%, left: 10px;
white 20%, }
white 80%, .card_number_2 {
#d41389 80%, bottom: 10px;
#d41389 86.66%, right: 10px;
#63b846 86.66%, }
#63b846 93.33%, .card_border {
#27388b 93.33% position: absolute;
); height: 100%;
} width: 100%;
.card_number { border: 1px solid #000;
position: absolute; border-radius: 10px;
font-size: 18pt; }
font-weight: bold; .card_number_joker_middle {
background-color: #fff; position: absolute;
} top: 50%;
.card_number_middle { left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 50%; font-size: 14pt;
left: 50%; width: 100%;
transform: translate(-50%, -50%); text-align: center;
font-size: 30pt; font-weight: bold;
font-weight: bold; }
background-color: #fff; .card_number_joker_1 {
} top: 28%;
.card_number_1 { left: 50%;
top: 10px; transform: translate(-50%, -28%);
left: 10px; }
} .card_number_joker_2 {
.card_number_2 { top: 75%;
bottom: 10px; left: 50%;
right: 10px; transform: translate(-50%, -75%);
} }
.card_border {
position: absolute; *[draggable=true] {
height: 100%; cursor: move;
width: 100%; }
border: 1px solid #000; [draggable] {
border-radius: 10px; -moz-user-select: none;
} -khtml-user-select: none;
.card_number_joker_middle { -webkit-user-select: none;
position: absolute; user-select: none;
top: 50%; -khtml-user-drag: element;
left: 50%; -webkit-user-drag: element;
transform: translate(-50%, -50%); }
font-size: 14pt;
width: 100%; .over {
background-color: #fff; border: 2px dashed #000;
text-align: center; }
font-weight: bold;
} .mainstock_pile * {
.card_number_joker_1 { pointer-events: none;
top: 28%; }
left: 50%;
transform: translate(-50%, -28%); #spielfeld {
} height: 100vh;
.card_number_joker_2 { background-color: rgb(18, 153, 0);
top: 75%; }
left: 50%;
transform: translate(-50%, -75%); #player {
} width: 95%;
height: 200px;
*[draggable=true] { display: grid;
cursor: move; grid-column-gap: 5px;
} grid-template-columns: repeat(2, 1fr);
[draggable] { position: fixed;
-moz-user-select: none; left: 50%;
-khtml-user-select: none; transform: translateX(-50%);
-webkit-user-select: none; }
user-select: none;
-khtml-user-drag: element; #mainstock {
-webkit-user-drag: element; height: 200px;
} width: 100%;
position: absolute;
.over { top: 50%;
border: 2px dashed #000; left: 50%;
} transform: translate(-50%, -50%);
}
.mainstock_pile * {
pointer-events: none; #player_self {
width: 95%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-style: solid solid none solid;
height: 200px;
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr auto;
grid-template-areas: "a a" "b c";
}
#player1_name {
grid-area: a;
}
#player1_hand {
grid-area: b;
grid-template-columns: repeat(5, 1fr) !important;
}
#player1_pile {
grid-area: c;
} }