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
Show Stats 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.push(...room.deck.splice(0, cfg.iters.hand - player.hand.length));
player.hand.sort((a, b) => a > b); 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 app = express();
const server = http.Server(app); const server = http.Server(app);

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

@ -44,8 +44,11 @@ html, body {
font-weight: bold; font-weight: bold;
} }
.pile { #player2 > .pile, #player3 > .pile {
width: 95%; width: 95%;
}
.pile {
/*width: 95%;*/
margin: auto; margin: auto;
height: 160px; height: 160px;
display: grid; display: grid;
@ -218,7 +221,6 @@ html, body {
#spielfeld { #spielfeld {
height: 100vh; height: 100vh;
} }
#player { #player {
@ -242,33 +244,38 @@ html, body {
} }
#player_self { #player_self {
width: 95%; width: 650px;
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
border-bottom-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
border-style: solid solid none solid; border-style: solid solid none solid;
height: 200px; height: 350px;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
transform: translateX(-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 { #player1_name {
grid-area: a; width: 100%;
} position: absolute;
#player1_hand { top: 0;
grid-area: b;
grid-template-columns: repeat(5, 1fr) !important;
} }
#player1_pile { #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" /> <link rel="stylesheet" href="./css/msgbox.css" />
</head> </head>
<body> <body>
<div id="menu" style="display: block"> <div id="menu" style="display: none">
<div id="menu_title">Menu</div> <div id="menu_title">Menu</div>
<div class="menu_new"> <div class="menu_new">
<button class="menu_new">new</button> <button class="menu_new">new</button>
@ -14,9 +14,9 @@
<button class="menu_join">join</button> <button class="menu_join">join</button>
</div> </div>
</div> </div>
<div id="black" style="display: block"></div> <div id="black" style="display: none"></div>
<div id="layer_game"> <div id="layer_game">
<div id="debug"> <div id="debug" style="display: none">
<a href="#" id="newcard">new card</a> <a href="#" id="newcard">new card</a>
<select id="selcard"> <select id="selcard">
<option>1</option><option>2</option><option>3</option> <option>1</option><option>2</option><option>3</option>
@ -27,7 +27,7 @@
</select> </select>
</div> </div>
<div id="log"></div> <div id="log"></div>
<div id="spielfeld"> <div id="spielfeld" style="display: block">
<div id="player"> <div id="player">
<div id="player2" class="player"> <div id="player2" class="player">
<div id="player2_name" class="playername">Spieler 2</div> <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"; import * as render from "./render.js";
let debug = true; let debug = true;
let activeElement, droptimer; let activeElement, droptimer;
let dropto = null; let dropto = null;
@ -24,9 +26,9 @@ const dragEnd = e => {
if(dropto !== null) { if(dropto !== null) {
const [pstack, ptype, , ppileid] = activeElement.parentNode.id.split("_"); const [pstack, ptype, , ppileid] = activeElement.parentNode.id.split("_");
const [mstack, , , mpileid] = dropto.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 from = pile.splice(-1)[0];
let to = render.mainstack[mpileid]; let to = game.mainstack[mpileid];
let last = to[to.length - 1] || { val: 0 }; let last = to[to.length - 1] || { val: 0 };
if(from.type === "joker") if(from.type === "joker")
@ -35,12 +37,12 @@ const dragEnd = e => {
(last.val + 1 === from.val ? to : pile).push(from); (last.val + 1 === from.val ? to : pile).push(from);
if(last.val + 1 === 12) 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.innerHTML += `from: ${pstack}_${ptype}_${ppileid} (${from.val}) to: ${mstack}_slot_${mpileid} (${last.val})\n`;
log.scrollTop = log.scrollHeight; log.scrollTop = log.scrollHeight;
render.render(render.stackables.getName(parseInt(pstack.slice(-1)))); render.render(game.stackables.getName(parseInt(pstack.slice(-1))));
render.renderMain(); render.renderMain();
} }
activeElement.style.display = "block"; 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"; import { msgBox } from "./tpl.js";
//let socket = io();
function card({ type = "normal", val = "" }) { //render.renderAll();
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.stackables.set("P1", new player(1)); /*document.querySelector("#debug > #newcard").addEventListener("click", () => {
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", () => {
const selcard = document.querySelector("#debug > #selcard"); const selcard = document.querySelector("#debug > #selcard");
const selindex = selcard.selectedIndex; const selindex = selcard.selectedIndex;
const selval = selcard.options[selindex].textContent; const selval = selcard.options[selindex].textContent;
@ -53,7 +12,7 @@ document.querySelector("#debug > #newcard").addEventListener("click", () => {
type: selval === "Skip-Bo" ? "joker" : "normal" type: selval === "Skip-Bo" ? "joker" : "normal"
})); }));
render.render("P1"); render.render("P1");
}); });*/
//console.log(msgBox("joinGame")); //console.log(msgBox("joinGame"));
//console.log(msgBox("newGame")); //console.log(msgBox("newGame"));

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

@ -1,11 +1,9 @@
import { tpl } from "./tpl.js"; import { tpl } from "./tpl.js";
import events from "./events.js"; import events from "./events.js";
import * as game from "./game.js";
export let stackables = new Map();
export let mainstack = Array(4).fill().map(()=>[]);
const clear = player => { const clear = player => {
const _player = stackables.get(player); const _player = game.stackables.get(player);
_player.pile.forEach((slots, slotid) => { _player.pile.forEach((slots, slotid) => {
document.querySelector(`#player${_player.id}_pile_slot_${slotid}`).innerHTML = ""; document.querySelector(`#player${_player.id}_pile_slot_${slotid}`).innerHTML = "";
}); });
@ -16,36 +14,44 @@ const clear = player => {
} }
}; };
const clearMain = () => { 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 => { export const render = player => {
console.log(`render ${player}`); console.log(`render ${player}`);
clear(player); clear(player);
const _player = stackables.get(player); const _player = game.stackables.get(player);
document.querySelector(`#player${_player.id}_name`).innerHTML = player.toString(); document.querySelector(`#player${_player.id}_name`).innerHTML = player.toString();
_player.pile.forEach((slots, slotid) => { if(_player.pile) {
slots.forEach(card => { _player.pile.forEach((slots, slotid) => {
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) => {
slots.forEach(card => { 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`` [{ 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(); events.createCardEvents();
}; };
export const renderMain = () => { export const renderMain = () => {
console.log("render Main"); console.log("render Main");
clearMain(); clearMain();
mainstack.forEach((cards, slotid) => { game.mainstack.forEach((cards, slotid) => {
cards.forEach(card => { 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`` [{ val: card.val }].map(card.type === "joker" ? tpl.joker : tpl.card).join``
@ -54,17 +60,6 @@ export const renderMain = () => {
}); });
}; };
export const renderAll = () => { export const renderAll = () => {
stackables.forEach((e, player) => render(player)); game.stackables.forEach((e, player) => render(player));
renderMain(); 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 { msgBox, removeAllmsgBox } from "./tpl.js";
import * as game from "./game.js";
import * as render from "./render.js"; import * as render from "./render.js";
let socket = false; let socket = false;
@ -34,13 +35,25 @@ const socketevents = () => {
socket.emit("start"); socket.emit("start");
}); });
}); });
socket.on("gamestart", game => { socket.on("gamestart", _game => {
removeAllmsgBox(); removeAllmsgBox();
document.querySelector("#menu").style.display = "none"; document.querySelector("#menu").style.display = "none";
document.querySelector("#black").style.display = "none"; document.querySelector("#black").style.display = "none";
game.player.forEach((player, i) => { render.renderAll();
//stackables _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();
}); });
}); });
}; };