Modify components in frontend according to modifications in backend

frontend/src/Collection/GameCardCollection.tsx

@@ -3,9 +3,9 @@ import {useState} from "react";
 import {IconButton, Modal} from "@mui/material";
 import {AddCircle} from "@mui/icons-material";
 import "./GameCardCollection.css"
-import NewGameCard from "./NewGameCard.tsx";
 import GameCardSetTable from "./GameCardSetTable.tsx";
 import {GameCardSet} from "./GameCardSet.ts";
+import NewGameCardSet from "./NewGameCardSet.tsx";
 
 type Props = {
     allMyGameCards: GameCard[]
@@ -45,7 +45,7 @@ export default function GameCardCollection(props: Props) {
                 sx={{mt: 20, ml: 6}}
             >
                 <div>
-                    <NewGameCard onClose={closeModal} onAddNewCard={props.loadAllMyGameCards}/>
+                    <NewGameCardSet onClose={closeModal} onAddNewCard={props.loadAllMyGameCards}/>
                 </div>
             </Modal>
             <GameCardSetTable allMyCardSets={props.allMyCardSets}></GameCardSetTable>

frontend/src/Collection/NewGameCard.css

@@ -14,6 +14,12 @@
     flex-direction: column;
 }
 
+.translation-card {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
 #new-card-button {
     margin: 0;
 }

frontend/src/Collection/NewGameCard.tsx

@@ -9,32 +9,36 @@ import "./NewGameCard.css"
 import {Link} from "react-router-dom";
 
 type Props = {
+    cardSetName: string
     onClose: () => void
+    onSaveCard: () => void
     onAddNewCard: () => void
 }
 export default function NewGameCard(props: Props) {
 
     const [title, setTitle] = useState<string>("");
-    const [cardSetName, setCardSetName] = useState<string>("");
+    const [reading, setReading] = useState<string>("");
 
     function inputTitle(event: React.ChangeEvent<HTMLInputElement>) {
         setTitle(event.target.value)
     }
 
-    function inputCardSetName(event: React.ChangeEvent<HTMLInputElement>) {
-        setCardSetName(event.target.value)
+    function inputReading(event: React.ChangeEvent<HTMLInputElement>) {
+        setReading(event.target.value)
     }
 
     function saveGameCard() {
         axios.post(
             "/api/game_cards", {
                 "title": title,
-                "cardSetName": cardSetName
+                "reading": reading,
+                "cardSetName": props.cardSetName
             } as GameCard)
             .then(() => {
                 setTitle("")
-                setCardSetName("")
+                setReading("")
                 props.onAddNewCard()
+                props.onSaveCard()
                 props.onClose()
             }).catch(console.error)
     }
@@ -52,22 +56,13 @@ export default function NewGameCard(props: Props) {
             }}>
                 <CardContent>
                     <Typography sx={{fontSize: 14}} color="text.secondary" gutterBottom component="div">
-                        Create new game card
+                        Create new card
                     </Typography>
-                    <div id={"translate-button"}>
-                        <IconButton  size={"small"} sx={{
-                            mr: 1,
-                            color: "#ffffff",
-                            backgroundColor: "#3c7ee8",
-                            boxShadow: 0,
-                            borderRadius: '10px'
-                        }}><Link id={"link-translation"} to="/translation"><TranslateIcon fontSize={"small"}/></Link></IconButton>
-                    </div>
-                    <Typography variant="h5" component="div">
-                        <TextField id="title" label="card title?" onInput={inputTitle}/>
+                    <Typography component="div">
+                        <TextField id="title" label="word" onInput={inputTitle}/>
                     </Typography>
-                    <Typography sx={{mb: 1.5}} color="text.secondary" component="div">
-                        <TextField id="set" label="set name?" onInput={inputCardSetName}/>
+                    <Typography component="div">
+                        <TextField id="reading" label="reading" onInput={inputReading}/>
                     </Typography>
                 </CardContent>
                 <CardActions>
@@ -87,6 +82,35 @@ export default function NewGameCard(props: Props) {
                     </Stack>
                 </CardActions>
             </Card>
+
+            <Card className="translation-card" sx={{
+                maxWidth: 210,
+                maxHeight: 210,
+                margin: 4,
+                marginLeft: 5,
+                background: "#ffffff",
+                boxShadow: 0,
+                border: 0.5,
+                borderColor: "rgba(122,119,119,0.3)",
+                borderRadius: '10px'
+            }}>
+                <CardContent>
+                    <Typography sx={{fontSize: 14}} color="text.secondary" gutterBottom component="div">
+                        If you need technical assistance to find a Japanese word you're about to learn, click on a blue button below.
+                    </Typography>
+                    <div id={"translate-button"}>
+
+                    </div>
+                </CardContent>
+                <CardActions>
+                    <IconButton  size={"small"} sx={{
+                        color: "#ffffff",
+                        backgroundColor: "#3c7ee8",
+                        boxShadow: 0,
+                        borderRadius: '10px'
+                    }}><Link id={"link-translation"} to="/translation"><TranslateIcon fontSize={"small"}/></Link></IconButton>
+                </CardActions>
+            </Card>
         </>
     )
 

frontend/src/Collection/NewGameCardSet.tsx

@@ -0,0 +1,124 @@
+import React, {useState} from "react";
+import {
+    Box,
+    Button,
+    Card,
+    CardActions,
+    CardContent,
+    IconButton,
+    Modal,
+    Stack,
+    TextField,
+    Typography
+} from "@mui/material";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import DoDisturbOnIcon from "@mui/icons-material/DoDisturbOn";
+import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
+import CancelIcon from "@mui/icons-material/Cancel";
+import NewGameCard from "./NewGameCard.tsx";
+
+type Props = {
+    onClose: () => void;
+    onAddNewCard: () => void
+}
+
+export default function NewGameCardSet(props: Props) {
+    const [cardSetName, setCardSetName] = useState<string>("");
+    const [isHelpModalOpen, setIsHelpModalOpen] = useState(false);
+    const [isNewCardModalOpen, setIsNewCardModalOpen] = useState(false);
+    function inputCardSetName(event: React.ChangeEvent<HTMLInputElement>) {
+        setCardSetName(event.target.value)
+    }
+    function openHelpModal() {
+        setIsHelpModalOpen(true)
+    }
+
+    function closeHelpModal() {
+        setIsHelpModalOpen(false)
+    }
+
+    function openNewCardModal() {
+        setIsNewCardModalOpen(true)
+    }
+
+    function closeNewCardModal() {
+        setIsNewCardModalOpen(false)
+    }
+
+    return (
+        <>
+            <Card className="new-card" sx={{
+                maxWidth: 300,
+                margin: 3,
+                background: "#FDF6E1",
+                boxShadow: 0,
+                border: 0.5,
+                borderColor: "rgba(122,119,119,0.3)",
+                borderRadius: '15px'
+            }}>
+                <CardContent>
+                    <Typography sx={{fontSize: 14}} color="text.secondary" gutterBottom component="div">
+                        Create new set
+                        <IconButton disableRipple={true} size="small" className={"buttonAdd"}
+                                    onClick={openHelpModal} sx={{color: "#a5a7d7", boxShadow: 0}}>
+                            <HelpOutlineIcon fontSize={"small"}/>
+                        </IconButton>
+                    </Typography>
+                    <Modal
+                        className={"modal-help"}
+                        open={isHelpModalOpen}
+                        sx={{mt: 10, ml: 4, mr: 4, marginBottom: 35, backgroundColor: "#ffffff"}}
+                    >
+                        <Box>
+                            <Button id={"close-modal"} onClick={closeHelpModal}
+                                    sx={{
+                                        mt: 5,
+                                        mb: 2,
+                                        color: "#ffffff",
+                                        boxShadow: 0
+                                    }}><CancelIcon/></Button>
+                            <Typography sx={{ml: 3, color: "#ffffff"}}>
+                                Create new card set
+                            </Typography>
+                            <Typography sx={{mr: 3, ml: 3, mt: 2, color: "#ffffff"}}>
+                                In order to create a new card set,
+                                you need to name the set first.
+                                Next, add it's very first card with a word and it's reading.
+                            </Typography>
+                        </Box>
+                    </Modal>
+                    <Typography component="div">
+                        <TextField id="set" label="name of set" onInput={inputCardSetName}/>
+                    </Typography>
+                </CardContent>
+                <CardActions>
+                    <Stack className={"new-card-edit-stack"} direction="row" paddingBottom={3}>
+                        <Button id={"new-card-button"} onClick={openNewCardModal} sx={{
+                            m: 5,
+                            color: "#508356",
+                            boxShadow: 0,
+                            borderRadius: '15px'
+                        }}><CheckBoxIcon/></Button>
+
+                        <Modal
+                            className={"modal-new-card"}
+                            open={isNewCardModalOpen}
+                            sx={{mt: 20, ml: 6}}
+                        >
+                            <div>
+                                <NewGameCard cardSetName={cardSetName} onClose={closeNewCardModal} onSaveCard={props.onClose} onAddNewCard={props.onAddNewCard}/>
+                            </div>
+                        </Modal>
+
+                        <Button id={"new-card-button"} onClick={props.onClose} sx={{
+                            m: 5,
+                            color: "#D05F5F",
+                            boxShadow: 0,
+                            borderRadius: '15px'
+                        }}><DoDisturbOnIcon/></Button>
+                    </Stack>
+                </CardActions>
+            </Card>
+        </>
+    )
+}

frontend/src/Edit/EditGameCard.tsx

@@ -5,7 +5,7 @@ import {AddCircle} from "@mui/icons-material";
 import NewGameCard from "../Collection/NewGameCard.tsx";
 import {useState} from "react";
 import "./EditGameCard.css"
-import {useParams} from "react-router-dom";
+import {Navigate, useParams} from "react-router-dom";
 import {GameCardSet} from "../Collection/GameCardSet.ts";
 
 type Props = {
@@ -19,10 +19,14 @@ export default function EditGameCard(props: Props) {
     const params = useParams()
     const setName: string = params.setName as string
     const number: string = params.number as string
+    const [isAddModalOpen, setIsAddModalOpen] = useState(false);
     const actualCardSet: GameCardSet = props.allMyCardSets.find(cardSet => cardSet.name === setName) as GameCardSet
-    const actualNumber: string = actualCardSet.count.toString()
 
-    const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+    if (!actualCardSet) {
+        return <Navigate to={"/collection"}/>
+    }
+
+    const actualNumber: string = actualCardSet.count.toString()
 
     function openAddModal() {
         setIsAddModalOpen(true)
@@ -32,7 +36,6 @@ export default function EditGameCard(props: Props) {
         setIsAddModalOpen(false)
     }
 
-
     return (
         <>
             <div className={"edit"}>
@@ -53,14 +56,16 @@ export default function EditGameCard(props: Props) {
                 onGameCardChange={props.loadAllMyGameCards}
                 cardSetName={card.cardSetName}
                 title={card.title}
+                number={number}
             ></GameCardFrame>)}
             <Modal
                 className={"modal-new-card"}
                 open={isAddModalOpen}
                 sx={{mt: 20, ml: 6}}
             >
                 <div>
-                    <NewGameCard onClose={closeAddModal} onAddNewCard={props.loadAllMyGameCards}/>
+                    <NewGameCard cardSetName={setName} onClose={closeAddModal} onSaveCard={closeAddModal}
+                                 onAddNewCard={props.loadAllMyGameCards}/>
                 </div>
             </Modal>
         </>

frontend/src/Edit/GameCardFrame.tsx

@@ -23,6 +23,7 @@ type Props = {
     onGameCardChange: () => void
     title: string
     cardSetName: string
+    number: string
 }
 
 export default function GameCardFrame(props: Props) {
@@ -86,7 +87,6 @@ export default function GameCardFrame(props: Props) {
         closeModal()
     }
 
-
     return (
         <div>
             <Card sx={{
@@ -103,14 +103,14 @@ export default function GameCardFrame(props: Props) {
                         {(isOpenUpdate) ? "Edit card" : "Game card"}
                     </Typography>
                     <Typography variant="h5" component="div">
-                            {(isOpenUpdate) ?
-                                <TextField value={title} onInput={changeTitle}
-                                           placeholder={props.title}/> : props.title}
+                        {(isOpenUpdate) ?
+                            <TextField value={title} onInput={changeTitle}
+                                       placeholder={props.title}/> : props.title}
                     </Typography>
                     <Typography sx={{mb: 1.5}} color="text.secondary" component="div">
-                            {(isOpenUpdate) ?
-                                <TextField value={cardSetName} onInput={changeCardSetName}
-                                           placeholder={props.cardSetName}/> : props.cardSetName}
+                        {(isOpenUpdate) ?
+                            <TextField value={cardSetName} onInput={changeCardSetName}
+                                       placeholder={props.cardSetName}/> : props.cardSetName}
                     </Typography>
                 </CardContent>
                 <CardActions className={"card-button"}>

frontend/src/Game/GameCard.ts

@@ -1,5 +1,6 @@
 export type GameCard = {
     id: string,
     title: string,
+    reading: string,
     cardSetName: string,
 }

frontend/src/Game/createGameCardData.ts

@@ -76,6 +76,7 @@ export default function createGameCardData(setName: string, diacritics: boolean[
         const gameCard: GameCard = {
             id: prefix + String(index),
             title: data,
+            reading: data,
             cardSetName: setName,
         };
         index++;

frontend/src/Game/createGameCards.ts

@@ -38,7 +38,7 @@ export function createGameCards(setName: string, gameSize: string, diacritics: b
     const cardPairs: GameCard [] = kanaCards.splice(0, pairing);
     cardPairs.push(...cardPairs.map(card => ({...card})));
 
-    const emptyCard: GameCard = {id: prefix + "0", title: "empty", cardSetName: setName}
+    const emptyCard: GameCard = {id: prefix + "0", title: "empty", reading: "empty", cardSetName: setName}
     if (gameSize === "small") {
         cardPairs.push(emptyCard);
     }