Skip to content

Commit

Permalink
Final adHocks
Browse files Browse the repository at this point in the history
  • Loading branch information
@vtm9
vtm9 committed Feb 26, 2025
1 parent 4802b91 commit fc153de
Show file tree
Hide file tree
Showing 11 changed files with 337 additions and 287 deletions.
10 changes: 4 additions & 6 deletions services/app/apps/codebattle/assets/js/widgets/components/ChatHeader.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,13 @@ export default function ChatHeader({ showRooms = false, disabled = false }) {
pushCommand({ type: pushCommandTypes.cleanBanned });
};

const headerClassName = cn(
'd-flex align-items-center', {
'border-bottom': (showRooms || (currentUserIsAdmin && !disabled)),
},
);
const headerClassName = cn('d-flex align-items-center', {
'border-bottom': showRooms || (currentUserIsAdmin && !disabled),
});

return (
<div className={headerClassName}>
{showRooms && <Rooms disabled={disabled} />}
{showRooms && !disabled && <Rooms disabled={disabled} />}
{currentUserIsAdmin && !disabled && (
<button
type="button"
Expand Down
26 changes: 19 additions & 7 deletions services/app/apps/codebattle/assets/js/widgets/pages/game/TaskAssignment.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import useTaskDescriptionParams from '../../utils/useTaskDescriptionParams';

import ContributorsList from './ContributorsList';
import TaskDescriptionMarkdown from './TaskDescriptionMarkdown';
import TaskLanguagesSelection from './TaskLanguageSelection';
// import TaskLanguagesSelection from './TaskLanguageSelection';

const renderTaskLink = name => {
const link = `https://github.com/hexlet-codebattle/battle_asserts/tree/master/src/battle_asserts/issues/${name}.clj`;
Expand Down Expand Up @@ -62,7 +62,9 @@ function TaskAssignment({
fullSize = false,
}) {
const [avaibleLanguages, displayLanguage, description] = useTaskDescriptionParams(task, taskLanguage);

console.log(handleSetLanguage);
console.log(avaibleLanguages);
console.log(displayLanguage);
const handleTaskSizeIncrease = useCallback(() => {
changeTaskDescriptionSizes(taskSize + 1);
}, [taskSize, changeTaskDescriptionSizes]);
Expand All @@ -71,7 +73,9 @@ function TaskAssignment({
changeTaskDescriptionSizes(taskSize - 1);
}, [taskSize, changeTaskDescriptionSizes]);
const handleOpenFullSizeTaskDescription = useCallback(() => {
NiceModal.show(ModalCodes.taskDescriptionModal, { pageName: PageNames.game });
NiceModal.show(ModalCodes.taskDescriptionModal, {
pageName: PageNames.game,
});
}, []);

if (isEmpty(task)) {
Expand Down Expand Up @@ -107,11 +111,11 @@ function TaskAssignment({
<span className="ml-2 text-muted">{task.name}</span>
</h6>
<div className="d-flex align-items-center">
<TaskLanguagesSelection
{/* <TaskLanguagesSelection
handleSetLanguage={handleSetLanguage}
avaibleLanguages={avaibleLanguages}
displayLanguage={displayLanguage}
/>
/> */}

{!fullSize && (
<button
Expand All @@ -130,10 +134,18 @@ function TaskAssignment({
role="group"
aria-label="Editor size controls"
>
<button type="button" className="btn btn-sm btn-light rounded-left" onClick={handleTaskSizeDecrease}>
<button
type="button"
className="btn btn-sm btn-light rounded-left"
onClick={handleTaskSizeDecrease}
>
-
</button>
<button type="button" className="btn btn-sm mr-2 btn-light border-left rounded-right" onClick={handleTaskSizeIncrease}>
<button
type="button"
className="btn btn-sm mr-2 btn-light border-left rounded-right"
onClick={handleTaskSizeIncrease}
>
+
</button>
</div>
Expand Down
9 changes: 4 additions & 5 deletions services/app/apps/codebattle/assets/js/widgets/pages/game/TaskDescriptionModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,9 @@ import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import { useDispatch, useSelector } from 'react-redux';

import {
gameTaskSelector, taskDescriptionLanguageSelector,
} from '@/selectors';
import { gameTaskSelector, taskDescriptionLanguageSelector } from '@/selectors';

import i18n from '../../../i18n';
import ModalCodes from '../../config/modalCodes';
import { actions } from '../../slices';

Expand All @@ -28,7 +27,7 @@ const TaskDescriptionModal = NiceModal.create(() => {
return (
<Modal centered show={modal.visible} onHide={modal.hide}>
<Modal.Header closeButton>
<Modal.Title>Task Description</Modal.Title>
<Modal.Title>{i18n.t('Task Description')}</Modal.Title>
</Modal.Header>
<Modal.Body>
<TaskAssignment
Expand All @@ -47,7 +46,7 @@ const TaskDescriptionModal = NiceModal.create(() => {
className="btn btn-secondary text-white rounded-lg"
>
<FontAwesomeIcon icon="times" className="mr-2" />
Close
{i18n.t('Close')}
</Button>
</div>
</Modal.Footer>
Expand Down
15 changes: 9 additions & 6 deletions ...ices/app/apps/codebattle/assets/js/widgets/pages/tournament/CustomTournamentInfoPanel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,10 @@ function CustomTournamentInfoPanel({
const handleUserSelectClick = useCallback(
event => {
const { userId } = event.currentTarget.dataset;
setPanelMode({ panel: PanelModeCodes.ratingMode, userId: Number(userId) });
setPanelMode({
panel: PanelModeCodes.ratingMode,
userId: Number(userId),
});
setPanelHistory(items => [...items, panelMode]);
setSearchedUser(allPlayers[Number(userId)]);
},
Expand All @@ -62,7 +65,10 @@ function CustomTournamentInfoPanel({
const handleTaskSelectClick = useCallback(
event => {
const { taskId } = event.currentTarget.dataset;
setPanelMode({ panel: PanelModeCodes.taskRatingAdvanced, taskId: Number(taskId) });
setPanelMode({
panel: PanelModeCodes.taskRatingAdvanced,
taskId: Number(taskId),
});
setPanelHistory(items => [...items, panelMode]);
},
[panelMode, setPanelMode, setPanelHistory],
Expand Down Expand Up @@ -148,10 +154,7 @@ function CustomTournamentInfoPanel({
/>
)}
{panelMode.panel === PanelModeCodes.clansBubbleDistributionMode && (
<ClansChartPanel
type={panelMode.panel}
state={state}
/>
<ClansChartPanel type={panelMode.panel} state={state} />
)}
{panelMode.panel === PanelModeCodes.taskRatingAdvanced && (
<TaskRankingAdvancedPanel
Expand Down
150 changes: 80 additions & 70 deletions services/app/apps/codebattle/assets/js/widgets/pages/tournament/PlayerStatsPanel.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import React, {
memo, useMemo, useState,
} from 'react';
import React, { memo, useMemo, useState } from 'react';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import cn from 'classnames';
Expand Down Expand Up @@ -29,14 +27,15 @@ const navMatchesTabsClassName = cn(
);

const tabLinkClassName = active => cn(
'nav-item nav-link text-uppercase text-nowrap rounded-0 font-weight-bold p-3 border-0 w-100', {
active,
},
);
'nav-item nav-link text-uppercase text-nowrap rounded-0 font-weight-bold p-3 border-0 w-100',
{
active,
},
);

const tabContentClassName = active => cn('tab-pane fade', {
'd-flex flex-column show active': active,
});
'd-flex flex-column show active': active,
});

const ArenaPlayerPanelCodes = {
review: 'review',
Expand All @@ -53,7 +52,9 @@ const getPlayerPanelCodes = type => {
if (type === TournamentTypes.arena) {
return Object.values(ArenaPlayerPanelCodes);
}
return Object.values(PlayerPanelCodes);
return Object.values(PlayerPanelCodes).filter(
panel => panel !== PlayerPanelCodes.stages,
);
};

function PlayerStatsPanel({
Expand All @@ -72,30 +73,29 @@ function PlayerStatsPanel({
const [playerPanel, setPlayerPanel] = useState(PlayerPanelCodes.review);
const currentPlayer = players[currentUserId];

const matchList = useMemo(() => (
reverse(Object.values(matches))
.filter(match => match.playerIds.includes(currentUserId))
), [matches, currentUserId]);
const [
opponentId,
matchId,
] = useMemo(() => {
const activeMatch = matchList.find(match => match.state === MatchStatesCodes.playing);
const matchList = useMemo(
() => reverse(Object.values(matches)).filter(match => match.playerIds.includes(currentUserId)),
[matches, currentUserId],
);
const [opponentId, matchId] = useMemo(() => {
const activeMatch = matchList.find(
match => match.state === MatchStatesCodes.playing,
);
const lastMatch = matchList[0];
const targetMatch = activeMatch || lastMatch;

if (targetMatch) {
const playerId = getOpponentId(targetMatch, currentUserId);

return [
playerId,
targetMatch.id,
];
return [playerId, targetMatch.id];
}

return [];
}, [matchList, currentUserId]);
const groupedMatchListByRound = useMemo(() => groupBy(matchList, 'roundPosition'), [matchList]);
const groupedMatchListByRound = useMemo(
() => groupBy(matchList, 'roundPosition'),
[matchList],
);
const stages = useMemo(
() => reverse(Object.keys(groupedMatchListByRound)).map(Number),
[groupedMatchListByRound],
Expand All @@ -111,13 +111,12 @@ function PlayerStatsPanel({
<div>
<span className="text-nowrap pr-1" title={currentPlayer.name}>
{currentPlayer.name}
{currentPlayer.isBanned && <FontAwesomeIcon className="ml-2 text-danger" icon="ban" />}
{currentPlayer.isBanned && (
<FontAwesomeIcon className="ml-2 text-danger" icon="ban" />
)}
</span>
<span title="Your place in tournament">
<TournamentPlace
place={currentPlayer.place + 1}
withIcon
/>
<TournamentPlace place={currentPlayer.place + 1} withIcon />
</span>
</div>
</div>
Expand Down Expand Up @@ -153,7 +152,9 @@ function PlayerStatsPanel({
<div
id={`player-panel-${PlayerPanelCodes.review}`}
key={`player-panel-${PlayerPanelCodes.review}`}
className={tabContentClassName(playerPanel === PlayerPanelCodes.review)}
className={tabContentClassName(
playerPanel === PlayerPanelCodes.review,
)}
role="tabpanel"
aria-labelledby={`player-panel-tab-${PlayerPanelCodes.review}`}
>
Expand Down Expand Up @@ -195,64 +196,73 @@ function PlayerStatsPanel({
<div
id={`player-panel-${PlayerPanelCodes.stages}`}
key={`player-panel-${PlayerPanelCodes.stages}`}
className={tabContentClassName(playerPanel === PlayerPanelCodes.stages)}
className={tabContentClassName(
playerPanel === PlayerPanelCodes.stages,
)}
role="tabpanel"
aria-labelledby={`player-panel-tab-${PlayerPanelCodes.stages}`}
>
{stages.length < 2 ? (<div className="d-flex justify-content-center p-1">No stages statistics</div>) : stages.map(stage => {
const stageFirstMatch = groupedMatchListByRound[stage][0];
const stageOpponentId = getOpponentId(stageFirstMatch, currentUserId);
{stages.length < 2 ? (
<div className="d-flex justify-content-center p-1">
No stages statistics
</div>
) : (
stages.map(stage => {
const stageFirstMatch = groupedMatchListByRound[stage][0];
const stageOpponentId = getOpponentId(
stageFirstMatch,
currentUserId,
);

return (
<div
key={`stage-${stage}-statistics`}
className="d-flex flex-column flex-md-row flex-lg-row flex-xl-row border-bottom p-2"
>
<StageCard
playerId={currentUserId}
opponentId={stageOpponentId}
stage={stage}
stagesLimit={roundsLimit}
players={players}
lastGameId={stageFirstMatch?.gameId}
lastMatchState={stageFirstMatch?.state}
matchList={groupedMatchListByRound[stage]}
/>
{type === TournamentTypes.arena ? (
<ArenaStatisticsCard
type={type}
playerId={currentUserId}
taskIds={currentPlayer.taskIds}
place={currentPlayer.place}
isBanned={currentPlayer.isBanned}
matchList={matchList}
/>
) : (
<StatisticsCard
return (
<div
key={`stage-${stage}-statistics`}
className="d-flex flex-column flex-md-row flex-lg-row flex-xl-row border-bottom p-2"
>
<StageCard
playerId={currentUserId}
opponentId={stageOpponentId}
stage={stage}
stagesLimit={roundsLimit}
players={players}
lastGameId={stageFirstMatch?.gameId}
lastMatchState={stageFirstMatch?.state}
matchList={groupedMatchListByRound[stage]}
/>
)}
</div>
);
})}
{type === TournamentTypes.arena ? (
<ArenaStatisticsCard
type={type}
playerId={currentUserId}
taskIds={currentPlayer.taskIds}
place={currentPlayer.place}
isBanned={currentPlayer.isBanned}
matchList={matchList}
/>
) : (
<StatisticsCard
playerId={currentUserId}
matchList={groupedMatchListByRound[stage]}
/>
)}
</div>
);
})
)}
</div>
<div
id={`player-panel-${PlayerPanelCodes.matches}`}
key={`player-panel-${PlayerPanelCodes.matches}`}
className={tabContentClassName(playerPanel === PlayerPanelCodes.matches)}
className={tabContentClassName(
playerPanel === PlayerPanelCodes.matches,
)}
role="tabpanel"
aria-labelledby={`player-panel-tab-${PlayerPanelCodes.matches}`}
>
{stages.map(stage => (
<React.Fragment key={`stage-${stage}-matches`}>

{type !== TournamentTypes.arena && (
<div className="d-flex justify-content-center p-2">
<StageTitle
stage={stage}
stagesLimit={roundsLimit}
/>
<StageTitle stage={stage} stagesLimit={roundsLimit} />
</div>
)}
<div className="border-top">
Expand Down
Loading

0 comments on commit fc153de

Please sign in to comment.