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

blah

Browse Source
This commit is contained in:
Flummi
2018-08-11 12:12:18 +02:00
parent 2773c89e28
commit fcd901e788
8 changed files with 137 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/index.mjs
View File

@@ -22,7 +22,13 @@ const fillHand = (room, player) => {
player.hand.push(...room.deck.splice(0, cfg.iters.hand - player.hand.length));
player.hand.sort((a, b) => a > b);
};
const begin = room => room.player.forEach(player => fillHand(room, player.cards));
const fillStock = (room, player) => {
player.stock.push(...room.deck.splice(0, cfg.iters.stock));
};
const begin = room => room.player.forEach(player => {
fillHand(room, player.cards);
fillStock(room, player.cards);
});
const app = express();
const server = http.Server(app);

37
src/static/css/main.css
View File

@@ -44,8 +44,11 @@ html, body {
font-weight: bold;
}
.pile {
#player2 > .pile, #player3 > .pile {
width: 95%;
}
.pile {
/*width: 95%;*/
margin: auto;
height: 160px;
display: grid;
@@ -218,7 +221,6 @@ html, body {
#spielfeld {
height: 100vh;
}
#player {
@@ -242,33 +244,38 @@ html, body {
}
#player_self {
width: 95%;
width: 650px;
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;
height: 350px;
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;
width: 100%;
position: absolute;
top: 0;
}
#player1_pile {
grid-area: c;
width: 95%;
position: absolute;
top: 21px;
left: 50%;
transform: translateX(-50%);
}
#player1_hand {
width: 95%;
grid-template-columns: repeat(5, 1fr) !important;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

8
src/static/index.html
View File

@@ -5,7 +5,7 @@
<link rel="stylesheet" href="./css/msgbox.css" />
</head>
<body>
<div id="menu" style="display: block">
<div id="menu" style="display: none">
<div id="menu_title">Menu</div>
<div class="menu_new">
<button class="menu_new">new</button>
@@ -14,9 +14,9 @@
<button class="menu_join">join</button>
</div>
</div>
<div id="black" style="display: block"></div>
<div id="black" style="display: none"></div>
<div id="layer_game">
<div id="debug">
<div id="debug" style="display: none">
<a href="#" id="newcard">new card</a>
<select id="selcard">
<option>1</option><option>2</option><option>3</option>
@@ -27,7 +27,7 @@
</select>
</div>
<div id="log"></div>
<div id="spielfeld">
<div id="spielfeld" style="display: block">
<div id="player">
<div id="player2" class="player">
<div id="player2_name" class="playername">Spieler 2</div>

10
src/static/js/events.js
View File

@@ -1,4 +1,6 @@
import * as game from "./game.js";
import * as render from "./render.js";
let debug = true;
let activeElement, droptimer;
let dropto = null;
@@ -24,9 +26,9 @@ const dragEnd = e => {
if(dropto !== null) {
const [pstack, ptype, , ppileid] = activeElement.parentNode.id.split("_");
const [mstack, , , mpileid] = dropto.id.split("_");
const pile = render.stackables.getID(parseInt(pstack.slice(-1)))[ptype][ppileid];
const pile = game.stackables.getID(parseInt(pstack.slice(-1)))[ptype][ppileid];
let from = pile.splice(-1)[0];
let to = render.mainstack[mpileid];
let to = game.mainstack[mpileid];
let last = to[to.length - 1] || { val: 0 };
if(from.type === "joker")
@@ -35,12 +37,12 @@ const dragEnd = e => {
(last.val + 1 === from.val ? to : pile).push(from);
if(last.val + 1 === 12)
render.mainstack[mpileid].length = 0; // clear stack
game.mainstack[mpileid].length = 0; // clear stack
log.innerHTML += `from: ${pstack}_${ptype}_${ppileid} (${from.val}) to: ${mstack}_slot_${mpileid} (${last.val})\n`;
log.scrollTop = log.scrollHeight;
render.render(render.stackables.getName(parseInt(pstack.slice(-1))));
render.render(game.stackables.getName(parseInt(pstack.slice(-1))));
render.renderMain();
}
activeElement.style.display = "block";

54
src/static/js/game.js Normal file
View File

@@ -0,0 +1,54 @@
export let stackables = new Map();
export let mainstack = Array(4).fill().map(() => []);
export function card({ type = "normal", val = "" }) {
this.type = type;
this.val = val;
}
export function player(id) {
this.id = id;
this.hand = [];
this.pile = Array(4).fill().map(() => []);
this.stock = [];
}
Map.prototype.getID = function(id) {
for(let [key, val] of this.entries())
if(val.id === id)
return val;
};
Map.prototype.getName = function(id) {
for(let [key, val] of this.entries())
if(val.id === id)
return key;
};
/*stackables.set("P1", new player(1));
stackables.get("P1").pile[0].push(new card({ val: 12 }));
stackables.get("P1").pile[1].push(new card({ val: 11 }));
stackables.get("P1").pile[2].push(new card({ val: 2 }));
stackables.get("P1").pile[2].push(new card({ val: 1 }));
stackables.get("P1").pile[2].push(new card({ type: "joker" }));
stackables.get("P1").hand[0].push(new card({ val: 12 }));
stackables.get("P1").hand[1].push(new card({ type: "joker" }));
stackables.get("P1").hand[1].push(new card({ type: "joker" }));
stackables.get("P1").hand[1].push(new card({ type: "joker" }));
stackables.get("P1").hand[1].push(new card({ type: "joker" }));
stackables.get("P1").hand[1].push(new card({ type: "joker" }));
stackables.get("P1").hand[1].push(new card({ type: "joker" }));
stackables.get("P1").hand[1].push(new card({ type: "joker" }));
stackables.get("P1").hand[1].push(new card({ type: "joker" }));
stackables.get("P1").hand[1].push(new card({ type: "joker" }));
stackables.get("P1").hand[1].push(new card({ type: "joker" }));
stackables.set("P2", new player(2));
stackables.get("P2").pile[0].push(new card({ type: "joker", val: 12 }));
stackables.get("P2").pile[1].push(new card({ val: 3 }));
stackables.get("P2").pile[2].push(new card({ val: 4 }));
stackables.get("P2").pile[2].push(new card({ val: 12 }));
stackables.set("P3", new player(3));
stackables.get("P3").pile[2].push(new card({ val: 5 }));
mainstack[1].push(new card({ val: 10 }));*/

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

@@ -1,50 +1,9 @@
import * as render from "./render.js";
//import * as render from "./render.js";
import { msgBox } from "./tpl.js";
//let 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.renderAll();
/*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.get("P1").hand[0].push(new card({ val: 12 }));
render.stackables.get("P1").hand[1].push(new card({ type: "joker" }));
render.stackables.get("P1").hand[1].push(new card({ type: "joker" }));
render.stackables.get("P1").hand[1].push(new card({ type: "joker" }));
render.stackables.get("P1").hand[1].push(new card({ type: "joker" }));
render.stackables.get("P1").hand[1].push(new card({ type: "joker" }));
render.stackables.get("P1").hand[1].push(new card({ type: "joker" }));
render.stackables.get("P1").hand[1].push(new card({ type: "joker" }));
render.stackables.get("P1").hand[1].push(new card({ type: "joker" }));
render.stackables.get("P1").hand[1].push(new card({ type: "joker" }));
render.stackables.get("P1").hand[1].push(new card({ type: "joker" }));
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.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();
document.querySelector("#debug > #newcard").addEventListener("click", () => {
/*document.querySelector("#debug > #newcard").addEventListener("click", () => {
const selcard = document.querySelector("#debug > #selcard");
const selindex = selcard.selectedIndex;
const selval = selcard.options[selindex].textContent;
@@ -53,7 +12,7 @@ document.querySelector("#debug > #newcard").addEventListener("click", () => {
type: selval === "Skip-Bo" ? "joker" : "normal"
}));
render.render("P1");
});
});*/
//console.log(msgBox("joinGame"));
//console.log(msgBox("newGame"));

53
src/static/js/render.js
View File

@@ -1,11 +1,9 @@
import { tpl } from "./tpl.js";
import events from "./events.js";
export let stackables = new Map();
export let mainstack = Array(4).fill().map(()=>[]);
import * as game from "./game.js";
const clear = player => {
const _player = stackables.get(player);
const _player = game.stackables.get(player);
_player.pile.forEach((slots, slotid) => {
document.querySelector(`#player${_player.id}_pile_slot_${slotid}`).innerHTML = "";
});
@@ -16,36 +14,44 @@ const clear = player => {
}
};
const clearMain = () => {
mainstack.forEach((cards, slotid) => document.querySelector(`#mainstock_pile_slot_${slotid}`).innerHTML = "");
game.mainstack.forEach((cards, slotid) => document.querySelector(`#mainstock_pile_slot_${slotid}`).innerHTML = "");
};
export const render = player => {
console.log(`render ${player}`);
clear(player);
const _player = stackables.get(player);
const _player = game.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, draggable: _player.id === 1 }].map(card.type === "joker" ? tpl.joker : tpl.card).join``
);
});
});
if(_player.hand) {
_player.hand.forEach((slots, slotid) => {
if(_player.pile) {
_player.pile.forEach((slots, slotid) => {
slots.forEach(card => {
document.querySelector(`#player${_player.id}_hand_slot_${slotid}`).insertAdjacentHTML("beforeend",
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``
);
});
});
}
if(_player.hand) {
_player.hand.forEach((card, slotid) => {
document.querySelector(`#player${_player.id}_hand_slot_${slotid}`).insertAdjacentHTML("beforeend",
[{ val: card.val, draggable: _player.id === 1 }].map(card.type === "joker" ? tpl.joker : tpl.card).join``
);
});
}
if(_player.stock) {
_player.stock.forEach(card => {
console.log(card);
document.querySelector(`#player${_player.id}_stock`).insertAdjacentHTML("beforeend",
[{ val: card.val, draggable: _player.id === 1 }].map(card.type === "joker" ? tpl.joker : tpl.card).join``
);
});
}
events.createCardEvents();
};
export const renderMain = () => {
console.log("render Main");
clearMain();
mainstack.forEach((cards, slotid) => {
game.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``
@@ -54,17 +60,6 @@ export const renderMain = () => {
});
};
export const renderAll = () => {
stackables.forEach((e, player) => render(player));
game.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;
};
Map.prototype.getName = function(id) {
for(let [key, val] of this.entries())
if(val.id === id)
return key;
};

19
src/static/js/socket.js
View File

@@ -1,4 +1,5 @@
import { msgBox, removeAllmsgBox } from "./tpl.js";
import * as game from "./game.js";
import * as render from "./render.js";
let socket = false;
@@ -34,13 +35,25 @@ const socketevents = () => {
socket.emit("start");
});
});
socket.on("gamestart", game => {
socket.on("gamestart", _game => {
removeAllmsgBox();
document.querySelector("#menu").style.display = "none";
document.querySelector("#black").style.display = "none";
game.player.forEach((player, i) => {
//stackables
render.renderAll();
_game.player.forEach((player, i) => {
game.stackables.set(player[0], new game.player(i+1));
const _player = game.stackables.get(player[0]);
player[1].cards.hand.forEach(card => {
_player.hand.push(new game.card({ type: card === 13 ? "joker" : "normal", val: card === 13 ? "" : card }));
});
player[1].cards.stock.forEach(card => {
_player.stock.push(new game.card({ type: card === 13 ? "joker" : "normal", val: card === 13 ? "" : card }));
});
render.renderAll();
});
});
};