From 5eea2c82ec0eb128c60402e1762151153e7884da Mon Sep 17 00:00:00 2001 From: Flummi Date: Sun, 5 Aug 2018 21:05:14 +0200 Subject: [PATCH] aktueller Stand lel --- src/static/index.html | 103 +++++----------------- src/static/js/events.js | 45 ++++++++++ src/static/js/main.js | 49 +++++++++++ src/static/js/render.js | 46 ++++++++++ src/static/js/tpl.js | 33 +++++++ src/static/main.js | 1 - src/static/test.css | 185 +++++++++++++++++++++++++++++----------- 7 files changed, 331 insertions(+), 131 deletions(-) create mode 100644 src/static/js/events.js create mode 100644 src/static/js/main.js create mode 100644 src/static/js/render.js create mode 100644 src/static/js/tpl.js delete mode 100644 src/static/main.js diff --git a/src/static/index.html b/src/static/index.html index 178e4ec..ccfc2d7 100644 --- a/src/static/index.html +++ b/src/static/index.html @@ -4,121 +4,60 @@ +
+ new card + + del card +
Spieler 2
-
-
-
1
-
-
-
-
1
-
1
-
-
-
-
-
-
-
-
2
-
-
-
-
2
-
2
-
-
-
-
-
-
-
-
3
-
-
-
-
3
-
3
-
-
-
-
-
-
-
-
4
-
-
-
-
4
-
4
-
-
-
-
-
+
+
+
+
Spieler 3
+
-
+
-
-
-
4
-
-
-
-
4
-
4
-
-
-
-
-
+
-
Spieler 1
+
-
-
-
4
-
-
-
-
4
-
4
-
-
-
-
-
+
-
- + \ No newline at end of file diff --git a/src/static/js/events.js b/src/static/js/events.js new file mode 100644 index 0000000..1d8f21c --- /dev/null +++ b/src/static/js/events.js @@ -0,0 +1,45 @@ +let activeElement, droptimer; +let dropto = null; + +const dragstart = e => { + e.dataTransfer.setData("text", e.target.id); + activeElement = e.target; + setTimeout(() => { + activeElement.style.display = "none"; + }, 100); +}; + +const dragEnd = e => { + e.preventDefault(); + if(dropto !== null) { + activeElement.parentNode.removeChild(activeElement); + dropto.insertAdjacentHTML("beforeend", activeElement.innerHTML); + } + activeElement.style.display = "block"; + activeElement = null; +}; + +document.querySelectorAll(".mainstock_pile").forEach(slot => { + slot.addEventListener("dragenter", e => { + e.preventDefault(); + clearTimeout(droptimer); + e.target.classList.add("over"); + dropto = e.target; + }); + slot.addEventListener("dragleave", e => { + e.preventDefault(); + e.target.classList.remove("over"); + droptimer = setTimeout(() => { + dropto = null; + }, 100); + }); +}); + +export default ({ + createCardEvents: () => { + document.querySelectorAll(".card_outer").forEach(card => { + card.addEventListener("dragstart", dragstart); + card.addEventListener("dragend", dragEnd); + }); + } +}); \ No newline at end of file diff --git a/src/static/js/main.js b/src/static/js/main.js new file mode 100644 index 0000000..7b83c0e --- /dev/null +++ b/src/static/js/main.js @@ -0,0 +1,49 @@ +import * as render from "./render.js"; +//import { render, renderAll, stackables, mainstack } from "./render.js"; +//import events from "./events.js"; +//const 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.stackables.set("Test", new player(2)); +render.stackables.get("Test").pile[0].push(new card({ type: "joker", val: 12 })); +render.stackables.get("Test").pile[1].push(new card({ val: 3 })); +render.stackables.get("Test").pile[2].push(new card({ val: 4 })); +render.stackables.get("Test").pile[2].push(new card({ val: 12 })); + +render.stackables.set("blah", new player(3)); +render.stackables.get("blah").pile[2].push(new card({ val: 5 })); + +render.mainstack[1].push(new card({ val: 2 })); +render.renderAll(); +render.clear("Test"); + +document.querySelector("#debug > #newcard").addEventListener("click", () => { + const selcard = document.querySelector("#debug > #selcard"); + const selindex = selcard.selectedIndex; + const selval = selcard.options[selindex].textContent; + render.stackables.get("Test").pile[0].push(new card({ + val: selval === "Skip-Bo" ? "" : selval, + type: selval === "Skip-Bo" ? "joker" : "normal" + })); + render.render("Test"); +}); + +document.querySelector("#debug > #delcard").addEventListener("click", () => { + /*document.querySelector("#player2_pile_slot2").removeChild( + document.querySelector("#player2_pile_slot2 > .card_outer:last-child") + );*/ + console.log(render.stackables.get("Test").pile[0]); + render.stackables.get("Test").pile[0].pop(); + console.log(render.stackables.get("Test").pile[0]); + render.render("Test"); +}); diff --git a/src/static/js/render.js b/src/static/js/render.js new file mode 100644 index 0000000..dd54c47 --- /dev/null +++ b/src/static/js/render.js @@ -0,0 +1,46 @@ +import tpl from "./tpl.js"; +import events from "./events.js"; + +export let stackables = new Map(); +export let mainstack = Array(4).fill().map(()=>[]); + +export const clear = player => { + const _player = stackables.get(player); + _player.pile.forEach((slots, slotid) => { + document.querySelector(`#player${_player.id}_pile_slot${slotid}`).innerHTML = ""; + }); +}; +const clearMain = () => { + mainstack.forEach((cards, slotid) => { + document.querySelector(`#mainstock_pile_slot${slotid}`).innerHTML = ""; + }); +}; +const clearAll = () => { + +}; + +export const render = player => { + clear(player); + const _player = stackables.get(player); + _player.pile.forEach((slots, slotid) => { + slots.forEach(card => { + document.querySelector(`#player${_player.id}_pile_slot${slotid}`).insertAdjacentHTML("beforeend", + [{ val: card.val }].map(card.type === "joker" ? tpl.joker : tpl.card).join`` + ); + }); + }); + events.createCardEvents(); +}; +export const renderMain = () => { + 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`` + ); + }); + }); +}; +export const renderAll = () => { + stackables.forEach((e, player) => render(player)); + renderMain(); +}; \ No newline at end of file diff --git a/src/static/js/tpl.js b/src/static/js/tpl.js new file mode 100644 index 0000000..624b340 --- /dev/null +++ b/src/static/js/tpl.js @@ -0,0 +1,33 @@ +const colors = { + 1: "blue", + 2: "blue", + 3: "blue", + 4: "blue", + 5: "green", + 6: "green", + 7: "green", + 8: "green", + 9: "red", + 10: "red", + 11: "red", + 12: "red" +} + +export default { + card: ({ val }) => ` +
+
+
${val}
+
${val}
+
${val}
+
+ `, + joker: ({ val = 0 }) => ` +
+
+
${val}
+
Skip-Bo
+
${val}
+
+ ` +}; \ No newline at end of file diff --git a/src/static/main.js b/src/static/main.js deleted file mode 100644 index 2711e0b..0000000 --- a/src/static/main.js +++ /dev/null @@ -1 +0,0 @@ -const socket = io(); diff --git a/src/static/test.css b/src/static/test.css index dcabaad..2d9ead5 100644 --- a/src/static/test.css +++ b/src/static/test.css @@ -6,6 +6,12 @@ background-color: rgb(18, 153, 0); } +#debug { + position: absolute; + bottom: 0; + z-index: 999; +} + #spielfeld { display: grid; grid-template-rows: 1fr auto 1fr; @@ -78,64 +84,147 @@ } .card_outer { - position: relative; height: 100%; width: 100%; background-color: #fff; + position: absolute; +} +.card_tri { + position: absolute; + height: 140px; + width: 90px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 10px; +} +.card_color_green { + background: linear-gradient( + 45deg, + #63b846 20%, + white 20%, + white 80%, + #63b846 80%, + white 80%, + #63b846 80% + ); +} +.card_color_red { + background: linear-gradient( + 45deg, + #d41389 20%, + white 20%, + white 80%, + #d41389 80%, + white 80%, + #d41389 80% + ); +} +.card_color_blue { + background: linear-gradient( + 45deg, + #27388b 20%, + white 20%, + white 80%, + #27388b 80%, + white 80%, + #27388b 80% + ); +} +.green { + color: #63b846; +} +.red { + color: #d41389; +} +.blue { + color: #27388b; +} +.card_color_joker { + background: linear-gradient( + 45deg, + #27388b 6.66%, + #63b846 6.66%, + #63b846 13.33%, + #d41389 13.33%, + #d41389 20%, + white 20%, + white 80%, + #d41389 80%, + #d41389 86.66%, + #63b846 86.66%, + #63b846 93.33%, + #27388b 93.33% + ); } .card_number { position: absolute; - font-size: 20pt; + font-size: 18pt; 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 { +.card_number_middle { 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%); + transform: translate(-50%, -50%); + font-size: 30pt; + font-weight: bold; + background-color: #fff; +} +.card_number_1 { + top: 10px; + left: 10px; +} +.card_number_2 { + bottom: 10px; + right: 10px; +} +.card_border { + position: absolute; + height: 100%; + width: 100%; + border: 1px solid #000; + border-radius: 10px; +} +.card_number_joker_middle { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 14pt; + width: 100%; + background-color: #fff; + text-align: center; + font-weight: bold; +} +.card_number_joker_1 { + top: 28%; + left: 50%; + transform: translate(-50%, -28%); +} +.card_number_joker_2 { + top: 75%; + left: 50%; + transform: translate(-50%, -75%); +} + +*[draggable=true] { + cursor: move; +} +[draggable] { + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + user-select: none; + -khtml-user-drag: element; + -webkit-user-drag: element; +} + +.over { + border: 2px dashed #000; +} + +.mainstock_pile * { + pointer-events: none; } \ No newline at end of file