Skip to content

Commit

Permalink
Merge pull request #142 from daithihearn/daithi-ui-improvements
Browse files Browse the repository at this point in the history 
Daithi UI improvements
  • Loading branch information
@daithihearn
daithihearn authored Feb 28, 2023
2 parents 12a1833 + 5bec444 commit f1ba7fc
Show file tree
Hide file tree
Showing 15 changed files with 142 additions and 75 deletions.
11 changes: 10 additions & 1 deletion .github/workflows/publish-to-dockerhub.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ jobs:
path: "public/manifest.json"
prop_path: "version"
- name: Update manifest.json version from ${{ steps.manifestversion.outputs.prop }} to ${{ github.ref_name }}
if: ${{ steps.manifestversion.outputs.prop }} != ${{ github.ref_name }}
if: ${{ steps.manifestversion.outputs.prop != github.ref_name }}
uses: jossef/action-set-json-field@v2
with:
file: public/manifest.json
Expand All @@ -44,6 +44,7 @@ jobs:
tags: "latest, ${{ github.ref_name }}"

- name: Create PR with version changes
id: cpr
uses: peter-evans/create-pull-request@v4
with:
token: ${{ secrets.PAT_PR }}
Expand All @@ -52,6 +53,7 @@ jobs:
body: |
Update latest version (${{ github.ref_name }})
branch: update-version-${{ github.ref_name }}
delete-branch: true
base: main
add-paths: |
package.json
Expand All @@ -60,3 +62,10 @@ jobs:
update
assignees: |
${{ github.actor }}
- name: Enable Pull Request Automerge
if: steps.cpr.outputs.pull-request-operation == 'created'
uses: peter-evans/enable-pull-request-automerge@v2
with:
token: ${{ secrets.PAT }}
pull-request-number: ${{ steps.cpr.outputs.pull-request-number }}
merge-method: squash
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "frontend",
"version": "5.4.8",
"version": "5.5.0",
"description": "React frontend for the Cards 110",
"author": "Daithi Hearn",
"license": "MIT",
Expand Down
2 changes: 1 addition & 1 deletion public/manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"short_name": "Cards 110",
"name": "Cards 110",
"version": "5.4.8",
"version": "5.5.0",
"icons": [
{
"src": "./assets/favicon.png",
Expand Down
Binary file added src/assets/img/dummy.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/img/mycards.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 2 additions & 4 deletions src/components/Game/Buying.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,13 +77,11 @@ const Buying = () => {
<Button
type="button"
onClick={toggleReadyToBuy}
color={
isMyGo || !readyToBuy ? "primary" : "secondary"
}>
color={isMyGo || !readyToBuy ? "primary" : "info"}>
<b>
{isMyGo || !readyToBuy
? "Keep Cards"
: "Waiting to buy cards (click to cancel)"}
: "Waiting to buy cards..."}
</b>
</Button>
) : null}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Game/GameWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const GameWrapper = () => {
<CardGroup>
<WebsocketManager />

<Card className="p-6" inverse>
<Card className="p-6 gameContainer" inverse>
<PlayersAndCards />

{!iamSpectator ? <MyCards /> : null}
Expand Down
116 changes: 62 additions & 54 deletions src/components/Game/MyCards.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,14 @@ import {
} from "../../caches/AutoPlaySlice"
import parseError from "../../utils/ErrorUtils"

const EMPTY_HAND = [
{ ...BLANK_CARD, selected: false },
{ ...BLANK_CARD, selected: false },
{ ...BLANK_CARD, selected: false },
{ ...BLANK_CARD, selected: false },
{ ...BLANK_CARD, selected: false },
]

const MyCards: React.FC = () => {
const dispatch = useAppDispatch()
const gameId = useAppSelector(getGameId)
Expand Down Expand Up @@ -220,61 +228,61 @@ const MyCards: React.FC = () => {
</DragDropContext>
</CardBody>

{showDummy && (
<CardBody className="cardArea">
<DragDropContext onDragEnd={handleOnDragEndDummy}>
<Droppable droppableId="dummy" direction="horizontal">
{provided => (
<div
className="characters myCards"
style={{ display: "inline-flex" }}
{...provided.droppableProps}
ref={provided.innerRef}>
{myCards.slice(5, 10).map((card, index) => {
const draggableId = `${card.name}${
card.name === BLANK_CARD.name
? index
: ""
}`
return (
<Draggable
key={draggableId}
draggableId={draggableId}
index={index}
isDragDisabled={
card.name ===
BLANK_CARD.name
}>
{provided => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}>
<CardImg
alt={card.name}
onClick={event =>
handleSelectCard(
card,
event,
)
}
src={`/cards/thumbnails/${card.name}.png`}
className={getStyleForCard(
<CardBody className="cardArea">
<DragDropContext onDragEnd={handleOnDragEndDummy}>
<Droppable droppableId="dummy" direction="horizontal">
{provided => (
<div
className="characters myCards dummy"
style={{ display: "inline-flex" }}
{...provided.droppableProps}
ref={provided.innerRef}>
{(showDummy
? myCards.slice(5, 10)
: EMPTY_HAND
).map((card, index) => {
const draggableId = `${card.name}${
card.name === BLANK_CARD.name
? index
: ""
}`
return (
<Draggable
key={draggableId}
draggableId={draggableId}
index={index}
isDragDisabled={
card.name === BLANK_CARD.name
}>
{provided => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}>
<CardImg
alt={card.name}
onClick={event =>
handleSelectCard(
card,
)}
/>
</div>
)}
</Draggable>
)
})}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
</CardBody>
)}
event,
)
}
src={`/cards/thumbnails/${card.name}.png`}
className={getStyleForCard(
card,
)}
/>
</div>
)}
</Draggable>
)
})}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
</CardBody>

{round?.status === RoundStatus.PLAYING ? (
<CardBody className="buttonArea">
Expand Down
4 changes: 2 additions & 2 deletions src/components/Game/SelectSuit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,8 +162,8 @@ const SelectSuit = () => {
</div>
) : (
<ButtonGroup size="lg">
<Button disabled type="button" color="primary">
Please wait for the goer to choose their suit
<Button disabled type="button" color="info">
<b>Waiting for suit...</b>
</Button>
</ButtonGroup>
)}
Expand Down
23 changes: 17 additions & 6 deletions src/components/GameStats/WinPercentageGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,18 @@ import StatsService from "../../services/StatsService"
interface Props {
player: PlayerProfile
last3Months: boolean
width?: number
height?: number
showLegend?: boolean
}

const WinPercentageGraph: React.FC<Props> = ({ player, last3Months }) => {
const WinPercentageGraph: React.FC<Props> = ({
player,
last3Months,
width = 300,
height = 300,
showLegend = true,
}) => {
const dispatch = useAppDispatch()
const { enqueueSnackbar } = useSnackbar()
const [stats, setStats] = useState<PlayerGameStats[]>([])
Expand Down Expand Up @@ -46,7 +55,6 @@ const WinPercentageGraph: React.FC<Props> = ({ player, last3Months }) => {
labels: ["Win", "Loss"],
datasets: [
{
label: "My Win Percentage",
data: [wins.length, filteredStats.length - wins.length],
backgroundColor: ["rgb(54, 162, 235)", "rgb(255, 99, 132)"],
hoverOffset: 4,
Expand All @@ -61,12 +69,15 @@ const WinPercentageGraph: React.FC<Props> = ({ player, last3Months }) => {
plugins: {
title: {
display: true,
text: `Win Percentage (${(
text: `${(
(wins.length / filteredStats.length) *
100
).toFixed(1)}%)`,
).toFixed(1)}% win rate`,
position: "bottom",
},
legend: {
display: showLegend,
},
},
}
}, [wins, filteredStats])
Expand All @@ -78,8 +89,8 @@ const WinPercentageGraph: React.FC<Props> = ({ player, last3Months }) => {
<Doughnut
data={data}
options={options}
width={300}
height={300}
width={width}
height={height}
/>
</>
) : (
Expand Down
2 changes: 1 addition & 1 deletion src/components/MyGames/MyGames.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ const MyGames = () => {
{
name: "Date",
selector: row => row.timestamp,
format: row => moment(row.timestamp).format("lll"),
format: row => moment(row.timestamp).format("llll"),
sortable: true,
},
{
Expand Down
25 changes: 22 additions & 3 deletions src/components/StartNewGame/StartNewGame.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ const StartNewGame = () => {
<img
alt="Image Preview"
src={row.picture}
className="avatar"
className="avatar-large"
/>
<Divider />
<span>
Expand All @@ -108,9 +108,28 @@ const StartNewGame = () => {
sortable: true,
},
{
name: "Stats (3 months)",
name: "Last 3 months",
cell: (pp: PlayerProfile) => (
<WinPercentageGraph player={pp} last3Months={true} />
<WinPercentageGraph
player={pp}
last3Months={true}
width={120}
height={120}
showLegend={false}
/>
),
center: true,
},
{
name: "All Time",
cell: (pp: PlayerProfile) => (
<WinPercentageGraph
player={pp}
last3Months={false}
width={150}
height={150}
showLegend={false}
/>
),
center: true,
},
Expand Down
14 changes: 13 additions & 1 deletion src/pages/Game/_game.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
}

.cardNotSelected {
opacity: 0.9;
opacity: 1;
filter: brightness(70%);
}

Expand All @@ -21,6 +21,18 @@
border-width: 5px;
border-radius: 10px;
padding: 2px;
background-image: url("/assets/img/mycards.png");
}

.dummy {
background-image: url("/assets/img/dummy.png");
}

.gameContainer {
border-style: solid;
border-width: 5px;
border-radius: 10px;
padding: 2px;
}

// .carpet {
Expand Down
7 changes: 7 additions & 0 deletions src/pages/Home/_home.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,13 @@
border-radius: 50%;
}

.avatar-large {
vertical-align: middle;
width: 100px;
height: 100px;
border-radius: 50%;
}

.clickable:hover {
cursor: pointer;
}
Expand Down
3 changes: 3 additions & 0 deletions src/utils/FormattingUtils.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
const MAX_LENGTH = 20

export const FormatName = (name: string) =>
name
.split("@")[0]
Expand All @@ -9,3 +11,4 @@ export const FormatName = (name: string) =>
word.slice(1).toLocaleLowerCase(),
)
.join(" ")
.substring(0, MAX_LENGTH)

0 comments on commit f1ba7fc

Please sign in to comment.