Update app.py

app.py

@@ -5,7 +5,7 @@ import random
 state = {
     "score_a": 0,
     "score_b": 0,
-    "turn": "A",  # lượt đội A hoặc B
+    "turn": "A",
     "round": 1,
     "total_rounds": 5
 }
@@ -33,24 +33,29 @@ def draw_scene(keeper_pos="giữa", ball_dir="giữa", is_goal=True, reset=False
                 "phải": "translate(180px, -50px)"
             }[ball_dir]
 
-    # màu áo cầu thủ và số áo theo đội
-    if state["turn"]=="A":
-        shirt_color="#2196F3"
-        pants_color="#1565C0"
-        player_number="7"
-        player_name="Ronaldo"
-        keeper_shirt="#FFEB3B"
-        keeper_pants="#FBC02D"
+    # Chọn màu áo và số cầu thủ
+    if state["turn"] == "A":
+        shirt_color = "#2196F3"
+        pants_color = "#1565C0"
+        keeper_shirt = "#FFEB3B"
+        keeper_pants = "#FBC02D"
+        player_number = "7"
+        player_name = "Ronaldo"
     else:
-        shirt_color="#e53935"
-        pants_color="#b71c1c"
-        player_number="10"
-        player_name="Messi"
-        keeper_shirt="#FFFFFF"
-        keeper_pants="#E0E0E0"
-
-    # Nếu có champion: stickman nâng cúp
+        shirt_color = "#e53935"
+        pants_color = "#b71c1c"
+        keeper_shirt = "#FFFFFF"
+        keeper_pants = "#E0E0E0"
+        player_number = "10"
+        player_name = "Messi"
+
+    # Nếu có champion, vẽ cầu thủ nâng cúp
     if champion:
+        # màu áo và số theo đội vô địch
+        shirt_color = "#2196F3" if champion=="A" else "#e53935"
+        pants_color = "#1565C0" if champion=="A" else "#b71c1c"
+        player_number = "7" if champion=="A" else "10"
+        player_name = "Ronaldo" if champion=="A" else "Messi"
         html = f"""
         <div style="position:relative;width:100%;height:360px;background:linear-gradient(#4CAF50,#2e7d32);border-radius:20px;overflow:hidden;">
             <div style="position:absolute;bottom:30px;left:50%;transform:translateX(-50%);text-align:center;">
@@ -58,15 +63,18 @@ def draw_scene(keeper_pos="giữa", ball_dir="giữa", is_goal=True, reset=False
                 <div style="width:20px;height:60px;background:gold;margin:auto;border-radius:4px 4px 0 0;position:relative;">
                     <div style="width:40px;height:15px;background:gold;position:absolute;top:-15px;left:-10px;border-radius:50%;"></div>
                 </div>
-                <!-- Stickman nâng cúp -->
-                <div style="position:relative;width:60px;height:120px;margin:auto;">
-                    <div style='width:18px;height:18px;background:#ffd1a4;border-radius:50%;position:absolute;top:0;left:50%;transform:translateX(-50%);'></div>
-                    <div style='width:6px;height:50px;background:{shirt_color};position:absolute;top:18px;left:50%;transform:translateX(-50%);'></div>
-                    <div style='width:6px;height:40px;background:{shirt_color};position:absolute;top:18px;left:-10px;transform:rotate(-60deg);'></div>
-                    <div style='width:6px;height:40px;background:{shirt_color};position:absolute;top:18px;right:-10px;transform:rotate(60deg);'></div>
-                    <div style='width:6px;height:40px;background:{pants_color};position:absolute;top:68px;left:15%;transform:rotate(20deg);'></div>
-                    <div style='width:6px;height:40px;background:{pants_color};position:absolute;top:68px;right:15%;transform:rotate(-20deg);'></div>
-                    <div style='position:absolute;top:30px;left:50%;transform:translateX(-50%);color:white;font-weight:bold;font-family:sans-serif;font-size:14px;'>{player_number}</div>
+                <!-- Cầu thủ -->
+                <div style="width:18px;height:18px;background:#ffd1a4;border-radius:50%;margin:auto;"></div>
+                <div style="width:30px;height:45px;background:{shirt_color};border-radius:8px;margin:auto;position:relative;">
+                    <span style="position:absolute;top:5px;left:50%;transform:translateX(-50%);color:white;font-weight:bold;font-family:sans-serif;font-size:18px;">{player_number}</span>
+                </div>
+                <div style="display:flex;justify-content:space-between;margin-top:2px;">
+                    <div style="width:8px;height:25px;background:{shirt_color};transform:rotate(20deg);"></div>
+                    <div style="width:8px;height:25px;background:{shirt_color};transform:rotate(-20deg);"></div>
+                </div>
+                <div style="display:flex;justify-content:space-between;">
+                    <div style="width:8px;height:25px;background:{pants_color};"></div>
+                    <div style="width:8px;height:25px;background:{pants_color};"></div>
                 </div>
                 <div style="margin-top:5px;font-weight:bold;color:white;font-family:sans-serif;">{player_name} vô địch!</div>
             </div>
@@ -74,7 +82,7 @@ def draw_scene(keeper_pos="giữa", ball_dir="giữa", is_goal=True, reset=False
         """
         return html
 
-    # stickman bình thường đá penalty
+    # Nếu không phải champion, vẽ sân bình thường
     html = f"""
     <div style="position:relative;width:100%;height:360px;background:linear-gradient(#4CAF50,#2e7d32);border-radius:20px;overflow:hidden;">
         <!-- Khung thành -->
@@ -87,16 +95,29 @@ def draw_scene(keeper_pos="giữa", ball_dir="giữa", is_goal=True, reset=False
         <div style="position:absolute;top:120px;left:50%;transform:{keeper_move[keeper_pos]};transition: all 0.4s ease;">
             <div style="width:18px;height:18px;background:#ffd1a4;border-radius:50%;margin:auto;"></div>
             <div style="width:30px;height:45px;background:{keeper_shirt};border-radius:8px;margin:auto;"></div>
+            <div style="display:flex;justify-content:space-between;">
+                <div style="width:8px;height:25px;background:{keeper_shirt};transform:rotate(30deg);"></div>
+                <div style="width:8px;height:25px;background:{keeper_shirt};transform:rotate(-30deg);"></div>
+            </div>
+            <div style="display:flex;justify-content:space-between;">
+                <div style="width:8px;height:25px;background:{keeper_pants};"></div>
+                <div style="width:8px;height:25px;background:{keeper_pants};"></div>
+            </div>
         </div>
         <!-- Cầu thủ -->
-        <div style="position:absolute;bottom:30px;left:50%;transform:translateX(-50%);">
-            <div style='width:18px;height:18px;background:#ffd1a4;border-radius:50%;margin:auto;'></div>
-            <div style='width:6px;height:50px;background:{shirt_color};position:absolute;top:18px;left:50%;transform:translateX(-50%);'></div>
-            <div style='width:6px;height:40px;background:{shirt_color};position:absolute;top:18px;left:-10px;transform:rotate(20deg);'></div>
-            <div style='width:6px;height:40px;background:{shirt_color};position:absolute;top:18px;right:-10px;transform:rotate(-20deg);'></div>
-            <div style='width:6px;height:40px;background:{pants_color};position:absolute;top:68px;left:-10px;transform:rotate(20deg);'></div>
-            <div style='width:6px;height:40px;background:{pants_color};position:absolute;top:68px;right:-10px;transform:rotate(-20deg);'></div>
-            <div style='position:absolute;top:0;left:50%;transform:translateX(-50%);color:white;font-weight:bold;font-family:sans-serif;font-size:14px;'>{player_number}</div>
+        <div style="position:absolute;bottom:30px;left:50%;transform:translateX(-50%);text-align:center;">
+            <div style="width:18px;height:18px;background:#ffd1a4;border-radius:50%;margin:auto;"></div>
+            <div style="width:30px;height:45px;background:{shirt_color};border-radius:8px;margin:auto;position:relative;">
+                <span style="position:absolute;top:5px;left:50%;transform:translateX(-50%);color:white;font-weight:bold;font-family:sans-serif;font-size:18px;">{player_number}</span>
+            </div>
+            <div style="display:flex;justify-content:space-between;margin-top:2px;">
+                <div style="width:8px;height:25px;background:{shirt_color};transform:rotate(20deg);"></div>
+                <div style="width:8px;height:25px;background:{shirt_color};transform:rotate(-20deg);"></div>
+            </div>
+            <div style="display:flex;justify-content:space-between;">
+                <div style="width:8px;height:25px;background:{pants_color};"></div>
+                <div style="width:8px;height:25px;background:{pants_color};"></div>
+            </div>
         </div>
         <!-- Bóng -->
         <div style="position:absolute;bottom:90px;left:50%;width:14px;height:14px;background:white;border-radius:50%;
@@ -111,55 +132,47 @@ def draw_scene(keeper_pos="giữa", ball_dir="giữa", is_goal=True, reset=False
     """
     return html
 
-# Sút penalty
 def shoot_penalty(direction):
     keeper = random.choice(["trái","giữa","phải"])
     hit = direction != keeper
     return keeper, hit
 
-# xử lý lượt đá
 def next_turn(direction):
     keeper, hit = shoot_penalty(direction)
-    if state["turn"]=="A" and hit: state["score_a"] +=1
-    if state["turn"]=="B" and hit: state["score_b"] +=1
+    if state["turn"] == "A" and hit: state["score_a"] +=1
+    if state["turn"] == "B" and hit: state["score_b"] +=1
     msg = f"Đội {state['turn']} sút {direction}, thủ môn đoán {keeper} → "
     msg += "⚽ Bàn thắng!" if hit else "🧤 Cản phá, bóng dính thủ môn!"
     scene = draw_scene(keeper, direction, hit)
     return msg, scene
 
-# Chuẩn bị lượt tiếp theo
 def prepare_next_turn():
     state["turn"] = "B" if state["turn"]=="A" else "A"
-    if state["turn"]=="A":
-        state["round"] +=1
-
-    # kiểm tra kết thúc
+    if state["turn"]=="A": state["round"] +=1
+    score_text_val = f"**Điểm A: {state['score_a']} | Điểm B: {state['score_b']} | Lượt: {min(state['round'],5)}/5**"
+    scene_reset = draw_scene(reset=True)
+    msg_end = ""
+    champion = None
     if state["round"] > state["total_rounds"]:
         if state["score_a"] > state["score_b"]:
-            scene = draw_scene(champion="A")
             msg_end = f"🏆 Đội A thắng {state['score_a']} - {state['score_b']}!"
+            champion = "A"
         elif state["score_b"] > state["score_a"]:
-            scene = draw_scene(champion="B")
             msg_end = f"🏆 Đội B thắng {state['score_b']} - {state['score_a']}!"
+            champion = "B"
         else:
-            scene = draw_scene(champion="A")  # đội A mặc định nâng cúp khi hòa
             msg_end = f"🤝 Hòa {state['score_a']} - {state['score_b']}!"
-        score_text_val = f"**Điểm A: {state['score_a']} | Điểm B: {state['score_b']} | Lượt: 5/5**"
-        return score_text_val, scene, msg_end
-
-    scene_reset = draw_scene(reset=True)
-    score_text_val = f"**Điểm A: {state['score_a']} | Điểm B: {state['score_b']} | Lượt: {min(state['round'],5)}/5**"
-    return score_text_val, scene_reset, ""
+    if champion:
+        scene_reset = draw_scene(champion=champion)
+    return score_text_val, scene_reset, msg_end
 
-# Reset game
 def reset_game():
     state.update({"score_a":0,"score_b":0,"turn":"A","round":1})
     scene = draw_scene(reset=True)
     return "**Điểm A: 0 | Điểm B: 0 | Lượt: 1/5**", scene, "Game mới bắt đầu! Đội A sút trước."
 
-# Gradio interface
 with gr.Blocks() as demo:
-    gr.Markdown("# ⚽ Penalty 2 Đội – 5 lượt + Stickman + Vô địch nâng cúp")
+    gr.Markdown("# ⚽ Penalty – Cầu thủ nâng cúp bằng CSS khi vô địch")
 
     score_text = gr.Markdown("**Điểm A: 0 | Điểm B: 0 | Lượt: 1/5**")
     result = gr.Markdown("Chọn hướng sút 👇")
@@ -169,10 +182,9 @@ with gr.Blocks() as demo:
         btn_left = gr.Button("⬅️ Trái")
         btn_center = gr.Button("⬆️ Giữa")
         btn_right = gr.Button("➡️ Phải")
-        btn_next = gr.Button("➡️ Tiếp theo")  # reset tư thế chuẩn bị lượt tiếp theo
+        btn_next = gr.Button("➡️ Tiếp theo")
     btn_restart = gr.Button("🔄 Chơi lại")
 
-    # sự kiện
     btn_left.click(lambda _: next_turn("trái"), inputs=None, outputs=[result, field])
     btn_center.click(lambda _: next_turn("giữa"), inputs=None, outputs=[result, field])
     btn_right.click(lambda _: next_turn("phải"), inputs=None, outputs=[result, field])