radames HF staff commited on
Commit
677bc72
β€’
1 Parent(s): d6bb1e0

enable badges on count

Browse files
frontend/src/lib/Result.svelte CHANGED
@@ -1,15 +1,16 @@
1
  <script lang="ts">
2
- import { colors, cheersMessages } from '$lib/utils';
3
  import type { Board } from '../types';
4
- import { fade } from 'svelte/transition';
5
- import { createEventDispatcher, onMount } from 'svelte';
 
6
 
7
  const dispatch = createEventDispatcher();
8
 
9
  export let board: Board;
10
  export let currentRowIndex: number;
11
  export let imagePaths: string[];
12
-
13
  const message = cheersMessages[currentRowIndex];
14
  import domtoimage from 'dom-to-image';
15
  const imageBaseUrl = import.meta.env.MODE === 'development' ? 'http://localhost:7860/' : '';
@@ -17,6 +18,7 @@
17
  let modalEl: HTMLDivElement;
18
  let elToShare: HTMLDivElement;
19
  let disableDownload: boolean = false;
 
20
  async function saveFile(node: HTMLDivElement) {
21
  disableDownload = true;
22
  try {
@@ -46,9 +48,19 @@
46
  saveFile(elToShare);
47
  }
48
  };
49
- onMount(() => {
50
- window.addEventListener('keyup', onKeyup);
51
- return () => window.removeEventListener('keyup', onKeyup);
 
 
 
 
 
 
 
 
 
 
52
  });
53
  const s = 10;
54
  const p = 1;
@@ -65,7 +77,15 @@
65
  <span class="font-light">hf.co/wordalle</span>
66
  </header>
67
  <h2 class="text-center uppercase tracking-widest font-extrabold">{message}</h2>
68
- <div class="grid grid-cols-3 gap-2 p-3">
 
 
 
 
 
 
 
 
69
  {#each imagePaths as image}
70
  <div>
71
  <img src={imageBaseUrl + image} alt="" class="aspect-square w-full h-full" />
 
1
  <script lang="ts">
2
+ import { colors, cheersMessages, badgesComponents } from '$lib/utils';
3
  import type { Board } from '../types';
4
+ import { fade, scale } from 'svelte/transition';
5
+ import { createEventDispatcher, onDestroy, onMount } from 'svelte';
6
+ import type { SvelteComponent } from 'svelte';
7
 
8
  const dispatch = createEventDispatcher();
9
 
10
  export let board: Board;
11
  export let currentRowIndex: number;
12
  export let imagePaths: string[];
13
+ export let totalStreaks: number;
14
  const message = cheersMessages[currentRowIndex];
15
  import domtoimage from 'dom-to-image';
16
  const imageBaseUrl = import.meta.env.MODE === 'development' ? 'http://localhost:7860/' : '';
 
18
  let modalEl: HTMLDivElement;
19
  let elToShare: HTMLDivElement;
20
  let disableDownload: boolean = false;
21
+
22
  async function saveFile(node: HTMLDivElement) {
23
  disableDownload = true;
24
  try {
 
48
  saveFile(elToShare);
49
  }
50
  };
51
+
52
+ let badgeComponent: SvelteComponent;
53
+
54
+ onMount(async () => {
55
+ if (totalStreaks in badgesComponents) {
56
+ const compName = badgesComponents[totalStreaks];
57
+ badgeComponent = (await import(`./badges/${compName}.svelte`)).default;
58
+ }
59
+ window.addEventListener('keyup', onKeyup, true);
60
+ });
61
+
62
+ onDestroy(() => {
63
+ window.removeEventListener('keyup', onKeyup, true);
64
  });
65
  const s = 10;
66
  const p = 1;
 
77
  <span class="font-light">hf.co/wordalle</span>
78
  </header>
79
  <h2 class="text-center uppercase tracking-widest font-extrabold">{message}</h2>
80
+ <div class="grid grid-cols-3 gap-2 p-3 relative">
81
+ {#if totalStreaks in badgesComponents}
82
+ <div
83
+ transition:scale={{ duration: 500 }}
84
+ class="absolute left-0 right-0 top-0 bottom-0 flex place-content-center place-items-center"
85
+ >
86
+ <svelte:component this={badgeComponent} classNames="w-full max-w-[180px]" />
87
+ </div>
88
+ {/if}
89
  {#each imagePaths as image}
90
  <div>
91
  <img src={imageBaseUrl + image} alt="" class="aspect-square w-full h-full" />
frontend/src/lib/utils.ts CHANGED
@@ -1,6 +1,6 @@
1
  // original code inspired by Evan You https://github.com/yyx990803/vue-wordle/
2
  import { LetterState } from '../types';
3
- import type { Board } from '../types';
4
 
5
  export function clearTile(board: Board, currentRowIndex: number) {
6
  const newBoard = [...board];
@@ -36,7 +36,7 @@ export const colors = {
36
  [LetterState.INITIAL]: '#5d5d5d'
37
  };
38
 
39
- export const badges = {
40
  2: 'two',
41
  5: 'five',
42
  10: 'ten',
 
1
  // original code inspired by Evan You https://github.com/yyx990803/vue-wordle/
2
  import { LetterState } from '../types';
3
+ import type { Board, BadgeComponent } from '../types';
4
 
5
  export function clearTile(board: Board, currentRowIndex: number) {
6
  const newBoard = [...board];
 
36
  [LetterState.INITIAL]: '#5d5d5d'
37
  };
38
 
39
+ export const badgesComponents: BadgeComponent = {
40
  2: 'two',
41
  5: 'five',
42
  10: 'ten',
frontend/src/routes/index.svelte CHANGED
@@ -8,7 +8,8 @@
8
  import Result from '$lib/Result.svelte';
9
  import Message from '$lib/Message.svelte';
10
 
11
- import { onMount, setContext } from 'svelte';
 
12
 
13
  const totalTime = 1000;
14
  const apiUrl = import.meta.env.MODE === 'development' ? 'http://localhost:7860/data' : 'data';
@@ -20,9 +21,13 @@
20
  onMount(async () => {
21
  promptsData = await fetch(apiUrl).then((d) => d.json());
22
  restartBoard();
 
 
23
 
24
- window.addEventListener('keyup', onKeyup);
25
- return () => window.removeEventListener('keyup', onKeyup);
 
 
26
  });
27
 
28
  // Get word of the day
@@ -132,6 +137,8 @@
132
  allowInput = false;
133
  if (currentRow.every((tile) => tile.state === LetterState.CORRECT)) {
134
  // yay!
 
 
135
  setTimeout(() => {
136
  gameState = GameState.SUCESS;
137
  }, totalTime);
@@ -176,10 +183,16 @@
176
  {#if board !== undefined}
177
  <div class="max-w-screen-lg mx-auto px-1 relative z-0 mt-3">
178
  {#if message}
179
- <Message {message} {gameState} on:restart={restartBoard}/>
180
  {/if}
181
  {#if gameState === GameState.SUCESS}
182
- <Result {board} {currentRowIndex} {imagePaths} on:restart={restartBoard} />
 
 
 
 
 
 
183
  {/if}
184
  <!-- <div class="message" transition:fade>
185
  {message}
 
8
  import Result from '$lib/Result.svelte';
9
  import Message from '$lib/Message.svelte';
10
 
11
+ import { onMount, onDestroy } from 'svelte';
12
+ import { browser } from '$app/env';
13
 
14
  const totalTime = 1000;
15
  const apiUrl = import.meta.env.MODE === 'development' ? 'http://localhost:7860/data' : 'data';
 
21
  onMount(async () => {
22
  promptsData = await fetch(apiUrl).then((d) => d.json());
23
  restartBoard();
24
+ window.addEventListener('keyup', onKeyup, true);
25
+ });
26
 
27
+ onDestroy(() => {
28
+ if (browser) {
29
+ window.removeEventListener('keyup', onKeyup, true);
30
+ }
31
  });
32
 
33
  // Get word of the day
 
137
  allowInput = false;
138
  if (currentRow.every((tile) => tile.state === LetterState.CORRECT)) {
139
  // yay!
140
+ completedPrompts = [...completedPrompts, { prompt: answer, idx: currPromptIndex }];
141
+ console.log(completedPrompts);
142
  setTimeout(() => {
143
  gameState = GameState.SUCESS;
144
  }, totalTime);
 
183
  {#if board !== undefined}
184
  <div class="max-w-screen-lg mx-auto px-1 relative z-0 mt-3">
185
  {#if message}
186
+ <Message {message} {gameState} on:restart={restartBoard} />
187
  {/if}
188
  {#if gameState === GameState.SUCESS}
189
+ <Result
190
+ {board}
191
+ {currentRowIndex}
192
+ {imagePaths}
193
+ totalStreaks={completedPrompts.length}
194
+ on:restart={restartBoard}
195
+ />
196
  {/if}
197
  <!-- <div class="message" transition:fade>
198
  {message}
frontend/src/types.ts CHANGED
@@ -20,7 +20,9 @@ export type Board = Tile[][];
20
  export interface PromptsData {
21
  [key: string]: string[];
22
  }
23
-
 
 
24
  export interface SuccessPrompt {
25
  prompt: string;
26
  idx: number;
 
20
  export interface PromptsData {
21
  [key: string]: string[];
22
  }
23
+ export interface BadgeComponent {
24
+ [key: number]: string;
25
+ }
26
  export interface SuccessPrompt {
27
  prompt: string;
28
  idx: number;