[UI] Keep experimenting with better (??) ways to display black pieces' symbol

Author: olivierphi

src/apps/chess/components/chess_board.py

@@ -574,7 +574,7 @@ def chess_character_display(
         is_potential_capture = True  # let's highlight checks in "see solution" mode
 
     horizontal_translation = (
-        ("left-3" if is_knight else "left-0")
+        ("left-2" if (is_knight or is_king) else "left-0")
         if is_from_original_left_hand_side
         else "right-0"
     )
@@ -607,9 +607,9 @@ def chess_character_display(
             )
             if is_highlighted
             else (
-                "drop-shadow-piece-symbol-w"
+                "drop-shadow-piece-unit-w"
                 if piece_player_side == "w"
-                else "drop-shadow-piece-symbol-b"
+                else "drop-shadow-piece-unit-b"
             )
         ),
         "drop-shadow-potential-capture" if is_potential_capture else "",
@@ -675,9 +675,9 @@ def chess_unit_symbol_display(
 
     is_knight, is_pawn = piece_type == "n", piece_type == "p"
 
-    # We always display a "w" symbol, because for some reason I find the board
-    # game clearer that way. We'll just make it a bit less white for "b" pieces.
-    unit_symbol_class = chess_unit_symbol_class(player_side="w", piece_name=piece_name)
+    unit_symbol_class = chess_unit_symbol_class(
+        player_side=player_side, piece_name=piece_name
+    )
 
     symbol_class = (
         # We have to do some ad-hoc adjustments for Knights and Pawns:
@@ -691,7 +691,6 @@ def chess_unit_symbol_display(
             if player_side == "w"
             else "drop-shadow-piece-symbol-b"
         ),
-        *(("brightness-60",) if player_side == "b" else []),
         unit_symbol_class,
     )
     symbol_display = div(

tailwind.config.js

@@ -11,9 +11,12 @@ const FACTIONS = ["humans", "undeads"]
 const PLAYABLE_SELECTION_COLOR = "#ffff00"
 const NON_PLAYABLE_SELECTION_COLOR = "#ffd000"
 const POTENTIAL_CAPTURE_COLOR = "#c00000"
-const PIECE_SYMBOL_BORDER_OPACITY = Math.round(0.4 * 0xff).toString(16) // 40% of 255
+const PIECE_UNIT_BORDER_OPACITY = Math.round(0.5 * 0xff).toString(16) // 50% of 255
+const PIECE_SYMBOL_BORDER_OPACITY = Math.round(0.75 * 0xff).toString(16) // 75% of 255
+const PIECE_UNIT_W = `#065f46${PIECE_UNIT_BORDER_OPACITY}` // emerald-800
+const PIECE_UNIT_B = `#3730a3${PIECE_UNIT_BORDER_OPACITY}` // indigo-800
 const PIECE_SYMBOL_W = `#065f46${PIECE_SYMBOL_BORDER_OPACITY}` // emerald-800
-const PIECE_SYMBOL_B = `#3730a3${PIECE_SYMBOL_BORDER_OPACITY}` // indigo-800
+const PIECE_SYMBOL_B = `#a855f7${PIECE_SYMBOL_BORDER_OPACITY}` // purple-500
 const PIECES_DROP_SHADOW_OFFSET = 1 // px
 const SPEECH_BUBBLE_DROP_SHADOW_COLOR = "#fbbf24" // amber-400
 
@@ -82,8 +85,8 @@ module.exports = {
                 size: "width, height",
             },
             dropShadow: {
-                // "piece-symbol-w": `0 0 0.1rem ${PIECE_SYMBOL_W}`,
-                // "piece-symbol-b": `0 0 0.1rem ${PIECE_SYMBOL_B}`,
+                "piece-unit-w": borderFromDropShadow(1, PIECE_UNIT_W),
+                "piece-unit-b": borderFromDropShadow(1, PIECE_UNIT_B),
                 "piece-symbol-w": borderFromDropShadow(1, PIECE_SYMBOL_W),
                 "piece-symbol-b": borderFromDropShadow(1, PIECE_SYMBOL_B),
                 "playable-selected-piece": borderFromDropShadow(PIECES_DROP_SHADOW_OFFSET, PLAYABLE_SELECTION_COLOR),