nextjsとreact日記2

数字をクリックするとコンソールに数字を出力することができた。

import Link from 'next/link'
import ClientComponent2 from './bbb'


export default function Page() {

  return (
    <>
    <div className="container m-auto">
      <main className="flex flex-col items-center justify-between p-24">
        <div className='flex-initial w-1600 bg-blue-100'>
          <h1 className="my-4 text-center font-bold text-5xl tracking-tight bg-gradient-to-r from-green-500 via-blue-500 to-pink-500 bg-clip-text text-transparent">{h1Title}</h1>
        </div>
      </main>
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <ClientComponent2 />
      </main>
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <p><Link href="/" className="text-2xl font-bold text-red-600">Home</Link></p>
        <p><Link href="/sub1" className="text-2xl font-bold text-red-600">sub1</Link></p>
        <p><Link href="/sub2" className="text-2xl font-bold text-red-600">九九ゲーム</Link></p>
      </main>
    </div>
    </>    
  )
}

const h1Title = "九九ゲーム"

'use client'

export default function ClientComponent2(){
  return (
      <>
      <p>掛け算2の段ノーマル</p>
      <TwoTablesApp />
      <p>掛け算2の段ノーマルの問題と4つの回答</p>
      <TwoTablesAndAnswer />

      <button onClick={() => console.log('bbb.tsx が押下されました')}>Click me</button>
      <button onClick={() => console.log('Hello, Client')}>Hello, Client</button>
      </>
  )
}

//オブジェクト九九
type NaiNaiTable = {
  id:number;
  num1:number;
  num2:number;
  answer:number;
};

//オブジェクト九九１の段の実体
const TwoTables: NaiNaiTable[] = [
  {id: 1, num1: 2, num2: 1, answer: 2},
  {id: 2, num1: 2, num2: 2, answer: 4},
  {id: 3, num1: 2, num2: 3, answer: 6},
  {id: 4, num1: 2, num2: 4, answer: 8},
  {id: 5, num1: 2, num2: 5, answer: 10},
  {id: 6, num1: 2, num2: 6, answer: 12},
  {id: 7, num1: 2, num2: 7, answer: 14},
  {id: 8, num1: 2, num2: 8, answer: 16},
  {id: 9, num1: 2, num2: 9, answer: 18},
];

//数字配列、間違い回答の数字
let Num99s2: number[];

Num99s2 = 
[1,2,3,4,5,6,7,8,9,10,
11,12,13,14,15,16,17,18,19,20,
21,22,23,24,25,26,27,28,29,30,
31,32,33,34,35,36,37,38,39,40,
41,42,43,44,45,46,47,48,49,50,
51,52,53,54,55,56,57,58,59,60,
61,62,63,64,65,66,67,68,69,70,
71,72,73,74,75,76,77,78,79,80,
81,82,83,84,85,86,87,88,89,90,
91,92,93,94,95,96,97,98,99]

//array_aは配列、Num99s2配列が入る。num_aは間違いの個数が入る、3が指定されている。num_bは正解が入る。
const FourAnswer_a = (props: {array_a: number[], num_a: number, num_b: number}) => {

  const list = RandomSelected(props.array_a, props.num_a, props.num_b);

  list.push(props.num_b);

  const shufflelist = shufflesArray(list); 

  return (
    <>
    {shufflelist.map((OneTable) => {
      return (
        /*<button onClick={() => console.log('回答がありました')}><div className="bg-red-100 p-5">{OneTable}</div></button>*/
        <button onClick={() => handleClick(OneTable)}><div className="bg-red-100 p-5">{OneTable}</div></button>
      );
    })}
    </>
  );
};

const handleClick = (answer_num: number) => {
  console.log(answer_num + 'が押下されました')
}

//正解1つ、間違い3つのランダムに4つの数字を選ぶ関数。戻り値は配列。
//arrayは配列、Num99s2配列が入る。countは間違いの個数が入る、3を指定。mは正解が入る。
const RandomSelected = (array: number[], count: number, m: number): number[] => {
  const copyArrays = [...array];

  const newArray = copyArrays.filter(copyArray => copyArray !== m);

  const randomArray = [...Array(count)].map(() => {
    const randomStartIndex = Math.floor(Math.random() * newArray.length);
    return newArray.splice(randomStartIndex, 1).at();
  })

  return randomArray
}

//4つの配列をランダムに並び替える関数。arrayには4つの数字が入った配列が入る。戻り値はランダムにした配列。
const shufflesArray = (array: number[]): number[] => {
  const cloneArray = [...array]

  for (let i = cloneArray.length - 1; i >= 0; i--) {
    let rand = Math.floor(Math.random() * (i + 1))
    // 配列の要素の順番を入れ替える
    let tmpStorage = cloneArray[i]
    cloneArray[i] = cloneArray[rand]
    cloneArray[rand] = tmpStorage
  }

  return cloneArray
}

//オブジェクト九九１の段の表示関数。掛け算1の段ノーマル
const TwoTablesApp = () => {
  return (
    <div>
      {TwoTables.map((TwoTable) => {
        return (
          <div className="TwoTable">
            <p>{TwoTable.num1} × {TwoTable.num2} = </p>
          </div>
        );
      })}
    </div>
  );
}

const TwoTablesAndAnswer = () => {
  return (
    <>
    <div>
      {TwoTables.map((TwoTable) => {
        return (
          <>
          <div className="TwoTable">
            <p>{TwoTable.num1} × {TwoTable.num2} = {TwoTable.answer}</p>
            <main className="grid grid-cols-4 justify-items-stretch gap-[5px] m-5">
            <FourAnswer_a array_a={Num99s2} num_a={3} num_b={TwoTable.answer} />
            </main>        
          </div>
          </>
        );
      })}
    </div>
    </>
  );
}