...
This commit is contained in:
Flummi
parent
5eea2c82ec
commit
39dff70a1b
@ -1,7 +1,7 @@
|
||||
<!doctype blah>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="./test.css" />
|
||||
<link rel="stylesheet" href="./main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="debug">
|
||||
@ -13,7 +13,6 @@
|
||||
<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="player">
|
||||
@ -21,39 +20,48 @@
|
||||
<div id="player2_name" class="playername">Spieler 2</div>
|
||||
<div id="player2_pile" class="pile">
|
||||
<div id="player2_stock" class="pileslot"></div>
|
||||
<div id="player2_pile_slot0" class="pileslot"></div>
|
||||
<div id="player2_pile_slot1" class="pileslot"></div>
|
||||
<div id="player2_pile_slot2" class="pileslot"></div>
|
||||
<div id="player2_pile_slot3" class="pileslot"></div>
|
||||
<div id="player2_pile_slot_0" class="pileslot"></div>
|
||||
<div id="player2_pile_slot_1" class="pileslot"></div>
|
||||
<div id="player2_pile_slot_2" class="pileslot"></div>
|
||||
<div id="player2_pile_slot_3" class="pileslot"></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_slot0" class="pileslot"></div>
|
||||
<div id="player3_pile_slot1" class="pileslot"></div>
|
||||
<div id="player3_pile_slot2" class="pileslot"></div>
|
||||
<div id="player3_pile_slot3" 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 id="mainstock">
|
||||
<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_slot2" class="mainstock_pile"></div>
|
||||
<div id="mainstock_pile_slot3" class="mainstock_pile"></div>
|
||||
<div id="mainstock_pile_slot_0" class="mainstock_pile" dropable="true"></div>
|
||||
<div id="mainstock_pile_slot_1" class="mainstock_pile" dropable="true"></div>
|
||||
<div id="mainstock_pile_slot_2" class="mainstock_pile" dropable="true"></div>
|
||||
<div id="mainstock_pile_slot_3" class="mainstock_pile" dropable="true"></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_pile" class="pile">
|
||||
<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_slot2" class="pileslot"></div>
|
||||
<div id="player1_pile_slot3" 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 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>
|
||||
|
||||
@ -1,7 +1,15 @@
|
||||
import * as render from "./render.js";
|
||||
let debug = true;
|
||||
let activeElement, droptimer;
|
||||
let dropto = null;
|
||||
|
||||
const allowDrop = e => {
|
||||
if(debug) console.log("dropover");
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
const dragstart = e => {
|
||||
if(debug) console.log("dragstart");
|
||||
e.dataTransfer.setData("text", e.target.id);
|
||||
activeElement = e.target;
|
||||
setTimeout(() => {
|
||||
@ -10,36 +18,71 @@ const dragstart = e => {
|
||||
};
|
||||
|
||||
const dragEnd = e => {
|
||||
if(debug) console.log("dragend");
|
||||
e.preventDefault();
|
||||
if(dropto !== null) {
|
||||
activeElement.parentNode.removeChild(activeElement);
|
||||
dropto.insertAdjacentHTML("beforeend", activeElement.innerHTML);
|
||||
const [pstack, , , ppileid] = activeElement.parentNode.id.split("_");
|
||||
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 = null;
|
||||
dragleave(e);
|
||||
};
|
||||
|
||||
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);
|
||||
const dragenter = e => {
|
||||
if(debug) console.log("dragenter");
|
||||
e.preventDefault();
|
||||
clearTimeout(droptimer);
|
||||
e.target.classList.add("over");
|
||||
dropto = e.target;
|
||||
};
|
||||
|
||||
const dragleave = e => {
|
||||
if(debug) console.log("dragleave");
|
||||
e.preventDefault();
|
||||
removeOver();
|
||||
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 ({
|
||||
createCardEvents: () => {
|
||||
document.querySelectorAll(".card_outer").forEach(card => {
|
||||
document.querySelectorAll(".card_outer[draggable='true']").forEach(card => {
|
||||
card.addEventListener("dragstart", dragstart);
|
||||
card.addEventListener("dragend", dragEnd);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -14,18 +14,24 @@ function player(id) {
|
||||
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("P1", new player(1));
|
||||
render.stackables.get("P1").pile[0].push(new card({ val: 12 }));
|
||||
render.stackables.get("P1").pile[1].push(new card({ val: 11 }));
|
||||
render.stackables.get("P1").pile[2].push(new card({ val: 2 }));
|
||||
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.get("blah").pile[2].push(new card({ val: 5 }));
|
||||
render.stackables.set("P2", new player(2));
|
||||
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.clear("Test");
|
||||
|
||||
document.querySelector("#debug > #newcard").addEventListener("click", () => {
|
||||
const selcard = document.querySelector("#debug > #selcard");
|
||||
@ -37,13 +43,3 @@ document.querySelector("#debug > #newcard").addEventListener("click", () => {
|
||||
}));
|
||||
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");
|
||||
});
|
||||
|
||||
@ -7,25 +7,24 @@ 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 = "";
|
||||
document.querySelector(`#player${_player.id}_pile_slot_${slotid}`).innerHTML = "";
|
||||
});
|
||||
};
|
||||
const clearMain = () => {
|
||||
mainstack.forEach((cards, slotid) => {
|
||||
document.querySelector(`#mainstock_pile_slot${slotid}`).innerHTML = "";
|
||||
});
|
||||
mainstack.forEach((cards, slotid) => document.querySelector(`#mainstock_pile_slot_${slotid}`).innerHTML = "");
|
||||
};
|
||||
const clearAll = () => {
|
||||
|
||||
export const clearAll = () => {
|
||||
clearMain();
|
||||
stackables.forEach((e, player) => clear(player));
|
||||
};
|
||||
|
||||
export const render = player => {
|
||||
clear(player);
|
||||
const _player = stackables.get(player);
|
||||
document.querySelector(`#player${_player.id}_name`).innerHTML = player.toString();
|
||||
_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``
|
||||
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``
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -34,13 +33,20 @@ export const render = player => {
|
||||
export const renderMain = () => {
|
||||
mainstack.forEach((cards, slotid) => {
|
||||
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``
|
||||
);
|
||||
});
|
||||
});
|
||||
};
|
||||
export const renderAll = () => {
|
||||
clearAll();
|
||||
stackables.forEach((e, player) => render(player));
|
||||
renderMain();
|
||||
};
|
||||
|
||||
Map.prototype.getID = function(id) {
|
||||
for(let [key, val] of this.entries())
|
||||
if(val.id === id)
|
||||
return val;
|
||||
};
|
||||
@ -14,16 +14,16 @@ const colors = {
|
||||
}
|
||||
|
||||
export default {
|
||||
card: ({ val }) => `
|
||||
<div class="card_outer" draggable="true">
|
||||
card: ({ val, draggable = false }) => `
|
||||
<div class="card_outer"${draggable?" draggable=true":""} data-val="${val}">
|
||||
<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">
|
||||
joker: ({ val = 0, draggable = false }) => `
|
||||
<div class="card_outer"${draggable?" draggable=true":""} data-val="${val}">
|
||||
<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>
|
||||
|
||||
@ -1,230 +1,257 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-color: rgb(18, 153, 0);
|
||||
}
|
||||
|
||||
#debug {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
#spielfeld {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
grid-row-gap: 40px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#player {
|
||||
width: 98%;
|
||||
height: 200px;
|
||||
margin: auto;
|
||||
display: grid;
|
||||
grid-column-gap: 5px;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.player {
|
||||
box-sizing: border-box;
|
||||
border-style: none solid solid solid;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
#player1 {
|
||||
width: 95%;
|
||||
margin: auto;
|
||||
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;
|
||||
}
|
||||
.playername {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pile {
|
||||
width: 95%;
|
||||
margin: auto;
|
||||
height: 160px;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr repeat(4, 1fr);
|
||||
grid-column-gap: 2px;
|
||||
}
|
||||
.pileslot {
|
||||
width: 110px;
|
||||
border: 1px solid #000;
|
||||
background-color: #fff !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.pileslot:nth-child(0) {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#mainstock_pile {
|
||||
width: 500px;
|
||||
height: 200px;
|
||||
display: grid;
|
||||
margin: auto;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
.mainstock_pile {
|
||||
width: 110px;
|
||||
height: 160px;
|
||||
border: 1px solid #000;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.card_outer {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
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 {
|
||||
position: absolute;
|
||||
font-size: 18pt;
|
||||
font-weight: bold;
|
||||
background-color: #fff;
|
||||
}
|
||||
.card_number_middle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 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;
|
||||
html, body {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
user-drag: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#debug {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.player {
|
||||
height: 200px;
|
||||
box-sizing: border-box;
|
||||
border-style: none solid solid solid;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
.playername {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pile {
|
||||
width: 95%;
|
||||
margin: auto;
|
||||
height: 160px;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr repeat(4, 1fr);
|
||||
grid-column-gap: 2px;
|
||||
}
|
||||
.pileslot {
|
||||
width: 110px;
|
||||
border: 1px solid #000;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.handslot {
|
||||
width: 110px;
|
||||
border: 1px solid #000;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#mainstock_pile {
|
||||
width: 500px;
|
||||
height: 200px;
|
||||
display: grid;
|
||||
margin: auto;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
.mainstock_pile {
|
||||
width: 110px;
|
||||
height: 160px;
|
||||
border: 1px solid #000;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.card_outer {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
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%
|
||||
);
|
||||
}
|
||||
.card_color_red {
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
#d41389 20%,
|
||||
white 20%,
|
||||
white 80%,
|
||||
#d41389 80%
|
||||
);
|
||||
}
|
||||
.card_color_blue {
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
#27388b 20%,
|
||||
white 20%,
|
||||
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 {
|
||||
position: absolute;
|
||||
font-size: 18pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
.card_number_middle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 30pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
.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%;
|
||||
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;
|
||||
}
|
||||
|
||||
#spielfeld {
|
||||
height: 100vh;
|
||||
background-color: rgb(18, 153, 0);
|
||||
}
|
||||
|
||||
#player {
|
||||
width: 95%;
|
||||
height: 200px;
|
||||
display: grid;
|
||||
grid-column-gap: 5px;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
#mainstock {
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user