Selectgame UI

README.md

@@ -4,7 +4,7 @@
 https://www.figma.com/design/8NGJOCtcVqLFtTrS3P0ht7/Nihongo-Alley---copied-with-new-games?node-id=0-88&node-type=CANVAS&t=FZORUYPPwlmsROs0-0
 
 ## Folder structure
-There is two ways in Nextjs. We adopt pages directory structure. <br>
+There is two ways in Nextjs for routing. We adopt pages routing, not app routing. <br>
 https://medium.com/@CraftedX/should-you-use-next-js-pages-or-app-directory-38e803fe5cb4
 
 Folder structure is related to routing.<br>
@@ -17,10 +17,10 @@ The basic behavior of Next.js by naming for file/folders.<br>
  There are some part which is defferent in between page router and app router.<br>
 https://nextjs.org/docs/app/building-your-application/routing/colocation<br>
 
-The _app.tsx file is used for every page.<br>
+The _app.tsx file is used for rendering every page.<br>
 https://nextjs.org/docs/pages/building-your-application/routing/custom-app
 
-Page name is case-sensitive.
+Page name is case-sensitive. URL is case-sensitive as well.
 
 * Commponents<br>
 React components used in each page. For example, flash card, card to show score, ...<br>
@@ -39,22 +39,25 @@ https://next-auth.js.org/getting-started/example<br>
 * install<br>
 npm install<br>
 ※For development of only frontend, we don't need docker run.<br>
-※EbisuG haven't checked running app with docker yet.
 
 * run local<br>
 npm run dev<br>
 
 ## Route
 ### Protected route
+Use middleware.ts for protected route.
 https://www.freecodecamp.org/news/secure-routes-in-next-js/<br>
-※EbisuG haven't implemented protecton for some route yet.
 
 ## Authentication
 We use Nextauth.js.
 Detail logic.
 https://refine.dev/blog/nextauth-google-github-authentication-nextjs/#for-githubprovider-you-will-need-a-github-account
 
 
+## Errors
+* App doesn't run after successful build.
+Make sure you use the latest things. Delete your image, container, and volume. Run docker compose commands again.
+
 ### Reference
 Using google auth.<br>
 https://blog.stackademic.com/building-a-custom-google-authentication-system-with-django-rest-framework-and-reactjs-ii-794fa8592782

components/game/newExpression/mainCard.tsx

@@ -0,0 +1,27 @@
+import { useContext } from "react"
+import { SelectedMaterial } from "../../../pages/game/learning"
+
+//
+const getPhrase = async (id: number) => {
+    const result = "test string"
+    // const fetched = await fetch("endopinturl")
+    // const result: phraseType = fetched.json()
+    return result
+}
+
+const MainCard = () => {
+    const selectedMaterial = useContext(SelectedMaterial)
+
+    return (
+        <>
+            <div className="block max-w-full p-6 m-10 bg-white border border-gray-200 rounded-lg shadow 
+            hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+                {selectedMaterial?.phrase!==undefined?(<>{selectedMaterial.phrase.japanese}</>):<>null</>}<br></br>
+                {selectedMaterial?.phrase!==undefined?(<>{selectedMaterial.phrase.english}</>):<>null</>}<br></br>
+                {selectedMaterial?.phrase!==undefined?(<>{selectedMaterial.phrase.description}</>):<>null</>}<br></br>
+            </div>
+        </>
+    )
+}
+
+export default MainCard

components/game/newExpression/phraseList.tsx

@@ -0,0 +1,50 @@
+import { useContext } from "react"
+import { SelectedMaterial } from "../../../pages/game/learning"
+
+//get all phrase based on topic
+const getAllPhrase = async (id: number) => {
+    const result = "test string"
+    // const fetched = await fetch("endopinturl")
+    // const result: phraseType = fetched.json()
+    return result
+}
+
+const PhraseList = () => {
+    const selectedMaterial = useContext(SelectedMaterial)
+
+    return (
+        <>
+            <div className="block max-w-full p-6 m-10 bg-white border border-gray-200 rounded-lg shadow 
+            hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700" 
+            onClick={()=>{selectedMaterial?.selectPhrase({id:2, japanese:"よっす"})}}
+            >
+                topic is :{selectedMaterial?.topic}
+                よっす
+            </div>
+            <div className="block max-w-full p-6 m-10 bg-white border border-gray-200 rounded-lg shadow 
+            hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
+            onClick={()=>{selectedMaterial?.selectPhrase({id:3, japanese:"おっす", english:"hi", description:"short version of おはようございます"})}}
+            >
+                topic is :{selectedMaterial?.topic}
+                おっす
+            </div>
+            <div className="block max-w-full p-6 m-10 bg-white border border-gray-200 rounded-lg shadow 
+            hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+                topic is :{selectedMaterial?.topic}
+                うっす
+            </div>
+            <div className="block max-w-full p-6 m-10 bg-white border border-gray-200 rounded-lg shadow 
+            hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+                topic is :{selectedMaterial?.topic}
+                はいよ
+            </div>
+            <div className="block max-w-full p-6 m-10 bg-white border border-gray-200 rounded-lg shadow 
+            hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+                topic is :{selectedMaterial?.topic}
+                わかった！
+            </div>
+        </>
+    )
+}
+
+export default PhraseList

components/game/newExpression/start.tsx

@@ -0,0 +1,27 @@
+import Image, { ImageLoader } from 'next/image'
+import gamePic from "./../../../public/new-expression-fox.png"
+import Link from 'next/link'
+
+const baseUrl = process.env.NEXTAUTH_URL
+
+const imageLoader: ImageLoader = ({ src, width, quality }) => {
+    return `${baseUrl}/${src}?w=${width}&q=${quality || 75}`
+}
+
+const LearningStart: React.FC = () => {
+    return (<>
+        <div className="grid grid-cols-2 gap-4">
+            <div>
+                <span>New Expression</span><br></br>
+                <Link href={"/game/learning"}>
+                <span> Learning Mode</span>
+                </Link>
+            </div>
+            <div>
+                <Image loader={imageLoader} width={300} height={300} src={gamePic} alt='Fox picture' />
+            </div>
+        </div>
+    </>)
+}
+
+export default LearningStart

components/game/practice/start.tsx

@@ -0,0 +1,24 @@
+import Image, { ImageLoader } from 'next/image'
+import gamePic from "./../../../public/practice-nife.png"
+
+const baseUrl = process.env.NEXTAUTH_URL
+
+const imageLoader: ImageLoader = ({ src, width, quality }) => {
+    return `${baseUrl}/${src}?w=${width}&q=${quality || 75}`
+}
+
+const PracticeStart: React.FC = () => {
+    return (<>
+        <div className="grid grid-cols-2 gap-4">
+            <div>
+                <span>Practice</span><br></br>
+                <span> Practice Mode</span>
+            </div>
+            <div>
+                <Image loader={imageLoader} width={300} height={300} src={gamePic} alt='Cross nife picture' />
+            </div>
+        </div>
+    </>)
+}
+
+export default PracticeStart

components/header.tsx

@@ -1,4 +1,4 @@
-import { useSession, signIn, signOut } from "next-auth/react";
+import { useSession,  signOut } from "next-auth/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
@@ -9,7 +9,11 @@ export const Header: React.FC = () => {
     return (
         <>
             <div className="flex flex-row">
-                <div className="basis-1/6">To Homepage</div>
+                <div className="basis-1/6">
+                    <Link href={"/"}>
+                        To Homepage
+                    </Link>
+                </div>
                 <div className="basis-3/6">This is empty space</div>
                 {session ?
                     <>

next.config.mjs

@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  experimental: {
+    optimizePackageImports: ["next-auth"],
+  },
+};
 
 export default nextConfig;

pages/404.tsx

@@ -1,7 +1,5 @@
 //User can play quick answer game.
 
-import React, { useState, useEffect } from "react";
-
 const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL;
 
 const Error404 = () => {

pages/_app.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { AppProps } from "next/app";
 import "../styles/globals.css";
 import { Layout } from "../components/layouts";

pages/api/auth/[...nextauth].ts

@@ -8,6 +8,11 @@ let googleClientSecret = process.env.GOOGLE_CLIENT_SECRET
 if (googleClientId === undefined) googleClientId = ""
 if (googleClientSecret === undefined) googleClientSecret = ""
 
+interface urlSets {
+    url: string
+    baseUrl: string
+}
+
 export const authOptions = {
     // Configure one or more authentication providers
     providers: [
@@ -18,6 +23,7 @@ export const authOptions = {
         // ...add more providers here
     ],
     secret: process.env.NEXTAUTH_SECRET,
+    //add calbacks here.
 }
 
 export default NextAuth(authOptions)

pages/game/learning.tsx

@@ -1,16 +1,60 @@
 //User can play learning page.
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, createContext } from "react";
+import MainCard from "../../components/game/newExpression/mainCard";
+import { phraseType, learningContextType } from "../../types/types";
+import PhraseList from "../../components/game/newExpression/phraseList";
 
 const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL;
+const TOPICS = ["First Contact", "Playing together", "Drinking"]
+export const SelectedMaterial = createContext<learningContextType | null>(null)
 
 const Learning = () => {
+  const [selectedTopic, setSelectedTopic] = useState(TOPICS[0])
+  const [selectedPhrase, setSelectedPhrase] = useState<phraseType>({
+    id: 0,
+    japanese: "loading...",
+  })
 
+  //Just test for appearence, put useEffect here.
+  useEffect(() => {
+    setSelectedPhrase({
+      id: 1,
+      japanese: "よっす",
+      english: "Hi",
+      description: "よっす is shorter version of おはようございます"
+    })
+  }, [])
 
   return (
-    <div>
-This is Learning.
-    </div>
+    <>
+      <SelectedMaterial.Provider value={{ topic: selectedTopic, phrase: selectedPhrase, selectPhrase: setSelectedPhrase }}>
+        <div className="grid grid-cols-3 gap-4">
+          <div>
+            Main card component
+            <MainCard></MainCard>
+          </div>
+          <div>
+            Choose topic
+            {TOPICS.map((elem, ind) => {
+              return (
+                <div className="block max-w-sm p-6 m-10 bg-white border border-gray-200 rounded-lg shadow 
+            hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700" key={ind}
+                  onClick={() => {
+                    setSelectedTopic(elem)
+                  }}>
+                  {elem}
+                </div>
+              )
+            })}
+          </div>
+          <div>
+            Each pharese list
+            <PhraseList></PhraseList>
+          </div>
+        </div>
+      </SelectedMaterial.Provider>
+    </>
   );
 };
 

pages/index.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from "react";
+import Link from "next/link";
+import { useState, useEffect } from "react";
 
 const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL;
 
@@ -19,6 +20,7 @@ const HomePage = () => {
       <h3>With Django, React, Postgres, and Docker</h3>
       <p>{data ? data : "Loading data..."}</p>{" "}
       {/* Display data or loading message */}
+      <Link href={"/selectGame"}> Play game!</Link>
     </div>
   );
 };

pages/login.tsx

@@ -1,10 +1,10 @@
 //This page is for login page.
 //User can login and sign up.
 
-import React, { useState, useEffect, FormEvent } from "react";
-import SelectGame from "./selectGame";
+import { useState,  FormEvent } from "react";
 import { useRouter } from "next/router";
 import { useSession, signIn, signOut } from "next-auth/react";
+import Link from "next/link";
 
 const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL;
 
@@ -40,6 +40,7 @@ const Login = () => {
   ) : (
     <>
       Alredy logged in.
+      <Link href={"/selectGame"}>Play games!</Link>
     </>
   ))
 }

pages/selectGame.tsx

@@ -1,16 +1,44 @@
 //User can select game.
 
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
+import NewExpressionStart from "../components/game/newExpression/start";
+import PracticeStart from "../components/game/practice/start";
 
-const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL;
+const gameFileNames = ["newExpression", "practice"]
 
 const SelectGame = () => {
+  const [gameName, setGameName] = useState(gameFileNames[0])
+
+  const goRightGame = () => {
+    setGameName(gameFileNames[(gameFileNames.indexOf(gameName) + 1) % gameFileNames.length])
+  }
+  const goLeftGame = () => {
+    setGameName(gameFileNames[(gameFileNames.indexOf(gameName) + gameFileNames.length - 1) % gameFileNames.length])
+  }
+
+  const showGameTitle = (gameFileName: string) => {
+    switch (gameFileName) {
+      case "newExpression":
+        return <NewExpressionStart></NewExpressionStart>
+      case "practice":
+        return <PracticeStart></PracticeStart>
+      default:
+        return (
+          <>Sorry, there is no game.</>
+        )
+    }
+  }
 
 
   return (
-    <div>
-This is select game page.
-    </div>
+    <>
+      <button onClick={goLeftGame}>go right</button>
+      <div>
+        This is select game page.<br />
+        {showGameTitle(gameName)}
+      </div>
+      <button onClick={goRightGame}>go left</button>
+    </>
   );
 };