67 lines
1.6 KiB
TypeScript
67 lines
1.6 KiB
TypeScript
|
'use client'
|
||
|
|
import React from "react";
|
||
|
|
import styles from "@/styles/dev-tools.module.css"
|
||
|
|
import { Container, Select, Stack } from "@mui/material"
|
||
|
|
export default function Page(){
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={styles.maincontainer}>
|
||
|
|
<div className={styles.leftmenucontainer}>
|
||
|
|
<LeftMenu />
|
||
|
|
</div>
|
||
|
|
<div className={styles.editorcontainer}>
|
||
|
|
<Editor />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
function DynamicCard() {
|
||
|
|
// to add a new kind of data type "map", "string", "bool", etc. they add a prop for it.
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
interface Theme{
|
||
|
|
value: string;
|
||
|
|
label: string;
|
||
|
|
}
|
||
|
|
function LeftMenu(){
|
||
|
|
const unitTypes: string[] = ["minion", "enemy", "hero", "ally"];
|
||
|
|
const buildingTypes: string[] = ["enemy", "minion", "terrain", "support"];
|
||
|
|
const [themes, setThemes] = React.useState<Theme[]>([]); // get from the database
|
||
|
|
const [menuMode, setMenuMode] = React.useState<"unit" | "card">("card");
|
||
|
|
return (
|
||
|
|
<Container className={styles.leftmenu}>
|
||
|
|
<Stack>
|
||
|
|
Type
|
||
|
|
<Select>
|
||
|
|
<option value="">
|
||
|
|
All types
|
||
|
|
</option>
|
||
|
|
{menuMode === "card" ?
|
||
|
|
buildingTypes.map((opt) => (<option value={opt}>{opt[0].toUpperCase() + opt.slice(1)}</option>)) :
|
||
|
|
unitTypes.map((opt) => (<option value={opt}>{opt[0].toUpperCase() + opt.slice(1)}</option>))
|
||
|
|
}
|
||
|
|
</Select>
|
||
|
|
|
||
|
|
Theme
|
||
|
|
<Select>
|
||
|
|
</Select>
|
||
|
|
</Stack>
|
||
|
|
</Container>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function Editor(){
|
||
|
|
return (
|
||
|
|
<Container className={styles.editor} maxWidth={false} disableGutters>
|
||
|
|
yes
|
||
|
|
</Container>
|
||
|
|
)
|
||
|
|
}
|