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

Initial commit

Browse Source
This commit is contained in:
Flummi
2018-08-03 23:19:49 +02:00
commit a1cf96d596
7 changed files with 338 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/static/index.html
+124
View File
@@ -0,0 +1,124 @@
<!doctype blah>
<html>
<head>
<link rel="stylesheet" href="./test.css" />
</head>
<body>
<div id="spielfeld">
<div id="player">
<div id="player2" class="player">
<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_slot1" class="pileslot">
<div class="card_outer">
<div class="card_number1 card_number">1</div>
<div class="card_tri1_outer">
<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 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_slot1" class="pileslot"></div>
<div id="player3_pile_slot2" class="pileslot"></div>
<div id="player3_pile_slot3" class="pileslot"></div>
<div id="player3_pile_slot4" class="pileslot"></div>
</div>
</div>
</div>
<div id="mainstock">
<div id="mainstock_pile">
<div id="mainstock_pile_slot1" class="mainstock_pile"></div>
<div id="mainstock_pile_slot2" class="mainstock_pile">
<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_slot4" class="mainstock_pile"></div>
</div>
</div>
<div id="player1" 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_slot1" class="pileslot"></div>
<div id="player1_pile_slot2" 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 id="player1_pile_slot3" class="pileslot"></div>
<div id="player1_pile_slot4" class="pileslot"></div>
</div>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="./main.js" defer></script>
</body>
</html>
src/static/main.js
+1
View File
@@ -0,0 +1 @@
const socket = io();
src/static/test.css
+141
View File
@@ -0,0 +1,141 @@
* {
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
background-color: rgb(18, 153, 0);
}
#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 {
position: relative;
height: 100%;
width: 100%;
background-color: #fff;
}
.card_number {
position: absolute;
font-size: 20pt;
font-weight: bold;
background-color: #fff;
}
.card_number1 {
left: 10px;
top: 10px;
}
.card_number2 {
right: 10px;
bottom: 10px;
}
.card_border, .card_tri1_outer, .card_tri2_outer {
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%;
left: 50%;
transform: translate(-50%,-50%);
}