danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/n3rdle.
n3rdle.vercel.app
feat: handle errors on frontend (#8)
Co-authored-by: Paul Kenneth Egell-Johnsen <paul.k.egell-johnsen@gmail.com>
author
Paul Kenneth Egell-Johnsen
co-author
Paul Kenneth Egell-Johnsen
committer
GitHub
date
(Apr 14, 2022, 1:05 PM +0100)
commit
71e19499
71e19499e15dc2b38e92c0769d24d20f3fb29211
parent
88a61094
88a610946983ed349151f1f5f1904e19467a9985
+33
-9
+14
components/GuessError.vue
+14
components/GuessError.vue
+14
-5
composables/game.ts
+14
-5
composables/game.ts
···
3
3
4
4
export const useGameState = () => {
5
5
const router = useRouter()
6
+
const error = ref('')
6
7
7
8
const state = useCookie<GameState>('state', {
8
9
encode,
···
11
12
})
12
13
13
14
async function submitGuess(guess: string) {
14
-
state.value = await $fetch('/api/guess', {
15
-
method: 'POST',
16
-
body: { guess },
17
-
})
15
+
error.value = ''
16
+
try {
17
+
state.value = await $fetch('/api/guess', {
18
+
method: 'POST',
19
+
body: { guess },
20
+
})
21
+
} catch (e) {
22
+
error.value = (e.message || e.toString())
23
+
.replace(' (/api/guess)', '')
24
+
.replace('422 ', '')
25
+
.replace('FetchError: ', '')
26
+
}
18
27
}
19
28
20
29
function resetGame() {
···
22
31
router.push('/')
23
32
}
24
33
25
-
return { state, submitGuess, resetGame }
34
+
return { state, error, submitGuess, resetGame }
26
35
}
+2
-1
pages/game.vue
+2
-1
pages/game.vue
···
1
1
<script setup lang="ts">
2
-
const { state, submitGuess, resetGame } = useGameState()
2
+
const { state, error, submitGuess, resetGame } = useGameState()
3
3
</script>
4
4
5
5
<template>
···
16
16
</details>
17
17
<section>
18
18
<GameBoard :state="state" />
19
+
<GuessError :error="error" />
19
20
<GuessForm @guess="submitGuess" />
20
21
<button class="secondary outline" @click="resetGame">Reset game</button>
21
22
</section>
+3
-3
server/api/guess.ts
+3
-3
server/api/guess.ts
···
16
16
if (!guess || guess.length !== 5) {
17
17
return createError({
18
18
statusCode: 422,
19
-
message: 'Invalid guess, 5 letter words only',
19
+
statusMessage: 'Invalid guess, 5 letter words only',
20
20
})
21
21
}
22
22
23
23
if (!validWords.includes(guess)) {
24
24
return createError({
25
25
statusCode: 422,
26
-
message: 'Invalid guess, word not in word list',
26
+
statusMessage: 'Invalid guess, word not in word list',
27
27
})
28
28
}
29
29
30
30
if (state.some(([word]) => word === guess)) {
31
31
return createError({
32
32
statusCode: 422,
33
-
message: 'Invalid guess, word already guessed',
33
+
statusMessage: 'Invalid guess, word already guessed',
34
34
})
35
35
}
36
36