-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #176 from Lodestone-Team/145-0.4.3-player-list
#145 Implement Minecraft player list component
- Loading branch information
Showing
8 changed files
with
381 additions
and
93 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import { InstanceContext } from 'data/InstanceContext'; | ||
| import { useContext } from 'react'; | ||
| import { PlayerListItem, PlayerListCard } from 'components/PlayerListCard'; | ||
| import { useState, useMemo } from 'react'; | ||
| import { faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons'; | ||
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; | ||
| // import { Player } from 'bindings/Player'; | ||
|
|
||
| export default function MinecraftPlayerList() { | ||
|
|
||
| const { selectedInstance: instance } = useContext(InstanceContext); | ||
| const uuid = instance?.uuid; | ||
|
|
||
| // Ascending order is referring to alphabetical order | ||
| // Note: Arrow will point DOWN when sorting in ascending order, as seen on the figma | ||
| const [sortAscending, setSortAscending] = useState(true); | ||
|
|
||
| // Update playerList every time there a player leaves or joins | ||
| // Also sorts and updates when sort button is pressed | ||
| const updatedPlayerList = useMemo(() => { | ||
| if (!instance?.player_list) return null; | ||
| const playerList = [...instance.player_list]; | ||
| playerList.sort((a, b) => { | ||
| if (sortAscending) { | ||
| return a.name.localeCompare(b.name); | ||
| } else { | ||
| return b.name.localeCompare(a.name); | ||
| } | ||
| }); | ||
| return playerList; | ||
| }, [instance, sortAscending]); | ||
|
|
||
| // Catch case where server instance is not available; return early | ||
| if (!instance || !uuid) { | ||
| return ( | ||
| <div | ||
| className="relative flex h-full w-full flex-row justify-center overflow-y-auto px-4 pt-8 pb-10 @container" | ||
| key={uuid} | ||
| > | ||
| <div className="flex h-fit min-h-full w-full grow flex-col items-start gap-2"> | ||
| <div className="flex min-w-0 flex-row items-center gap-4"> | ||
| <h1 className="dashboard-instance-heading truncate whitespace-pre"> | ||
| Instance not found | ||
| </h1> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| // API to get the avatar head png 16x16 px | ||
| const mcHeadURL = 'https://mc-heads.net/avatar/'; | ||
| const avatarDimension = 16; | ||
|
|
||
| return ( | ||
| <div> | ||
| <h2 className="text-h3 font-extrabold tracking-medium">Player List</h2> | ||
| {updatedPlayerList && updatedPlayerList.length ? ( | ||
| <> | ||
| <h3 className="text-medium font-medium italic tracking-medium text-white/50"> | ||
| All players currently online | ||
| </h3> | ||
| <button | ||
| className="mt-4 mb-2 flex items-center justify-center text-small font-medium tracking-medium text-white/50" | ||
| onClick={() => setSortAscending(!sortAscending)} | ||
| > | ||
| NAME | ||
| {sortAscending ? ( | ||
| <FontAwesomeIcon icon={faArrowDown} className="mx-1.5" /> | ||
| ) : ( | ||
| <FontAwesomeIcon icon={faArrowUp} className="mx-1.5" /> | ||
| )} | ||
| </button> | ||
| {updatedPlayerList.length > 0 && ( | ||
| <PlayerListCard> | ||
| {updatedPlayerList.map((player) => ( | ||
| <PlayerListItem key={player.uuid}> | ||
| <img | ||
| src={`${mcHeadURL}${player.uuid}/${avatarDimension}.png`} | ||
| alt={`Avatar of ${player.name}`} | ||
| className={`mx-1 h-4 w-4`} | ||
| draggable="false" | ||
| style={{ imageRendering: "pixelated", userSelect: 'none' }} | ||
| /> | ||
| <div className="mx-1 text-medium" > | ||
| {player.name} | ||
| </div> | ||
| </PlayerListItem> | ||
| ))} | ||
| </PlayerListCard> | ||
| )} | ||
| </> | ||
| ) : ( | ||
| <h3 className="text-medium font-medium italic tracking-medium text-white/50"> | ||
| No players online | ||
| </h3> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| export { default as MinecraftPerformanceCard } from './MinecraftPerformanceCard'; | ||
| export { default as MinecraftGeneralCard } from './MinecraftGeneralCard'; | ||
| export { default as MinecraftSettingCard } from './MinecraftSettingCard'; | ||
| export { default as MinecraftPlayerList } from './MinecraftPlayerList'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import { ReactNode } from 'react'; | ||
| import * as React from 'react'; | ||
|
|
||
| interface ItemProps { | ||
| children: ReactNode; | ||
| className?: string; | ||
| } | ||
|
|
||
| export function PlayerListItem({ children, className = '' }: ItemProps) { | ||
| return ( | ||
| <div className={`flex items-center rounded-xl ${className}`}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| interface CardProps { | ||
| children: ReactNode; | ||
| className?: string; | ||
| } | ||
|
|
||
| export function PlayerListCard({ children, className }: CardProps) { | ||
| const numItems = React.Children.count(children); | ||
|
|
||
| if (numItems === 0) { | ||
| return null; | ||
| } | ||
|
|
||
| if (numItems === 1) { | ||
| return ( | ||
| <div | ||
| className={`flex h-fit w-full flex-col rounded border border-gray-faded/30 bg-gray-850 p-2 ${className}`} | ||
| > | ||
| {children} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div | ||
| className={`flex h-fit w-full flex-col rounded border border-gray-faded/30 bg-gray-850 p-2 ${className}`} | ||
| > | ||
| {React.Children.map(children, (child, index) => ( | ||
| <> | ||
| {index > 0 && <hr className="my-2 mx-[-0.5rem] border-gray-faded/30" />} | ||
| {child} | ||
| </> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters