Merge branch 'master' into add_event_modal

Author: ReDBrother

docs/004-seasons-and-points.md

@@ -67,7 +67,7 @@ For each finished tournament (grade ≠ open), we award Season Points by final p
 
 rookie: [8, 4, 2] (top‑3)
 
-challenger: [64, 32, 16, 8, 4, 2] (top‑6)
+challenger: [16, 8, 4, 2] (top‑6)
 
 pro: [128, 64, 32, 16, 8, 4, 2] (top‑7)
 

services/app/apps/codebattle/assets/css/custom.scss

@@ -8,7 +8,6 @@
   border-radius: 0.50rem;
 }
 
-
 .cb-custom-event-table .cb-custom-event-td:first-child {
   border-top-left-radius: 0.6rem;
   border-bottom-left-radius: 0.6rem;
@@ -131,7 +130,7 @@
   display: block;
   margin-left: -1px;
   line-height: 1.25;
-  color: black;
+  color: white;
 }
 
 .cb-custom-event-pagination-page-item:first-child .cb-custom-event-pagination-page-link,

services/app/apps/codebattle/assets/css/style.scss

@@ -43,7 +43,7 @@ $cb-bg-highlight-panel: #1c1c24;
 // $cb-bg-highlight-panel: #13181f;
 
 $secondary: #477591;
-$link-color: black;
+$link-color: white;
 $error: #dc3545;
 $bg-orange: rgba(238, 55, 55);
 $orange: rgba(238, 55, 55, 0.76);
@@ -411,7 +411,7 @@ a {
 }
 
 .cb-game-score-draw {
-  color: var(--black) !important;
+  color: var(--gray) !important;
 }
 
 .cb-user-online {

services/app/apps/codebattle/assets/js/socket.js

@@ -55,6 +55,7 @@ export const channelTopics = {
   tournamentPlayerFinishedRoundTopic: 'tournament:player:finished_round',
   tournamentPlayerFinishedTopic: 'tournament:player:finished',
   tournamentActivated: 'tournament:activated',
+  tournamentCanceled: 'tournament:canceled',
 
   roundCreatedTopic: 'round:created',
 

services/app/apps/codebattle/assets/js/widgets/App.jsx

@@ -1,10 +1,7 @@
 import React, { Suspense } from 'react';
 
 import NiceModal from '@ebay/nice-modal-react';
-import {
-  configureStore,
-  combineReducers,
-} from '@reduxjs/toolkit';
+import { configureStore, combineReducers } from '@reduxjs/toolkit';
 import { Provider } from 'react-redux';
 import { persistStore, persistReducer, PERSIST } from 'redux-persist';
 import { PersistGate } from 'redux-persist/integration/react';
@@ -29,7 +26,6 @@ const { gameUI: gameUIReducer, ...otherReducers } = reducers;
 const gameUIPersistWhitelist = [
   'audioMuted',
   'videoMuted',
-  'showVideoConferencePanel',
   'editorMode',
   'editorTheme',
   'streamMode',
@@ -55,14 +51,18 @@ const rollbarRedux = rollbarMiddleware(rollbar);
 const store = configureStore({
   reducer: rootReducer,
   middleware: getDefaultMiddleware => getDefaultMiddleware({
-    serializableCheck: { ignoredActions: ['ERROR', PERSIST] },
-  }).concat(rollbarRedux),
+      serializableCheck: { ignoredActions: ['ERROR', PERSIST] },
+    }).concat(rollbarRedux),
 });
 
 const persistor = persistStore(store);
 
-const OnlineContainer = React.lazy(() => import('./components/OnlineContainer'));
-const InvitesContainer = React.lazy(() => import('./components/InvitesContainer'));
+const OnlineContainer = React.lazy(
+  () => import('./components/OnlineContainer'),
+);
+const InvitesContainer = React.lazy(
+  () => import('./components/InvitesContainer'),
+);
 const RoomWidget = React.lazy(() => import('./pages/RoomWidget'));
 const LobbyWidget = React.lazy(() => import('./pages/lobby'));
 const RatingList = React.lazy(() => import('./pages/rating'));
@@ -71,7 +71,9 @@ const UserSettings = React.lazy(() => import('./pages/settings'));
 const UserProfile = React.lazy(() => import('./pages/profile'));
 const Registration = React.lazy(() => import('./pages/registration'));
 const Tournament = React.lazy(() => import('./pages/tournament'));
-const TournamentAdmin = React.lazy(() => import('./pages/tournament/TournamentAdminWidget'));
+const TournamentAdmin = React.lazy(
+  () => import('./pages/tournament/TournamentAdminWidget'),
+);
 const Stream = React.lazy(() => import('./pages/stream/StreamWidget'));
 const EventWidget = React.lazy(() => import('./pages/event'));
 const TournamentPlayer = React.lazy(() => import('./pages/tournamentPlayer'));
@@ -189,9 +191,7 @@ export const RegistrationPage = () => (
 export const StairwayGamePage = () => (
   <Provider store={store}>
     <PersistGate loading={null} persistor={persistor}>
-      <Suspense>
-        {/* <Stairway /> */}
-      </Suspense>
+      <Suspense>{/* <Stairway /> */}</Suspense>
     </PersistGate>
   </Provider>
 );
@@ -200,9 +200,7 @@ export const TournamentPage = () => (
   <Provider store={store}>
     <PersistGate loading={null} persistor={persistor}>
       <Suspense>
-        <Tournament
-          waitingRoomMachine={waitingRoomMachine}
-        />
+        <Tournament waitingRoomMachine={waitingRoomMachine} />
       </Suspense>
     </PersistGate>
   </Provider>
@@ -211,9 +209,7 @@ export const TournamentAdminPage = () => (
   <Provider store={store}>
     <PersistGate loading={null} persistor={persistor}>
       <Suspense>
-        <TournamentAdmin
-          waitingRoomMachine={waitingRoomMachine}
-        />
+        <TournamentAdmin waitingRoomMachine={waitingRoomMachine} />
       </Suspense>
     </PersistGate>
   </Provider>

services/app/apps/codebattle/assets/js/widgets/config/jitsiStatuses.js

@@ -104,6 +104,11 @@ const initPresence = followId => dispatch => {
       data => {
         camelizeKeysAndDispatch(dispatch, actions.changeTournamentState)(data);
       },
+    ).addListener(
+      channelTopics.tournamentCanceled,
+      data => {
+        camelizeKeysAndDispatch(dispatch, actions.changeTournamentState)(data);
+      },
     );
 };
 

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

@@ -28,7 +28,6 @@ import useChatRooms from '../../utils/useChatRooms';
 import useMachineStateSelector from '../../utils/useMachineStateSelector';
 
 import Notifications from './Notifications';
-import VideoConference from './VideoConference';
 
 function ChatWidget() {
   const { mainService } = useContext(RoomContext);
@@ -39,14 +38,22 @@ function ChatWidget() {
   const historyMessages = useSelector(selectors.chatHistoryMessagesSelector);
   const gameMode = useSelector(selectors.gameModeSelector);
   const useChat = useSelector(selectors.gameUseChatSelector);
-  const showVideoConferencePanel = useSelector(selectors.showVideoConferencePanelSelector);
 
-  const openedReplayer = useMachineStateSelector(mainService, openedReplayerSelector);
-  const isTestingRoom = useMachineStateSelector(mainService, inTestingRoomSelector);
-  const isRestricted = useMachineStateSelector(mainService, isRestrictedContentSelector);
+  const openedReplayer = useMachineStateSelector(
+    mainService,
+    openedReplayerSelector,
+  );
+  const isTestingRoom = useMachineStateSelector(
+    mainService,
+    inTestingRoomSelector,
+  );
+  const isRestricted = useMachineStateSelector(
+    mainService,
+    isRestrictedContentSelector,
+  );
 
   // const isTournamentGame = (gameMode === GameRoomModes.tournament);
-  const isStandardGame = (gameMode === GameRoomModes.standard);
+  const isStandardGame = gameMode === GameRoomModes.standard;
   const showChatInput = !openedReplayer && !isTestingRoom && !isRestricted && useChat;
   // const showChatParticipants = !isTestingRoom && useChat && !isRestricted;
 
@@ -73,39 +80,35 @@ function ChatWidget() {
   const filteredMessages = messages.filter(message => shouldShowMessage(message, activeRoom));
 
   return (
-    <ChatContextMenu
-      menuId={menuId}
-      inputRef={inputRef}
-      request={menuRequest}
-    >
+    <ChatContextMenu menuId={menuId} inputRef={inputRef} request={menuRequest}>
       <div className="d-flex flex-wrap flex-sm-nowrap cb-bg-panel shadow-sm h-100 cb-rounded">
         <div
           className={cn(
             'd-none d-lg-flex d-md-flex d-sm-flex flex-column flex-grow-1 position-relative p-0 h-100 mh-100 rounded-left',
             'cb-game-chat-container cb-messages-container cb-text',
           )}
         >
-          {showVideoConferencePanel ? (
-            <VideoConference />
-          ) : (
-            <>
-              <ChatHeader showRooms={isStandardGame} disabled={disabledChatHeader} />
-              {openedReplayer
-                ? (
-                  <Messages
-                    messages={historyMessages}
-                    disabled={disabledChatMessages}
-                  />
-                ) : (
-                  <Messages
-                    displayMenu={displayMenu}
-                    messages={filteredMessages}
-                    disabled={disabledChatMessages}
-                  />
-                )}
-              {showChatInput && <ChatInput inputRef={inputRef} disabled={disabledChatInput} />}
-            </>
-          )}
+          <>
+            <ChatHeader
+              showRooms={isStandardGame}
+              disabled={disabledChatHeader}
+            />
+            {openedReplayer ? (
+              <Messages
+                messages={historyMessages}
+                disabled={disabledChatMessages}
+              />
+            ) : (
+              <Messages
+                displayMenu={displayMenu}
+                messages={filteredMessages}
+                disabled={disabledChatMessages}
+              />
+            )}
+            {showChatInput && (
+              <ChatInput inputRef={inputRef} disabled={disabledChatInput} />
+            )}
+          </>
         </div>
         <div className="flex-shrink-1 p-0 border-left cb-border-color rounded-right cb-game-control-container">
           <div className="d-flex flex-column justify-content-start overflow-auto h-100">

services/app/apps/codebattle/assets/js/widgets/pages/game/ChatWidget.jsx

@@ -42,11 +42,14 @@ const EditorToolbar = ({
   actionBtnsProps,
   showControlBtns,
   isAdmin = false,
-  isPremium = false,
   isHistory = false,
 }) => (
   <>
-    <div ref={toolbarRef} className="cb-bg-panel cb-border-color rounded-top" data-player-type={type}>
+    <div
+      ref={toolbarRef}
+      className="cb-bg-panel cb-border-color rounded-top"
+      data-player-type={type}
+    >
       <div className={toolbarClassNames} role="toolbar">
         <div className="d-flex justify-content-between">
           <div
@@ -68,15 +71,27 @@ const EditorToolbar = ({
             role="group"
             aria-label="Report actions"
           >
-            {(isAdmin || isPremium) && !showControlBtns && <GameReportButton userId={player.id} gameId={gameId} />}
-            {isAdmin && !showControlBtns && <GameBanPlayerButton userId={player.id} status={status} tournamentId={tournamentId} />}
+            {!showControlBtns && (
+              <GameReportButton userId={player.id} gameId={gameId} />
+            )}
+            {isAdmin && !showControlBtns && (
+              <GameBanPlayerButton
+                userId={player.id}
+                status={status}
+                tournamentId={tournamentId}
+              />
+            )}
           </div>
           <div
             className={userInfoClassNames}
             role="group"
             aria-label="User info"
           >
-            <UserInfo mode="dark" user={player} placement={Placements.bottomEnd} />
+            <UserInfo
+              mode="dark"
+              user={player}
+              placement={Placements.bottomEnd}
+            />
             {mode === GameRoomModes.standard && (
               <UserGameScore userId={player.id} />
             )}

services/app/apps/codebattle/assets/js/widgets/pages/game/EditorToolbar.jsx

@@ -4,7 +4,10 @@ import cn from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { reportOnPlayer } from '@/middlewares/Main';
-import { userIsAdminSelector, userIsGamePlayerSelector } from '@/selectors';
+import {
+  currentUserIsAdminSelector,
+  userIsGamePlayerSelector,
+} from '@/selectors';
 
 import i18n from '../../../i18n';
 
@@ -18,18 +21,22 @@ const states = {
 const getText = state => {
   switch (state) {
     case states.loading:
-    case states.idle: return i18n.t('Report');
-    case states.success: return i18n.t('Sended');
-    case states.error: return i18n.t('Error');
-    default: return i18n.t('Report');
+    case states.idle:
+      return i18n.t('Report');
+    case states.success:
+      return i18n.t('Sended');
+    case states.error:
+      return i18n.t('Error');
+    default:
+      return i18n.t('Report');
   }
 };
 
 const GameReportButton = ({ userId, gameId }) => {
   const dispatch = useDispatch();
   const [state, setState] = useState(states.idle);
 
-  const isAdmin = useSelector(userIsAdminSelector);
+  const isAdmin = useSelector(currentUserIsAdminSelector);
   const isPlayer = useSelector(userIsGamePlayerSelector);
 
   const onSuccess = () => setState(states.success);