Update app.py

app.py

@@ -1,7 +1,6 @@
 import gradio as gr
 import numpy as np
-import matplotlib.pyplot as plt
-import random
+import json
 
 class Minesweeper:
     def __init__(self, width=8, height=8, num_mines=10):
@@ -81,126 +80,148 @@ class Minesweeper:
         elif self.visible_board[x, y] == -1:
             self.visible_board[x, y] = -2
 
-def create_board_image(game):
-    fig, ax = plt.subplots(figsize=(8, 8))
-    
-    colors = {
-        -2: '#CCCCCC',  # Coberto
-        -1: '#FF0000',  # Bandeira/Mina
-        0: '#FFFFFF',   # Vazio
-        1: '#0000FF',   # Azul
-        2: '#008000',   # Verde
-        3: '#FF0000',   # Vermelho
-        4: '#000080',   # Azul escuro
-        5: '#800000',   # Vermelho escuro
-        6: '#008080',   # Ciano
-        7: '#000000',   # Preto
-        8: '#808080'    # Cinza
+def create_game_html(game):
+    # Cores para diferentes estados das células
+    cell_styles = {
+        -2: "background-color: #ccc;",  # Coberto
+        -1: "background-color: #f00;",  # Bandeira
+        0: "background-color: #fff;",   # Vazio
+        1: "background-color: #fff; color: blue;",
+        2: "background-color: #fff; color: green;",
+        3: "background-color: #fff; color: red;",
+        4: "background-color: #fff; color: darkblue;",
+        5: "background-color: #fff; color: darkred;",
+        6: "background-color: #fff; color: teal;",
+        7: "background-color: #fff; color: black;",
+        8: "background-color: #fff; color: gray;"
     }
     
-    for i in range(game.height):
-        for j in range(game.width):
-            color = colors[game.visible_board[i, j]]
-            ax.add_patch(plt.Rectangle((j, game.height-1-i), 1, 1, facecolor=color, edgecolor='black'))
-            
-            if game.visible_board[i, j] > 0:
-                plt.text(j+0.5, game.height-1-i+0.5, str(game.visible_board[i, j]),
-                        horizontalalignment='center',
-                        verticalalignment='center',
-                        color='black')
-            elif game.visible_board[i, j] == -1:
-                plt.text(j+0.5, game.height-1-i+0.5, 'F',
-                        horizontalalignment='center',
-                        verticalalignment='center',
-                        color='black')
-    
-    if game.game_over:
-        for i in range(game.height):
-            for j in range(game.width):
-                if game.board[i, j] == -1:
-                    ax.add_patch(plt.Rectangle((j, game.height-1-i), 1, 1, facecolor='red', edgecolor='black'))
-                    plt.text(j+0.5, game.height-1-i+0.5, 'M',
-                            horizontalalignment='center',
-                            verticalalignment='center',
-                            color='black')
-    
-    ax.set_xlim(0, game.width)
-    ax.set_ylim(0, game.height)
-    ax.set_xticks(range(game.width))
-    ax.set_yticks(range(game.height))
-    ax.grid(True)
-    
-    status = "Jogando"
+    html = """
+    <style>
+        .minesweeper-board {
+            display: inline-block;
+            border: 2px solid #999;
+            background-color: #eee;
+            padding: 10px;
+        }
+        .board-row {
+            display: flex;
+        }
+        .cell {
+            width: 40px;
+            height: 40px;
+            border: 1px solid #999;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            font-size: 20px;
+            cursor: pointer;
+            user-select: none;
+        }
+        .game-over .cell {
+            cursor: not-allowed;
+        }
+    </style>
+    
+    <div class="minesweeper-board">
+    """
+    
+    # Adicionar status do jogo
     if game.game_over:
-        status = "Game Over!"
+        html += '<div style="text-align: center; margin-bottom: 10px; color: red; font-weight: bold;">Game Over!</div>'
     elif game.won:
-        status = "Você Venceu!"
+        html += '<div style="text-align: center; margin-bottom: 10px; color: green; font-weight: bold;">Você Venceu!</div>'
     
-    plt.title(f'Campo Minado - {status}')
-    return fig
+    # Criar tabuleiro
+    for i in range(game.height):
+        html += '<div class="board-row">'
+        for j in range(game.width):
+            cell_value = game.visible_board[i, j]
+            style = cell_styles[cell_value]
+            
+            # Se o jogo acabou, mostrar as minas
+            if game.game_over and game.board[i, j] == -1:
+                cell_content = "💣"
+                style = "background-color: #f00;"
+            # Se é uma bandeira
+            elif cell_value == -1:
+                cell_content = "🚩"
+            # Se está coberto
+            elif cell_value == -2:
+                cell_content = ""
+            # Se é um número
+            else:
+                cell_content = str(cell_value) if cell_value > 0 else ""
+            
+            html += f'<div class="cell" style="{style}" data-x="{i}" data-y="{j}">{cell_content}</div>'
+        html += '</div>'
+    html += '</div>'
+    
+    # Adicionar JavaScript para handling de cliques
+    html += """
+    <script>
+        function handleCellClick(event) {
+            const cell = event.target;
+            if (!cell.classList.contains('cell')) return;
+            
+            const x = cell.getAttribute('data-x');
+            const y = cell.getAttribute('data-y');
+            
+            if (event.button === 2 || event.ctrlKey) {  // Clique direito ou Ctrl+Clique
+                handleAction(x, y, 'flag');
+            } else {  // Clique esquerdo
+                handleAction(x, y, 'reveal');
+            }
+        }
+        
+        document.querySelector('.minesweeper-board').addEventListener('click', handleCellClick);
+        document.querySelector('.minesweeper-board').addEventListener('contextmenu', (e) => {
+            e.preventDefault();
+            handleCellClick(e);
+        });
+    </script>
+    """
+    
+    return html
 
-def make_move(x, y, action, game_state):
+def handle_action(x, y, action, game_state):
     if not game_state:
-        game = Minesweeper(8, 8, 10)
+        game = Minesweeper()
     else:
-        game = Minesweeper(8, 8, 10)
+        game = Minesweeper()
         game.__dict__ = game_state
     
     if action == "reveal":
-        game.reveal(x, y)
+        game.reveal(int(x), int(y))
     else:
-        game.toggle_flag(x, y)
+        game.toggle_flag(int(x), int(y))
     
-    fig = create_board_image(game)
-    status = "Jogando"
-    if game.game_over:
-        status = "Game Over!"
-    elif game.won:
-        status = "Você Venceu!"
-    
-    return fig, game.__dict__, status
+    return create_game_html(game), game.__dict__
 
 def new_game():
-    game = Minesweeper(8, 8, 10)
-    fig = create_board_image(game)
-    return fig, game.__dict__, "Novo jogo iniciado!"
+    game = Minesweeper()
+    return create_game_html(game), game.__dict__
 
 with gr.Blocks(title="Campo Minado") as demo:
     gr.Markdown("""
     # Campo Minado
     
     Instruções:
-    1. Digite as coordenadas (0-7) para linha e coluna
-    2. Escolha "Revelar" para abrir uma célula ou "Bandeira" para marcar uma mina
-    3. Evite as minas e revele todas as células seguras!
+    - Clique esquerdo para revelar uma célula
+    - Clique direito (ou Ctrl+Clique) para colocar/remover bandeira
+    - Evite as minas!
     """)
     
     game_state = gr.State()
-    board = gr.Plot(label="Tabuleiro")
-    status = gr.Textbox(label="Status do Jogo", interactive=False)
-    
-    with gr.Row():
-        x_coord = gr.Number(label="Linha (0-7)", minimum=0, maximum=7, step=1)
-        y_coord = gr.Number(label="Coluna (0-7)", minimum=0, maximum=7, step=1)
+    board = gr.HTML()
     
     with gr.Row():
-        reveal_btn = gr.Button("Revelar")
-        flag_btn = gr.Button("Bandeira")
         new_game_btn = gr.Button("Novo Jogo")
     
-    reveal_btn.click(
-        make_move,
-        inputs=[x_coord, y_coord, gr.Textbox(value="reveal", visible=False), game_state],
-        outputs=[board, game_state, status]
-    )
-    
-    flag_btn.click(
-        make_move,
-        inputs=[x_coord, y_coord, gr.Textbox(value="flag", visible=False), game_state],
-        outputs=[board, game_state, status]
-    )
+    board.change(handle_action, [board], [board, game_state])  # Para atualização após cliques
+    new_game_btn.click(new_game, outputs=[board, game_state])
     
-    new_game_btn.click(new_game, outputs=[board, game_state, status])
-    demo.load(new_game, outputs=[board, game_state, status])
+    demo.load(new_game, outputs=[board, game_state])
 
 demo.launch()