Skip to content

PLAN-210-End-Game-Avatars #254

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jbartka wants to merge 14 commits into
base: main
Choose a base branch
from
Open

PLAN-210-End-Game-Avatars #254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
b089182
added end game avatars
May 4, 2023
ed7abe4
removed empty css style
May 4, 2023
8f55924
fixed build errors
May 4, 2023
91664f6
fixed css in order to adjust the alignment of the button elements as …
May 6, 2023
a8ae3e7
bug fix
May 6, 2023
7ddbcd3
bug fix #2
May 6, 2023
a2f1e33
removes purple background for selected piece after the game is over
May 6, 2023
08c6ae2
removes dangerouslySetInnerHTML and implements html into the Tooltip …
May 6, 2023
66ccee9
bug fixes
May 6, 2023
95d989d
bug fixes#2
May 6, 2023
f5025a6
stylistical changes + removed unnecessary lines
May 12, 2023
53ad17c
reduced margins to make end game avatars visible
May 15, 2023
1d8d174
fixed failing tests (#255)
RutaBoguzaite May 10, 2023
8a2c48e
removed curly braces (build fail)
May 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion services/app/src/components/chessBoard/Tile.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const Tile = ({

/* eslint-disable-next-line */
const _onClick = useCallback(() => {
if (!attribute && (row !== 6 && column !== 0)) {
if (!attribute) {
onClick(row, column);
}
}, [onClick, row, column]);
Expand Down
90 changes: 72 additions & 18 deletions services/app/src/components/gameFooter/ChessBoardPiece.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,15 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import './chess-board-pieces.css';
import { Avatar, Tooltip } from 'antd';
import { useChessBoardContext } from '../../contexts/ChessBoardContext';
import PlanningChessTooltip from '../planningChessTooltip/PlanningChessTooltip';
import { PieceName } from '../../constants/board';
import { GameState } from '../../constants/gameConstants';
import UserAvatar from '../avatar/UserAvatar';

const ChessBoardPiece = ({ selectFigure, figureName, figureImg, figureStrength, disabled }) => {
const { selectedItem } = useChessBoardContext();
const { selectedItem, turns, gameState } = useChessBoardContext();

const skipTooltipTxt = "Mark my move as complete, without any story points";

Expand All @@ -18,31 +21,82 @@ const ChessBoardPiece = ({ selectFigure, figureName, figureImg, figureStrength,
}

return (
<PlanningChessTooltip
<PlanningChessTooltip
title={figureName === PieceName.SKIP ? skipTooltipTxt : null}
placement="top"
>
<button
type="button"
data-testid={`${figureName}-piece-btn`}
data-testid={`${figureName}-piece-btn`}
onClick={() => onSelect()}
className={classnames('piece-field padding-y-s padding-x-sm f-center rubik-font', {
'piece-field-selected': selectedItem === figureName,
// disabling with class, because antd appends unnecessary spam around the button when its disabled
'disabled': disabled,
})}
className={classnames(
'piece-field padding-y-s padding-x-sm f-center rubik-font',
{
'piece-field-selected':
selectedItem === figureName,
// disabling with class, because antd appends unnecessary spam around the button when its disabled
'disabled': disabled,
},
)}
>
<img
src={figureImg}
alt={figureName}
className='figure-img'
/>
<p className="figure-title font-size-s weight-500">
{figureName}
</p>
<div className="figure-strength-container border-r-20 padding-y-0 padding-x-xxs f-center">
<p className="figure-strength font-size-xxs weight-500">{figureStrength}</p>
<div className="piece-and-score">
<img src={figureImg} alt={figureName} className="figure-img" />
<p className="figure-title font-size-s weight-500">{figureName}</p>
<div className="figure-strength-container border-r-20 padding-y-0 padding-x-xxs f-center">
<p className="figure-strength font-size-xxs weight-500">
{figureStrength}
</p>
</div>
</div>
<Tooltip
Copy link
Copy Markdown
Contributor

@AndzejIlj AndzejIlj May 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be possible to create separate component for end game avatars?

title={(
<div>
<div>
{
turns.filter((element) => element.figure === figureName)
.length
}{' '}
voted for {figureStrength}
</div>
<div>
{turns
.filter((element) => element.figure === figureName)
.map((item) => item.player)
.join(', ')}
</div>
</div>
)}
placement="top"
>
<div className="figure-info">
{gameState === GameState.GAME_FINISHED && (
<Avatar.Group
maxCount={2}
maxStyle={{
color: 'var(--primary)',
border: '1px solid var(--primary)',
backgroundColor: 'var(--background)',
fontFamily: 'Poppins',
}}
overlayClassName="hide-group-popover"
size={24}
>
{turns
.filter((element) => element.figure === figureName)
.map((item, index) => (
<UserAvatar
size='xs'
playerId={item.playerId}
key={`bubble-${index}`}
playerInitials={item.player[0]}
dataTestId={`square-${item.playerId}`}
bordered
/>
))}
</Avatar.Group>
)}
</div>
</Tooltip>
</button>
</PlanningChessTooltip>
);
Expand Down
18 changes: 16 additions & 2 deletions services/app/src/components/gameFooter/chess-board-pieces.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,25 @@
display: flex;
justify-content: space-evenly;
user-select: none;
height: auto;
position: relative;
}

.figure-info {
position: absolute;
top: calc(100%);
}

.piece-and-score {
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
height: 85px;
}

.piece-field {
width: clamp(56px, 6vh, 70px);
aspect-ratio: 1 / 2;
flex-direction: column;
border: 2px solid transparent;
cursor: pointer;
Expand Down Expand Up @@ -50,4 +64,4 @@
.figure-strength-container p {
color: var(--white);
letter-spacing: -0.1px;
}
}
2 changes: 1 addition & 1 deletion services/app/src/static/style/spacing.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@
.margin-y-0 { margin-top: 0px; margin-bottom: 0px }
.margin-y-xs { margin-top: 4px; margin-bottom: 4px }
.margin-y-s { margin-top: 8px; margin-bottom: 8px }
.margin-y-sm { margin-top: 12px; margin-bottom: 12px }
.margin-y-sm { margin-top: 10px; margin-bottom: 9px }
Copy link
Copy Markdown
Contributor

@AndzejIlj AndzejIlj May 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Keep the values the same. .margin-y-sm { margin-top: 10px; margin-bottom: 10px }

.margin-y-m { margin-top: 16px; margin-bottom: 16px }
.margin-y-l { margin-top: 20px; margin-bottom: 20px }

Expand Down