Update app.py

app.py

@@ -1,5 +1,7 @@
 import gradio as gr
 import random
+import threading
+import time
 
 # trạng thái game
 state = {
@@ -33,7 +35,6 @@ 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"
@@ -49,9 +50,7 @@ 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"
@@ -59,11 +58,9 @@ 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>
@@ -82,16 +79,12 @@ 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>
@@ -104,7 +97,6 @@ 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;">
@@ -119,7 +111,6 @@ 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>
@@ -137,15 +128,6 @@ 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
@@ -171,6 +153,24 @@ 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,13 +182,11 @@ 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("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_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_restart.click(lambda _: reset_game(), inputs=None, outputs=[score_text, field, result])
 
 demo.launch()