botao de time out

lib/pages/PlacarPage.dart

@@ -312,7 +312,8 @@ class _PlacarPageState extends State<PlacarPage> {
           : Text(label!, style: const TextStyle(color: Colors.white, fontSize: 24, fontWeight: FontWeight.bold, decoration: TextDecoration.none)),
     );
   }
-}*/import 'dart:async';
+}*/
+import 'dart:async';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
@@ -331,6 +332,10 @@ class _PlacarPageState extends State<PlacarPage> {
   int _opponentFouls = 0;
   int _currentQuarter = 1;
 
+  // VARIÁVEIS DE TIME-OUT (Máximo 3 cada)
+  int _myTimeoutsUsed = 0;
+  int _opponentTimeoutsUsed = 0;
+
   // MAPA PARA GUARDAR ESTATÍSTICAS INDIVIDUAIS (Key: Nome do Jogador)
   final Map<String, Map<String, int>> _playerStats = {
     "Russell": {"pts": 0, "rbs": 0, "ast": 0},
@@ -373,6 +378,20 @@ class _PlacarPageState extends State<PlacarPage> {
     setState(() => _isRunning = !_isRunning);
   }
 
+  // FUNÇÃO PARA USAR TIME-OUT
+  void _useTimeout(bool isOpponent) {
+    setState(() {
+      if (isOpponent) {
+        if (_opponentTimeoutsUsed < 3) _opponentTimeoutsUsed++;
+      } else {
+        if (_myTimeoutsUsed < 3) _myTimeoutsUsed++;
+      }
+      // Para o cronómetro automaticamente ao pedir Time-Out
+      _isRunning = false;
+      _timer?.cancel();
+    });
+  }
+
   String _formatTime(Duration d) => 
       "${d.inMinutes.toString().padLeft(2, '0')}:${d.inSeconds.remainder(60).toString().padLeft(2, '0')}";
 
@@ -483,7 +502,6 @@ class _PlacarPageState extends State<PlacarPage> {
                 children: [
                   Text(name, style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.black87)),
                   const SizedBox(height: 2),
-                  // AGORA MOSTRA OS PONTOS REAIS DO MAPA
                   Text(
                     "${stats["pts"]} Pts | ${stats["rbs"]} Rbs | ${stats["ast"]} Ast", 
                     style: const TextStyle(fontSize: 12, color: Colors.grey, fontWeight: FontWeight.w500)
@@ -508,7 +526,8 @@ class _PlacarPageState extends State<PlacarPage> {
       child: Row(
         mainAxisSize: MainAxisSize.min, 
         children: [
-          _buildTeamSection(widget.myTeam, _myScore, _myFouls, const Color(0xFF1E5BB2), false),
+          // Passamos os Time-outs usados para a secção da Casa
+          _buildTeamSection(widget.myTeam, _myScore, _myFouls, _myTimeoutsUsed, const Color(0xFF1E5BB2), false),
           const SizedBox(width: 25),
           Column(
             children: [
@@ -518,16 +537,45 @@ class _PlacarPageState extends State<PlacarPage> {
             ],
           ),
           const SizedBox(width: 25),
-          _buildTeamSection(widget.opponentTeam, _opponentScore, _opponentFouls, const Color(0xFFD92C2C), true),
+          // Passamos os Time-outs usados para a secção Visitante
+          _buildTeamSection(widget.opponentTeam, _opponentScore, _opponentFouls, _opponentTimeoutsUsed, const Color(0xFFD92C2C), true),
         ],
       ),
     );
   }
 
-  Widget _buildTeamSection(String name, int score, int fouls, Color color, bool isOpp) {
+  Widget _buildTeamSection(String name, int score, int fouls, int timeouts, Color color, bool isOpp) {
-    final info = Column(children: [_scoreBox(score, color), Text("FALTAS: $fouls", style: const TextStyle(color: Colors.yellowAccent, fontSize: 12))]);
+    // AS 3 BOLAS DE TIME-OUT
-    return Row(children: isOpp ? [info, const SizedBox(width: 15), Text(name.toUpperCase(), style: const TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold))] 
+    final timeoutIndicators = Row(
-                               : [Text(name.toUpperCase(), style: const TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold)), const SizedBox(width: 15), info]);
+      mainAxisSize: MainAxisSize.min,
+      children: List.generate(3, (index) => Container(
+        margin: const EdgeInsets.symmetric(horizontal: 3),
+        width: 12, height: 12,
+        decoration: BoxDecoration(
+          shape: BoxShape.circle,
+          // Se o index for menor que os usados, fica Amarelo. Se não, fica Cinzento.
+          color: index < timeouts ? Colors.yellow : Colors.grey.shade600,
+          border: Border.all(color: Colors.black26),
+        ),
+      )),
+    );
+
+    final info = Column(
+      children: [
+        _scoreBox(score, color), 
+        const SizedBox(height: 4),
+        Text("FALTAS: $fouls", style: const TextStyle(color: Colors.yellowAccent, fontSize: 12)),
+        const SizedBox(height: 4),
+        timeoutIndicators, // Adicionamos os indicadores aqui
+      ]
+    );
+
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: isOpp 
+        ? [info, const SizedBox(width: 15), Text(name.toUpperCase(), style: const TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold))] 
+        : [Text(name.toUpperCase(), style: const TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold)), const SizedBox(width: 15), info]
+    );
   }
 
   Widget _timeDisplay() => Container(
@@ -549,6 +597,8 @@ class _PlacarPageState extends State<PlacarPage> {
         Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
+            // Botão Time-Out EQUIPA DA CASA (Azul)
+            _actionBtn("T.O", const Color(0xFF1E5BB2), () => _useTimeout(false)),
             _dragBtn("1", Colors.orange, 1),
             _dragBtn("2", Colors.orange, 2),
             _dragBtn("3", Colors.orange, 3),
@@ -559,6 +609,8 @@ class _PlacarPageState extends State<PlacarPage> {
         Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
+            // Botão Time-Out EQUIPA VISITANTE (Vermelho)
+            _actionBtn("T.O", const Color(0xFFD92C2C), () => _useTimeout(true)),
             _actionBtn("1", Colors.orange, () {}, isX: true),
             _actionBtn("2", Colors.orange, () {}, isX: true),
             _actionBtn("3", Colors.orange, () {}, isX: true),