const [questionData, setQuestionData] = createSignal<FourCountryQuestionData>({
correctFlag: { name: '', continent: '', description: '', img: '' },
choices: []
});
const [score, setScore] = createSignal(0)
createEffect(() => {
console.log('createEffect')
})
onMount(() => {
console.log('onMount')
const storedQuestionData = localStorage.getItem("fourCountryQuestion");
if (storedQuestionData) {
console.log('getting questionData')
setQuestionData(JSON.parse(storedQuestionData));
} else {
setQuestionData(getRandomQuestionData())
localStorage.setItem("fourCountryQuestion", JSON.stringify(questionData()));
}
const storedScore = localStorage.getItem("score")
if (storedScore) {
console.log('getting score');
setScore(JSON.parse(storedScore))
} else {
setScore(0)
localStorage.setItem("score", JSON.stringify(score()))
}
})
return (
<div class="flex flex-row">
<div class="p-2 border rounded basis-1/2">
<img class="w-96 shadow-md border" src={questionData().correctFlag.img}></img>
<div class="grid grid-cols-2 gap-2 py-2">
<For each={questionData().choices}>{(flag, _) =>
<button class="p-2 border rounded" onclick={() => {
if (flag.name === questionData().correctFlag.name) {
setScore(score() + 1);
alert("right! current score: " + score())
setQuestionData(getRandomQuestionData())
localStorage.setItem("score", JSON.stringify(score()))
localStorage.setItem("fourCountryQuestion", JSON.stringify(questionData()))
} else {
alert('wrong!')
}
}}>
{flag.name}
</button>
}</For>
</div>
</div>
<div class="border p-4 rounded-full">
{score()}
</div>
</div>
