오늘은 10월 18일 4일차이다.
목표
- 색칠된 단어들에 따라 키보드에도 색칠하기
진행
문자 색들을 관리할 수 있는 객체를 하나 만들어서 props를 통해 Key 컴포넌트까지 전달, 문자에 따라 저장되어 있는 색들을 렌더링할 수 있도록 구성했다.
코드
const ColoringWord = ( word, wordCorrect ) => {
let letterCorrectCounts = 0;
const wordLen = word.length;
for ( let i = 0 ; i < wordLen ; i++ ) {
if ( wordCorrect[i] === word[i].text ) {
word[i].bgColor = green;
word[i].textColor = white;
keyColor[wordCorrect[i]] = green;
letterCorrectCounts++;
continue;
}
for ( let j = 0 ; j < wordLen ; j++) {
if ( wordCorrect[i] === word[j].text ) {
word[j].bgColor = yellow;
if ( keyColor[wordCorrect[i]] !== green) {
console.log(wordCorrect[i], keyColor[wordCorrect[i]]);
keyColor[wordCorrect[i]] = yellow;
}
break;
}
}
word[i].textColor = white;
if ( word[i].bgColor === white ) {
word[i].bgColor = gray;
if ( keyColor[word[i].text] === undefined )
keyColor[word[i].text] = gray;
}
}
if ( letterCorrectCounts === wordLen ) {
setTimeout(() => alert("정답입니다~!"), 50);
isFinished = true;
}
console.log(keyColor);
return word;
};letterCorrectCounts는 정답인 경우를 확인하기 위해서 만들었다. 문자와 위치가 같다면 keyColor 객체의 해당 문자를 green으로 변경. 문자만 같다면 노란색으로 바꿔주는데, 이 때 이전에 green이었을 경우에는 그대로 놔둬야하므로, green이 아닐 경우에만 yellow로 변경했다. 위치도, 문자도 틀린 경우에는 gray로 변경해주었다.조건문들이 복잡하게 얽혀있어서 이것도 나중에 정리할 필요가 있을 것 같다.
const keyListFirst = first_letters.map(letter =>
<Key
letter={letter}
onClick={props.onClick}
color={props.keyColor[letter]}
/>);Keyboard 컴포넌트에서 맨 윗줄 키들을 생성하는 부분이다. props로 받아온 keyColor 객체에서 해당하는 문자의 색을 Key 컴포넌트의 color props로 넘겨주면, Key 컴포넌트에서 렌더링할 때 background-color를 변경한다. 조건문을 구성하여 글자색도 white로 변경하도록 했다.
키의 색이 잘 바뀌고 있는 모습이다.
E가 이미 green으로 밝혀졌기 때문에 후에 yellow E가 나와도 키보드의 E는 green을 유지하고 있다.
보충해야할 것
- 코드 정리(특히 ColoringWord 함수 부분)
- 조건문 만들 때 여러 가지 예외상황 고려하기
내일 할 것
- CSS 애니메이션 삽입
- 팝업 구현(시간이 된다면)
마무리
시간이 지나고 채워지는 코드가 늘어나다보니 그렇게 많은 코드가 아님에도 불구하고 가독성이 좋지 못하다. 코드 정리와 가독성 좋게 코드 짜는 것에 대한 중요성을 느낄 수 있었던 4일차였다.
