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

2
.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
node_modules
package-lock.json

15
package.json Normal file
View File

@@ -0,0 +1,15 @@
{
"name": "skipbo",
"version": "1.0.0",
"description": "",
"main": "index.mjs",
"scripts": {
"start": "node --experimental-modules src"
},
"author": "Flummi",
"license": "ISC",
"dependencies": {
"express": "^4.16.3",
"socket.io": "^2.1.1"
}
}

7
src/cfg.mjs Normal file
View File

@@ -0,0 +1,7 @@
export default {
iters: {
hand: 5
, pile: 4
, stock: 30
}
};

48
src/index.mjs Normal file
View File

@@ -0,0 +1,48 @@
import cfg from "./cfg";
import express from "express";
import http from "http";
import sio from "socket.io";
import path from "path";
let deck = [
...[...Array(12)].map((_, i) => new Array(12).fill(++i)).reduce((a,b)=>[...b,...a])
, ...[...Array(18).fill(13)]
].map(a => [Math.random(), a]).sort((a, b) => a[0] - b[0]).map(a => a[1]);
const player = new Map();
function cards() {
this.hand = [];
this.pile = Array(cfg.iters.pile);
this.stock = [];
}
//player.set("Spieler 1", new cards);
//player.set("Spieler 2", new cards);
const fillHand = _player => {
_player = player.get(_player);
_player.hand.push(...deck.splice(0, cfg.iters.hand - _player.hand.length));
_player.hand.sort((a,b)=>a>b);
};
const begin = () => {
player.forEach((cards, _player) => {
fillHand(_player);
//cards.stock.push(...deck.splice(0, cfg.iters.stock - cards.stock.length));
});
};
begin();
const app = express();
const server = http.Server(app);
const io = sio(server);
server.listen(8080);
app
.use(express.static(path.resolve("src", "static")))
io.on("connection", socket => {
socket.on("player", data => {
console.log(data);
});
});

124
src/static/index.html Normal file
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>

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

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

141
src/static/test.css Normal file
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%);
}