Update app.py

app.py

@@ -1,7 +1,5 @@
 import gradio as gr
 import random
-import threading
-import time
 
 # trạng thái game
 state = {
@@ -35,6 +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]
 
+    # Chọn màu áo và số cầu thủ
     if state["turn"] == "A":
         shirt_color = "#2196F3"
         pants_color = "#1565C0"
@@ -50,7 +49,9 @@ def draw_scene(keeper_pos="giữa", ball_dir="giữa", is_goal=True, reset=False
         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"
@@ -58,9 +59,11 @@ def draw_scene(keeper_pos="giữa", ball_dir="giữa", is_goal=True, reset=False
         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;">
+                <!-- Cúp vàng -->
                 <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>
+                <!-- 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>
@@ -79,12 +82,16 @@ def draw_scene(keeper_pos="giữa", ball_dir="giữa", is_goal=True, reset=False
         """
         return html
 
+    # 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 -->
         <div style="position:absolute;top:40px;left:15%;width:70%;height:140px;border:6px solid white;border-bottom:none;"></div>
+        <!-- Lưới -->
         <div style="position:absolute;top:40px;left:15%;width:70%;height:140px;
             background:repeating-linear-gradient(to right, transparent, transparent 10px, rgba(255,255,255,0.2) 12px),
             repeating-linear-gradient(to bottom, transparent, transparent 10px, rgba(255,255,255,0.2) 12px);"></div>
+        <!-- Thủ môn -->
         <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>
@@ -97,6 +104,7 @@ def draw_scene(keeper_pos="giữa", ball_dir="giữa", is_goal=True, reset=False
                 <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%);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;">
@@ -111,6 +119,7 @@ def draw_scene(keeper_pos="giữa", ball_dir="giữa", is_goal=True, reset=False
                 <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%;
                     animation: shoot 0.7s ease-out forwards;"></div>
         <style>
@@ -128,6 +137,15 @@ def shoot_penalty(direction):
     hit = direction != keeper
     return keeper, hit
 
+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
+
 def prepare_next_turn():
     state["turn"] = "B" if state["turn"]=="A" else "A"
     if state["turn"]=="A": state["round"] +=1
@@ -153,24 +171,6 @@ def reset_game():
     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."
 
-def next_turn_auto(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)
-
-    def delayed_next():
-        time.sleep(2)
-        score_text_val, scene_reset, msg_end = prepare_next_turn()
-        score_text.update(score_text_val)
-        field.update(scene_reset)
-        result.update(msg_end)
-
-    threading.Thread(target=delayed_next, daemon=True).start()
-    return msg, scene
-
 with gr.Blocks() as demo:
     gr.Markdown("# ⚽ Penalty – Cầu thủ nâng cúp bằng CSS khi vô địch")
 
@@ -182,11 +182,13 @@ 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")
     btn_restart = gr.Button("🔄 Chơi lại")
 
-    btn_left.click(lambda _: next_turn_auto("trái"), inputs=None, outputs=[result, field])
-    btn_center.click(lambda _: next_turn_auto("giữa"), inputs=None, outputs=[result, field])
-    btn_right.click(lambda _: next_turn_auto("phải"), inputs=None, outputs=[result, field])
+    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()
+demo.launch()