${val}
Skip-Bo
diff --git a/src/static/test.css b/src/static/main.css
similarity index 81%
rename from src/static/test.css
rename to src/static/main.css
index 2d9ead5..c918b44 100644
--- a/src/static/test.css
+++ b/src/static/main.css
@@ -1,230 +1,257 @@
-* {
- margin: 0;
- padding: 0;
- overflow: hidden;
- position: relative;
- background-color: rgb(18, 153, 0);
-}
-
-#debug {
- position: absolute;
- bottom: 0;
- z-index: 999;
-}
-
-#spielfeld {
- display: grid;
- grid-template-rows: 1fr auto 1fr;
- grid-template-columns: 1fr;
- grid-row-gap: 40px;
- height: 100%;
-}
-
-#player {
- width: 98%;
- height: 200px;
- margin: auto;
- display: grid;
- grid-column-gap: 5px;
- grid-template-columns: repeat(2, 1fr);
-}
-
-.player {
- box-sizing: border-box;
- border-style: none solid solid solid;
- border-bottom-left-radius: 10px;
- border-bottom-right-radius: 10px;
-}
-#player1 {
- width: 95%;
- margin: auto;
- 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;
-}
-.playername {
- text-align: center;
- font-weight: bold;
-}
-
-.pile {
- width: 95%;
- margin: auto;
- height: 160px;
- display: grid;
- grid-template-columns: 2fr repeat(4, 1fr);
- grid-column-gap: 2px;
-}
-.pileslot {
- width: 110px;
- border: 1px solid #000;
- background-color: #fff !important;
- border-radius: 10px;
-}
-
-.pileslot:nth-child(0) {
- border: 0;
-}
-
-#mainstock_pile {
- width: 500px;
- height: 200px;
- display: grid;
- margin: auto;
- grid-template-columns: repeat(4, 1fr);
-}
-.mainstock_pile {
- width: 110px;
- height: 160px;
- border: 1px solid #000;
- background-color: #fff;
- border-radius: 10px;
-}
-
-.card_outer {
- 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: 18pt;
- font-weight: bold;
- background-color: #fff;
-}
-.card_number_middle {
- position: absolute;
- top: 50%;
- left: 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;
+html, body {
+ height: 100%;
+ min-height: 100%;
+}
+* {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ position: relative;
+ user-drag: none;
+ user-select: none;
+}
+
+#debug {
+ position: absolute;
+ bottom: 0;
+ z-index: 999;
+}
+
+.player {
+ height: 200px;
+ box-sizing: border-box;
+ border-style: none solid solid solid;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+}
+.playername {
+ text-align: center;
+ font-weight: bold;
+}
+
+.pile {
+ width: 95%;
+ margin: auto;
+ height: 160px;
+ display: grid;
+ grid-template-columns: 2fr repeat(4, 1fr);
+ grid-column-gap: 2px;
+}
+.pileslot {
+ width: 110px;
+ border: 1px solid #000;
+ background-color: #fff;
+ border-radius: 10px;
+}
+.handslot {
+ width: 110px;
+ border: 1px solid #000;
+ background-color: #fff;
+ border-radius: 10px;
+}
+
+#mainstock_pile {
+ width: 500px;
+ height: 200px;
+ display: grid;
+ margin: auto;
+ grid-template-columns: repeat(4, 1fr);
+}
+.mainstock_pile {
+ width: 110px;
+ height: 160px;
+ border: 1px solid #000;
+ background-color: #fff;
+ border-radius: 10px;
+}
+
+.card_outer {
+ height: 100%;
+ width: 100%;
+ 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%
+ );
+}
+.card_color_red {
+ background: linear-gradient(
+ 45deg,
+ #d41389 20%,
+ white 20%,
+ white 80%,
+ #d41389 80%
+ );
+}
+.card_color_blue {
+ background: linear-gradient(
+ 45deg,
+ #27388b 20%,
+ white 20%,
+ 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: 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_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%;
+ 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;
+}
+
+#spielfeld {
+ height: 100vh;
+ background-color: rgb(18, 153, 0);
+}
+
+#player {
+ width: 95%;
+ height: 200px;
+ display: grid;
+ grid-column-gap: 5px;
+ grid-template-columns: repeat(2, 1fr);
+ position: fixed;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+#mainstock {
+ height: 200px;
+ width: 100%;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+#player_self {
+ width: 95%;
+ 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;
+ 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;
+}
+#player1_pile {
+ grid-area: c;
}
\ No newline at end of file