✨ #132 ガチャ基本機能完成

components/gacha.tsx

@@ -1,18 +1,54 @@
 import { useState } from "react"
+import Link from "next/link"
+
+import Loading from "./loading"
 
 import styles from "../styles/gacha.module.css"
-import Link from "next/link"
 
 const Gacha = () => {
   const [form, setForm] = useState<number | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleClick = () => {
+    new Promise((resolve) => {
+      setIsLoading(true)
+      setForm(Math.ceil(Math.random() * 5))
+
+      setTimeout(() => {
+        resolve("")
+      }, 1500)
+    })
+    .then(() => {
+      setIsLoading(false)
+    })
+  }
 
   return (
     <div className={styles.wrapper}>
-      <button className={styles.button}>ガチャを回す</button>
+      <button
+        className={styles.button}
+        onClick={handleClick}
+      >
+        ガチャを回す
+      </button>
 
-      <div className={styles.result}>
-        <Link href="form1">Form1</Link>
-      </div>
+      {isLoading
+        ? (
+          <Loading />
+        )
+        : (
+          <div
+            className={styles.result}
+          >
+            {form
+              ? (
+                <Link href={`form${form}`}>Form{form}</Link>
+              )
+              : (
+                <p>ガチャを回してね</p>
+              )}
+          </div>
+        )}
     </div>
   )
 }

components/loading.tsx

@@ -0,0 +1,7 @@
+import styles from "../styles/loading.module.css"
+
+const Loading = () => (
+  <div className={styles.loader}></div>
+)
+
+export default Loading

styles/gacha.module.css

@@ -3,7 +3,8 @@
   align-items: center;
   gap: 0 30px;
   margin: 10px auto 30px;
-  padding: 30px 0;
+  padding: 30px;
+  border: 3px dotted #ccc;
 }
 
 .button {
@@ -19,5 +20,6 @@
 }
 
 .result {
+  font-size: 1.25rem;
   border: 1px solid red;
 }

styles/loading.module.css

@@ -0,0 +1,41 @@
+.loader {
+  color: #444;
+  font-size: 9px;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  position: relative;
+  text-indent: -9999em;
+  animation: load4 1.3s infinite linear;
+  transform: translateZ(0);
+  margin-left: 20px;
+}
+
+@keyframes load4 {
+  0%,
+  100% {
+    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+  }
+  12.5% {
+    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+  25% {
+    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+  37.5% {
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+  50% {
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+  62.5% {
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+  }
+  75% {
+    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+  }
+  87.5% {
+    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+  }
+}
+