renaming method, game locked panel, award

hexlet-codebattle · Jan 28, 2024 · 0453baf · 0453baf
1 parent ce5bb93
commit 0453baf
Show file tree

Hide file tree

Showing 39 changed files with 441 additions and 180 deletions.
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/TournamentType.jsx b/services/app/apps/codebattle/assets/js/widgets/components/TournamentType.jsx
@@ -2,20 +2,22 @@ import React from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import TournamentTypeCodes from '../config/tournamentTypes';
+
 function TournamentType({ type }) {
-  if (type === 'ladder') {
+  if (type === TournamentTypeCodes.ladder) {
     return 'Ladder';
   }
 
-  if (type === 'swiss') {
+  if (type === TournamentTypeCodes.swiss) {
     return 'Swiss';
   }
 
-  if (type === 'individual') {
+  if (type === TournamentTypeCodes.individual) {
     return (<FontAwesomeIcon icon="users" />);
   }
 
-  if (type === 'team') {
+  if (type === TournamentTypeCodes.team) {
     return (
       <>
         <FontAwesomeIcon icon="users" />
@@ -25,7 +27,7 @@ function TournamentType({ type }) {
     );
   }
 
-  if (type === 'stairway') {
+  if (type === TournamentTypeCodes.stairway) {
     return (
       <>
         <FontAwesomeIcon icon="user" />
@@ -34,6 +36,12 @@ function TournamentType({ type }) {
     );
   }
 
+  if (type === TournamentTypeCodes.show) {
+    return (
+      <FontAwesomeIcon icon="wine-bottle" />
+    );
+  }
+
   return (
     <FontAwesomeIcon
       title="Unknown tournament type"

diff --git a/services/app/apps/codebattle/assets/js/widgets/machines/game.js b/services/app/apps/codebattle/assets/js/widgets/machines/game.js
@@ -207,7 +207,7 @@ const machine = {
               target: 'game_over',
               cond: (_ctx, { payload }) => payload.state === 'game_over',
               // TODO: figureOut why soundWin doesn't work
-              actions: ['soundWin', 'handleGameAward', 'showGameResultModal'],
+              actions: ['soundWin', 'showGameResultModal'],
             },
             'user:give_up': {
               target: 'game_over',
@@ -356,7 +356,6 @@ export const config = {
     handleReconnection: () => { },
 
     // game actions
-    handleGameAward: () => { },
     soundWin: () => {
       sound.play('win');
     },

diff --git a/services/app/apps/codebattle/assets/js/widgets/middlewares/Room.js b/services/app/apps/codebattle/assets/js/widgets/middlewares/Room.js
@@ -191,6 +191,14 @@ export const sendEditorCursorSelection = (startOffset, endOffset) => {
   });
 };
 
+export const sendPassCode = (passCode, onError) => () => {
+  channel.push('enter_pass_code', { pass_code: passCode })
+    .receive('ok', () => {})
+    .receive('error', message => {
+      onError({ message });
+    });
+};
+
 export const sendGiveUp = () => {
   channel.push('give_up', {});
 };

diff --git a/services/app/apps/codebattle/assets/js/widgets/middlewares/Tournament.js b/services/app/apps/codebattle/assets/js/widgets/middlewares/Tournament.js
@@ -4,6 +4,7 @@ import { camelizeKeys, decamelizeKeys } from 'humps';
 import compact from 'lodash/compact';
 
 import socket from '../../socket';
+import TournamentTypes from '../config/tournamentTypes';
 import { actions } from '../slices';
 
 const tournamentId = Gon.getAsset('tournament_id');
@@ -26,13 +27,15 @@ const initTournamentChannel = dispatch => {
       topPlayerIds: response.topPlayerIds || [],
       matches: {},
       players: {},
+      showBots: response.tournament.type !== TournamentTypes.show,
       channel: { online: true },
       playersPageNumber: 1,
       playersPageSize: 20,
     }));
 
     dispatch(actions.updateTournamentPlayers(compact(response.players)));
     dispatch(actions.updateTournamentMatches(compact(response.matches)));
+    dispatch(actions.setTournamentTaskList(compact(response.tasksInfo)));
   };
 
   channel.onMessage = (_event, payload) => camelizeKeys(payload);
@@ -58,6 +61,7 @@ export const connectToTournament = () => dispatch => {
     dispatch(actions.updateTournamentData(response.tournament));
     dispatch(actions.updateTournamentPlayers(compact(response.players || [])));
     dispatch(actions.updateTournamentMatches(compact(response.matches || [])));
+    dispatch(actions.setTournamentTaskList(compact(response.tasksInfo || [])));
   };
 
   const handleMatchesUpdate = response => {

diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/RoomWidget.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/RoomWidget.jsx
@@ -1,28 +1,25 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useDispatch, useSelector } from 'react-redux';
+import cn from 'classnames';
 import { CSSTransition, SwitchTransition } from 'react-transition-group';
 
 import FeedbackAlertNotification from '../components/FeedbackAlertNotification';
 import FeedbackWidget from '../components/FeedbackWidget';
 import GameWidgetGuide from '../components/GameWidgetGuide';
 import RoomContext from '../components/RoomContext';
-import PageNames from '../config/pageNames';
-import sound from '../lib/sound';
 import * as machineSelectors from '../machines/selectors';
-import * as ChatActions from '../middlewares/Chat';
-import * as GameRoomActions from '../middlewares/Room';
-import * as selectors from '../selectors';
-import { actions } from '../slices';
 import useGameRoomMachine from '../utils/useGameRoomMachine';
 import useGameRoomModals from '../utils/useGameRoomModals';
+import useGameRoomSocketChannel from '../utils/useGameRoomSocketChannel';
+import useGameRoomSoundSettings from '../utils/useGameRoomSoundSettings';
 import useMachineStateSelector from '../utils/useMachineStateSelector';
 import useRoomSettings from '../utils/useRoomSettings';
 
 import BuilderEditorsWidget from './builder/BuilderEditorsWidget';
 import BuilderSettingsWidget from './builder/BuilderSettingsWidget';
 import CodebattlePlayer from './game/CodebattlePlayer';
+import GameRoomLockPanel from './game/GameRoomLockPanel';
 import GameWidget from './game/GameWidget';
 import InfoWidget from './game/InfoWidget';
 import NetworkAlert from './game/NetworkAlert';
@@ -35,10 +32,6 @@ function RoomWidget({
   taskMachine,
   editorMachine,
 }) {
-  const dispatch = useDispatch();
-
-  const useChat = useSelector(selectors.gameUseChatSelector);
-  const mute = useSelector(state => state.user.settings.mute);
   const machines = useGameRoomMachine({
     mainMachine,
     taskMachine,
@@ -50,6 +43,7 @@ function RoomWidget({
   );
   const gameRoomKey = machineSelectors.gameRoomKeySelector(roomMachineState);
 
+  const mute = useGameRoomSoundSettings();
   const {
     tournamentId,
     viewMode,
@@ -58,54 +52,11 @@ function RoomWidget({
     showTaskBuilder,
     showTimeoutMessage,
     showReplayer,
+    roomLocked = false,
+    disabled = false,
   } = useRoomSettings(pageName, roomMachineState);
   useGameRoomModals(machines);
-
-  useEffect(() => {
-    if (pageName === PageNames.builder) {
-      const clearTask = GameRoomActions.connectToTask(
-        machines.mainService,
-        machines.taskService,
-      )(dispatch);
-
-      return clearTask;
-    }
-
-    const options = { cancelRedirect: false };
-
-    const clearGame = GameRoomActions.connectToGame(machines.mainService, options)(
-      dispatch,
-    );
-    const clearChat = ChatActions.connectToChat(useChat)(dispatch);
-
-    return () => {
-      clearGame();
-      clearChat();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    const muteSound = e => {
-      if ((e.ctrlKey || e.metaKey) && e.key === 'm') {
-        e.preventDefault();
-
-        if (mute) {
-          sound.toggle();
-        } else {
-          sound.toggle(0);
-        }
-
-        actions.toggleMuteSound();
-      }
-    };
-
-    window.addEventListener('keydown', muteSound);
-
-    return () => {
-      window.removeEventListener('keydown', muteSound);
-    };
-  }, [mute]);
+  useGameRoomSocketChannel(pageName, machines);
 
   if (showWaitingRoom) {
     const gameUrl = window.location.href;
@@ -130,7 +81,13 @@ function RoomWidget({
             <GameWidgetGuide tournamentId={tournamentId} />
             <NetworkAlert />
             <FeedbackAlertNotification />
-            <div className="container-fluid">
+            <div
+              className={cn(
+                'container-fluid', {
+                  'd-none': roomLocked || disabled,
+                },
+              )}
+            >
               <div className="row no-gutter cb-game">
                 {showTaskBuilder && (
                   <>
@@ -158,6 +115,18 @@ function RoomWidget({
             </div>
             {showReplayer && <CodebattlePlayer roomMachineState={roomMachineState} />}
           </div>
+          <div
+            style={{ minHeight: 'calc(100vh - 92px)' }}
+            className={cn(
+              'justify-content-center align-items-center',
+              {
+                'd-none': !roomLocked,
+                'd-flex': roomLocked,
+              },
+            )}
+          >
+            <GameRoomLockPanel />
+          </div>
         </RoomContext.Provider>
       </CSSTransition>
     </SwitchTransition>

diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/GameRoomLockPanel.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/GameRoomLockPanel.jsx
@@ -0,0 +1,69 @@
+import React, { useState, useRef, useCallback } from 'react';
+
+import cn from 'classnames';
+import { useDispatch } from 'react-redux';
+
+import { sendPassCode } from '../../middlewares/Room';
+
+const passCodeLength = 8;
+
+function GameRoomLockPanel() {
+  const dispatch = useDispatch();
+
+  const inputRef = useRef(null);
+
+  const [error, setError] = useState(null);
+
+  const onChangePassCode = useCallback(() => {
+    if (error) {
+      setError(null);
+    }
+  }, [error, setError]);
+  const onSubmitCode = useCallback(() => {
+    const value = (inputRef.current.value || '').replaceAll(' ', '');
+    const onError = err => setError(err);
+
+    if (passCodeLength === value.length) {
+      onError({
+        message: `Only ${passCodeLength} character pass code (now ${value.length})`,
+      });
+      return;
+    }
+
+    dispatch(sendPassCode(value, onError));
+  }, [inputRef, setError, dispatch]);
+
+  const inputClassName = cn('form-control', {
+    'is-invalid': !!error,
+  });
+
+  return (
+    <div className="d-flex flex-column w-50">
+      <span className="text-center h3">Game is Locked</span>
+      <div className="d-flex">
+        <input
+          ref={inputRef}
+          id="game-lock"
+          type="text"
+          aria-label="Game lock input for pass code"
+          placeholder="Enter pass code"
+          className={inputClassName}
+          onChange={onChangePassCode}
+        />
+        <button
+          type="button"
+          className="btn btn-sm btn-success rounded-lg text-white"
+          onClick={onSubmitCode}
+        >
+          Submit
+        </button>
+      </div>
+      <div className="d-flex flex-column flex-sm-row justify-content-between">
+        <span className="text-muted m-1">Example: 12345678</span>
+        {error && <span className="text-danger m-1">{error.message}</span>}
+      </div>
+    </div>
+  );
+}
+
+export default GameRoomLockPanel;
diff --git a/...ices/app/apps/codebattle/assets/js/widgets/pages/tournament/CustomTournamentInfoPanel.jsx b/...ices/app/apps/codebattle/assets/js/widgets/pages/tournament/CustomTournamentInfoPanel.jsx
@@ -14,6 +14,7 @@ function CustomTournamentInfoPanel({
   currentRoundPosition = 0,
   matches,
   players,
+  taskList,
   topPlayerIds,
   currentUserId,
   pageNumber,
@@ -57,10 +58,11 @@ function CustomTournamentInfoPanel({
               }
               disabledSearch={!isAdmin && !isOwner}
             />
-            {!hideCustomGameConsole && (
+            {!hideCustomGameConsole && (isOwner || isAdmin) && (
               <TournamentGameCreatePanel
                 players={players}
                 matches={matches}
+                taskList={taskList}
                 currentRoundPosition={currentRoundPosition}
               />
             )}

diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/PlayersPanel.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/PlayersPanel.jsx
@@ -8,6 +8,7 @@ const Players = ({
   playersCount,
   players,
   canBan,
+  showBots,
   handleKick,
 }) => (
   <div className="bg-white shadow-sm p-3 rounded-lg overflow-auto">
@@ -27,23 +28,25 @@ const Players = ({
       {playersCount === 0 ? (
         <p className="test-nowrap">NO_PARTICIPANTS_YET</p>
       ) : (
-        Object.values(players).slice(0, 30).map(player => (
-          <div key={player.id} className="my-3 d-flex">
-            <div className="ml-1">
-              <UserInfo user={player} hideOnlineIndicator />
+        Object.values(players)
+          .filter(player => (showBots ? true : !player.isBot))
+          .slice(0, 30).map(player => (
+            <div key={player.id} className="my-3 d-flex">
+              <div className="ml-1">
+                <UserInfo user={player} hideOnlineIndicator />
+              </div>
+              {canBan && (
+                <button
+                  type="button"
+                  className="btn btn-link btn-sm text-danger rounded-lg"
+                  data-player-id={player.id}
+                  onClick={handleKick}
+                >
+                  Kick
+                </button>
+              )}
             </div>
-            {canBan && (
-              <button
-                type="button"
-                className="btn btn-link btn-sm text-danger rounded-lg"
-                data-player-id={player.id}
-                onClick={handleKick}
-              >
-                Kick
-              </button>
-            )}
-          </div>
-        ))
+          ))
       )}
     </div>
   </div>