refactor round progress statistics

Author: ReDBrother

services/app/apps/codebattle/assets/js/widgets/components/Editor.jsx

@@ -30,6 +30,7 @@ class Editor extends PureComponent {
     onChange: PropTypes.func,
     mode: PropTypes.string.isRequired,
     mute: PropTypes.bool,
+    fontSize: PropTypes.number,
   };
 
   static defaultProps = {
@@ -40,6 +41,7 @@ class Editor extends PureComponent {
     onChange: null,
     syntax: 'js',
     mute: false,
+    fontSize: 16,
   };
 
   // eslint-disable-next-line react/sort-comp
@@ -59,7 +61,7 @@ class Editor extends PureComponent {
       tabSize: getLanguageTabSize(props.syntax),
       insertSpaces: shouldReplaceTabsWithSpaces(props.syntax),
       lineNumbersMinChars: 3,
-      fontSize: 16,
+      fontSize: props.fontSize || 16,
       scrollBeyondLastLine: false,
       selectOnLineNumbers: true,
       minimap: {
@@ -133,6 +135,7 @@ class Editor extends PureComponent {
       userId,
       gameId,
       gameMode,
+      fontSize,
     } = this.props;
 
     const isBuilder = gameMode === GameRoomModes.builder;
@@ -160,6 +163,13 @@ class Editor extends PureComponent {
       this.statusBarRef.current.innerHTML = '';
       this.currentMode = this.modes[mode]();
     }
+    if (prevProps.fontSize !== fontSize) {
+      this.options = {
+        ...this.options,
+        fontSize: fontSize || 16,
+      };
+      this.editor.updateOptions(this.options);
+    }
     if (prevProps.editable !== editable || prevProps.loading !== loading) {
       this.options = {
         ...this.options,

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

@@ -22,6 +22,7 @@ const initTournamentPlayerChannel = dispatch => {
       state: data.tournamentState,
       breakState: data.breakState,
       matches: data.matches,
+      gameResults: data.gameResults,
       tournamentChannel: { online: true },
     }));
 
@@ -46,6 +47,7 @@ export const connectToTournamentPlayer = () => dispatch => {
 
     dispatch(actions.updateTournamentData({ state: data.state, breakState: data.breakState }));
     dispatch(actions.updateTournamentMatches(data.matches));
+    dispatch(actions.updateTournamentGameResults(data.gameResults));
   };
 
   const handleTournamentRoundCreated = response => {

services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderEditorsWidget.jsx

@@ -97,8 +97,8 @@ function BuilderEditorsWidget() {
   );
   const textSolution = useSelector(selectors.taskTextSolutionSelector);
   const currentUserId = useSelector(selectors.currentUserIdSelector);
-  const theme = useSelector(selectors.editorsThemeSelector(currentUserId));
-  const editorsMode = useSelector(selectors.editorsModeSelector(currentUserId));
+  const theme = useSelector(selectors.editorsThemeSelector);
+  const editorsMode = useSelector(selectors.editorsModeSelector);
 
   const [isValidArgumentsGenerator, invalidGeneratorReason] = useSelector(
     state => state.builder.validationStatuses.argumentsGenerator,

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

@@ -7,10 +7,10 @@ import editorThemes from '../../config/editorThemes';
 import { editorsThemeSelector } from '../../selectors';
 import { actions } from '../../slices';
 
-function DakModeButton({ playerId }) {
+function DakModeButton() {
   const dispatch = useDispatch();
 
-  const currentTheme = useSelector(state => editorsThemeSelector(playerId)(state));
+  const currentTheme = useSelector(editorsThemeSelector);
 
   const isDarkMode = currentTheme === editorThemes.dark;
   const mode = isDarkMode ? editorThemes.light : editorThemes.dark;

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

@@ -93,8 +93,8 @@ function GameWidget({ editorMachine }) {
   const leftEditorHeight = useSelector(selectors.editorHeightSelector(roomCurrent, leftUserId));
   const rightEditorHeight = useSelector(selectors.editorHeightSelector(roomCurrent, rightUserId));
   const rightOutput = useSelector(selectors.rightExecutionOutputSelector(roomCurrent));
-  const leftEditorsMode = useSelector(selectors.editorsModeSelector(leftUserId));
-  const theme = useSelector(selectors.editorsThemeSelector(leftUserId));
+  const leftEditorsMode = useSelector(selectors.editorsModeSelector);
+  const theme = useSelector(selectors.editorsThemeSelector);
 
   return (
     <>

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

@@ -7,9 +7,9 @@ import editorModes from '../../config/editorModes';
 import { editorsModeSelector } from '../../selectors';
 import { actions } from '../../slices';
 
-function VimModeButton({ playerId }) {
+function VimModeButton() {
   const dispatch = useDispatch();
-  const currentMode = useSelector(state => editorsModeSelector(playerId)(state));
+  const currentMode = useSelector(editorsModeSelector);
 
   const isVimMode = currentMode === editorModes.vim;
 

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

@@ -201,54 +201,55 @@ function TournamentHeader({
               </div>
             )}
           </div>
-          {!isOver ? (
+          <div className="d-flex">
+            {!isOver ? (
+              <div className="d-flex justify-items-center pb-2">
+                {type !== 'team' && (
+                  <div className="mr-2 mr-lg-0">
+                    <JoinButton
+                      isShow={state !== TournamentStates.active}
+                      isParticipant={!!players[currentUserId]}
+                      disabled={!isOnline || !isLive}
+                    />
+                  </div>
+                )}
+              </div>
+            ) : (
+              <div className="d-flex justify-items-center pb-2">
+                <a
+                  className="btn btn-primary rounded-lg ml-lg-2 ml-md-2"
+                  href="/tournaments"
+                >
+                  <FontAwesomeIcon className="mr-2" icon="undo" />
+                  Return to tournaments
+                </a>
+              </div>
+            )}
             <div className="d-flex justify-items-center pb-2">
-              {type !== 'team' && (
-                <div className="mr-2 mr-lg-0">
-                  <JoinButton
-                    isShow={state !== TournamentStates.active}
-                    isParticipant={!!players[currentUserId]}
-                    disabled={!isOnline || !isLive}
-                  />
-                </div>
+              {canModerate && (
+                <TournamentMainControlButtons
+                  accessType={accessType}
+                  tournamentId={tournamentId}
+                  canStart={
+                    isLive
+                    && state === TournamentStates.waitingParticipants
+                    && playersCount > 0
+                  }
+                  canStartRound={
+                    isLive
+                    && state === TournamentStates.active
+                    && breakState === 'on'
+                  }
+                  canRestart={
+                    state === TournamentStates.active
+                    || state === TournamentStates.finished
+                    || state === TournamentStates.cancelled
+                  }
+                  disabled={!isOnline}
+                />
               )}
             </div>
-          ) : (
-            <div className="d-flex justify-items-center pb-2">
-              <a
-                className="btn btn-primary rounded-lg ml-lg-2 ml-md-2"
-                href="/tournaments"
-              >
-                <FontAwesomeIcon className="mr-2" icon="undo" />
-                Return to tournaments
-              </a>
-            </div>
-          )}
-          <div className="d-flex justify-items-center pb-2">
-            {canModerate && (
-              <TournamentMainControlButtons
-                accessType={accessType}
-                tournamentId={tournamentId}
-                canStart={
-                  isLive
-                  && state === TournamentStates.waitingParticipants
-                  && playersCount > 0
-                }
-                canStartRound={
-                  isLive
-                  && state === TournamentStates.active
-                  && breakState === 'on'
-                }
-                canRestart={
-                  state === TournamentStates.active
-                  || state === TournamentStates.finished
-                  || state === TournamentStates.cancelled
-                }
-                disabled={!isOnline}
-              />
-            )}
           </div>
-
         </div>
         <div className="d-flex align-items-center small text-nowrap text-muted mt-1 cb-grid-divider overflow-auto">
           <div title={type} className="d-flex align-items-center">

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

@@ -39,7 +39,7 @@ const TournamentMainControlButtons = ({
         onClick={handleStartRoundTournament}
         disabled={!canStartRound || disabled}
       >
-        <FontAwesomeIcon className="ml-2" icon="arrow-right" />
+        <FontAwesomeIcon className="mr-2" icon="arrow-right" />
         Start Round
       </button>
     ) : null}

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

@@ -18,7 +18,7 @@ function TournamentUserPanel({
   userId,
   name,
   score,
-  place,
+  // place,
   localPlace,
   searchedUserId = 0,
 }) {
@@ -77,16 +77,16 @@ function TournamentUserPanel({
                 {': '}
                 {score}
               </span>
-              {place && (
-                <>
-                  <span className="mx-1">|</span>
-                  <span title="Place on tournament">
-                    <FontAwesomeIcon className="text-warning" icon="trophy" />
-                    {': '}
-                    {place}
-                  </span>
-                </>
-              )}
+              {/* {place && ( */}
+              {/*   <> */}
+              {/*     <span className="mx-1">|</span> */}
+              {/*     <span title="Place on tournament"> */}
+              {/*       <FontAwesomeIcon className="text-warning" icon="trophy" /> */}
+              {/*       {': '} */}
+              {/*       {place} */}
+              {/*     </span> */}
+              {/*   </> */}
+              {/* )} */}
               {localPlace && (
                 <>
                   <span className="mx-1">|</span>

services/app/apps/codebattle/assets/js/widgets/pages/tournamentPlayer/SpectatorEditor.jsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useState, useCallback } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import cn from 'classnames';
@@ -28,12 +28,17 @@ function SpectatorEditor({
   const players = useSelector(selectors.gamePlayersSelector);
   const editorData = useSelector(selectors.editorDataSelector(playerId));
   const currentUserId = useSelector(selectors.currentUserIdSelector);
-  const theme = useSelector(selectors.editorsThemeSelector(currentUserId));
-  const editorsMode = useSelector(selectors.editorsModeSelector(currentUserId));
+  const theme = useSelector(selectors.editorsThemeSelector);
+  const editorsMode = useSelector(selectors.editorsModeSelector);
 
   const spectatorEditorState = useMachineStateSelector(spectatorService, spectatorStateSelector).value.editor;
   const isChecking = useMachineStateSelector(spectatorService, spectatorEditorIsChecking);
 
+  const [fontSize, setFontSize] = useState(20);
+
+  const handleIncreaseFontSize = useCallback(() => setFontSize(size => size + 2), [setFontSize]);
+  const handleDecreaseFontSize = useCallback(() => setFontSize(size => size - 2), [setFontSize]);
+
   const params = {
     userId: spectatorEditorState === 'loading' ? undefined : playerId,
     editable: false,
@@ -42,9 +47,10 @@ function SpectatorEditor({
     loading: spectatorEditorState === 'loading',
     theme,
     mute: true,
+    fontSize,
   };
 
-  const solutionParams = {
+  const editorParams = {
     ...params,
     value: editorData?.text || '',
     onChange: () => {},
@@ -58,7 +64,7 @@ function SpectatorEditor({
     <>
       <div className={pannelBackground} data-editor-state={spectatorEditorState}>
         <div className="card h-100 shadow-sm" style={gameRoomEditorStyles}>
-          <div className="rounded-top" data-player-type="current_user">
+          <div className="rounded-top border-bottom">
             <div className="btn-toolbar justify-content-between align-items-center m-1" role="toolbar">
               <div className="d-flex justify-content-between">
                 <div className="d-flex align-items-center p-1">
@@ -84,6 +90,18 @@ function SpectatorEditor({
                   <VimModeButton playerId={currentUserId} />
                   <DakModeButton playerId={currentUserId} />
                 </div>
+                <div
+                  className="btn-group align-items-center ml-2 mr-auto"
+                  role="group"
+                  aria-label="Editor size controls"
+                >
+                  <button type="button" className="btn btn-sm btn-light rounded-left" onClick={handleIncreaseFontSize}>
+                    -
+                  </button>
+                  <button type="button" className="btn btn-sm mr-2 btn-light border-left rounded-right" onClick={handleDecreaseFontSize}>
+                    +
+                  </button>
+                </div>
               </div>
               <div className="d-flex">
                 <button
@@ -102,7 +120,7 @@ function SpectatorEditor({
             </div>
           </div>
           <div id="spectator" className="d-flex flex-column flex-grow-1 position-relative">
-            <Editor {...solutionParams} />
+            <Editor {...editorParams} />
           </div>
         </div>
       </div>