test test

src/static/test/css/main.css

@@ -215,7 +215,8 @@ div[dropable=true] > * > * {
 }
 
 .player::before {
-  content: 'Spielername';
+  /*content: 'Spielername';*/
+  content: attr(data-name);
   font-weight: bold;
   text-align: center;
   display: block;

src/static/test/index.html

@@ -24,7 +24,7 @@
     <div id="p0_pile_card_3" class="pile"></div>
     <div id="p0_pile_card_4" class="pile"></div>
   </div>
-  <div id="p0_discard" class="player">
+  <div id="p0_discard" class="player" data-name="blah0">
     <div id="p0_discard_0" class="pile"></div>
     <div></div>
     <div id="p0_discard_1" class="pile" dropable="true"></div>
@@ -32,7 +32,7 @@
     <div id="p0_discard_3" class="pile" dropable="true"></div>
     <div id="p0_discard_4" class="pile" dropable="true"></div>
   </div>
-  <div id="p1" class="player">
+  <div id="p1" class="player" data-name="blah1">
     <div id="p1_pile_card_0" class="pile"></div>
     <div></div>
     <div id="p1_pile_card_1" class="pile"></div>
@@ -40,7 +40,7 @@
     <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" class="player" data-name="blah2">
     <div id="p2_pile_card_0" class="pile"></div>
     <div></div>
     <div id="p2_pile_card_1" class="pile"></div>
@@ -48,7 +48,7 @@
     <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" class="player" data-name="blah3">
     <div id="p3_pile_card_0" class="pile"></div>
     <div></div>
     <div id="p3_pile_card_1" class="pile"></div>

src/static/test/js/game.js

@@ -1,9 +1,11 @@
 const colors = [...Array(12)].map((_,i) => ["blue","green","red"][i % 3]).sort();
 
-export const card = ({ val, drag, joker = false }) =>
+const cardtpl = ({ val, drag, joker = false }) =>
   `<div class="card_outer" data-val="${val}"${drag ? 'draggable="true"' : ''}>
-      <div class="card_tri card_color_${joker?"joker":colors[val]}"></div>
+      <div class="card_tri card_color_${joker?"joker":colors[val-1]}"></div>
       <div class="card_number card_number${joker?"_joker":""}_1">${val>0?val:""}</div>
-      <div class="card_number${joker?"_joker":""}_middle ${joker?"":colors[val]}">${joker?"Skip-Bo":val}</div>
+      <div class="card_number${joker?"_joker":""}_middle ${joker?"":colors[val-1]}">${joker?"Skip-Bo":val}</div>
       <div class="card_number card_number${joker?"_joker":""}_2">${val>0?val:""}</div>
     </div>`;
+
+export const card = e => [e].map(cardtpl).join``;

src/static/test/js/main.js

@@ -10,11 +10,15 @@ document.querySelector("#menu button.menu_join").addEventListener("click", () =>
   msgBox("joinGame");
 });
 
-document.querySelector("#p0_pile_card_0").insertAdjacentHTML("beforeend",
+document.querySelector("#p0_discard_1").insertAdjacentHTML("beforeend",
-  [{ val: 0, drag: true, joker: true }].map(card).join``
+  card({ val: 0, drag: true, joker: true })
 );
 document.querySelector("#p0_pile_card_1").insertAdjacentHTML("beforeend",
-  [{ val: 1, drag: true, joker: false }].map(card).join``
+  card({ val: 1, drag: true, joker: false })
+);
+
+document.querySelector("#mainstack_card_1").insertAdjacentHTML("beforeend",
+  card({ val: 4 })
 );
 
 events.createCardEvents();

src/static/test/js/msgbox.js

@@ -1,3 +1,5 @@
+import { connect } from "./socket.js";
+
 const msgBoxes = {
   tpl: ({ title, content, buttons }) => `
       <div class="msgBox">

src/static/test/js/socket.js

@@ -1,3 +1,5 @@
+import { msgBox, removeAllmsgBox } from "./msgbox.js";
+
 let socket = false
   , _playername
   , _gameroom;
@@ -36,20 +38,13 @@ const socketevents = () => {
     document.querySelector("#menu").style.display = "none";
     document.querySelector("#black").style.display = "none";
 
-    render.renderAll();
     _game.player.forEach((player, i) => {
-      game.stackables.set(player[0], new game.player(i));
+      console.log(player);
-      const _player = game.stackables.get(player[0]);
-      _player.id = i;
-      if(i === 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();
     });
   });
 };
+
+const clear = playerid => {
+  console.log([...document.querySelectorAll(`div[id^='p${playerid}_']:not(#p0_discard)`)]);
+}
+clear("1");