fix: chiprate slider

h8570rg · Feb 5, 2024 · cd59cb9 · cd59cb9
1 parent 6af4543
commit cd59cb9
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 10 deletions.
diff --git a/app/(app)/matches/CreateMatchButton/index.tsx b/app/(app)/matches/CreateMatchButton/index.tsx
@@ -18,6 +18,7 @@ import { Select, SelectItem } from "~/components/Select";
 import { Slider } from "~/components/Slider";
 import {
   calcMethod,
+  chipRate,
   inclineFor3Players,
   inclineFor4Players,
   rate,
@@ -58,7 +59,8 @@ const playersCount3DefaultValues: InputSchema = {
   chipRate: "",
 };
 
-const rateSliderMaxValue = 8;
+const rateSliderMaxValue = Object.keys(rate).length - 1;
+const chipRateSliderMaxValue = Object.keys(chipRate).length - 1;
 
 export function CreateMatchButton({ className }: { className?: string }) {
   const ruleCreateModal = useDisclosure();
@@ -138,7 +140,7 @@ export function CreateMatchButton({ className }: { className?: string }) {
                       <>
                         <Slider
                           classNames={{
-                            base: "mb-8",
+                            base: "mb-6",
                           }}
                           label="レート"
                           maxValue={rateSliderMaxValue}
@@ -159,6 +161,34 @@ export function CreateMatchButton({ className }: { className?: string }) {
                       </>
                     )}
                   />
+                  <Controller
+                    control={control}
+                    name="chipRate"
+                    render={({ field: { onChange, value, ...field } }) => (
+                      <>
+                        <Slider
+                          classNames={{
+                            base: "mb-8",
+                          }}
+                          label="チップ"
+                          maxValue={chipRateSliderMaxValue}
+                          showSteps
+                          marks={Array.from({
+                            length: chipRateSliderMaxValue + 1,
+                          }).map((_, i) => ({
+                            value: i,
+                            label: chipRate[String(i)].value,
+                          }))}
+                          getValue={(v) => chipRate[String(v)].label}
+                          onChange={(v) => {
+                            onChange(String(v));
+                          }}
+                          value={Number(value)}
+                          {...field}
+                        />
+                      </>
+                    )}
+                  />
                   <Controller
                     control={control}
                     name="incline"
@@ -275,7 +305,7 @@ export function CreateMatchButton({ className }: { className?: string }) {
                     )}
                   /> */}
 
-                  <Controller
+                  {/* <Controller
                     control={control}
                     name="chipRate"
                     render={({ field }) => (
@@ -298,7 +328,7 @@ export function CreateMatchButton({ className }: { className?: string }) {
                         {...field}
                       />
                     )}
-                  />
+                  /> */}
                   <Accordion isCompact className="px-0" keepContentMounted>
                     <AccordionItem
                       title="詳細設定"

diff --git a/app/(app)/matches/[matchId]/loading.tsx b/app/(app)/matches/[matchId]/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null;
+}
diff --git a/app/(app)/matches/page.tsx b/app/(app)/matches/page.tsx
@@ -25,7 +25,7 @@ export default async function Matches() {
           </li>
         ))}
       </ul>
-      <div className="absolute inset-x-0 bottom-0 p-4">
+      <div className="fixed inset-x-0 bottom-0 z-10 p-4">
         <CreateMatchButton className="w-full" />
       </div>
     </div>

diff --git a/lib/utils/schemas.ts b/lib/utils/schemas.ts
@@ -39,6 +39,33 @@ export const rate: Record<string, { value: string; label: string }> = {
   },
 };
 
+export const chipRate: Record<string, { value: string; label: string }> = {
+  "0": {
+    value: "0",
+    label: "なし",
+  },
+  "1": {
+    value: "50",
+    label: "50円",
+  },
+  "2": {
+    value: "100",
+    label: "100円",
+  },
+  "3": {
+    value: "200",
+    label: "200円",
+  },
+  "4": {
+    value: "500",
+    label: "500円",
+  },
+  "5": {
+    value: "1000",
+    label: "1000円",
+  },
+};
+
 const calcMethods = ["round", "roundOff", "roundDown", "roundUp"] as const;
 export const calcMethod: Record<(typeof calcMethods)[number], string> = {
   round: "五捨六入",
@@ -118,7 +145,7 @@ export const schemas = {
     )
     .regex(/^[a-zA-Z0-9]+$/, "ユーザーIDは半角英数字のみで入力してください"),
   calcMethod: z.enum(calcMethods),
-  chipRate: z.string().min(1, "チップを入力してください").transform(Number),
+  chipRate: z.string().transform((v) => Number(chipRate[v].value)),
   crackBoxBonus: z
     .string()
     .min(1, "飛び賞を入力してください")
@@ -137,10 +164,7 @@ export const schemas = {
   points: z
     .string()
     .transform((v) => (v === "0" || !!v ? Number(v) * 100 : undefined)),
-  rate: z
-    .string()
-    .min(1, "レートを入力してください")
-    .transform((v) => Number(rate[v].value)),
+  rate: z.string().transform((v) => Number(rate[v].value)),
   incline: z.enum(inclines),
   customIncline: z
     .object({
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,7 +25,7 @@ export default async function Matches() { @@
               </li>
             ))}
           </ul>
-          <div className="absolute inset-x-0 bottom-0 p-4">
+          <div className="fixed inset-x-0 bottom-0 z-10 p-4">
             <CreateMatchButton className="w-full" />
           </div>
         </div>
@@ Expand Down @@