feat: number of cards in player panel + selected cards value shown in…

… my-hand + better player colors + simplify cards group behavior

gameinfos.inc.php

@@ -94,7 +94,7 @@
     'complexity' => 1,
 
     // Luck of the game, from 0 (absolutely no luck in this game) to 5 (totally luck driven)
-    'luck' => 4,
+    'luck' => 3,
 
     // Strategy of the game, from 0 (no strategy can be setup) to 5 (totally based on strategy)
     'strategy' => 3,
@@ -103,7 +103,7 @@
     'diplomacy' => 2,
 
     // Colors attributed to players
-    'player_colors' => ['ff0000', '00aa00', '2222ff', 'ffbb00', '222222'],
+    'player_colors' => ['ff4444', '22aa22', '0077ff', 'dd00dd', '777777'],
 
     // Favorite colors support : if set to "true", support attribution of favorite colors based on player's preferences (see reattributeColorsBasedOnPreferences PHP method)
     // NB: this parameter is used only to flag games supporting this feature; you must use (or not use) reattributeColorsBasedOnPreferences PHP method to actually enable or disable the feature.

velonimo.css

@@ -83,6 +83,7 @@ Board
     top: 0;
     left: 2px;
     text-align: center;
+    text-transform: uppercase;
     border: 1px solid black;
     border-radius: 8px;
 }
@@ -416,17 +417,47 @@ Current player hand
 .spectatorMode #my-hand-wrapper {
     display: none;
 }
-#my-hand-title {
-    display: inline-block;
+#my-hand-title-wrapper {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-content: center;
+    justify-content: space-between;
+    align-items: center;
 }
-#toggle-sort-button {
-    display: inline-block;
-    margin: 0 0 0 10px;
+#my-hand-title-wrapper-left {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: center;
+    align-items: center;
 }
+#my-hand-title-wrapper-right {
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: center;
+    align-items: center;
+}
+#my-hand-title {
+    margin-left: 5px;
+    text-decoration: underline;
+}
+#toggle-sort-button,
 #group-cards-button,
 #ungroup-cards-button {
-    display: inline-block;
-    margin: 0 0 0 10px;
+    margin-left: 10px;
+}
+#my-hand-selected-cards {
+    padding: 10px;
+    border: 1px solid black;
+    border-radius: 40px;
+}
+#my-hand-selected-cards-value {
+    margin-left: 5px;
+    font-weight: bold;
 }
 #my-hand .stockitem {
     border-radius: 10px;
@@ -583,8 +614,37 @@ END Log HTML
 /**
 Player panel HTML
  */
+.player-panel-velonimo-wrapper {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-content: center;
+    justify-content: space-between;
+    align-items: center;
+}
+.player-panel-velonimo-left {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: center;
+    align-items: center;
+}
+.player-panel-velonimo-right {
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: center;
+    align-items: center;
+}
+.player-panel-number-of-remaining-cards {
+    width: 40px;
+    margin-top: 10px;
+    margin-right: 10px;
+    text-align: center;
+}
 .player-panel-jersey {
-    display: inline-block;
     width: 40px;
     height: 40px;
     background-size: 40px 40px;