Update app.py

app.py

@@ -1,10 +1,11 @@
 import gradio as gr
 import random
 
+# trạng thái game
 state = {
     "score_a": 0,
     "score_b": 0,
-    "turn": "A",
+    "turn": "A",  # lượt đội A hoặc B
     "round": 1,
     "total_rounds": 5
 }
@@ -32,7 +33,7 @@ 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
+    # màu áo cầu thủ và số áo theo đội
     if state["turn"]=="A":
         shirt_color="#2196F3"
         pants_color="#1565C0"
@@ -48,8 +49,8 @@ def draw_scene(keeper_pos="giữa", ball_dir="giữa", is_goal=True, reset=False
         keeper_shirt="#FFFFFF"
         keeper_pants="#E0E0E0"
 
+    # Nếu có champion: stickman nâng cúp
     if champion:
-        # stickman nâng cúp
         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;">
@@ -57,14 +58,14 @@ 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 -->
+                <!-- 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:0;transform:rotate(-60deg);transform-origin:top;'></div>
-                    <div style='width:6px;height:40px;background:{shirt_color};position:absolute;top:18px;right:0;transform:rotate(60deg);transform-origin:top;'></div>
-                    <div style='width:6px;height:40px;background:{pants_color};position:absolute;top:68px;left:20%;transform:rotate(20deg);'></div>
-                    <div style='width:6px;height:40px;background:{pants_color};position:absolute;top:68px;right:20%;transform:rotate(-20deg);'></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>
                 </div>
                 <div style="margin-top:5px;font-weight:bold;color:white;font-family:sans-serif;">{player_name} vô địch!</div>
@@ -90,7 +91,7 @@ def draw_scene(keeper_pos="giữa", ball_dir="giữa", is_goal=True, reset=False
         <!-- 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};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>
@@ -108,4 +109,74 @@ def draw_scene(keeper_pos="giữa", ball_dir="giữa", is_goal=True, reset=False
         </style>
     </div>
     """
-    return html
+    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
+    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["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']}!"
+        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']}!"
+        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, ""
+
+# 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")
+
+    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 👇")
+    field = gr.HTML(draw_scene(reset=True))
+
+    with gr.Row():
+        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_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])
+    btn_next.click(lambda _: prepare_next_turn(), inputs=None, outputs=[score_text, field, result])
+    btn_restart.click(lambda _: reset_game(), inputs=None, outputs=[score_text, field, result])
+
+demo.launch()