From 64e140ae884e0d60cfe6a87609d5c807436e073e Mon Sep 17 00:00:00 2001
From: DekoKiyo <dekobokokiyomori0817@gmail.com>
Date: Fri, 30 Aug 2024 17:43:39 +0900
Subject: [PATCH] =?UTF-8?q?Weapon=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 JsonGenerator/src/App.tsx                     |   2 +
 JsonGenerator/src/components/ui/textarea.tsx  |  24 ++
 JsonGenerator/src/generators/Objects/Ped.tsx  |  57 +---
 .../src/generators/Objects/Vehicle.tsx        |  49 +--
 .../src/generators/Objects/Weapon.tsx         | 301 ++++++++++++++++++
 JsonGenerator/src/store/keys.ts               |   1 +
 JsonGenerator/src/styles/globals.css          |   3 +-
 7 files changed, 336 insertions(+), 101 deletions(-)
 create mode 100644 JsonGenerator/src/components/ui/textarea.tsx
 create mode 100644 JsonGenerator/src/generators/Objects/Weapon.tsx

diff --git a/JsonGenerator/src/App.tsx b/JsonGenerator/src/App.tsx
index 766b2973..b7acedd9 100644
--- a/JsonGenerator/src/App.tsx
+++ b/JsonGenerator/src/App.tsx
@@ -17,6 +17,7 @@ import PacificBankHeistGen from './generators/Callouts/PacificBankHeist';
 import { VehicleGen } from './generators/Objects/Vehicle';
 import { Toaster } from './components/ui/toaster';
 import { PedGen } from './generators/Objects/Ped';
+import { WeaponGen } from './generators/Objects/Weapon';
 
 function App() {
   return (
@@ -40,6 +41,7 @@ function App() {
           />
           <Route path="/generators/vehicles" Component={VehicleGen} />
           <Route path="/generators/peds" Component={PedGen} />
+          <Route path="/generators/weapons" Component={WeaponGen} />
 
           {/* CALLOUTS */}
           <Route path="/callouts" Component={Callouts} />
diff --git a/JsonGenerator/src/components/ui/textarea.tsx b/JsonGenerator/src/components/ui/textarea.tsx
new file mode 100644
index 00000000..6d1cb759
--- /dev/null
+++ b/JsonGenerator/src/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/JsonGenerator/src/generators/Objects/Ped.tsx b/JsonGenerator/src/generators/Objects/Ped.tsx
index 2db2fbb8..04dd4b15 100644
--- a/JsonGenerator/src/generators/Objects/Ped.tsx
+++ b/JsonGenerator/src/generators/Objects/Ped.tsx
@@ -15,16 +15,13 @@ import {
 } from '../../components/ui/form';
 import { Input } from '../../components/ui/input';
 import { toast } from '../../components/ui/use-toast';
-import { Trans, useTranslation } from 'react-i18next';
-import format from '../../format';
+import { useTranslation } from 'react-i18next';
 import { ID_PEDS } from '../../store/keys';
 import { createElement, ReactElement, useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
 import { Switch } from '../../components/ui/switch';
 
 export interface Ped {
   name: string;
-  chance: number;
   random_props: boolean;
   health: number;
   armor: number;
@@ -48,10 +45,6 @@ export const PedGen = () => {
   function resetForm() {
     const nameInput = document.getElementById('name-input') as HTMLInputElement;
     nameInput.value = '';
-    const chanceInput = document.getElementById(
-      'chance-input'
-    ) as HTMLInputElement;
-    chanceInput.value = '';
     const randomPropsInput = document.getElementById(
       'random_props-input'
     ) as HTMLInputElement;
@@ -90,17 +83,6 @@ export const PedGen = () => {
     name: z.string({
       required_error: t('generators.common.require')
     }),
-    chance: z.coerce
-      .number({
-        message: t('generators.common.require'),
-        required_error: t('generators.common.require')
-      })
-      .min(0, {
-        message: t('generators.common.higher-than-0')
-      })
-      .max(1000, {
-        message: format(t('generators.common.lower-than-x'), '1000')
-      }),
     random_props: z.coerce.boolean({
       message: t('generators.common.require'),
       required_error: t('generators.common.require')
@@ -142,7 +124,6 @@ export const PedGen = () => {
     resolver: zodResolver(formSchema),
     defaultValues: {
       name: undefined,
-      chance: 100,
       random_props: false,
       health: 200,
       armor: 200,
@@ -169,12 +150,11 @@ export const PedGen = () => {
                 const previous: string | null = localStorage.getItem(ID_PEDS);
                 if (previous) {
                   const local: Ped[] = JSON.parse(previous) as Ped[];
-                  const veh: Ped | undefined = local.find(
-                    (x) => (x.name = ped.name)
+                  const ped: Ped | undefined = local.find(
+                    (x) => x.name === ped?.name
                   );
-                  if (veh) {
+                  if (ped) {
                     form.setValue('name', ped.name);
-                    form.setValue('chance', ped.chance);
                     form.setValue('random_props', ped.random_props);
                     form.setValue('health', ped.health);
                     form.setValue('armor', ped.armor);
@@ -202,7 +182,7 @@ export const PedGen = () => {
     const previous: string | null = localStorage.getItem(ID_PEDS);
     if (previous) {
       const local: Ped[] = JSON.parse(previous);
-      if (local.filter((veh) => veh.name == data.name).length > 0) {
+      if (local.filter((ped) => ped.name == data.name).length > 0) {
         toast({
           variant: 'destructive',
           title: t('generators.common.warn.exist-name'),
@@ -291,32 +271,6 @@ export const PedGen = () => {
                 </FormItem>
               )}
             />
-            <FormField
-              control={form.control}
-              name="chance"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Chance</FormLabel>
-                  <FormControl>
-                    <Input id="chance-input" type="number" {...field} />
-                  </FormControl>
-                  <FormDescription>
-                    <Trans
-                      i18nKey="configurations.descriptions.chance"
-                      components={{
-                        l: (
-                          <Link to="/weighted-randomization-algorithm">
-                            {t('main.weighted-randomization-algorithm')}
-                          </Link>
-                        )
-                      }}>
-                      DESC
-                    </Trans>
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
             <FormField
               control={form.control}
               name="random_props"
@@ -470,7 +424,6 @@ export const PedGen = () => {
               onClick={() => {
                 const data: Ped = {
                   name: form.getValues('name'),
-                  chance: Number(form.getValues('chance')),
                   random_props: Boolean(form.getValues('random_props')),
                   health: Number(form.getValues('health')),
                   armor: Number(form.getValues('armor')),
diff --git a/JsonGenerator/src/generators/Objects/Vehicle.tsx b/JsonGenerator/src/generators/Objects/Vehicle.tsx
index 325820e3..dd4b3b6f 100644
--- a/JsonGenerator/src/generators/Objects/Vehicle.tsx
+++ b/JsonGenerator/src/generators/Objects/Vehicle.tsx
@@ -15,15 +15,12 @@ import {
 } from '../../components/ui/form';
 import { Input } from '../../components/ui/input';
 import { toast } from '../../components/ui/use-toast';
-import { Trans, useTranslation } from 'react-i18next';
-import format from '../../format';
+import { useTranslation } from 'react-i18next';
 import { ID_VEHICLES } from '../../store/keys';
 import { createElement, ReactElement, useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
 
 export interface Vehicle {
   name: string;
-  chance: number;
   livery: number;
   color: string;
   model: string;
@@ -43,10 +40,6 @@ export const VehicleGen = () => {
   function resetForm() {
     const nameInput = document.getElementById('name-input') as HTMLInputElement;
     nameInput.value = '';
-    const chanceInput = document.getElementById(
-      'chance-input'
-    ) as HTMLInputElement;
-    chanceInput.value = '';
     const liveryInput = document.getElementById(
       'livery-input'
     ) as HTMLInputElement;
@@ -65,17 +58,6 @@ export const VehicleGen = () => {
     name: z.string({
       required_error: t('generators.common.require')
     }),
-    chance: z.coerce
-      .number({
-        message: t('generators.common.require'),
-        required_error: t('generators.common.require')
-      })
-      .min(0, {
-        message: t('generators.common.higher-than-0')
-      })
-      .max(1000, {
-        message: format(t('generators.common.lower-than-x'), '1000')
-      }),
     livery: z.coerce
       .number({
         message: t('generators.common.require'),
@@ -94,7 +76,6 @@ export const VehicleGen = () => {
     resolver: zodResolver(formSchema),
     defaultValues: {
       name: undefined,
-      chance: 100,
       livery: 0,
       color: '#FFFFFF',
       model: undefined
@@ -123,7 +104,6 @@ export const VehicleGen = () => {
                   );
                   if (veh) {
                     form.setValue('name', vehicle.name);
-                    form.setValue('chance', vehicle.chance);
                     form.setValue('livery', vehicle.livery);
                     form.setValue('color', vehicle.color);
                     form.setValue('model', vehicle.model);
@@ -236,32 +216,6 @@ export const VehicleGen = () => {
                 </FormItem>
               )}
             />
-            <FormField
-              control={form.control}
-              name="chance"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Chance</FormLabel>
-                  <FormControl>
-                    <Input id="chance-input" type="number" {...field} />
-                  </FormControl>
-                  <FormDescription>
-                    <Trans
-                      i18nKey="configurations.descriptions.chance"
-                      components={{
-                        l: (
-                          <Link to="/weighted-randomization-algorithm">
-                            {t('main.weighted-randomization-algorithm')}
-                          </Link>
-                        )
-                      }}>
-                      DESC
-                    </Trans>
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
             <FormField
               control={form.control}
               name="livery"
@@ -327,7 +281,6 @@ export const VehicleGen = () => {
               onClick={() => {
                 const data: Vehicle = {
                   name: form.getValues('name'),
-                  chance: Number(form.getValues('chance')),
                   livery: Number(form.getValues('livery')),
                   color: form.getValues('color'),
                   model: form.getValues('model')
diff --git a/JsonGenerator/src/generators/Objects/Weapon.tsx b/JsonGenerator/src/generators/Objects/Weapon.tsx
new file mode 100644
index 00000000..790c3665
--- /dev/null
+++ b/JsonGenerator/src/generators/Objects/Weapon.tsx
@@ -0,0 +1,301 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { v4 as uuidv4 } from 'uuid';
+
+import { Button } from '../../components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '../../components/ui/form';
+import { Input } from '../../components/ui/input';
+import { toast } from '../../components/ui/use-toast';
+import { useTranslation } from 'react-i18next';
+import { ID_WEAPONS } from '../../store/keys';
+import { createElement, ReactElement, useEffect, useState } from 'react';
+import { Textarea } from '../../components/ui/textarea';
+
+export interface Weapon {
+  name: string;
+  model: string;
+  components?: string[];
+}
+
+export const WeaponGen = () => {
+  const { t } = useTranslation();
+  const [list, setList] = useState([] as ReactElement[]);
+  const [index, setIndex] = useState(0);
+  const [updateBtnEnabled, setUpdateBtnEnabled] = useState(false);
+  const [deleteBtnEnabled, setDeleteBtnEnabled] = useState(false);
+
+  useEffect(() => {
+    updateList();
+  }, []);
+
+  function resetForm() {
+    const nameInput = document.getElementById('name-input') as HTMLInputElement;
+    nameInput.value = '';
+    const modelInput = document.getElementById(
+      'model-input'
+    ) as HTMLInputElement;
+    modelInput.value = '';
+    const componentsInput = document.getElementById(
+      'components-input'
+    ) as HTMLInputElement;
+    componentsInput.value = '';
+    form.reset({});
+
+    setUpdateBtnEnabled(false);
+    setDeleteBtnEnabled(false);
+  }
+
+  const formSchema = z.object({
+    name: z.string({
+      required_error: t('generators.common.require')
+    }),
+    model: z.string({
+      required_error: t('generators.common.require')
+    }),
+    components: z.string({
+      required_error: t('generators.common.require')
+    })
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: undefined,
+      model: undefined,
+      components: undefined
+    }
+  });
+
+  const updateList = () => {
+    const previous: string | null = localStorage.getItem(ID_WEAPONS);
+    const tempList: ReactElement[] = [];
+    if (previous) {
+      const local: Weapon[] = JSON.parse(previous) as Weapon[];
+
+      local.map((weapon, i) => {
+        tempList.push(
+          createElement(
+            'div',
+            {
+              key: uuidv4(),
+              onClick: () => {
+                const previous: string | null =
+                  localStorage.getItem(ID_WEAPONS);
+                if (previous) {
+                  const local: Weapon[] = JSON.parse(previous) as Weapon[];
+                  const wep: Weapon | undefined = local.find(
+                    (x) => (x.name = weapon.name)
+                  );
+                  if (wep) {
+                    form.setValue('name', weapon.name);
+                    form.setValue('model', weapon.model);
+                    if (weapon.components) {
+                      let text = '';
+                      for (let j = 0; j < weapon.components.length; j++) {
+                        text += weapon.components[j];
+                        if (j != weapon.components.length - 1) {
+                          text += '\n';
+                        }
+                      }
+                      form.setValue('components', text);
+                    }
+                    setIndex(i);
+
+                    setUpdateBtnEnabled(true);
+                    setDeleteBtnEnabled(true);
+                  }
+                }
+              }
+            },
+            createElement('p', null, weapon.name)
+          )
+        );
+      });
+      setList(tempList);
+    }
+  };
+
+  const onSubmit = (data: z.infer<typeof formSchema>) => {
+    const weapon: Weapon = {
+      name: data.name,
+      model: data.model,
+      components: data.components.split('\n')
+    };
+    const previous: string | null = localStorage.getItem(ID_WEAPONS);
+    if (previous) {
+      const local: Weapon[] = JSON.parse(previous);
+      if (local.filter((wep) => wep.name == weapon.name).length > 0) {
+        toast({
+          variant: 'destructive',
+          title: t('generators.common.warn.exist-name'),
+          description: t('generators.common.warn.exist-name-desc')
+        });
+        return;
+      }
+
+      localStorage.setItem(ID_WEAPONS, JSON.stringify([...local, weapon]));
+    } else {
+      localStorage.setItem(ID_WEAPONS, JSON.stringify([weapon]));
+    }
+
+    resetForm();
+    updateList();
+
+    toast({
+      title: t('generators.common.saved'),
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(weapon, null, 2)}</code>
+        </pre>
+      )
+    });
+  };
+
+  function onUpdate(data: Weapon) {
+    const previous: string | null = localStorage.getItem(ID_WEAPONS);
+    if (previous) {
+      const local: Weapon[] = JSON.parse(previous);
+      local[index] = data;
+
+      localStorage.setItem(ID_WEAPONS, JSON.stringify(local));
+
+      resetForm();
+
+      toast({
+        variant: 'default',
+        title: t('generators.common.saved'),
+        description: (
+          <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+            <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+          </pre>
+        )
+      });
+    }
+  }
+
+  function onDelete() {
+    const previous: string | null = localStorage.getItem(ID_WEAPONS);
+    if (previous) {
+      const local: Weapon[] = JSON.parse(previous);
+      const newlocal = local.filter((_, i) => i !== index);
+
+      localStorage.setItem(ID_WEAPONS, JSON.stringify(newlocal));
+      toast({
+        variant: 'default',
+        title: t('generators.common.removed')
+      });
+    }
+  }
+
+  return (
+    <div className="generator-main">
+      <div className="list">
+        <h1>Weapons List</h1>
+        <section>{list}</section>
+      </div>
+      <div className="generator">
+        <h1>Weapon Generator</h1>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Preset Name</FormLabel>
+                  <FormControl>
+                    <Input id="name-input" type="text" {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    {t('configurations.descriptions.preset-name')}
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="model"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Model Name</FormLabel>
+                  <FormControl>
+                    <Input id="model-input" type="text" {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    {t('configurations.descriptions.model')}
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="components"
+              render={({ field }) => (
+                <FormItem className="textarea">
+                  <FormLabel>Components</FormLabel>
+                  <FormControl>
+                    <Textarea id="components-input" {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    {t('configurations.descriptions.model')}
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button id="submit-btn" type="submit">
+              Submit
+            </Button>
+            <Button
+              id="new-btn"
+              onClick={() => {
+                resetForm();
+                updateList();
+              }}
+              type="button">
+              New
+            </Button>
+            <Button
+              id="update-btn"
+              onClick={() => {
+                const data: Weapon = {
+                  name: form.getValues('name'),
+                  model: form.getValues('model'),
+                  components: form.getValues('components').split('\n')
+                };
+
+                onUpdate(data);
+                updateList();
+              }}
+              type="button"
+              disabled={!updateBtnEnabled}>
+              Update
+            </Button>
+            <Button
+              id="delete-btn"
+              onClick={() => {
+                onDelete();
+                resetForm();
+                updateList();
+              }}
+              type="button"
+              disabled={!deleteBtnEnabled}>
+              Delete
+            </Button>
+          </form>
+        </Form>
+      </div>
+    </div>
+  );
+};
diff --git a/JsonGenerator/src/store/keys.ts b/JsonGenerator/src/store/keys.ts
index bae293ca..32689c0c 100644
--- a/JsonGenerator/src/store/keys.ts
+++ b/JsonGenerator/src/store/keys.ts
@@ -2,3 +2,4 @@
 
 export const ID_VEHICLES = 'JPC_VEHICLES';
 export const ID_PEDS = 'JPC_PEDS';
+export const ID_WEAPONS = 'JPC_WEAPONS';
diff --git a/JsonGenerator/src/styles/globals.css b/JsonGenerator/src/styles/globals.css
index a1ee4abe..548d14ed 100644
--- a/JsonGenerator/src/styles/globals.css
+++ b/JsonGenerator/src/styles/globals.css
@@ -295,6 +295,7 @@ footer p {
   margin-right: 10px;
 }
 
-.switch-card {
+.switch-card,
+.textarea {
   margin-right: 20%;
 }