Merge pull request #538 from true-runes/development

v19.1.0

components/vote-to-unite-attacks/InstructionForEnglishWithImages.tsx

@@ -0,0 +1,65 @@
+import type { NextPage } from 'next'
+import Image from 'next/image'
+import useTranslation from 'next-translate/useTranslation'
+
+export const InstructionForEnglishWithImages: NextPage = () => {
+  const { lang } = useTranslation('votes_to_unite_attacks')
+
+  return (
+    <>
+      {lang === 'en' && (
+        <>
+          <div className="pb-0">
+            <h2 className="w-full text-2xl font-bold pb-8 text-center underline underline-offset-4">
+              How to vote
+            </h2>
+          </div>
+
+          <h2 className="w-full text-2xl font-bold pb-8 text-center underline underline-offset-4">
+            ①～②
+          </h2>
+
+          <Image
+            src="/images/unite_attack_voting_en_01.png"
+            alt="unite_attack_voting_en_01"
+            width="750"
+            height="1477"
+          />
+
+          <div className="my-6" />
+          <div className="divider" />
+          <div className="my-6" />
+
+          <h2 className="w-full text-2xl font-bold pb-8 text-center underline underline-offset-4">
+            ③～④
+          </h2>
+
+          <Image
+            src="/images/unite_attack_voting_en_02.png"
+            alt="unite_attack_voting_en_02"
+            width="750"
+            height="1477"
+          />
+
+          <div className="my-6" />
+          <div className="divider" />
+          <div className="my-6" />
+
+          <h2 className="w-full text-2xl font-bold pb-8 text-center underline underline-offset-4">
+            ⑤
+          </h2>
+
+          <Image
+            src="/images/unite_attack_voting_en_03.png"
+            alt="unite_attack_voting_en_03"
+            width="750"
+            height="1477"
+          />
+
+          <div className="divider" />
+          <div className="my-6" />
+        </>
+      )}
+    </>
+  )
+}

components/vote-to-unite-attacks/Main.tsx

@@ -17,6 +17,8 @@ import uniteAttacksSuikodenTk from '@/lib/uniteAttacksSuikodenTk.json'
 import uniteAttacksSuikodenTsumutoki from '@/lib/uniteAttacksSuikodenTsumutoki.json'
 import uniteAttacksRhapsodia from '@/lib/uniteAttacksRhapsodia.json'
 
+import { InstructionForEnglishWithImages } from '@/components/vote-to-unite-attacks/InstructionForEnglishWithImages'
+
 type CharacterName = string
 
 type UniteAttack = {
@@ -74,6 +76,7 @@ export const Main: NextPage = () => {
       .then((response) => {
         setApiResponse(response.data)
 
+        console.log('apiResponse', response.data)
         setNowLoading(false)
       })
       .catch((error) => {
@@ -114,7 +117,11 @@ export const Main: NextPage = () => {
   // TODO: ハッシュタグは変数にしたい
   // TODO: キャラ名入れたほうがいい場合は入れる (uniteCharacterNames)
   useEffect(() => {
-    console.log(uniteCharacterNames)
+    // setUniteCharacterNames(
+    //   uniteAttack.characterNames
+    // )
+    // console.log(apiResponse)
+    // console.log(uniteCharacterNames)
 
     const updatedTweetText = `${titleName}
 ${uniteAttackName}
@@ -137,6 +144,8 @@ ${uniteAttackName}
                 「協力攻撃部門」投票ページ
               </h1>
 
+              {lang === 'en' && <InstructionForEnglishWithImages />}
+
               <div className="pb-0">
                 <ul className="list-disc text-left pl-6 pr-2">
                   <li className="pb-2">
@@ -211,8 +220,16 @@ ${uniteAttackName}
                                 id={`${uniteAttack.id}`}
                                 data-theme="light"
                                 key={uniteAttack.id}
-                                value={uniteAttack.name}
-                                checked={uniteAttackName === uniteAttack.name}
+                                value={
+                                  lang === 'ja'
+                                    ? uniteAttack.name
+                                    : uniteAttack.name_en
+                                }
+                                checked={
+                                  lang === 'ja'
+                                    ? uniteAttackName === uniteAttack.name
+                                    : uniteAttackName === uniteAttack.name_en
+                                }
                                 type="radio"
                                 name="radio-4"
                                 className="radio radio-accent mr-4 checked:bg-blue-500"