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

fe test

Browse Source
This commit is contained in:
Flummi
2018-08-13 16:41:44 +02:00
parent 671dab33d4
commit 26c14c91fd
3 changed files with 263 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/static/test/index.html Normal file
View File

@@ -0,0 +1,56 @@
<!doctype blah>
<html>
<head>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<div id="spielfeld">
<div id="p0">
<div id="p0_pile_card_0" class="pile"></div>
<div id="p0_pile_card_1" class="pile"></div>
<div id="p0_pile_card_2" class="pile"></div>
<div id="p0_pile_card_3" class="pile"></div>
<div id="p0_pile_card_4" class="pile"></div>
</div>
<div id="p0_discard">
<div id="p0_discard_0" class="pile"></div>
<div></div>
<div id="p0_discard_1" class="pile"></div>
<div id="p0_discard_2" class="pile"></div>
<div id="p0_discard_3" class="pile"></div>
<div id="p0_discard_4" class="pile"></div>
</div>
<div id="p1" class="player">
<div id="p1_pile_card_0" class="pile"></div>
<div></div>
<div id="p1_pile_card_1" class="pile"></div>
<div id="p1_pile_card_2" class="pile"></div>
<div id="p1_pile_card_3" class="pile"></div>
<div id="p1_pile_card_4" class="pile"></div>
</div>
<div id="p2" class="player">
<div id="p2_pile_card_0" class="pile"></div>
<div></div>
<div id="p2_pile_card_1" class="pile"></div>
<div id="p2_pile_card_2" class="pile"></div>
<div id="p2_pile_card_3" class="pile"></div>
<div id="p2_pile_card_4" class="pile"></div>
</div>
<div id="p3" class="player">
<div id="p3_pile_card_0" class="pile"></div>
<div></div>
<div id="p3_pile_card_1" class="pile"></div>
<div id="p3_pile_card_2" class="pile"></div>
<div id="p3_pile_card_3" class="pile"></div>
<div id="p3_pile_card_4" class="pile"></div>
</div>
<div id="mainstack">
<div id="mainstack_card_0" class="pile"></div>
<div id="mainstack_card_1" class="pile"></div>
<div id="mainstack_card_2" class="pile"></div>
<div id="mainstack_card_3" class="pile"></div>
</div>
</div>
<script src="./main.js" defer></script>
</body>
</html>

183
src/static/test/main.css Normal file
View File

@@ -0,0 +1,183 @@
:root {
--blue: #27388b;
--green: #63b846;
--red: #d41389;
--border: #000;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
background-color: #00a000;
}
#spielfeld {
position: absolute;
height: 100%;
width: 100%;
}
.player {
position: absolute;
height: 160px;
width: 550px;
transform-origin: 50% 50%;
display: grid;
grid-template-columns: 1fr 0.5fr repeat(4, 1fr);
}
#p0 {
bottom: 0;
left: 50%;
transform: translateX(-50%);
position: absolute;
height: 160px;
width: 561px;
transform-origin: 50% 50%;
display: grid;
grid-template-columns: repeat(5, 1fr);
}
#p0_discard {
bottom: 160px;
left: 50%;
transform: translateX(-50%);
position: absolute;
height: 160px;
width: 550px;
transform-origin: 50% 50%;
display: grid;
grid-template-columns: 1fr 0.5fr repeat(4, 1fr);
}
#p1 {
top: 50%;
left: 0;
transform: translate(-35.3%, -50%) rotate(90deg);
}
#p2 {
top: 0;
left: 50%;
transform: translateX(-50%) rotate(180deg);
}
#p3 {
top: 50%;
right: 0;
transform: translate(35.3%, -50%) rotate(-90deg);
}
#mainstack {
height: 160px;
width: 420px;
position: absolute;
top: 33.3%;
left: 50%;
transform: translate(-50%, -33.3%);
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.pile {
position: relative;
margin: auto auto;
border: 1px dotted var(--border);
height: 140px;
width: 90px;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.3);
}
.card_outer {
height: 100%;
width: 100%;
position: absolute;
background-color: #fff;
border-radius: 10px;
}
.card_tri {
position: absolute;
height: 140px;
width: 90px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
}
.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_color_green {
background: linear-gradient(
45deg,
var(--green) 20%,
white 20%,
white 80%,
var(--green) 80%
);
}
.card_color_red {
background: linear-gradient(
45deg,
var(--red) 20%,
white 20%,
white 80%,
var(--red) 80%
);
}
.card_color_blue {
background: linear-gradient(
45deg,
var(--blue) 20%,
white 20%,
white 80%,
var(--blue) 80%
);
}
.green {
color: var(--green);
}
.red {
color: var(--red);
}
.blue {
color: var(--blue);
}
.card_color_joker {
background: linear-gradient(
45deg,
var(--blue) 6.66%,
var(--green) 6.66%,
var(--green) 13.33%,
var(--red) 13.33%,
var(--red) 20%,
white 20%,
white 80%,
var(--red) 80%,
var(--red) 86.66%,
var(--green) 86.66%,
var(--green) 93.33%,
var(--blue) 93.33%
);
}
[draggable=true] {
cursor: move;
}

24
src/static/test/main.js Normal file
View File

@@ -0,0 +1,24 @@
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"
};
const 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>`;
/*document.querySelector("#p0_pile_card_0").insertAdjacentHTML("beforeend",
[{ val: ~~(Math.random() * 12) + 1 }].map(card).join``
);*/
const fillAll = () => {
document.querySelectorAll(".pile").forEach(slot => {
slot.insertAdjacentHTML("beforeend",
[{ val: ~~(Math.random() * 12) + 1 }].map(card).join``
);
});
};