Skip to content

Commit

Permalink
Merge branch 'develop' of https://github.com/nowrobin/ecrire into fea…
Browse files Browse the repository at this point in the history 
…t/desginApply
  • Loading branch information
@nowrobin
nowrobin committed Jul 11, 2024
2 parents 35872f4 + b438ae2 commit 6ac10e7
Showing 1 changed file with 161 additions and 191 deletions.
352 changes: 161 additions & 191 deletions src/app/typingV2/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,203 +1,173 @@
"use client";
// "use client";

import { useEffect, useState } from "react";
import { quotes } from "@/app/quotes";
import Image from "next/image";
import { Poppins, Hahmlet } from "next/font/google";
import chevLeft from "../../public/chev-left.svg";
import chevRight from "../../public/chev-right.svg";
import Link from "next/link";
import IdStore from ".././store";
// import { useEffect, useRef, useState } from "react";
// import { quotes } from "@/app/quotes";
// import Image from "next/image";
// import chevLeft from "../../../public/chevron-left.svg";
// import chevRight from "../../../public/chevron-right.svg";
// import Link from "next/link";

interface Word {
content: string;
sentenceIndex: number;
}
// interface Word {
// content: string;
// sentenceIndex: number;
// }

interface Letter extends Word {
wordIndex: number;
letters: string[];
}
type QUOTE = {
title: string;
author: string;
content: string;
};
// interface Letter extends Word {
// wordIndex: number;
// }
// type QUOTE = {
// title: string;
// author: string;
// content: string;
// };

export default function Home() {
const [sentenceCurrent, setSentenceCurrent] = useState(0); //sentence Current position
const [textValue, setTextValue] = useState(""); //for the print text
const [inputCollection, setInputCollection] = useState<string[]>([]);
const [quoteNumber, setQuoteNumber] = useState<number>(0);
const [quote, setQuote] = useState<QUOTE>(quotes[0]);
const [userName, setUserName] = useState("");
const { id, setId } = IdStore();
const testName = "test";
// export default function Home() {
// const [textValue, setTextValue] = useState(""); //for the print text
// const [quoteNumber, setQuoteNumber] = useState<number>(0);
// const [quote, setQuote] = useState<QUOTE>(quotes[0]);
// const [letterIndex, setLetterIndex] = useState(0);
// useEffect(() => {
// setQuote(quotes[quoteNumber]);
// }, [quoteNumber]);
// // const quote = {
// // title: "작별하지 않는다",
// // author: "한강",
// // content: "상대의 가장 연한 부분을 베기 위해.",
// // };

useEffect(() => {
setTextValue("");
setQuote(quotes[quoteNumber]);
setId(testName);
setUserName(id);
}, [quoteNumber, id, setId]);
// const textAreaRef = useRef<HTMLTextAreaElement>(null);

console.log(userName);
// const handleTextArea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
// setTextValue(e.currentTarget.value);
// setLetterIndex(e.currentTarget.value.length);
// };

const sentences = quote.content.split("\n");
// const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
// const key = e.key;
// if (letterIndex == quote.content.length) {
// alert("End");
// }
// if (key == " " || key == "Spacebar") {
// }
// if (key == "Backspace") {
// if (textValue == "") {
// e.preventDefault();
// return;
// }
// }
// if (key == "Enter") {
// e.preventDefault();
// alert("You Cannot Skip the line");
// }
// };

const handleTextArea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
let targetValue = e.currentTarget.value.split("\n");
let targetLength = targetValue[sentenceCurrent].length;
if (targetLength == sentences[sentenceCurrent].length) {
setInputCollection((prev: string[]) => {
if (prev[sentenceCurrent] == undefined || prev.length == 0) {
return [...prev, targetValue[sentenceCurrent]];
} else {
let newInputCollection: string[] = [...prev];
newInputCollection[sentenceCurrent] = targetValue[sentenceCurrent];
return newInputCollection;
}
});
e.currentTarget.value += "\n";
if (sentenceCurrent + 1 >= sentences.length) {
alert("The End");
}
setSentenceCurrent((prev) => ++prev);
}
setTextValue(e.currentTarget.value);
};
// const LetterGenerator = ({ wordIndex, content, sentenceIndex }: Letter) => {
// if (wordIndex != 0 && content == " ") {
// return <span>&nbsp;</span>;
// }
// let testInput = textValue.split("");
// return (
// <span className="flex flex-col">
// {testInput[wordIndex] ? (
// testInput[wordIndex] != content && wordIndex !== letterIndex ? (
// <span className="text-red-300 text-center">
// {testInput[wordIndex]}
// </span>
// ) : (
// <span className="text-white text-center">{content}</span>
// )
// ) : (
// <span className="text-[#818181] text-center">{content}</span>
// )}
// {letterIndex == wordIndex && (
// <span className=" bg-white animate-blink h-[0.1px]"></span>
// )}
// </span>
// );
// };

const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
const key = e.key;
if (key == " " || key == "Spacebar") {
}
if (key == "Backspace") {
//Prevent From going over empty text area
if (textValue == "") {
e.preventDefault();
return;
}
//if the whole length is smaller
let inputSentence = textValue.split("\n");
//If current Sentence Have Empty string
//then Skip to the previous sentence
if (inputSentence[sentenceCurrent] == "") {
setTextValue((prev) => {
return prev.slice(0, -1);
});
setSentenceCurrent((prev) => (prev -= 1));
}
}
if (key == "Enter") {
e.preventDefault();
alert("You Cannot Skip the line");
}
};
const LetterGenerator = ({
wordIndex,
content,
sentenceIndex,
letters,
}: Letter) => {
if (wordIndex != 0 && content == " ") {
return <span>&nbsp;</span>;
}
if (sentenceIndex < sentenceCurrent) {
let previousInputValue = inputCollection[sentenceIndex].split("");
return previousInputValue[wordIndex] == content ? (
<span className="text-white">{content}</span>
) : (
<span className="text-red-800">{previousInputValue[wordIndex]}</span>
);
}
let testInput = textValue.split("\n");
let testInputLetter = testInput[sentenceCurrent].split("");
// const WordGenerator = ({ content, sentenceIndex }: Word) => {
// let letters = content.split("");
// return (
// <div className="flex flex-wrap justify-start items-start gap-[0.06rem]">
// {letters.map((value, index) => {
// return (
// <LetterGenerator
// key={index}
// wordIndex={index}
// sentenceIndex={sentenceIndex}
// content={value}
// ></LetterGenerator>
// );
// })}
// </div>
// );
// };

return sentenceCurrent == sentenceIndex && testInputLetter[wordIndex] ? (
testInputLetter[wordIndex] == content ? (
<span className="text-white">{content}</span>
) : testInputLetter[wordIndex] == " " ? (
<span className="text-red-600">{content}</span>
) : (
<span className="text-red-600">{testInputLetter[wordIndex]}</span>
)
) : (
<span className="text-[#818181]">{content}</span>
);
};
// const handleNextClick = () => {
// if (quoteNumber + 1 >= quotes.length) {
// setQuoteNumber(0);
// } else setQuoteNumber((prev) => ++prev);
// setQuote(quotes[quoteNumber]);
// };

const WordGenerator = ({ content, sentenceIndex }: Word) => {
//Split into letters
let letters = content.split("");
return (
<div className="flex flex-row gap-[0.06rem]">
{letters.map((value, index) => {
//Generate Each Letters
return (
<LetterGenerator
key={index}
wordIndex={index}
sentenceIndex={sentenceIndex}
content={value}
letters={letters}
></LetterGenerator>
);
})}
</div>
);
};
// const handlePrevClick = () => {
// if (quoteNumber <= 0) {
// setQuoteNumber(quotes.length - 1);
// } else setQuoteNumber((prev) => --prev);
// setQuote(quotes[quoteNumber]);
// };
// const handlePrintClick = () => {
// if (textAreaRef.current) {
// textAreaRef.current.focus();
// }
// };

const handleNextClick = () => {
if (quoteNumber + 1 >= quotes.length) {
setQuoteNumber(0);
} else setQuoteNumber((prev) => ++prev);
setQuote(quotes[quoteNumber]);
};
const handlePrevClick = () => {
if (quoteNumber <= 0) {
setQuoteNumber(quotes.length - 1);
} else setQuoteNumber((prev) => --prev);
setQuote(quotes[quoteNumber]);
};

return (
<div className="flex flex-col items-start w-[50%] m-32">
<div id="print" className="flex w-[36rem] h-[13rem] gap-1 p-10">
<div className="flex flex-col">
{sentences.map((value, index) => {
return (
//Each Word generate
<WordGenerator
key={index}
content={value}
sentenceIndex={index}
></WordGenerator>
);
})}
</div>
<textarea
className="absolute top-[8rem] left-[8rem] bg-transparent text-transparent w-[36rem] h-[13rem] focus:outline-none p-10 resize-none caret-white tracking-[0.06rem]"
onChange={handleTextArea}
value={textValue}
onKeyDown={handleKeyDown}
></textarea>
</div>
<hr className=" w-[150%] h-[0.75px] bg-white"></hr>
<div className="flex flex-row gap-4 mt-2 ml-2">
<button onClick={handlePrevClick}>
<Image src={chevLeft} alt="chevLeft" width={20} />
</button>
<div className="flex flex-col ">
<div className=" h-[20px]">{"저자 : " + quote.author}</div>
<div className=" h-[20px]">{"제목 : " + quote.title}</div>
</div>
<button className="" onClick={handleNextClick}>
<Image src={chevRight} alt="chevLeft" width={20} />
</button>
<div className="ml-12 mt-4 text-white">
<Link href={"/userfeed"}>Leave Us a feedback===</Link>
</div>
</div>
</div>
);
}
// return (
// <div className="flex flex-col items-start w-[50%] m-32">
// <div
// id="print"
// onClick={handlePrintClick}
// className="flex w-[36rem] h-[13rem] gap-1 p-10"
// >
// <div className="flex flex-wrap">
// <WordGenerator
// key={0}
// content={quote.content}
// sentenceIndex={0}
// ></WordGenerator>
// </div>
// <textarea
// className="absolute -z-10 bg-transparent text-transparent outline-none resize-none caret-transparent"
// onChange={handleTextArea}
// value={textValue}
// ref={textAreaRef}
// onKeyDown={handleKeyDown}
// spellCheck="false"
// ></textarea>
// </div>
// <hr className=" w-[100%] h-[0.75px] bg-white"></hr>
// <div className="flex flex-row gap-4 mt-2 ml-2">
// <button onClick={handlePrevClick}>
// <Image src={chevLeft} alt="chevLeft" width={20} />
// </button>
// <div className="flex flex-col ">
// <div className="flex flex-wrap">
// <div className=" h-[20px]">저자 :</div>
// <div>{quote.author}</div>
// </div>
// <div className="flex flex-wrap">
// <div className=" h-[20px]">제목 :</div>
// <div>{quote.title}</div>
// </div>
// </div>
// <button className="" onClick={handleNextClick}>
// <Image src={chevRight} alt="chevLeft" width={20} />
// </button>
// <div className="ml-12 mt-4 text-white">
// <Link href={"/userfeed"}>Leave Us a feedback===</Link>
// </div>
// </div>
// </div>
// );
// }

0 comments on commit 6ac10e7

Please sign in to comment.