feat: allow grouping cards (#5)

Oliboy50 · Aug 1, 2022 · 757c0f7 · 757c0f7
1 parent 2c68119
commit 757c0f7
Show file tree

Hide file tree

Showing 3 changed files with 484 additions and 124 deletions.
diff --git a/gameinfos.inc.php b/gameinfos.inc.php
@@ -70,7 +70,6 @@
     // Note: if you are NOT using any tie breaker, leave the empty string.
     //
     // Example: 'tie_breaker_description' => totranslate( "Number of remaining cards in hand" ),
-    // @TODO: tie breaker
     'tie_breaker_description' => '',
 
     // If in the game, all losers are equal (no score to rank them or explicit in the rules that losers are not ranked between them), set this to true

diff --git a/velonimo.css b/velonimo.css
@@ -267,6 +267,10 @@ Current player hand
     display: inline-block;
     margin: 0 0 0 10px;
 }
+#group-cards-button {
+    display: inline-block;
+    margin: 0 0 0 10px;
+}
 #my-hand .stockitem {
     border-radius: 10px;
     margin: 5px;
@@ -337,6 +341,62 @@ Cards
     width: 1em;
     pointer-events: none;
 }
+.cards-group-card::after {
+    content: "";
+    border-top: 4px solid black;
+    border-bottom: 4px solid black;
+    position: absolute;
+    top: -2px;
+    bottom: -2px;
+    left: -3px;
+    right: -3px;
+}
+.cards-group-card-left::before {
+    content: "";
+    border-left: 4px solid black;
+    position: absolute;
+    top: -2px;
+    bottom: -2px;
+    left: -3px;
+}
+.cards-group-card-right::before {
+    content: "";
+    border-right: 4px solid black;
+    position: absolute;
+    top: -2px;
+    bottom: -2px;
+    right: -3px;
+}
+.cards-group-card.cards-group-1::after,
+.cards-group-card-left.cards-group-1::before,
+.cards-group-card-right.cards-group-1::before {
+    border-color: green;
+}
+.cards-group-card.cards-group-2::after,
+.cards-group-card-left.cards-group-2::before,
+.cards-group-card-right.cards-group-2::before {
+    border-color: red;
+}
+.cards-group-card.cards-group-3::after,
+.cards-group-card-left.cards-group-3::before,
+.cards-group-card-right.cards-group-3::before {
+    border-color: blue;
+}
+.cards-group-card.cards-group-4::after,
+.cards-group-card-left.cards-group-4::before,
+.cards-group-card-right.cards-group-4::before {
+    border-color: orange;
+}
+.cards-group-card.cards-group-5::after,
+.cards-group-card-left.cards-group-5::before,
+.cards-group-card-right.cards-group-5::before {
+    border-color: hotpink;
+}
+.cards-group-card.cards-group-6::after,
+.cards-group-card-left.cards-group-6::before,
+.cards-group-card-right.cards-group-6::before {
+    border-color: royalblue;
+}
 /**
 END Cards
  */