improve lobby and fix styles

ReDBrother · ReDBrother · commit fb5ff2b9db78 · 2025-10-15T05:47:57.000+03:00
diff --git a/services/app/apps/codebattle/assets/css/custom.scss b/services/app/apps/codebattle/assets/css/custom.scss
diff --git a/services/app/apps/codebattle/assets/css/style.scss b/services/app/apps/codebattle/assets/css/style.scss
diff --git a/services/app/apps/codebattle/assets/js/socket.js b/services/app/apps/codebattle/assets/js/socket.js
@@ -54,6 +54,7 @@ export const channelTopics = {
   tournamentGameWaitTopic: 'tournament:game:wait',
   tournamentPlayerFinishedRoundTopic: 'tournament:player:finished_round',
   tournamentPlayerFinishedTopic: 'tournament:player:finished',
+  tournamentActivated: 'tournament:activated',
 
   roundCreatedTopic: 'round:created',
 
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/UserStats.jsx b/services/app/apps/codebattle/assets/js/widgets/components/UserStats.jsx
@@ -4,6 +4,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import cn from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { selectDefaultAvatarUrl } from '@/selectors';
+
 import i18next from '../../i18n';
 import { followUser, unfollowUser } from '../middlewares/Main';
 import { redirectToNewGame } from '../slices';
@@ -14,9 +16,10 @@ import UserAchievements from './UserAchievements';
 
 const UserStats = ({ data, user: userInfo }) => {
   const dispatch = useDispatch();
+  const defaultAvatarUrl = useSelector(selectDefaultAvatarUrl);
 
   const activeGameId = data?.activeGameId;
-  const avatarUrl = userInfo.avatarUrl || data?.user?.avatarUrl || '/assets/images/logo.svg';
+  const avatarUrl = userInfo.avatarUrl || data?.user?.avatarUrl || defaultAvatarUrl;
   const name = userInfo.name || data?.user?.name || 'Jon Doe';
   const lang = userInfo.lang || data?.user?.lang || 'js';
 
diff --git a/services/app/apps/codebattle/assets/js/widgets/middlewares/Main.js b/services/app/apps/codebattle/assets/js/widgets/middlewares/Main.js
@@ -3,7 +3,7 @@ import { camelizeKeys } from 'humps';
 
 import { makeGameUrl } from '@/utils/urlBuilders';
 
-import { channelMethods } from '../../socket';
+import { channelMethods, channelTopics } from '../../socket';
 import { actions } from '../slices';
 
 import Channel from './Channel';
@@ -99,6 +99,11 @@ const initPresence = followId => dispatch => {
         camelizeKeysAndDispatch(dispatch, actions.setActiveGameId)(data);
         dispatch(redirectToNewGame(camelizeKeys(data)));
       },
+    ).addListener(
+      channelTopics.tournamentActivated,
+      data => {
+        camelizeKeysAndDispatch(dispatch, actions.changeTournamentState)(data);
+      },
     );
 };
 
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/GameRoomPreview.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/GameRoomPreview.jsx
@@ -1,15 +1,20 @@
 import React from 'react';
 
 import Gon from 'gon';
+import { useSelector } from 'react-redux';
+
+import { selectDefaultAvatarUrl } from '@/selectors';
 
 import LanguageIcon from '../../components/LanguageIcon';
 
-const defaultAvatarUrl = 'https://avatars.githubusercontent.com/u/35539033?v=4';
+const defaultPreviewAvatarUrl = 'https://avatars.githubusercontent.com/u/35539033?v=4';
 
 const players = Gon.getAsset('players');
 
 // TODO : user user.avatarUrl
 const GameRoomPreview = ({ pageName }) => {
+  const defaultAvatarUrl = useSelector(selectDefaultAvatarUrl);
+
   if (pageName === 'builder') {
     return (
       <div className="preview container-fluid slideInLeft">
@@ -22,7 +27,7 @@ const GameRoomPreview = ({ pageName }) => {
 
   const defaultPlayer = {
     name: 'John Doe',
-    avatar_url: '/assets/images/logo.svg',
+    avatar_url: defaultAvatarUrl,
     lang: 'js',
     rating: '0',
   };
@@ -34,7 +39,7 @@ const GameRoomPreview = ({ pageName }) => {
     <div className="preview container-fluid slideInLeft">
       <div className="preview__container w-100 d-flex align-items-center">
         <div className="player1">
-          <img src={player1.avatar_url || defaultAvatarUrl} alt="avatar" className="player1__avatar" />
+          <img src={player1.avatar_url || defaultPreviewAvatarUrl} alt="avatar" className="player1__avatar" />
           <p className="player1__name">{player1.name}</p>
           <div className="player1__status">
             <LanguageIcon className="preview__icon" lang={player1.lang} />
@@ -49,7 +54,7 @@ const GameRoomPreview = ({ pageName }) => {
         </div>
 
         <div className="player2">
-          <img src={player2.avatar_url || defaultAvatarUrl} alt="avatar" className="player2__avatar" />
+          <img src={player2.avatar_url || defaultPreviewAvatarUrl} alt="avatar" className="player2__avatar" />
           <p className="player2__name">{player2.name}</p>
           <div className="player2__status">
             <LanguageIcon className="preview__icon" lang={player2.lang} />
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.jsx
@@ -1,5 +1,5 @@
 import React, {
- useState, useRef, useEffect, useCallback,
+  useState, useRef, useEffect, useCallback,
 } from 'react';
 
 import cn from 'classnames';
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/SeasonProfilePanel.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/SeasonProfilePanel.jsx
@@ -2,16 +2,20 @@ import React, { useState, useEffect } from 'react';
 
 import axios from 'axios';
 import { camelizeKeys } from 'humps';
+import { useSelector } from 'react-redux';
+
+import { selectDefaultAvatarUrl } from '@/selectors';
 
 import i18n from '../../../i18n';
 
 import TournamentListItem, { activeIcon } from './TournamentListItem';
 
-const contestDatesText = 'Season: Oct 14 - Dec 21';
+const contestDatesText = 'Season: Oct 16 - Dec 21';
 
-const UserLogo = ({ user, size = '40px' }) => {
+const UserLogo = ({ user, size = '70px' }) => {
   const [userInfo, setUserInfo] = useState();
-  const avatarUrl = user.avatarUrl || userInfo?.avatarUrl || '/assets/images/logo.svg';
+  const defaultAvatarUrl = useSelector(selectDefaultAvatarUrl);
+  const avatarUrl = user.avatarUrl || userInfo?.avatarUrl || defaultAvatarUrl;
 
   useEffect(() => {
     const userId = user.id;
@@ -36,6 +40,7 @@ const UserLogo = ({ user, size = '40px' }) => {
     <img
       style={{ width: size, height: size }}
       alt="Avatar Logo"
+      className="rounded-circle"
       src={avatarUrl}
     />
   );
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/schedule/TournamentSchedule.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/schedule/TournamentSchedule.jsx
@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 
 import cn from 'classnames';
 import dayjs from 'dayjs';
+import uniqBy from 'lodash/uniqBy';
 import { Calendar as BigCalendar, dayjsLocalizer } from 'react-big-calendar';
 import { useSelector } from 'react-redux';
 
@@ -180,20 +181,22 @@ const TournamentSchedule = () => {
     }
 
     if (context === states.contest) {
-      const newTournaments = [
+      const newTournaments = uniqBy([
         ...hash.seasonTournaments,
         ...hash.userTournaments.filter(haveSeasonGrade),
-      ];
+      ], 'id');
+
       setTournaments(newTournaments);
     } else if (context === states.my) {
       setTournaments(
         hash.userTournaments.filter(filterMyTournaments(currentUserId)),
       );
     } else if (context === states.all) {
-      const newTournaments = [
+      const newTournaments = uniqBy([
         ...hash.seasonTournaments,
         ...hash.userTournaments,
-      ];
+      ], 'id');
+
       setTournaments(newTournaments);
     }
   }, [context, hash, setTournaments, currentUserId, isAdmin]);
diff --git a/services/app/apps/codebattle/assets/js/widgets/selectors/index.js b/services/app/apps/codebattle/assets/js/widgets/selectors/index.js
@@ -576,6 +576,8 @@ export const reportsSelector = createDraftSafeSelector(
   },
 );
 
+export const selectDefaultAvatarUrl = () => '/assets/images/logo.svg';
+
 // Participant data selector
 export const participantDataSelector = state => {
   const event = eventSelector(state);
diff --git a/services/app/apps/codebattle/assets/js/widgets/slices/lobby.js b/services/app/apps/codebattle/assets/js/widgets/slices/lobby.js
@@ -4,6 +4,9 @@ import find from 'lodash/find';
 import reject from 'lodash/reject';
 
 import initial from './initial';
+import { actions as tournamentActions } from './tournament';
+
+const sortByStartsAt = (a, b) => dayjs(a.startsAt).diff(dayjs(b.startsAt), 'millisecond');
 
 const initialState = {
   activeGames: initial.activeGames,
@@ -46,17 +49,17 @@ const lobby = createSlice({
     ) => ({
       ...state,
       activeGames,
-      seasonTournaments: seasonTournaments.sort((a, b) => dayjs(a.startsAt).diff(dayjs(b.startsAt), 'millisecond')),
-      liveTournaments: liveTournaments.sort((a, b) => dayjs(a.startsAt).diff(dayjs(b.startsAt), 'millisecond')),
+      seasonTournaments: seasonTournaments.sort(sortByStartsAt),
+      liveTournaments: liveTournaments.sort(sortByStartsAt),
       completedTournaments: tournaments.filter(x => !x.isLive),
       channel: { online: true },
     }),
     updateEditorLang: (state, { payload }) => {
       state.activeGames = state.activeGames.map(game => {
         if (game.id === payload.gameId) {
           const newPlayers = game.players.map(player => (player.id === payload.userId
-              ? { ...player, editorLang: payload.editorLang }
-              : player));
+            ? { ...player, editorLang: payload.editorLang }
+            : player));
 
           return { ...game, players: newPlayers };
         }
@@ -68,8 +71,8 @@ const lobby = createSlice({
       state.activeGames = state.activeGames.map(game => {
         if (game.id === payload.gameId) {
           const newPlayers = game.players.map(player => (player.id === payload.userId
-              ? { ...player, checkResult: payload.checkResult }
-              : player));
+            ? { ...player, checkResult: payload.checkResult }
+            : player));
 
           return { ...game, players: newPlayers };
         }
@@ -126,6 +129,21 @@ const lobby = createSlice({
       state.mainChannel.online = payload;
     },
   },
+  extraReducers: {
+    [tournamentActions.changeTournamentState]: (state, { payload }) => {
+      const seasonTournament = state.seasonTournaments.find(t => t.id === payload.id);
+      const liveTournament = state.liveTournaments.find(t => t.id === payload.id);
+
+      if (seasonTournament) {
+        state.upcomingTournaments = state.upcomingTournaments.filter(t => t.id !== payload.id);
+        state.liveTournaments = [...state.liveTournaments, seasonTournament].sort(sortByStartsAt);
+      }
+
+      if (liveTournament) {
+        state.liveTournaments = state.liveTournaments.map(t => (t.id === payload.id ? ({ ...t, state: payload.state }) : t));
+      }
+    },
+  },
 });
 
 const { actions, reducer } = lobby;
diff --git a/services/app/apps/codebattle/assets/js/widgets/slices/tournament.js b/services/app/apps/codebattle/assets/js/widgets/slices/tournament.js
@@ -1,4 +1,4 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createAction, createSlice } from '@reduxjs/toolkit';
 import omit from 'lodash/omit';
 
 import TournamentTypes from '../config/tournamentTypes';
@@ -7,6 +7,8 @@ import initial from './initial';
 
 const initialState = initial.tournament;
 
+export const updateTournamentStateAction = createAction('updateTournamentState');
+
 const tournament = createSlice({
   name: 'tournament',
   initialState,
@@ -93,8 +95,13 @@ const tournament = createSlice({
       if (state.type === TournamentTypes.show) {
         state.showBots = !state.showBots;
       }
-   },
-},
+    },
+    changeTournamentState: (state, { payload }) => {
+      if (payload.id === state.id) {
+        state.state = payload.state;
+      }
+    },
+  },
 });
 
 const { actions, reducer } = tournament;
diff --git a/services/app/apps/codebattle/assets/js/widgets/utils/useEditor.js b/services/app/apps/codebattle/assets/js/widgets/utils/useEditor.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-bitwise */
 import {
- useState, useEffect, useCallback, useMemo,
+  useState, useEffect, useCallback, useMemo,
 } from 'react';
 
 import GameRoomModes from '../config/gameModes';
@@ -143,15 +143,35 @@ const useEditor = props => {
     };
   }, [handleEnterCtrPlusS]);
 
-  const handleEditorWillMount = () => {};
+  const handleEditorWillMount = () => { };
 
   const handleEditorDidMount = (currentEditor, currentMonaco) => {
     setEditor(currentEditor);
     setMonaco(currentMonaco);
 
+    currentMonaco.editor.defineTheme('code-theme-dark', {
+      base: 'vs-dark',
+      inherit: true,
+      colors: {
+        'editor.background': '#1f1313',
+      },
+      rules: [],
+    });
+    currentMonaco.editor.defineTheme('db-theme-dark', {
+      base: 'vs-dark',
+      inherit: true,
+      colors: {
+        'editor.background': '#13181f',
+      },
+      rules: [],
+    });
+
+    // currentMonaco.editor.setTheme('db-theme-dark');
+    // currentMonaco.editor.setTheme('code-theme-dark');
+
     const {
- editable, roomMode, checkResult, toggleMuteSound,
-} = props;
+      editable, roomMode, checkResult, toggleMuteSound,
+    } = props;
 
     // Intercept keydown for custom Copy, Cut, and Paste logic.
     currentEditor.onKeyDown(e => {
diff --git a/services/app/apps/codebattle/lib/codebattle/pub_sub/events.ex b/services/app/apps/codebattle/lib/codebattle/pub_sub/events.ex
@@ -16,6 +16,16 @@ defmodule Codebattle.PubSub.Events do
     ]
   end
 
+  def get_messages("tournament:activated", params) do
+    [
+      %Message{
+        topic: "season",
+        event: "tournament:activated",
+        payload: %{tournament: params.tournament}
+      }
+    ]
+  end
+
   def get_messages("tournament:updated", params) do
     [
       %Message{
diff --git a/services/app/apps/codebattle/lib/codebattle/tournament/context.ex b/services/app/apps/codebattle/lib/codebattle/tournament/context.ex
@@ -345,6 +345,7 @@ defmodule Codebattle.Tournament.Context do
     :timer.sleep(1000)
 
     Tournament.GlobalSupervisor.start_tournament(tournament)
+    Codebattle.PubSub.broadcast("tournament:activated", %{tournament: tournament})
     :ok
   end
 
diff --git a/services/app/apps/codebattle/lib/codebattle_web/channels/main_channel.ex b/services/app/apps/codebattle/lib/codebattle_web/channels/main_channel.ex
@@ -16,6 +16,7 @@ defmodule CodebattleWeb.MainChannel do
       if !current_user.is_guest do
         topic = "main:#{current_user.id}"
         Codebattle.PubSub.subscribe(topic)
+        Codebattle.PubSub.subscribe("season")
 
         if !FunWithFlags.enabled?(:skip_presence) do
           send(self(), {:after_join, state})
@@ -100,6 +101,18 @@ defmodule CodebattleWeb.MainChannel do
     {:noreply, socket}
   end
 
+  def handle_info(%{event: "tournament:activated", payload: %{tournament: tournament}}, socket) do
+    push(socket, "tournament:activated", %{
+      id: tournament.id,
+      state: tournament.state,
+      grade: tournament.grade,
+      starts_at: tournament.starts_at,
+      description: tournament.description
+    })
+
+    {:noreply, socket}
+  end
+
   def handle_info({:after_join, state}, socket) do
     {:ok, _} =
       Presence.track(socket, socket.assigns.current_user.id, %{
