Wordle Maker Project 15일차

오늘은 11월 15일 15일차이다.

목표

• LoadPage의 닉네임 입력 화면과 solvers 로드 화면 통합

진행

원래 애니메이션을 진행하려고 했으나 시간이 많이 부족하고, 아직 방식을 떠올리지 못해서 통합부터 진행했다.
우선 submitNickname 상태를 만들어서 기본값으로 false를 설정했다. 맨 처음 LoadPage에 접속하면 닉네임 입력 화면이 뜨고, 닉네임 입력 시 존재하는 닉네임인지 검증한다. 이후 submitNickname 상태를 true로 바꾸면 이에 따라 렌더링 항목이 바껴서 solver들이 로드가 된다.

코드

const LoadBoard = () => {
    const [word, setWord] = useState([]);
    const [wordList, setWordList] = useState([]);
    const [wordState, setWordState] = useState('load');
    const [message, setMessage] = useState(null);
    const [submitNickname, setSubmitNickname] = useState(false);
    const [solvers, setSolvers] = useState([]);
    const [pageIndex, setPageIndex] = useState(1);

    useEffect(() => {

    }, []);

    const onClick = e => { // 키를 눌렀을 때 실행되는 함수

        if ( submitNickname === false ) {
            if ( e.target.innerText === 'ENTER') { // ENTER를 눌렀을 경우
                if ( word.length < wordMaxLen ) { 
                    setMessage('Not enough letters');
                    setWordState('not-word');
                    setTimeout(() => {setWordState(''); setMessage(null);}, 500);
                    return;
                }
                    
                for( let i = 0 ; i < wordMaxLen ; i++ )
                    nickname += word[i].text;
                
                client.post('/load/exist', { nickname: nickname })
                    .then( res => {
                        if ( res.data === false) {
                            nickname = '';
                            setMessage("It doesn't exist!");
                            setWordState('not-word');
                            setTimeout(() => {setWordState(''); setMessage(null);}, 500);
                            return;
                        }
                        else {
                            for( let i = 0 ; i < wordMaxLen ; i++ ) {
                                word[i].state = 'correct';
                            }
                            setWordList({
                                ...wordList,
                                word,
                            });
                            
                            setTimeout(() => {
                                setWord([]);
                                setWordList({
                                    word,
                                });
                                setSubmitNickname(true);
                            }, 2000);
                            client.get('/load/')
                                .then( res => {
                                    setSolvers(res.data);
                                })
                        }
                    });
                return;
            }
            setMessage(null);
            if ( e.target.innerText === BACK ) {
                if ( word.length === 0 )
                    return;
                setWord(word.slice(0, -1));
                return;
            }
            if ( word.length > wordMaxLen )
                return;
            setWord(word.concat({
                text: e.target.innerText,
                state: 'filled',
            }));
            return;
        }

        if ( e.target.id === 'next' ) {
            if ( solvers.length > pageIndex * 4 )
                setPageIndex(pageIndex + 1);
        }
            
        else if ( e.target.id === 'prev' ) {
            if ( pageIndex > 1 )
                setPageIndex(pageIndex - 1);
        }
    };

    return (
        <BoardContainer submitNickname={submitNickname}>
            <Message message={message}>{message}</Message>
            <BoardBlock>
                { 
                    submitNickname === false ? 
                    <WordList lineSet={oneLine} word={word} wordState={wordState} wordList={wordList} listIndex={listIndex}/> :
                    solvers.slice((pageIndex-1)*4, pageIndex*4).map((solver, index) => 
                    <LoadWordList key={index} lineSet={sevenLines} word={word} wordState={wordState} wordList={solver.nickname.concat(solver.wordList)}/>)
                }
            </BoardBlock>
            {
                submitNickname === false ?
                <Keyboard onClick={onClick} keyState={keyState}/> :
                <ButtonBlock>
                    <Button id='prev' pageIndex={pageIndex} listLength={solvers.length} onClick={onClick}>&lt;</Button>
                    <Button id='next' pageIndex={pageIndex} listLength={solvers.length} onClick={onClick}>&gt;</Button>
                </ButtonBlock>
            }

        </BoardContainer>
    );
};

onClick 함수는 submitNickname이 false일 때는 키보드에 적용되고, true라면 prev, next 버튼에 적용된다.

내일 할 것

• LoadPage 세션 구현

마무리

슬라이드 애니메이션을 어떻게 넣을지 구상해봐야겠다. 구현이 쉽지 않을 것 같은데, 정 안 되면 다른 사람들은 어떻게 만들었는지 한 번 보고 재구성해야할 것 같다.