Skip to content

Commit

Permalink
fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
ReDBrother committed Jun 7, 2024
1 parent 987b93c commit 176d59a
Show file tree
Hide file tree
Showing 4 changed files with 201 additions and 93 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,19 @@ import { useDispatch } from 'react-redux';
import UserInfo from '../../components/UserInfo';
import { getResults } from '../../middlewares/TournamentAdmin';

import TournamentContextMenu, {
useTournamentContextMenu,
} from './TournamentContextMenu';
import useTournamentPanel from './useTournamentPanel';

const getCustomEventTrClassName = (type, muted) => cn('text-dark font-weight-bold cb-custom-event-tr', {
const getCustomEventTrClassName = (type, muted) => cn(
'text-dark font-weight-bold cb-custom-event-tr', {
'cb-custom-event-bg-success': type === 'clan' && !muted,
'cb-custom-event-bg-muted-success': type === 'clan' && muted,
'cb-custom-event-bg-purple cursor-pointer': type === 'user' && !muted,
'cb-custom-event-bg-muted-purple cursor-pointer': type === 'user' && muted,
});
},
);

const tableDataCellClassName = hideSeparator => cn(
'p-1 pl-4 my-2 align-middle text-nowrap position-relative cb-custom-event-td border-0',
Expand All @@ -35,97 +40,104 @@ function RatingClansPanel({ type, state, handleUserSelectClick }) {

useTournamentPanel(fetchData, state);

const { menuId, menuRequest } = useTournamentContextMenu({
type: 'user',
});

return (
<div className="my-2 px-1 mt-lg-0 rounded-lg position-relative cb-overflow-x-auto cb-overflow-y-auto">
<table className="table table-striped cb-custom-event-table">
<thead className="text-muted">
<tr>
<th className="p-1 pl-4 font-weight-light border-0">{}</th>
<th className="p-1 pl-4 font-weight-light border-0">
{i18next.t('Clan')}
</th>
<th className="p-1 pl-4 font-weight-light border-0">
{i18next.t('Score')}
</th>
<th className="p-1 pl-4 font-weight-light border-0">
{i18next.t('Wins count')}
</th>
<th className="p-1 pl-4 font-weight-light border-0">
{i18next.t('Total time for solving task')}
</th>
</tr>
</thead>
<tbody>
{items?.map((users, index) => (
<React.Fragment key={`${type}-clan-${users[0].clanId}`}>
<tr className="cb-custom-event-empty-space-tr" />
<tr className={getCustomEventTrClassName('clan', index > 3)}>
<td className={tableDataCellClassName(true)}>
{users[0].clanRank}
</td>
<td
title={users[0].clanLongName}
className={tableDataCellClassName()}
>
<div
className="cb-custom-event-name mr-1"
<TournamentContextMenu menuId={menuId} request={menuRequest}>
<div className="my-2 px-1 mt-lg-0 rounded-lg position-relative cb-overflow-x-auto cb-overflow-y-auto">
<table className="table table-striped cb-custom-event-table">
<thead className="text-muted">
<tr>
<th className="p-1 pl-4 font-weight-light border-0">{}</th>
<th className="p-1 pl-4 font-weight-light border-0">
{i18next.t('Clan')}
</th>
<th className="p-1 pl-4 font-weight-light border-0">
{i18next.t('Score')}
</th>
<th className="p-1 pl-4 font-weight-light border-0">
{i18next.t('Wins count')}
</th>
<th className="p-1 pl-4 font-weight-light border-0">
{i18next.t('Total time for solving task')}
</th>
</tr>
</thead>
<tbody>
{items?.map((users, index) => (
<React.Fragment key={`${type}-clan-${users[0].clanId}`}>
<tr className="cb-custom-event-empty-space-tr" />
<tr className={getCustomEventTrClassName('clan', index > 3)}>
<td className={tableDataCellClassName(true)}>
{users[0].clanRank}
</td>
<td
title={users[0].clanLongName}
className={tableDataCellClassName()}
>
{users[0].clanName}
</div>
</td>
<td className={tableDataCellClassName()}>
{users.reduce((acc, user) => acc + user.totalScore, 0) || 0}
</td>
<td className={tableDataCellClassName()}>
{users.reduce((acc, user) => acc + user.winsCount, 0) || 0}
</td>
<td className={tableDataCellClassName()}>
{users.reduce(
(acc, user) => acc + user.totalDurationSec,
0,
) || 0}
</td>
</tr>
{users.map(user => (
<React.Fragment key={`${type}-user-${user.userId}`}>
<tr className="cb-custom-event-empty-space-tr" />
<tr className={getCustomEventTrClassName('user', index > 3)}>
<td className={tableDataCellClassName(true)} />
<td
className={tableDataCellClassName()}
<div
className="cb-custom-event-name mr-1"
>
<div
role="button"
tabIndex={0}
className="cb-custom-event-name cursor-pointer mr-1"
onClick={handleUserSelectClick}
onKeyPress={handleUserSelectClick}
data-user-id={user.userId}
{users[0].clanName}
</div>
</td>
<td className={tableDataCellClassName()}>
{users.reduce((acc, user) => acc + user.totalScore, 0) || 0}
</td>
<td className={tableDataCellClassName()}>
{users.reduce((acc, user) => acc + user.winsCount, 0) || 0}
</td>
<td className={tableDataCellClassName()}>
{users.reduce(
(acc, user) => acc + user.totalDurationSec,
0,
) || 0}
</td>
</tr>
{users.map(user => (
<React.Fragment key={`${type}-user-${user.userId}`}>
<tr className="cb-custom-event-empty-space-tr" />
<tr className={getCustomEventTrClassName('user', index > 3)}>
<td className={tableDataCellClassName(true)} />
<td
className={tableDataCellClassName()}
>
<UserInfo
user={{ id: user.userId, name: user.userName }}
hideOnlineIndicator
hideLink
/>
</div>
</td>
<td className={tableDataCellClassName()}>
{user.totalScore || 0}
</td>
<td className={tableDataCellClassName()}>
{user.winsCount || 0}
</td>
<td className={tableDataCellClassName()}>
{user.totalDurationSec || 0}
</td>
</tr>
</React.Fragment>
))}
</React.Fragment>
))}
</tbody>
</table>
</div>
<div
role="button"
tabIndex={0}
className="cb-custom-event-name cursor-pointer mr-1"
// onContextMenu={displayMenu}
onClick={handleUserSelectClick}
onKeyPress={handleUserSelectClick}
data-user-id={user.userId}
>
<UserInfo
user={{ id: user.userId, name: user.userName }}
hideOnlineIndicator
hideLink
/>
</div>
</td>
<td className={tableDataCellClassName()}>
{user.totalScore || 0}
</td>
<td className={tableDataCellClassName()}>
{user.winsCount || 0}
</td>
<td className={tableDataCellClassName()}>
{user.totalDurationSec || 0}
</td>
</tr>
</React.Fragment>
))}
</React.Fragment>
))}
</tbody>
</table>
</div>
</TournamentContextMenu>
);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import React, {
useEffect,
} from 'react';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
Chart as ChartJS,
CategoryScale,
Expand Down Expand Up @@ -132,6 +133,9 @@ function TaskRankingAdvancedPanel({ taskId, state, handleUserSelectClick }) {
<th className="p-1 pl-4 font-weight-light border-0">
{i18next.t('Duration (sec)')}
</th>
<th className="p-1 pl-4 font-weight-light border-0">
{' '}
</th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -169,12 +173,17 @@ function TaskRankingAdvancedPanel({ taskId, state, handleUserSelectClick }) {
{item.clanName}
</div>
</td>
<td width="120" className={tableDataCellClassName}>
<td width="100" className={tableDataCellClassName}>
{item.score}
</td>
<td width="120" className={tableDataCellClassName}>
<td width="100" className={tableDataCellClassName}>
{item.durationSec}
</td>
<td className={tableDataCellClassName}>
<a className="text-primary" href={`/games/${item.gameId}`}>
<FontAwesomeIcon icon="link" className="mr-1" />
</a>
</td>
</tr>
</React.Fragment>
))}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,8 @@ function Tournament({ waitingRoomMachine }) {
}, [dispatch]);
const toggleStreamMode = useCallback(() => {
if (streamMode) {
document.getElementsByTagName('main')[0].style.zoom = '100%';
// document.getElementsByTagName('main')[0].style.zoom = '100%';
document.body.style.zoom = '100%';
}
dispatch(actions.toggleStreamMode());
}, [dispatch, streamMode]);
Expand Down Expand Up @@ -226,7 +227,8 @@ function Tournament({ waitingRoomMachine }) {
}

if (activeStreamMode || streamMode) {
document.getElementsByTagName('main')[0].style.zoom = '130%';
// document.getElementsByTagName('main')[0].style.zoom = '130%';
document.body.style.zoom = '130%';
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import React, {
memo,
useMemo,
useState,
useCallback,
} from 'react';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
Menu,
Item,
// Separator,
useContextMenu,
} from 'react-contexify';
import { /* useSelector, */ useDispatch } from 'react-redux';

export const useTournamentContextMenu = ({ type }) => {
const menuConf = useMemo(() => ({ id: `${type}-chat` }), [type]);
const { show } = useContextMenu(menuConf);

const [menuRequest, setMenuRequest] = useState();

const displayMenu = useCallback(event => {
const { userId } = event.currentTarget.dataset;

if (!userId) {
return;
}

const request = {
userId,
};

setMenuRequest(request);
show({ event });
}, [show]);

return {
menuId: menuConf.id,
menuRequest,
displayMenu,
};
};

function TournamentContextMenu({
request = {
userId: null,
},
menuId,
// inputRef,
children,
}) {
const dispatch = useDispatch();

const {
userId,
} = request;

//
const handleBanClick = () => {
if (userId) {
dispatch();
}
};

return (
<>
{children}
<Menu role="menu" id={menuId}>
<Item
aria-label="Ban"
onClick={handleBanClick}
>
<FontAwesomeIcon
className="mr-2"
icon="ban"
/>
<span>Ban</span>
</Item>
</Menu>
</>
);
}

export default memo(TournamentContextMenu);

0 comments on commit 176d59a

Please sign in to comment.