Files
TheGame/packages/web/components/Player/Section/config.ts
Seroxdesign 06a7205465 rebase
2023-05-15 09:12:03 -06:00

79 lines
2.2 KiB
TypeScript

import { Layouts } from 'react-grid-layout';
import {
BoxType,
BoxTypes,
ChakraSize,
createBoxKey,
Positions,
} from 'utils/boxTypes';
import { getBoxLayoutItemDefaults } from 'utils/layoutHelpers';
export const ALL_BOXES = [
BoxTypes.PLAYER_HERO,
BoxTypes.PLAYER_SKILLS,
BoxTypes.PLAYER_COLOR_DISPOSITION,
BoxTypes.PLAYER_TYPE,
BoxTypes.PLAYER_NFT_GALLERY,
BoxTypes.PLAYER_DAO_MEMBERSHIPS,
BoxTypes.PLAYER_ROLES,
BoxTypes.EMBEDDED_URL,
BoxTypes.PLAYER_COMPLETED_QUESTS,
BoxTypes.CUSTOM_TEXT,
BoxTypes.PLAYER_METOKENS,
// BoxTypes.PLAYER_ACHIEVEMENTS,
// TODO: Add more types of sections
];
export const DEFAULT_BOXES = [
BoxTypes.PLAYER_HERO,
BoxTypes.PLAYER_SKILLS,
BoxTypes.PLAYER_NFT_GALLERY,
BoxTypes.PLAYER_DAO_MEMBERSHIPS,
BoxTypes.PLAYER_COLOR_DISPOSITION,
// Adding default boxes MUST be accompanied by adding default box positions as well
];
const DEFAULT_BOX_POSITIONS: Record<ChakraSize, Positions> = {
lg: {
[BoxTypes.PLAYER_HERO]: { x: 0, y: 0 },
[BoxTypes.PLAYER_COLOR_DISPOSITION]: { x: 0, y: 2 },
[BoxTypes.PLAYER_DAO_MEMBERSHIPS]: { x: 1, y: 0 },
[BoxTypes.PLAYER_SKILLS]: { x: 1, y: 2 },
[BoxTypes.PLAYER_NFT_GALLERY]: { x: 2, y: 0 },
},
md: {
[BoxTypes.PLAYER_HERO]: { x: 0, y: 0 },
[BoxTypes.PLAYER_COLOR_DISPOSITION]: { x: 0, y: 2 },
[BoxTypes.PLAYER_DAO_MEMBERSHIPS]: { x: 1, y: 0 },
[BoxTypes.PLAYER_SKILLS]: { x: 1, y: 2 },
[BoxTypes.PLAYER_NFT_GALLERY]: { x: 1, y: 4 },
},
sm: {
[BoxTypes.PLAYER_HERO]: { x: 0, y: 0 },
[BoxTypes.PLAYER_DAO_MEMBERSHIPS]: { x: 0, y: 2 },
[BoxTypes.PLAYER_COLOR_DISPOSITION]: { x: 0, y: 4 },
[BoxTypes.PLAYER_SKILLS]: { x: 0, y: 6 },
[BoxTypes.PLAYER_NFT_GALLERY]: { x: 0, y: 8 },
},
};
const DEFAULT_PLAYER_LAYOUTS: Layouts = Object.fromEntries(
['sm', 'md', 'lg'].map((size) => [
size,
DEFAULT_BOXES.map((boxType) => ({
...getBoxLayoutItemDefaults(boxType),
...DEFAULT_BOX_POSITIONS[size as ChakraSize][boxType],
})),
]),
);
const DEFAULT_LAYOUT_ITEMS = DEFAULT_BOXES.map((type: BoxType) => ({
type,
key: createBoxKey(type),
}));
export const DEFAULT_PLAYER_LAYOUT_DATA = {
layouts: DEFAULT_PLAYER_LAYOUTS,
layoutItems: DEFAULT_LAYOUT_ITEMS,
};