diff --git a/src/static/test/index.html b/src/static/test/index.html new file mode 100644 index 0000000..4072aef --- /dev/null +++ b/src/static/test/index.html @@ -0,0 +1,56 @@ + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/src/static/test/main.css b/src/static/test/main.css new file mode 100644 index 0000000..1bfacd9 --- /dev/null +++ b/src/static/test/main.css @@ -0,0 +1,183 @@ +:root { + --blue: #27388b; + --green: #63b846; + --red: #d41389; + --border: #000; +} + +html, body { + margin: 0; + padding: 0; + height: 100%; + overflow: hidden; + background-color: #00a000; +} +#spielfeld { + position: absolute; + height: 100%; + width: 100%; +} + +.player { + position: absolute; + height: 160px; + width: 550px; + transform-origin: 50% 50%; + display: grid; + grid-template-columns: 1fr 0.5fr repeat(4, 1fr); +} + +#p0 { + bottom: 0; + left: 50%; + transform: translateX(-50%); + position: absolute; + height: 160px; + width: 561px; + transform-origin: 50% 50%; + display: grid; + grid-template-columns: repeat(5, 1fr); +} +#p0_discard { + bottom: 160px; + left: 50%; + transform: translateX(-50%); + position: absolute; + height: 160px; + width: 550px; + transform-origin: 50% 50%; + display: grid; + grid-template-columns: 1fr 0.5fr repeat(4, 1fr); +} + +#p1 { + top: 50%; + left: 0; + transform: translate(-35.3%, -50%) rotate(90deg); +} +#p2 { + top: 0; + left: 50%; + transform: translateX(-50%) rotate(180deg); +} +#p3 { + top: 50%; + right: 0; + transform: translate(35.3%, -50%) rotate(-90deg); +} + +#mainstack { + height: 160px; + width: 420px; + position: absolute; + top: 33.3%; + left: 50%; + transform: translate(-50%, -33.3%); + display: grid; + grid-template-columns: repeat(4, 1fr); +} +.pile { + position: relative; + margin: auto auto; + border: 1px dotted var(--border); + height: 140px; + width: 90px; + border-radius: 10px; + background-color: rgba(0, 0, 0, 0.3); +} + +.card_outer { + height: 100%; + width: 100%; + position: absolute; + background-color: #fff; + border-radius: 10px; +} +.card_tri { + position: absolute; + height: 140px; + width: 90px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 10px; +} +.card_number { + position: absolute; + font-size: 18pt; + font-weight: bold; +} +.card_number_middle { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 30pt; + font-weight: bold; +} +.card_number_1 { + top: 10px; + left: 10px; +} +.card_number_2 { + bottom: 10px; + right: 10px; +} +.card_color_green { + background: linear-gradient( + 45deg, + var(--green) 20%, + white 20%, + white 80%, + var(--green) 80% + ); +} +.card_color_red { + background: linear-gradient( + 45deg, + var(--red) 20%, + white 20%, + white 80%, + var(--red) 80% + ); +} +.card_color_blue { + background: linear-gradient( + 45deg, + var(--blue) 20%, + white 20%, + white 80%, + var(--blue) 80% + ); +} +.green { + color: var(--green); +} +.red { + color: var(--red); +} +.blue { + color: var(--blue); +} +.card_color_joker { + background: linear-gradient( + 45deg, + var(--blue) 6.66%, + var(--green) 6.66%, + var(--green) 13.33%, + var(--red) 13.33%, + var(--red) 20%, + white 20%, + white 80%, + var(--red) 80%, + var(--red) 86.66%, + var(--green) 86.66%, + var(--green) 93.33%, + var(--blue) 93.33% + ); +} + +[draggable=true] { + cursor: move; +} + diff --git a/src/static/test/main.js b/src/static/test/main.js new file mode 100644 index 0000000..b42cece --- /dev/null +++ b/src/static/test/main.js @@ -0,0 +1,24 @@ +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" +}; +const card = ({ val }) => + `
+
+
${val}
+
${val}
+
${val}
+
`; + +/*document.querySelector("#p0_pile_card_0").insertAdjacentHTML("beforeend", + [{ val: ~~(Math.random() * 12) + 1 }].map(card).join`` +);*/ + +const fillAll = () => { + document.querySelectorAll(".pile").forEach(slot => { + slot.insertAdjacentHTML("beforeend", + [{ val: ~~(Math.random() * 12) + 1 }].map(card).join`` + ); + }); +};