Completed matches scheduling

tournament-frontend/src/App.js

@@ -57,11 +57,22 @@ function App() {
       setLoadingTournaments(true);
       try {
         const res = await fetch('/api/tournaments');
-        if (res.ok) {
-          const data = await res.json();
+        const data = await res.json();
+        if (Array.isArray(data)) {
           setTournaments(data);
+          // Automatically select the most recent tournament if none is selected
+          const storedName = localStorage.getItem('tournamentName');
+          if ((!storedName || storedName === '') && data.length > 0) {
+            setTournamentName(data[0].name);
+            setTournamentDate(data[0].date);
+            setTournamentLocation(data[0].location);
+            localStorage.setItem('tournamentName', data[0].name);
+            localStorage.setItem('tournamentDate', data[0].date);
+            localStorage.setItem('tournamentLocation', data[0].location);
+          }
         } else {
-          console.error('Failed to load tournaments');
+          setTournaments([]);
+          console.error('API /api/tournaments did not return an array:', data);
         }
       } catch (err) {
         console.error('Error loading tournaments:', err);

tournament-frontend/src/MatchesSchedule.js

@@ -3,12 +3,12 @@ import './MatchesSchedule.css';
 import TeamLogo from './TeamLogo';
 
 const poolColors = [
-  '#f8fafc', // light blue
-  '#fef9c3', // light yellow
-  '#fce7f3', // light pink
-  '#d1fae5', // light green
-  '#fee2e2', // light red
-  '#e0e7ff', // light purple
+  '#bae6fd', // darker blue
+  '#fde68a', // darker yellow
+  '#f9a8d4', // darker pink
+  '#6ee7b7', // darker green
+  '#fca5a5', // darker red
+  '#a5b4fc', // darker purple
 ];
 
 function groupMatchesByPoolAndRound(matches) {

tournament-frontend/src/Pools.js

@@ -2,14 +2,26 @@ import React, { useEffect, useState } from 'react';
 import TeamLogo from './TeamLogo';
 
 const poolColors = [
-  '#f8fafc', // light blue
-  '#fef9c3', // light yellow
-  '#fce7f3', // light pink
-  '#d1fae5', // light green
-  '#fee2e2', // light red
-  '#e0e7ff', // light purple
+  '#bae6fd', // darker blue
+  '#fde68a', // darker yellow
+  '#f9a8d4', // darker pink
+  '#6ee7b7', // darker green
+  '#fca5a5', // darker red
+  '#a5b4fc', // darker purple
 ];
 
+// Helper to convert hex color to rgba with alpha
+function hexToRgba(hex, alpha) {
+  // Remove # if present
+  hex = hex.replace('#', '');
+  // Parse r, g, b
+  const bigint = parseInt(hex, 16);
+  const r = (bigint >> 16) & 255;
+  const g = (bigint >> 8) & 255;
+  const b = bigint & 255;
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+
 const Pools = ({ token, onTournamentNameChange }) => {
   const [matches, setMatches] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -212,8 +224,12 @@ const Pools = ({ token, onTournamentNameChange }) => {
                 </tr>
               </thead>
               <tbody>
-                {poolMap[pool].map(match => (
-                  <tr key={match.id}>
+                {poolMap[pool].map((match, rowIdx) => (
+                  <tr key={match.id} style={{
+                    background: rowIdx % 2 === 0
+                      ? '#fff'
+                      : hexToRgba(poolColors[idx % poolColors.length], 0.5)
+                  }}>
                     <td style={{ textAlign: 'center', padding: '8px' }}>
                       <TeamLogo team={match.team1} size="small" />
                     </td>

tournament-frontend/src/UserMenu.js

@@ -33,7 +33,7 @@ const UserMenu = ({ onSelect, token, onResetTournament, tournamentStarted }) =>
             <li onClick={() => handleSelect('profile')}>Login</li>
           ) : (
             <>
-              <li onClick={() => handleSelect('create-tournament')}>Create tournament</li>
+              <li onClick={() => handleSelect('create-tournament')}>Create new tournament</li>
               <li onClick={() => handleSelect('load-tournaments')}>Load tournaments</li>
               <li
                 className={`start-tournament-option${tournamentStarted ? ' disabled' : ''}`}