Fix UI

hexlet-codebattle · Jun 7, 2024 · 72495c1 · 72495c1
1 parent f10aca4
commit 72495c1
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 52 deletions.
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/TaskAssignment.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/TaskAssignment.jsx
@@ -107,19 +107,20 @@ function TaskAssignment({
             <span className="ml-2 text-muted">{task.name}</span>
           </h6>
           <div className="d-flex align-items-center">
-            <TaskLanguagesSelection
-              handleSetLanguage={handleSetLanguage}
-              avaibleLanguages={avaibleLanguages}
-              displayLanguage={displayLanguage}
-            />
+            {/* <TaskLanguagesSelection */}
+            {/*   handleSetLanguage={handleSetLanguage} */}
+            {/*   avaibleLanguages={avaibleLanguages} */}
+            {/*   displayLanguage={displayLanguage} */}
+            {/* /> */}
 
             {!fullSize && (
               <button
                 type="button"
-                className="btn btn-outline-secondary rounded-lg ml-2"
+                className="btn btn-outline-secondary  btn-sm rounded-lg ml-2"
                 onClick={handleOpenFullSizeTaskDescription}
               >
-                <FontAwesomeIcon icon="expand" />
+                <FontAwesomeIcon className="mr-2" icon="expand" />
+                {i18n.t('Expand')}
               </button>
             )}
             {!hideGuide && <ShowGuideButton />}

diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/MatchAction.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/MatchAction.jsx
@@ -3,18 +3,16 @@ import React, { memo, useContext } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import cn from 'classnames';
 import i18next from 'i18next';
+import { useSelector } from 'react-redux';
 
 import CustomEventStylesContext from '../../components/CustomEventStylesContext';
 import MatchStatesCodes from '../../config/matchStates';
 import { sendMatchGameOver } from '../../middlewares/TournamentAdmin';
 
-function MatchAction({
-  match,
-  canModerate,
-  currentUserIsPlayer,
-}) {
+function MatchAction({ match, canModerate, currentUserIsPlayer }) {
   const href = `/games/${match.gameId}`;
   const hasCustomEventStyles = useContext(CustomEventStylesContext);
+  const streamMode = useSelector(state => state.gameUI.streamMode);
 
   const showBtnClassName = cn('btn btn-sm text-nowrap rounded-lg px-3', {
     'btn-primary': !hasCustomEventStyles,
@@ -32,12 +30,7 @@ function MatchAction({
   switch (match.state) {
     case MatchStatesCodes.pending:
       return (
-        <a
-          href={href}
-          title="Show match"
-          className={showBtnClassName}
-          disabled
-        >
+        <a href={href} title="Show match" className={showBtnClassName} disabled>
           <FontAwesomeIcon className="mr-2" icon="eye" />
           {i18next.t('Show')}
         </a>
@@ -54,16 +47,16 @@ function MatchAction({
               <FontAwesomeIcon className="mr-2" icon="laptop-code" />
               {i18next.t('Continue')}
             </a>
-            {canModerate && (
-            <button
-              type="button"
-              className={gameOverBtnClassName}
-              onClick={() => sendMatchGameOver(match.id)}
-            >
-              <FontAwesomeIcon className="mr-2" icon="window-close" />
-              {i18next.t('Game Over')}
-            </button>
-          )}
+            {canModerate && !streamMode && (
+              <button
+                type="button"
+                className={gameOverBtnClassName}
+                onClick={() => sendMatchGameOver(match.id)}
+              >
+                <FontAwesomeIcon className="mr-2" icon="window-close" />
+                {i18next.t('Game Over')}
+              </button>
+            )}
           </>
         );
       }
@@ -78,7 +71,7 @@ function MatchAction({
             <FontAwesomeIcon className="mr-2" icon="eye" />
             {i18next.t('Show')}
           </a>
-          {canModerate && (
+          {canModerate && !streamMode && (
             <button
               type="button"
               className={gameOverBtnClassName}

diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentUserPanel.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentUserPanel.jsx
@@ -1,5 +1,9 @@
 import React, {
-  memo, useCallback, useContext, useState,
+  memo,
+  useCallback,
+  useEffect,
+  useContext,
+  useState,
 } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -9,7 +13,10 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import CustomEventStylesContext from '@/components/CustomEventStylesContext';
 import { requestMatchesByPlayerId } from '@/middlewares/Tournament';
-import { currentUserIsAdminSelector, currentUserIsTournamentOwnerSelector } from '@/selectors';
+import {
+  currentUserIsAdminSelector,
+  currentUserIsTournamentOwnerSelector,
+} from '@/selectors';
 
 // import TournamentPlace from './TournamentPlace';
 import UsersMatchList from './UsersMatchList';
@@ -31,7 +38,7 @@ function TournamentUserPanel({
 
   const isAdmin = useSelector(currentUserIsAdminSelector);
   const isOwner = useSelector(currentUserIsTournamentOwnerSelector);
-  const canModerate = (isAdmin || isOwner);
+  const canModerate = isAdmin || isOwner;
 
   const hasCustomEventStyles = useContext(CustomEventStylesContext);
 
@@ -47,26 +54,36 @@ function TournamentUserPanel({
     'd-flex flex-column border shadow-sm rounded-lg mb-2 overflow-auto',
     hasCustomEventStyles
       ? {
-        'cb-custom-event-border-success': userId === currentUserId,
-        'cb-custom-event-border-info': userId === searchedUserId,
-      } : {
-        'border-success': userId === currentUserId,
-        'border-primary': userId === searchedUserId,
-      },
+          'cb-custom-event-border-success': userId === currentUserId,
+          'cb-custom-event-border-info': userId === searchedUserId,
+        }
+      : {
+          'border-success': userId === currentUserId,
+          'border-primary': userId === searchedUserId,
+        },
   );
 
   const titleClassName = cn(
     'd-flex align-items-center justify-content-start px-2 py-1',
   );
 
-  const handleOpenMatches = useCallback(event => {
-    event.preventDefault();
-    if (!open && userId !== currentUserId) {
+  const handleOpenMatches = useCallback(
+    event => {
+      event.preventDefault();
+      if (!open && userId !== currentUserId) {
+        dispatch(requestMatchesByPlayerId(userId));
+      }
+
+      setOpen(!open);
+    },
+    [open, setOpen, dispatch, userId, currentUserId],
+  );
+
+  useEffect(() => {
+    if (open) {
       dispatch(requestMatchesByPlayerId(userId));
     }
-
-    setOpen(!open);
-  }, [open, setOpen, dispatch, userId, currentUserId]);
+  }, [open, dispatch, userId]);
 
   return (
     <div className={panelClassName}>
@@ -81,11 +98,17 @@ function TournamentUserPanel({
           <div className="d-flex flex-column flex-xl-row flex-lg-row flex-md-row flex-sm-row">
             <div>
               <span className="text-nowrap" title={name}>
-                {searchedUserId === userId && (<span className={searchBadge}>Search</span>)}
-                {currentUserId === userId && (<span className={playerBadge}>you</span>)}
+                {searchedUserId === userId && (
+                  <span className={searchBadge}>Search</span>
+                )}
+                {currentUserId === userId && (
+                  <span className={playerBadge}>you</span>
+                )}
                 {name}
               </span>
-              {isBanned && <FontAwesomeIcon className="ml-2 text-danger" icon="ban" />}
+              {isBanned && (
+                <FontAwesomeIcon className="ml-2 text-danger" icon="ban" />
+              )}
               <span className="d-none d-sm-inline d-md-inline d-lg-inline mx-1">
                 |
               </span>
@@ -118,11 +141,7 @@ function TournamentUserPanel({
           </div>
         </div>
         <div className="d-flex ml-1">
-          <button
-            type="button"
-            className="btn"
-            onClick={handleOpenMatches}
-          >
+          <button type="button" className="btn" onClick={handleOpenMatches}>
             <FontAwesomeIcon icon={open ? 'chevron-up' : 'chevron-down'} />
           </button>
         </div>

diff --git a/services/app/apps/codebattle/priv/gettext/ru/LC_MESSAGES/default.po b/services/app/apps/codebattle/priv/gettext/ru/LC_MESSAGES/default.po
@@ -311,6 +311,9 @@ msgstr "Cбросить решение"
 msgid "Check solution"
 msgstr "Проверить решение"
 
+msgid "Expand"
+msgstr "Развернуть описание"
+
 msgid "Found a mistake? Have something to add? Pull Requests are welcome: "
 msgstr "Нашли ошибку? Вам есть что добавить к описанию? Мы будем рады вашим Pull Requests: "