Skip to content

Commit

Permalink
refactor specatotor statistics and add player statistics in tournamen…
Browse files Browse the repository at this point in the history 
…t player panel
  • Loading branch information
@ReDBrother
ReDBrother committed Oct 30, 2023
1 parent a64a15b commit a0fe1fa
Show file tree
Hide file tree
Showing 9 changed files with 309 additions and 77 deletions.
9 changes: 6 additions & 3 deletions services/app/apps/codebattle/assets/js/widgets/pages/game/GameActionButtons.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,19 +27,22 @@ function CheckResultButton({ onClick, status }) {
case 'enabled':
return (
<button type="button" {...commonProps}>
<FontAwesomeIcon icon={['fas', 'play-circle']} className="success" />
<FontAwesomeIcon icon={['fas', 'play-circle']} className="mr-2 success" />
Run
</button>
);
case 'checking':
return (
<button type="button" {...commonProps} disabled>
<FontAwesomeIcon icon="spinner" pulse />
<FontAwesomeIcon className="mr-2" icon="spinner" pulse />
Running...
</button>
);
case 'disabled':
return (
<button type="button" {...commonProps} disabled>
<FontAwesomeIcon icon={['fas', 'play-circle']} className="success" />
<FontAwesomeIcon icon={['fas', 'play-circle']} className="mr-2 success" />
Run
</button>
);
default: {
Expand Down
4 changes: 2 additions & 2 deletions services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentUserPanel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ function TournamentUserPanel({
searchedUserId = 0,
}) {
const disabled = searchedUserId === userId || currentUserId === userId;
const [open, setOpen] = useState(disabled);
const [open, setOpen] = useState(true);

const panelClassName = cn(
'd-flex flex-column border shadow-sm rounded-lg mb-2 overflow-auto',
Expand Down Expand Up @@ -123,7 +123,7 @@ function TournamentUserPanel({
</div>
<Collapse in={open}>
<div id="collapse-matches-one" className="border-top">
<UsersMatchList currentUserId={currentUserId} matches={matches} />
<UsersMatchList currentUserId={currentUserId} playerId={userId} matches={matches} />
</div>
</Collapse>
</div>
Expand Down
26 changes: 25 additions & 1 deletion services/app/apps/codebattle/assets/js/widgets/pages/tournament/UsersMatchList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import cn from 'classnames';
import { useSelector } from 'react-redux';

import useRoundStatistics from '@/utils/useRoundStatistics';

import Loading from '../../components/Loading';
import UserInfo from '../../components/UserInfo';

Expand All @@ -20,7 +22,9 @@ function UserTournamentInfo({ userId }) {
return <UserInfo user={user} hideOnlineIndicator />;
}

function UsersMatchList({ currentUserId, matches }) {
function UsersMatchList({ currentUserId, playerId, matches }) {
const [player] = useRoundStatistics(playerId, matches);

if (matches.length === 0) {
return (
<div
Expand All @@ -33,6 +37,26 @@ function UsersMatchList({ currentUserId, matches }) {

return (
<div className="d-flex flex-column">
<div className="d-flex py-2 border-bottom overflow-auto">
<span className="ml-2">
{'Wins: '}
{player.winMatches.length}
</span>
<span className="ml-1 pl-1 border-left">
{'Round Score: '}
{player.score}
</span>
<span className="ml-1 pl-1 border-left">
{'AVG Tests: '}
{player.avgTests}
%
</span>
<span className="ml-1 pl-1 border-left">
{'AVG Duration: '}
{player.avgDuration}
{' sec'}
</span>
</div>
{matches.map((match, index) => {
const matchClassName = cn(
'd-flex flex-column flex-xl-row flex-lg-row flex-md-row',
Expand Down
145 changes: 77 additions & 68 deletions services/app/apps/codebattle/assets/js/widgets/pages/tournamentPlayer/TournamentPlayer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { useInterpret } from '@xstate/react';
import cn from 'classnames';
import groupBy from 'lodash/groupBy';
import reverse from 'lodash/reverse';
import sum from 'lodash/sum';
import { useDispatch, useSelector } from 'react-redux';

import CountdownTimer from '@/components/CountdownTimer';
Expand All @@ -18,75 +17,77 @@ import TournamentStates from '../../config/tournament';
import { connectToTournamentPlayer } from '../../middlewares/TournamentPlayer';
import * as selectors from '../../selectors';
import { actions } from '../../slices';
import useRoundStatistics from '../../utils/useRoundStatistics';
import Output from '../game/Output';
import OutputTab from '../game/OutputTab';
import TaskAssignment from '../game/TaskAssignment';

import SpectatorEditor from './SpectatorEditor';

const RoundStatus = ({ playerId, matches }) => {
const finishedMatches = matches.filter(match => match.playerResults[playerId]);
const matchesCount = finishedMatches.length;

const opponentId = matches[0].playerIds.find(id => (id !== playerId));
const playerWinMatches = matches.filter(match => playerId === match.winnerId);
const opponentWinMatches = matches.filter(match => opponentId === match.winnerId);

const playerScore = sum(finishedMatches.map(match => match.playerResults[playerId]?.score || 0));
const opponnentScore = sum(finishedMatches.map(match => match.playerResults[opponentId]?.score || 0));

const playerAvgTests = matchesCount !== 0 ? sum(finishedMatches.map(match => match.playerResults[playerId]?.resultPercent || 0)) / matchesCount : 0;
const opponnentAvgTests = matchesCount !== 0 ? sum(finishedMatches.map(match => match.playerResults[opponentId]?.resultPercent || 0)) / matchesCount : 0;
const [
// player = {
// winMatches
// score,
// avgTests,
// avgDuration,
// },
player,
opponent,
] = useRoundStatistics(
playerId,
matches,
);

const playerAvgDuration = matchesCount !== 0 ? sum(finishedMatches.map(match => match.playerResults[playerId]?.durationSec || 0)) / matchesCount : 0;
const opponnentAvgDuration = matchesCount !== 0 ? sum(finishedMatches.map(match => match.playerResults[opponentId]?.durationSec || 0)) / matchesCount : 0;
console.log(player, opponent);

const RoundStatistics = () => (
<div className="d-flex text-center align-items-center">
<div className="d-flex text-center align-items-center justify-content-center">
<div className="d-flex flex-column align-items-baseline">
<span className="ml-2 h4">
{'Wins: '}
{playerWinMatches.length}
{player.winMatches.length}
</span>
<span className="ml-2 h4">
{'Score: '}
{playerScore}
{player.score}
</span>
<span className="ml-2 h4">
{`AVG Tests: ${playerAvgTests}%`}
{`AVG Tests: ${player.avgTests}%`}
</span>
<span className="ml-4 h4">
{'AVG Duration: '}
{playerAvgDuration}
{player.avgDuration}
{' sec'}
</span>
</div>
</div>
);

const RoundResultIcon = () => {
if ((playerWinMatches.length === opponentWinMatches.length)
&& (playerScore === opponnentScore)
&& (playerAvgTests === opponnentAvgTests)
&& (playerAvgDuration === opponnentAvgDuration)
if ((player.winMatches.length === opponent.winMatches.length)
&& (player.score === opponent.score)
&& (player.avgTests === opponent.avgTests)
&& (player.avgDuration === opponent.avgDuration)
) {
return <FontAwesomeIcon className="ml-2 text-primary" icon="handshake" />;
}

if (
(playerWinMatches.length > opponentWinMatches.length)
(player.score > opponent.score)
|| (
(playerWinMatches.length === opponentWinMatches.length)
&& (playerScore > opponnentScore)
(player.score === opponent.score)
&& (player.winMatches.length > opponent.winMatches.length)
)
|| (
(playerWinMatches.length === opponentWinMatches.length)
&& (playerScore === opponnentScore)
&& (playerAvgTests > opponnentAvgTests)
(player.winMatches.length === opponent.winMatches.length)
&& (player.score === opponent.score)
&& (player.avgTests > opponent.avgTests)
)
|| ((playerWinMatches.length === opponentWinMatches.length)
&& (playerScore === opponnentScore)
&& (playerAvgTests === opponnentAvgTests)
&& (playerAvgDuration > opponnentAvgDuration)
|| ((player.winMatches.length === opponent.winMatches.length)
&& (player.score === opponent.score)
&& (player.avgTests === opponent.avgTests)
&& (player.avgDuration > opponent.avgDuration)
)
) {
return <FontAwesomeIcon className="ml-2 text-warning" icon="trophy" />;
Expand All @@ -97,7 +98,9 @@ const RoundStatus = ({ playerId, matches }) => {

return (
<div className="d-flex">
<RoundResultIcon />
<div className="d-flex justify-content-center align-items-center h1">
<RoundResultIcon />
</div>
<RoundStatistics />
</div>
);
Expand Down Expand Up @@ -251,9 +254,10 @@ function TournamentPlayer({
const groupedMatches = groupBy(Object.values(tournament.matches), 'round');
const rounds = reverse(Object.keys(groupedMatches));

const lastRound = rounds[0];
const lastRound = rounds[2];
console.log(groupedMatches[lastRound]);

if (!lastRound) {
if (!lastRound || !groupedMatches[lastRound]) {
return (
<div
className="card bg-white rounded-lg flex justify-content-center align-items-center w-100 h-100"
Expand All @@ -265,37 +269,42 @@ function TournamentPlayer({

return (
<div className="card border-0 rounded-lg shadow-sm h-100">
<div className="p-2 d-flex flex-column justify-content-center align-items-center text-center h-100">
<h1 className="mt-2">
<RoundStatus
playerId={playerId}
matches={groupedMatches[lastRound]}
/>
</h1>
<div>
{groupedMatches[lastRound].map(match => (
<div className="d-flex text-center align-items-center" key={match.id}>
<span className="h3">{getMatchIcon(playerId, match)}</span>
{match.playerResults[playerId] ? (
<div className="d-flex flex-column align-items-baseline">
<span className="ml-4 h4">
{'Duration: '}
{match.playerResults[playerId].durationSec}
{' sec'}
</span>
<span className="ml-2 h4">
{'Score: '}
{match.playerResults[playerId].score}
</span>
<span className="ml-2 h4">
{`Tests: ${match.playerResults[playerId].resultPercent}%`}
</span>
</div>
) : (
<span className="ml-4 h3">¯\_(ツ)_/¯</span>
)}
</div>
))}
<div className="p-2 d-flex h-100 w-100">
<div className="d-flex flex-column w-100 overflow-auto">
<h2 className="mb-4">Round Statistics:</h2>
<div className="mt-2">
<RoundStatus
playerId={playerId}
matches={groupedMatches[lastRound]}
/>
</div>

<h2 className="mb-4 mt-2 border-top">Matches:</h2>
<div>
{groupedMatches[lastRound].map(match => (
<div className="d-flex text-center align-items-center" key={match.id}>
<span className="h3">{getMatchIcon(playerId, match)}</span>
{match.playerResults[playerId] ? (
<div className="d-flex flex-column align-items-baseline">
<span className="ml-4 h4">
{'Duration: '}
{match.playerResults[playerId].durationSec}
{' sec'}
</span>
<span className="ml-2 h4">
{'Score: '}
{match.playerResults[playerId].score}
</span>
<span className="ml-2 h4">
{`Tests: ${match.playerResults[playerId].resultPercent}%`}
</span>
</div>
) : (
<span className="ml-4 h3">¯\_(ツ)_/¯</span>
)}
</div>
))}
</div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit a0fe1fa

Please sign in to comment.