Add active game_id

Author: vtm9

services/app/apps/codebattle/assets/js/widgets/middlewares/TournamentAdmin.js

@@ -26,7 +26,12 @@ const initTournamentChannel = (dispatch, isAdminWidged = false) => {
   };
 
   const onJoinSuccess = response => {
+    console.log(response)
     if (isAdminWidged) {
+    // Handle active_game_id if it exists in the response
+    if (response.activeGameId) {
+      dispatch(actions.setAdminActiveGameId(response.activeGameId));
+    }
       dispatch(
         actions.setTournamentData({
           ...response.tournament,
@@ -44,6 +49,7 @@ const initTournamentChannel = (dispatch, isAdminWidged = false) => {
     dispatch(actions.updateTournamentMatches(compact(response.matches)));
     dispatch(actions.setTournamentTaskList(compact(response.tasksInfo)));
     dispatch(actions.setReports(compact(response.reports)));
+    
   };
 
   channel.join().receive('ok', onJoinSuccess).receive('error', onJoinFailure);
@@ -330,7 +336,11 @@ export const getTask = (taskId, onSuccess) => () => {
     });
 };
 
-export const pushActiveMatchToStream = (gameId) => () => {
+export const pushActiveMatchToStream = (gameId) => (dispatch) => {
+  // Update the Redux state immediately for instant UI feedback
+  dispatch(actions.setAdminActiveGameId(gameId));
+  
+  // Send the update to the server
   channel
     .push('tournament:stream:active_game', { gameId })
     .receive('error', error => console.error(error));

services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentAdminWidget.jsx

@@ -7,11 +7,48 @@ import { connectToTournament, requestMatchesForRound} from '../../middlewares/To
 import * as selectors from '../../selectors';
 import { pushActiveMatchToStream } from '../../middlewares/TournamentAdmin';
 
+// Define CSS for active game animation
+const activeGameStyles = `
+  @keyframes pulse {
+    0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }
+    70% { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
+  }
+  
+  .active-game {
+    position: relative;
+    animation: pulse 1.5s infinite;
+    border: 2px solid #ffc107 !important;
+  }
+  
+  .active-game-indicator {
+    display: inline-block;
+    margin-left: 3px;
+    animation: rotate 1.5s linear infinite;
+  }
+  
+  @keyframes rotate {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+`;
+
 function TournamentAdminWidget() {
+  // Add style element for animations
+  useEffect(() => {
+    const styleElement = document.createElement('style');
+    styleElement.textContent = activeGameStyles;
+    document.head.appendChild(styleElement);
+    
+    return () => {
+      document.head.removeChild(styleElement);
+    };
+  }, []);
   const tournamentId = Gon.getAsset('tournament_id');
   const dispatch = useDispatch();
 
   const tournament = useSelector(selectors.tournamentSelector);
+  const tournamentAdmin = useSelector(selectors.tournamentAdminSelector);
   const [playerMatches, setPlayerMatches] = useState({});
 
   useEffect(() => {
@@ -85,15 +122,16 @@ function TournamentAdminWidget() {
 
   // Render match buttons for a specific player
   const renderPlayerMatchButtons = (playerId) => {
-    const matches = playerMatches[playerId] || [];
+    const allMatches = playerMatches[playerId] || [];
 
-    if (matches.length === 0) {
+    if (allMatches.length === 0) {
       return <span className="text-muted">No matches</span>;
     }
 
+    
     return (
       <div className="d-flex flex-wrap gap-1">
-        {matches.map(match => {
+        {allMatches.map(match => {
           // Determine button color based on match state
           let buttonClass = 'btn-outline-secondary';
           if (match.state === 'finished') {
@@ -104,14 +142,20 @@ function TournamentAdminWidget() {
             buttonClass = 'btn-warning';
           }
 
+          // Check if this is the active game
+          const isActiveGame = tournamentAdmin.activeGameId && match.gameId === tournamentAdmin.activeGameId;
+          // No need for inline styles as we're using CSS animations
+          const buttonStyle = {};
+          
           return (
             <button 
               key={match.id} 
               onClick={() => dispatch(pushActiveMatchToStream(match.gameId))}
-              className={`btn ${buttonClass} btn-sm me-1 mb-1`}
-              title={`Match ID: ${match.id}, State: ${match.state}, Started: ${new Date(match.startedAt).toLocaleTimeString()}`}
+              className={`btn ${buttonClass} btn-sm me-1 mb-1 ${isActiveGame ? 'active-game' : ''}`}
+              title={`${isActiveGame ? '⭐ ACTIVE GAME - ' : ''}Match ID: ${match.id}, State: ${match.state}, Started: ${new Date(match.startedAt).toLocaleTimeString()}`}
+              style={buttonStyle}
             >
-              #{match.gameId}
+              #{match.gameId}{isActiveGame ? <span className="active-game-indicator">🔄</span> : ''}
             </button>
           );
         })}

services/app/apps/codebattle/assets/js/widgets/selectors/index.js

@@ -430,6 +430,7 @@ export const userRankingSelector = userId => state => (state.tournament.ranking?
 export const tournamentIdSelector = state => state.tournament.id;
 
 export const tournamentSelector = state => state.tournament;
+export const tournamentAdminSelector = state => state.tournamentAdmin;
 
 export const currentUserIsTournamentOwnerSelector = state => state.tournament.creatorId === state.user.currentUserId;
 

services/app/apps/codebattle/assets/js/widgets/slices/index.js

@@ -18,6 +18,7 @@ import reports, { actions as reportsActions } from './reports';
 import stairwayGame, { actions as stairwayGameActions } from './stairway';
 import storeLoaded, { actions as storeLoadedActions } from './store';
 import tournament, { actions as tournamentActions } from './tournament';
+import tournamentAdmin, { actions as tournamentAdminActions } from './tournamentAdmin';
 import tournamentPlayer, { actions as tournamentPlayerActions } from './tournamentPlayer';
 import user, { actions as userActions } from './user';
 import usersInfo, { actions as usersInfoActions } from './usersInfo';
@@ -44,6 +45,7 @@ export const actions = {
   ...stairwayGameActions,
   ...storeLoadedActions,
   ...tournamentActions,
+  ...tournamentAdminActions,
   ...tournamentPlayerActions,
   ...userActions,
   ...usersInfoActions,
@@ -70,6 +72,7 @@ export default {
   stairwayGame,
   storeLoaded,
   tournament,
+  tournamentAdmin,
   tournamentPlayer,
   user,
   usersInfo,

services/app/apps/codebattle/assets/js/widgets/slices/initial.js

@@ -512,6 +512,9 @@ export default {
     alerts: {},
   },
   tournament: initialTournament,
+  tournamentAdmin: {
+    activeGameId: null,
+  },
   tournamentPlayer: defaultTournamentPlayerParams,
   editor: {
     meta: initialMeta,

services/app/apps/codebattle/assets/js/widgets/slices/tournament.js

@@ -76,7 +76,9 @@ const tournament = createSlice({
       state.playersPageNumber = payload;
     },
     updateTournamentChannelState: (state, { payload }) => {
-      state.channel.online = payload;
+      if (state.channel) {
+        state.channel.online = payload;
+      }
     },
     setTournamentPlayers: (state, { payload }) => {
       state.players = payload;
@@ -91,9 +93,10 @@ const tournament = createSlice({
       if (state.type === TournamentTypes.show) {
         state.showBots = !state.showBots;
       }
-    },
-  },
-});
+   }
+}
+}
+);
 
 const { actions, reducer } = tournament;
 

services/app/apps/codebattle/assets/js/widgets/slices/tournamentAdmin.js

@@ -0,0 +1,19 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+import initial from './initial';
+
+const tournamentAdminSlice = createSlice({
+  name: 'tournamentAdmin',
+  initialState: initial.tournamentAdmin,
+  reducers: {
+    setAdminActiveGameId: (state, { payload }) => {
+      state.activeGameId = payload;
+    },
+  },
+});
+
+const { actions, reducer } = tournamentAdminSlice;
+
+export { actions };
+
+export default reducer;

services/app/apps/codebattle/lib/codebattle/tournament/strategy/base.ex

@@ -652,7 +652,8 @@ defmodule Codebattle.Tournament.Base do
           end)
 
         # Extract just the game parameters for bulk creation
-        game_creation_params = Enum.map(game_params, fn {params, _players, _match_id} -> params end)
+        game_creation_params =
+          Enum.map(game_params, fn {params, _players, _match_id} -> params end)
 
         # Create games in bulk
         created_games = Game.Context.bulk_create_games(game_creation_params)
@@ -907,6 +908,7 @@ defmodule Codebattle.Tournament.Base do
       defp maybe_start_round_timer(%{round_timeout_seconds: nil} = tournament), do: tournament
       # We don't want to run a timer for the swiss type, because all games already have a timeout
       defp maybe_start_round_timer(%{state: "active", type: "swiss"} = tournament), do: tournament
+
       defp maybe_start_round_timer(%{state: "active", type: "top200"} = tournament), do: tournament
 
       defp maybe_start_round_timer(tournament) do
@@ -943,12 +945,16 @@ defmodule Codebattle.Tournament.Base do
       defp get_game_timeout(tournament, task) do
         cond do
           tournament.tournament_timeout_seconds ->
-            max(tournament.tournament_timeout_seconds - DateTime.diff(DateTime.utc_now(), tournament.started_at), 10)
+            max(
+              tournament.tournament_timeout_seconds -
+                DateTime.diff(DateTime.utc_now(), tournament.started_at),
+              10
+            )
 
           FunWithFlags.enabled?(:tournament_custom_timeout) ->
             get_custom_round_timeout_seconds(tournament, task)
 
-          use_waiting_room?(tournament) or tournament.type in ["squad"] ->
+          use_waiting_room?(tournament) or tournament.type in ["top200"] ->
             min(seconds_to_end_round(tournament), tournament.match_timeout_seconds)
 
           :default ->

services/app/apps/codebattle/lib/codebattle/tournament/strategy/top200.ex

@@ -8,14 +8,14 @@ defmodule Codebattle.Tournament.Top200 do
   @impl Tournament.Base
   def complete_players(tournament) do
     # just for the UI test
-    # users =
-    #   Codebattle.User
-    #   |> Codebattle.Repo.all()
-    #   |> Enum.filter(&(&1.is_bot == false and &1.subscription_type != :admin))
-    #   |> Enum.take(199)
-
-    # add_players(tournament, %{users: users})
-    tournament
+    users =
+      Codebattle.User
+      |> Codebattle.Repo.all()
+      |> Enum.filter(&(&1.is_bot == false and &1.subscription_type != :admin))
+      |> Enum.take(199)
+
+    add_players(tournament, %{users: users})
+    # tournament
   end
 
   @impl Tournament.Base

services/app/apps/codebattle/lib/codebattle_web/channels/tournament_admin_channel.ex

@@ -11,6 +11,36 @@ defmodule CodebattleWeb.TournamentAdminChannel do
 
   @default_ranking_size 200
 
+  # Agent for storing tournament_id to active_game_id mapping
+  def start_games_agent do
+    Agent.start(fn -> %{} end, name: __MODULE__.GamesAgent)
+  end
+
+  # Store active_game_id for a specific tournament_id in the Agent
+  def store_active_game(tournament_id, game_id) do
+    # Ensure agent is started
+    if Process.whereis(__MODULE__.GamesAgent) == nil do
+      start_games_agent()
+    end
+
+    Agent.update(__MODULE__.GamesAgent, fn games_map ->
+      Map.put(games_map, tournament_id, game_id)
+    end)
+  end
+
+  # Get the active_game_id for a specific tournament_id from the Agent
+  def get_active_game(tournament_id) do
+    # Ensure agent is started
+    if Process.whereis(__MODULE__.GamesAgent) == nil do
+      start_games_agent()
+    end
+
+    Agent.get(__MODULE__.GamesAgent, fn games_map ->
+      dbg(games_map)
+      Map.get(games_map, tournament_id)
+    end)
+  end
+
   def join("tournament_admin:" <> tournament_id, _payload, socket) do
     current_user = socket.assigns.current_user
 
@@ -241,6 +271,7 @@ defmodule CodebattleWeb.TournamentAdminChannel do
   def handle_in("tournament:ranking:request", _params, socket) do
     tournament_info = socket.assigns.tournament_info
     ranking = Tournament.Ranking.get_page(tournament_info, 1, @default_ranking_size)
+
     {:reply, {:ok, %{ranking: ranking}}, socket}
   end
 
@@ -259,6 +290,11 @@ defmodule CodebattleWeb.TournamentAdminChannel do
   def handle_in("tournament:stream:active_game", payload, socket) do
     tournament_id = socket.assigns.tournament_info.id
 
+    # Store game_id in Agent when streaming active game
+    if payload["game_id"] do
+      store_active_game(tournament_id, payload["game_id"])
+    end
+
     Codebattle.PubSub.broadcast("tournament:stream:active_game", %{
       game_id: payload["game_id"],
       tournament_id: tournament_id
@@ -286,12 +322,13 @@ defmodule CodebattleWeb.TournamentAdminChannel do
   end
 
   def handle_info(%{event: "tournament:updated", payload: payload}, socket) do
+    # if payload.tournament.type in ["swiss", "arena"] do
+    #   []
+    # else
     matches =
-      if payload.tournament.type in ["swiss", "arena"] do
-        []
-      else
-        Helpers.get_matches(socket.assigns.tournament_info)
-      end
+      Helpers.get_matches(socket.assigns.tournament_info)
+
+    # end
 
     players =
       if payload.tournament.type in ["swiss", "arena"] do
@@ -397,8 +434,11 @@ defmodule CodebattleWeb.TournamentAdminChannel do
 
     # end
 
+    active_game_id = tournament.id |> get_active_game() |> dbg()
+
     %{
       tasks_info: tasks_info,
+      active_game_id: active_game_id,
       reports: UserGameReport.list_by_tournament(tournament.id, limit: 300),
       tournament: Helpers.prepare_to_json(tournament),
       ranking: Tournament.Ranking.get_page(tournament, 1, @default_ranking_size),