Skip to content

Commit

Permalink
Fix search character, show character page and create character
Browse files Browse the repository at this point in the history
  • Loading branch information
@nekiro
nekiro committed Dec 11, 2024
1 parent eb7acd3 commit 810f9d3
Show file tree
Hide file tree
Showing 11 changed files with 273 additions and 213 deletions.
4 changes: 3 additions & 1 deletion src/components/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ const Button = ({
children,
...props
}: ButtonProps) => {
const { btnTextColor } = useColors();

const btn = (
<ChakraButton
type={type}
Expand All @@ -40,7 +42,7 @@ const Button = ({
isLoading={isLoading}
isActive={isActive}
loadingText={loadingText}
color="text.light"
color={btnTextColor}
{...props}
>
{value ?? children}
Expand Down
4 changes: 3 additions & 1 deletion src/hooks/useColors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useColorModeValue } from "@chakra-ui/react";

export interface UseColorsReturnType {
textColor: string;
btnTextColor: string;
bgColor: string;
hoverColor: string;
linkColor: string;
Expand All @@ -10,10 +11,11 @@ export interface UseColorsReturnType {

export const useColors = (): UseColorsReturnType => {
const textColor = useColorModeValue("text.dark", "text.light");
const btnTextColor = useColorModeValue("text.light", "text.dark");
const bgColor = useColorModeValue("primary.light", "primary.dark");
const hoverColor = useColorModeValue("violet.100", "gray.700");
const linkColor = useColorModeValue("violet.400", "violet.200");
const inputBgColor = useColorModeValue("violet.100", "violet.100");

return { textColor, bgColor, hoverColor, linkColor, inputBgColor };
return { textColor, bgColor, hoverColor, linkColor, inputBgColor, btnTextColor };
};
66 changes: 37 additions & 29 deletions src/pages/account/createcharacter.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
import React from "react";
import Panel from "../../components/Panel";
import { withSessionSsr } from "../../lib/session";
import { Select, Text, Container, VStack, Wrap } from "@chakra-ui/react";
import { withSessionSsr } from "@lib/session";
import { Select, Text, VStack } from "@chakra-ui/react";
import TextInput from "@component/TextInput";
import Button from "@component/Button";
import { FormField } from "@component/FormField";
import { z } from "zod";
import { useForm } from "react-hook-form";
import { useForm, SubmitHandler } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { SubmitHandler } from "react-hook-form";
import { Vocation } from "@shared/enums/Vocation";
import { getVocationNames, getVocationByName } from "@shared/enums/Vocation";
import { trpc } from "@util/trpc";
import { useFormFeedback } from "@hook/useFormFeedback";
import { Sex } from "@shared/enums/Sex";
import { getSexNames, getSexByName } from "@shared/enums/Sex";
import { Content } from "@component/Content";
import { useRouter } from "next/router";

const bannedSequences = ["tutor", "cancer", "suck", "sux", "fuck"];
const bannedWords = ["gm", "cm", "god"];
Expand Down Expand Up @@ -49,8 +48,8 @@ const schema = z.object({
},
{ message: "Contains illegal words" },
),
vocation: z.nativeEnum(Vocation),
sex: z.nativeEnum(Sex),
vocation: z.enum(getVocationNames() as any).transform((val) => getVocationByName(val)),
sex: z.enum(getSexNames() as any).transform((val) => getSexByName(val)),
});

export default function CreateCharacter() {
Expand All @@ -64,54 +63,63 @@ export default function CreateCharacter() {
});
const createCharacter = trpc.account.createCharacter.useMutation();
const { handleResponse, showResponse } = useFormFeedback();
const router = useRouter();

const onSubmit: SubmitHandler<z.infer<typeof schema>> = async ({ name, vocation, sex }) => {
handleResponse(async () => {
await createCharacter.mutateAsync({ name, vocation, sex });
showResponse("Character created.", "success");
router.push("/account");
});

reset();
};

return (
<Panel header="Create Character">
<Text align="center" margin="10px">
Please choose a name, vocation and sex for your character. <br />
In any case the name must not violate the naming conventions stated in the Rules or your character might get deleted or name locked.
</Text>
<form onSubmit={handleSubmit(onSubmit)}>
<Container alignContent={"center"} padding={2}>
<VStack spacing={5}>
<Content>
<Content.Header>Create Character</Content.Header>
<Content.Body>
<Text align="center">
Please choose a name, vocation and sex for your character. <br />
In any case the name must not violate the naming conventions stated in the Rules or your character might get deleted or name locked.
</Text>
<form onSubmit={handleSubmit(onSubmit)}>
<VStack spacing={10}>
<FormField key={"name"} error={errors.name?.message} name={"name"} label={"Name"}>
<TextInput type="name" {...register("name")} />
</FormField>
<FormField key={"vocation"} error={errors.vocation?.message} name={"vocation"} label="Vocation">
<Select {...register("vocation")}>
{Object.entries(Vocation).map(([key, value]) => (
<option key={key} value={value}>
{getVocationNames().map((key) => (
<option key={key} value={key}>
{key}
</option>
))}
</Select>
</FormField>
<FormField key={"sex"} error={errors.sex?.message} name={"sex"} label="Sex">
<Select {...register("sex")}>
{Object.entries(Sex).map(([key, value]) => (
<option key={key} value={value}>
{getSexNames().map((key) => (
<option key={key} value={key}>
{key}
</option>
))}
</Select>
</FormField>
<Wrap spacing={2} padding="10px">
<Button isLoading={isSubmitting} isActive={!isValid} loadingText="Submitting" type="submit" value="Submit" btnColorType="primary" />
<Button value="Back" btnColorType="danger" href="/account" />
</Wrap>
<Button
width="100%"
isLoading={isSubmitting}
isActive={!isValid}
loadingText="Submitting"
type="submit"
value="Submit"
btnColorType="primary"
/>
<Button width="100%" value="Back" btnColorType="danger" href="/account" />
</VStack>
</Container>
</form>
</Panel>
</form>
</Content.Body>
</Content>
);
}

Expand Down
110 changes: 57 additions & 53 deletions src/pages/account/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,14 @@ import { timestampToDate, vocationIdToName } from "../../lib";
import { appRouter } from "src/server/routers/_app";
import { createCallerFactory } from "src/server/trpc";
import type { AccountWithPlayers } from "@shared/types/PrismaAccount";

// TODO: use proper types
import { Content } from "@component/Content";

export interface AccountProps {
account: AccountWithPlayers;
}

// TODO: refactor this view, because its really ugly

// TODO: move qrcode to separate view

export default function Account({ account }: AccountProps) {
Expand All @@ -25,51 +26,53 @@ export default function Account({ account }: AccountProps) {
return (
<>
<Head title="Account Management" />
<Panel header="Account Management">
<Panel header="Informations">
<StripedTable
body={[
[{ text: "Account Name" }, { component: <Text>{account.name}</Text> }],
[{ text: "E-mail Address" }, { text: account.email }],
[
{ text: "Creation Date" },
{
text: account.creation > 0 ? timestampToDate(account.creation) : "Unknown",
},
],
//{ name: 'Last Login', value: '11/02/2021' },
[{ text: "Shop Coins" }, { text: account.coins }],
]}
>
{/* '.(!$rec_key ? '
<Content>
<Content.Header>Account Management</Content.Header>
<Content.Body maxW="100%">
<Panel header="Informations">
<StripedTable
body={[
[{ text: "Account Name" }, { component: <Text>{account.name}</Text> }],
[{ text: "E-mail Address" }, { text: account.email }],
[
{ text: "Creation Date" },
{
text: account.creation > 0 ? timestampToDate(account.creation) : "Unknown",
},
],
//{ name: 'Last Login', value: '11/02/2021' },
[{ text: "Shop Coins" }, { text: account.coins }],
]}
>
{/* '.(!$rec_key ? '
<a
href="?view=account&action=generatekey"
className="btn btn-primary btn-sm"
>
<i className="fa fa-key"></i> Generate Recovery Key
</a>
' : '').' */}
{/* </td> */}
</StripedTable>
</Panel>
{/* </td> */}
</StripedTable>
</Panel>

<Panel header="Actions">
<Wrap>
<Button size="sm" value="Change Password" btnColorType="primary" href="/account/changepassword" />
<Button size="sm" value="Change Email" btnColorType="primary" href="/account/changeemail" />
<Button size="sm" value="Create Character" btnColorType="primary" href="/account/createcharacter" />
<Button size="sm" value="Delete Character" btnColorType="primary" href="/account/deletecharacter" />
<Panel header="Actions">
<Wrap>
<Button size="sm" value="Change Password" btnColorType="primary" href="/account/changepassword" />
<Button size="sm" value="Change Email" btnColorType="primary" href="/account/changeemail" />
<Button size="sm" value="Create Character" btnColorType="primary" href="/account/createcharacter" />
<Button size="sm" value="Delete Character" btnColorType="primary" href="/account/deletecharacter" />

{/* <Button
{/* <Button
value="Generate recovery key"
btnType="primary"
href="/account/deletecharacter"
/> */}
</Wrap>
</Panel>
</Wrap>
</Panel>

<Panel header="Characters">
{/* <div className="pull-right">
<Panel header="Characters">
{/* <div className="pull-right">
<Link
href={`/account/editcharacter/${player.name}`}
passHref
Expand All @@ -83,27 +86,28 @@ export default function Account({ account }: AccountProps) {
</Link>
</div> */}

<StripedTable
head={[
{ text: "Name" },
{ text: "Level" },
{ text: "Profession" },
// { text: 'Edit' }
]}
body={account.players.map((player: any) => [
{ href: `/character/${player.name}`, text: player.name },
{ text: player.level },
{ text: vocationIdToName[player.vocation] },
<StripedTable
head={[
{ text: "Name" },
{ text: "Level" },
{ text: "Profession" },
// { text: 'Edit' }
]}
body={account.players.map((player: any) => [
{ href: `/character/${player.name}`, text: player.name },
{ text: player.level },
{ text: vocationIdToName[player.vocation] },

// {
// type: 'button',
// text: 'Edit',
// href: `/account/editcharacter/${player.name}`,
// },
])}
/>
</Panel>
</Panel>
// {
// type: 'button',
// text: 'Edit',
// href: `/account/editcharacter/${player.name}`,
// },
])}
/>
</Panel>
</Content.Body>
</Content>
</>
);
}
Expand Down
Loading

0 comments on commit 810f9d3

Please sign in to comment.