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

aktueller Stand lel

Browse Source
This commit is contained in:
Flummi 2018-08-05 21:05:14 +02:00
parent a1cf96d596
commit 5eea2c82ec
7 changed files with 331 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/static/index.html
View File

@ -4,121 +4,60 @@
<link rel="stylesheet" href="./test.css" /> <link rel="stylesheet" href="./test.css" />
</head> </head>
<body> <body>
<div id="debug">
<a href="#" id="newcard">new card</a>
<select id="selcard">
<option>1</option><option>2</option><option>3</option>
<option>4</option><option>5</option><option>6</option>
<option>7</option><option>8</option><option>9</option>
<option>10</option><option>11</option><option>12</option>
<option>Skip-Bo</option>
</select>
<a href="#" id="delcard">del card</a>
</div>
<div id="spielfeld"> <div id="spielfeld">
<div id="player"> <div id="player">
<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 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_slot1" class="pileslot"> <div id="player2_pile_slot0" class="pileslot"></div>
<div class="card_outer"> <div id="player2_pile_slot1" class="pileslot"></div>
<div class="card_number1 card_number">1</div> <div id="player2_pile_slot2" class="pileslot"></div>
<div class="card_tri1_outer"> <div id="player2_pile_slot3" class="pileslot"></div>
<div class="card_tri1 card_border"></div>
</div>
<div class="card_middlenumber">1</div>
<div class="card_number2 card_number">1</div>
<div class="card_tri2_outer">
<div class="card_tri2 card_border"></div>
</div>
</div>
</div>
<div id="player2_pile_slot2" class="pileslot">
<div class="card_outer">
<div class="card_number1 card_number">2</div>
<div class="card_tri1_outer">
<div class="card_tri1 card_border"></div>
</div>
<div class="card_middlenumber">2</div>
<div class="card_number2 card_number">2</div>
<div class="card_tri2_outer">
<div class="card_tri2 card_border"></div>
</div>
</div>
</div>
<div id="player2_pile_slot3" class="pileslot">
<div class="card_outer">
<div class="card_number1 card_number">3</div>
<div class="card_tri1_outer">
<div class="card_tri1 card_border"></div>
</div>
<div class="card_middlenumber">3</div>
<div class="card_number2 card_number">3</div>
<div class="card_tri2_outer">
<div class="card_tri2 card_border"></div>
</div>
</div>
</div>
<div id="player2_pile_slot4" class="pileslot">
<div class="card_outer">
<div class="card_number1 card_number">4</div>
<div class="card_tri1_outer">
<div class="card_tri1 card_border"></div>
</div>
<div class="card_middlenumber">4</div>
<div class="card_number2 card_number">4</div>
<div class="card_tri2_outer">
<div class="card_tri2 card_border"></div>
</div>
</div>
</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_slot1" class="pileslot"></div> <div id="player3_pile_slot1" class="pileslot"></div>
<div id="player3_pile_slot2" class="pileslot"></div> <div id="player3_pile_slot2" class="pileslot"></div>
<div id="player3_pile_slot3" class="pileslot"></div> <div id="player3_pile_slot3" class="pileslot"></div>
<div id="player3_pile_slot4" 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_slot1" class="mainstock_pile"></div> <div id="mainstock_pile_slot1" class="mainstock_pile"></div>
<div id="mainstock_pile_slot2" class="mainstock_pile"> <div id="mainstock_pile_slot2" class="mainstock_pile"></div>
<div class="card_outer">
<div class="card_number1 card_number">4</div>
<div class="card_tri1_outer">
<div class="card_tri1 card_border"></div>
</div>
<div class="card_middlenumber">4</div>
<div class="card_number2 card_number">4</div>
<div class="card_tri2_outer">
<div class="card_tri2 card_border"></div>
</div>
</div>
</div>
<div id="mainstock_pile_slot3" class="mainstock_pile"></div> <div id="mainstock_pile_slot3" class="mainstock_pile"></div>
<div id="mainstock_pile_slot4" class="mainstock_pile"></div>
</div> </div>
</div> </div>
<div id="player1" class="player"> <div id="player1" 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_slot1" class="pileslot"></div> <div id="player1_pile_slot1" class="pileslot"></div>
<div id="player1_pile_slot2" class="pileslot"> <div id="player1_pile_slot2" class="pileslot"></div>
<div class="card_outer">
<div class="card_number1 card_number">4</div>
<div class="card_tri1_outer">
<div class="card_tri1 card_border"></div>
</div>
<div class="card_middlenumber">4</div>
<div class="card_number2 card_number">4</div>
<div class="card_tri2_outer">
<div class="card_tri2 card_border"></div>
</div>
</div>
</div>
<div id="player1_pile_slot3" class="pileslot"></div> <div id="player1_pile_slot3" class="pileslot"></div>
<div id="player1_pile_slot4" class="pileslot"></div>
</div> </div>
</div> </div>
</div> </div>
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>
<script src="./main.js" defer></script> <script src="./js/main.js" type="module" defer></script>
</body> </body>
</html> </html>

45
src/static/js/events.js Normal file
View File

@ -0,0 +1,45 @@
let activeElement, droptimer;
let dropto = null;
const dragstart = e => {
e.dataTransfer.setData("text", e.target.id);
activeElement = e.target;
setTimeout(() => {
activeElement.style.display = "none";
}, 100);
};
const dragEnd = e => {
e.preventDefault();
if(dropto !== null) {
activeElement.parentNode.removeChild(activeElement);
dropto.insertAdjacentHTML("beforeend", activeElement.innerHTML);
}
activeElement.style.display = "block";
activeElement = null;
};
document.querySelectorAll(".mainstock_pile").forEach(slot => {
slot.addEventListener("dragenter", e => {
e.preventDefault();
clearTimeout(droptimer);
e.target.classList.add("over");
dropto = e.target;
});
slot.addEventListener("dragleave", e => {
e.preventDefault();
e.target.classList.remove("over");
droptimer = setTimeout(() => {
dropto = null;
}, 100);
});
});
export default ({
createCardEvents: () => {
document.querySelectorAll(".card_outer").forEach(card => {
card.addEventListener("dragstart", dragstart);
card.addEventListener("dragend", dragEnd);
});
}
});

49
src/static/js/main.js Normal file
View File

@ -0,0 +1,49 @@
import * as render from "./render.js";
//import { render, renderAll, stackables, mainstack } from "./render.js";
//import events from "./events.js";
//const socket = io();
function card({ type = "normal", val = "" }) {
this.type = type;
this.val = val;
}
function player(id) {
this.id = id;
this.hand = Array(5).fill().map(()=>[]);
this.pile = Array(4).fill().map(()=>[]);
this.stock = [];
}
render.stackables.set("Test", new player(2));
render.stackables.get("Test").pile[0].push(new card({ type: "joker", val: 12 }));
render.stackables.get("Test").pile[1].push(new card({ val: 3 }));
render.stackables.get("Test").pile[2].push(new card({ val: 4 }));
render.stackables.get("Test").pile[2].push(new card({ val: 12 }));
render.stackables.set("blah", new player(3));
render.stackables.get("blah").pile[2].push(new card({ val: 5 }));
render.mainstack[1].push(new card({ val: 2 }));
render.renderAll();
render.clear("Test");
document.querySelector("#debug > #newcard").addEventListener("click", () => {
const selcard = document.querySelector("#debug > #selcard");
const selindex = selcard.selectedIndex;
const selval = selcard.options[selindex].textContent;
render.stackables.get("Test").pile[0].push(new card({
val: selval === "Skip-Bo" ? "" : selval,
type: selval === "Skip-Bo" ? "joker" : "normal"
}));
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");
});

46
src/static/js/render.js Normal file
View File

@ -0,0 +1,46 @@
import tpl from "./tpl.js";
import events from "./events.js";
export let stackables = new Map();
export let mainstack = Array(4).fill().map(()=>[]);
export const clear = player => {
const _player = stackables.get(player);
_player.pile.forEach((slots, slotid) => {
document.querySelector(`#player${_player.id}_pile_slot${slotid}`).innerHTML = "";
});
};
const clearMain = () => {
mainstack.forEach((cards, slotid) => {
document.querySelector(`#mainstock_pile_slot${slotid}`).innerHTML = "";
});
};
const clearAll = () => {
};
export const render = player => {
clear(player);
const _player = stackables.get(player);
_player.pile.forEach((slots, slotid) => {
slots.forEach(card => {
document.querySelector(`#player${_player.id}_pile_slot${slotid}`).insertAdjacentHTML("beforeend",
[{ val: card.val }].map(card.type === "joker" ? tpl.joker : tpl.card).join``
);
});
});
events.createCardEvents();
};
export const renderMain = () => {
mainstack.forEach((cards, slotid) => {
cards.forEach(card => {
document.querySelector(`#mainstock_pile_slot${slotid}`).insertAdjacentHTML("beforeend",
[{ val: card.val }].map(card.type === "joker" ? tpl.joker : tpl.card).join``
);
});
});
};
export const renderAll = () => {
stackables.forEach((e, player) => render(player));
renderMain();
};

33
src/static/js/tpl.js Normal file
View File

@ -0,0 +1,33 @@
const colors = {
1: "blue",
2: "blue",
3: "blue",
4: "blue",
5: "green",
6: "green",
7: "green",
8: "green",
9: "red",
10: "red",
11: "red",
12: "red"
}
export default {
card: ({ val }) => `
<div class="card_outer" draggable="true">
<div class="card_tri card_color_${colors[val]}"></div>
<div class="card_number card_number_1">${val}</div>
<div class="card_number_middle ${colors[val]}">${val}</div>
<div class="card_number card_number_2">${val}</div>
</div>
`,
joker: ({ val = 0 }) => `
<div class="card_outer" draggable="true">
<div class="card_tri card_color_joker"></div>
<div class="card_number card_number_joker_1">${val}</div>
<div class="card_number_joker_middle">Skip-Bo</div>
<div class="card_number card_number_joker_2">${val}</div>
</div>
`
};

1
src/static/main.js
View File

@ -1 +0,0 @@
const socket = io();

185
src/static/test.css
View File

@ -6,6 +6,12 @@
background-color: rgb(18, 153, 0); background-color: rgb(18, 153, 0);
} }
#debug {
position: absolute;
bottom: 0;
z-index: 999;
}
#spielfeld { #spielfeld {
display: grid; display: grid;
grid-template-rows: 1fr auto 1fr; grid-template-rows: 1fr auto 1fr;
@ -78,64 +84,147 @@
} }
.card_outer { .card_outer {
position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
position: absolute;
}
.card_tri {
position: absolute;
height: 140px;
width: 90px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
}
.card_color_green {
background: linear-gradient(
45deg,
#63b846 20%,
white 20%,
white 80%,
#63b846 80%,
white 80%,
#63b846 80%
);
}
.card_color_red {
background: linear-gradient(
45deg,
#d41389 20%,
white 20%,
white 80%,
#d41389 80%,
white 80%,
#d41389 80%
);
}
.card_color_blue {
background: linear-gradient(
45deg,
#27388b 20%,
white 20%,
white 80%,
#27388b 80%,
white 80%,
#27388b 80%
);
}
.green {
color: #63b846;
}
.red {
color: #d41389;
}
.blue {
color: #27388b;
}
.card_color_joker {
background: linear-gradient(
45deg,
#27388b 6.66%,
#63b846 6.66%,
#63b846 13.33%,
#d41389 13.33%,
#d41389 20%,
white 20%,
white 80%,
#d41389 80%,
#d41389 86.66%,
#63b846 86.66%,
#63b846 93.33%,
#27388b 93.33%
);
} }
.card_number { .card_number {
position: absolute; position: absolute;
font-size: 20pt; font-size: 18pt;
font-weight: bold; font-weight: bold;
background-color: #fff; background-color: #fff;
} }
.card_number1 { .card_number_middle {
left: 10px;
top: 10px;
}
.card_number2 {
right: 10px;
bottom: 10px;
}
.card_border, .card_tri1_outer, .card_tri2_outer {
position: absolute; position: absolute;
}
.card_border {
width: 0;
height: 0;
}
.card_tri1_outer {
right: 5px;
top: 5px;
height: 50px;
width: 50px;
border-top-right-radius: 10px;
}
.card_tri2_outer {
left: 5px;
bottom: 5px;
height: 50px;
width: 50px;
border-bottom-left-radius: 10px;
}
.card_tri1 {
right: 0;
top: 0;
border-left: 50px solid #fff;
border-top: 50px solid rgb(62, 0, 207);
}
.card_tri2 {
left: 0;
bottom: 0;
border-bottom: 50px solid rgb(62, 0, 207);
border-right: 50px solid #fff;
}
.card_middlenumber {
position: absolute;
background-color: #fff;
font-size: 27pt;
font-weight: bold;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
font-size: 30pt;
font-weight: bold;
background-color: #fff;
}
.card_number_1 {
top: 10px;
left: 10px;
}
.card_number_2 {
bottom: 10px;
right: 10px;
}
.card_border {
position: absolute;
height: 100%;
width: 100%;
border: 1px solid #000;
border-radius: 10px;
}
.card_number_joker_middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 14pt;
width: 100%;
background-color: #fff;
text-align: center;
font-weight: bold;
}
.card_number_joker_1 {
top: 28%;
left: 50%;
transform: translate(-50%, -28%);
}
.card_number_joker_2 {
top: 75%;
left: 50%;
transform: translate(-50%, -75%);
}
*[draggable=true] {
cursor: move;
}
[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
-khtml-user-drag: element;
-webkit-user-drag: element;
}
.over {
border: 2px dashed #000;
}
.mainstock_pile * {
pointer-events: none;
} }