@rpg-engine/long-bow 0.5.7 → 0.5.8

package/dist/mocks/leaderboard.mocks.d.ts

@@ -0,0 +1,4 @@
+import { TopCharacterEntry, TopSkillEntry } from '@rpg-engine/shared';
+export declare const leaderboardLevelRankingItems: Set<TopCharacterEntry>;
+export declare const leaderboardClassRankingItems: Set<TopCharacterEntry>;
+export declare const leaderboardSkillRankingItems: Set<TopSkillEntry>;

package/dist/stories/Leaderboard.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/react';
+import { ILeaderboardProps } from '../components/Leaderboard/Leaderboard';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ILeaderboardProps>;
+export declare const ClassRanking: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ILeaderboardProps>;
+export declare const SkillRanking: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ILeaderboardProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.8.69",
+    "@rpg-engine/shared": "^0.8.72",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/Leaderboard/Leaderboard.tsx

@@ -0,0 +1,111 @@
+import { CharacterClass, TopCharacterEntry, TopSkillEntry } from '@rpg-engine/shared';
+import React, { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { Dropdown, IOptionsProps } from '../Dropdown';
+import { LeaderboardTable } from './LeaderboardTable';
+
+
+export interface ILeaderboardProps {
+  items: Set<TopCharacterEntry> | Set<TopSkillEntry> | null;
+  onChangeClassType: (value: string) => void;
+  onChangeRankType: (value: string) => void;
+  onChangeSkillType: (value: string) => void;
+  skills: string[];
+  rankType: string;
+}
+
+const rankTypeOptions: IOptionsProps[] = ['Level', 'Class', 'Skill'].map(
+  (itemType, index) => ({
+    id: index + 1,
+    value: itemType,
+    option: itemType,
+  })
+);
+
+const classTypeOptions: IOptionsProps[] = Object.keys(CharacterClass).map((itemType, index) => ({
+  id: index + 1,
+  value: itemType,
+  option: itemType,
+}));
+
+export const Leaderboard = (props: ILeaderboardProps) => {
+  const { items, onChangeRankType, onChangeClassType, rankType, skills, onChangeSkillType } = props;
+  const itemsContainer = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    itemsContainer.current?.scrollTo(0, 0);
+  }, []);
+
+  const skillTypeOptions: IOptionsProps[] = skills.map((itemType, index) => ({
+    id: index + 1,
+    value: itemType,
+    option: itemType,
+  }));
+
+  return (
+    <>
+      <WrapperContainer>
+        <StyledDropdown
+          options={rankTypeOptions}
+          onChange={onChangeRankType}
+          width="80%"
+        />
+        {rankType === 'Class' ? (
+          <StyledDropdown
+            options={classTypeOptions}
+            onChange={onChangeClassType}
+            width="100%"
+          />
+        ) : null}
+        {rankType === 'Skill' ? (
+          <StyledDropdown
+            options={skillTypeOptions}
+            onChange={onChangeSkillType}
+            width="100%"
+          />
+        ) : null}
+      </WrapperContainer>
+      <ItemComponentScrollWrapper
+        id="LeaderboardContainer"
+        ref={itemsContainer}
+      >
+        <TableWrapper>
+          <LeaderboardTable items={items} rankType={rankType} />
+        </TableWrapper>
+      </ItemComponentScrollWrapper>
+    </>
+  );
+};
+
+const WrapperContainer = styled.div`
+  display: grid;
+  grid-template-columns: 50% 50%;
+  justify-content: space-between;
+  width: calc(100% - 40px);
+  margin-left: 10px;
+
+  .rpgui-content .rpgui-dropdown-imp-header {
+    padding: 0px 10px 0 !important;
+  }
+`;
+
+const StyledDropdown = styled(Dropdown)`
+  margin: 3px !important;
+  width: 170px !important;
+`;
+
+const ItemComponentScrollWrapper = styled.div`
+  overflow-y: scroll;
+  height: 390px;
+  width: 100%;
+  margin-top: 1rem;
+
+  @media (max-width: 950px) {
+    height: 250px;
+  }
+`;
+
+const TableWrapper = styled.table`
+  margin: auto;
+  width: 100%;
+`;

package/src/components/Leaderboard/LeaderboardTable.tsx

@@ -0,0 +1,97 @@
+import { TopCharacterEntry, TopSkillEntry } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { Ellipsis } from '../shared/Ellipsis';
+
+export interface ILeaderboardLevelProps {
+  items: Set<TopCharacterEntry> | Set<TopSkillEntry> | null;
+  rankType: string;
+}
+
+export const LeaderboardTable: React.FC<ILeaderboardLevelProps> = props => {
+  const { items, rankType } = props;
+  if (!items) return null;
+
+  function isTopSkillEntry(entry: any): entry is TopSkillEntry {
+    return 'skill' in entry;
+  }
+
+  return (
+    <>
+      <thead>
+        <TableRowWrapper>
+          <TableRowValue>
+            <p>
+              <Ellipsis maxLines={1} maxWidth="200px" fontSize="14px">
+                Name
+              </Ellipsis>
+            </p>
+          </TableRowValue>
+          {rankType === 'Skill' ? (
+            <TableRowValue>
+              <p>
+                <Ellipsis maxLines={1} maxWidth="200px" fontSize="14px">
+                  Skill
+                </Ellipsis>
+              </p>
+            </TableRowValue>
+          ) : null}
+          <TableRowValue>
+            <p>
+              <Ellipsis maxLines={1} maxWidth="200px" fontSize="14px">
+                Level
+              </Ellipsis>
+            </p>
+          </TableRowValue>
+        </TableRowWrapper>
+      </thead>
+      <tbody>
+        {Array.from(items).map(entry => (
+          <TableRowWrapper key={entry.name}>
+            <TableRowValue>
+              <p>
+                <Ellipsis maxLines={1} maxWidth="200px" fontSize="10px">
+                  {entry.name}
+                </Ellipsis>
+              </p>
+            </TableRowValue>
+            {isTopSkillEntry(entry) ? (
+              <TableRowValue>
+                <p>
+                  <Ellipsis maxLines={1} maxWidth="200px" fontSize="10px">
+                    {entry.skill}
+                  </Ellipsis>
+                </p>
+              </TableRowValue>
+            ) : null}
+            <TableRowValue>
+              <p>
+                <Ellipsis maxLines={1} maxWidth="200px" fontSize="10px">
+                  {entry.level}
+                </Ellipsis>
+              </p>
+            </TableRowValue>
+          </TableRowWrapper>
+        ))}
+      </tbody>
+    </>
+  );
+};
+
+const TableRowWrapper = styled.tr`
+  margin: auto;
+  padding: 0.5rem;
+
+  &:hover {
+    background-color: ${uiColors.darkGray};
+  }
+
+  p {
+    font-size: 0.8rem;
+  }
+`;
+
+const TableRowValue = styled.td`
+  padding: 0 20px;
+`;

package/src/index.tsx

@@ -15,6 +15,7 @@ export * from './components/Input';
 export { ErrorBoundary } from './components/Item/Inventory/ErrorBoundary';
 export * from './components/Item/Inventory/ItemContainer';
 export * from './components/Item/Inventory/ItemSlot';
+export * from './components/Leaderboard/Leaderboard';
 export * from './components/ListMenu';
 export * from './components/Marketplace/Marketplace';
 export * from './components/Marketplace/MarketplaceRows';

package/src/mocks/leaderboard.mocks.ts

@@ -0,0 +1,110 @@
+import { TopCharacterEntry, TopSkillEntry } from '@rpg-engine/shared';
+
+export const leaderboardLevelRankingItems: Set<TopCharacterEntry> = new Set([
+  {
+    name: 'Player 1',
+    level: 1,
+  },
+  {
+    name: 'Player 2',
+    level: 2,
+  },
+  {
+    name: 'Player 3',
+    level: 3,
+  },
+  {
+    name: 'Player 4',
+    level: 4,
+  },
+  {
+    name: 'Player 5',
+    level: 5,
+  },
+  {
+    name: 'Player 6',
+    level: 6,
+  },
+  {
+    name: 'Player 7',
+    level: 7,
+  },
+  {
+    name: 'Player 8',
+    level: 8,
+  },
+  {
+    name: 'Player 9',
+    level: 9,
+  },
+  {
+    name: 'Player 10',
+    level: 10,
+  },
+]);
+
+export const leaderboardClassRankingItems: Set<TopCharacterEntry> = new Set([
+  {
+    name: 'Player 1',
+    level: 1,
+  },
+  {
+    name: 'Player 2',
+    level: 2,
+  },
+  {
+    name: 'Player 3',
+    level: 3,
+  },
+  {
+    name: 'Player 4',
+    level: 4,
+  },
+  {
+    name: 'Player 5',
+    level: 5,
+  },
+  {
+    name: 'Player 6',
+    level: 6,
+  },
+  {
+    name: 'Player 7',
+    level: 7,
+  },
+  {
+    name: 'Player 8',
+    level: 8,
+  },
+  {
+    name: 'Player 9',
+    level: 9,
+  },
+  {
+    name: 'Player 10',
+    level: 10,
+  },
+]);
+
+export const leaderboardSkillRankingItems: Set<TopSkillEntry> = new Set([
+  {
+    name: 'Player 1',
+    level: 1,
+    skill: 'skill 1',
+  },
+  {
+    name: 'Player 2',
+    level: 2,
+    skill: 'skill 2',
+  },
+  {
+    name: 'Player 3',
+    level: 3,
+    skill: 'skill 3',
+  },
+  {
+    name: 'Player 4',
+    level: 4,
+    skill: 'skill 4',
+  },
+]);

package/src/stories/Leaderboard.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import {
+  ILeaderboardProps,
+  Leaderboard,
+} from '../components/Leaderboard/Leaderboard';
+import { RPGUIRoot } from '../components/RPGUIRoot';
+import {
+  leaderboardClassRankingItems,
+  leaderboardLevelRankingItems,
+  leaderboardSkillRankingItems,
+} from '../mocks/leaderboard.mocks';
+
+const meta: Meta = {
+  title: 'Leaderboard',
+  component: Leaderboard,
+};
+
+export default meta;
+
+const Template: Story<ILeaderboardProps> = args => {
+  return (
+    <RPGUIRoot>
+      <Leaderboard {...args} />
+    </RPGUIRoot>
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  items: leaderboardLevelRankingItems,
+  rankType: 'Level',
+  skills: ['Lumbarjacking'],
+  onChangeRankType: () => { },
+  onChangeClassType: () => { },
+};
+
+export const ClassRanking = Template.bind({});
+
+ClassRanking.args = {
+  items: leaderboardClassRankingItems,
+  rankType: 'Class',
+  skills: ['Lumbarjacking'],
+  onChangeRankType: () => { },
+  onChangeClassType: () => { },
+};
+
+export const SkillRanking = Template.bind({});
+
+SkillRanking.args = {
+  items: leaderboardSkillRankingItems,
+  rankType: 'Skill',
+  skills: ['Lumbarjacking'],
+  onChangeRankType: () => { },
+  onChangeClassType: () => { },
+};