Hugging Face's logo

Spaces:
huggingface-projects
/
wordalle
Runtime error

App Files Community
14
radames commited on
Commit
668ae21
•
1 Parent(s): 09c29e4

add dots on spaces

Browse files
Files changed (3) hide show
  1. frontend/src/app.html +1 -1
  2. frontend/src/routes/index.svelte +16 -5
  3. frontend/src/types.ts +2 -1
frontend/src/app.html CHANGED
@@ -7,7 +7,7 @@
7
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
8
  %sveltekit.head%
9
  </head>
10
- <body class="dark:bg-slate-800">
11
  <div>%sveltekit.body%</div>
12
  </body>
13
  </html>
 
7
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
8
  %sveltekit.head%
9
  </head>
10
+ <body class="dark:bg-slate-900 bg-white">
11
  <div>%sveltekit.body%</div>
12
  </body>
13
  </html>
frontend/src/routes/index.svelte CHANGED
@@ -44,8 +44,9 @@
44
  timePerTile = totalTime / cols;
45
 
46
  board = Array.from({ length: 6 }, () =>
47
- Array.from({ length: cols }, () => ({
48
  letter: '',
 
49
  state: LetterState.INITIAL
50
  }))
51
  );
@@ -189,8 +190,11 @@
189
  >
190
  {#each row as tile, index}
191
  <div class="tile {tile.letter && 'filled'} {tile.state && 'revealed'}">
192
- <div class="front" style="transition-delay: {index * timePerTile}ms;">
193
- {tile.letter}
 
 
 
194
  </div>
195
  <div
196
  class="back {tile.state}"
@@ -220,11 +224,11 @@
220
 
221
  .tile {
222
  @apply w-full text-base text-center font-bold
223
- uppercase select-none relative bg-zinc-100;
224
  vertical-align: middle;
225
  }
226
 
227
- .tile.filled {
228
  animation: zoom 0.2s;
229
  }
230
 
@@ -235,6 +239,13 @@
235
  backface-visibility: hidden;
236
  -webkit-backface-visibility: hidden;
237
  }
 
 
 
 
 
 
 
238
 
239
  .tile .front {
240
  @apply border-[1.5px] border-solid border-gray-300;
 
44
  timePerTile = totalTime / cols;
45
 
46
  board = Array.from({ length: 6 }, () =>
47
+ Array.from(answer).map((l) => ({
48
  letter: '',
49
+ correct: l,
50
  state: LetterState.INITIAL
51
  }))
52
  );
 
190
  >
191
  {#each row as tile, index}
192
  <div class="tile {tile.letter && 'filled'} {tile.state && 'revealed'}">
193
+ <div
194
+ class="front {tile.correct === ' ' ? 'space' : ''}"
195
+ style="transition-delay: {index * timePerTile}ms;"
196
+ >
197
+ <span class="letter">{tile.letter}</span>
198
  </div>
199
  <div
200
  class="back {tile.state}"
 
224
 
225
  .tile {
226
  @apply w-full text-base text-center font-bold
227
+ uppercase select-none relative bg-gray-50;
228
  vertical-align: middle;
229
  }
230
 
231
+ .tile .filled {
232
  animation: zoom 0.2s;
233
  }
234
 
 
239
  backface-visibility: hidden;
240
  -webkit-backface-visibility: hidden;
241
  }
242
+ .tile .letter {
243
+ @apply bg-gray-50 w-full z-10;
244
+ }
245
+ .tile .space::before {
246
+ @apply absolute z-0 flex place-content-center text-black opacity-50;
247
+ content: '•';
248
+ }
249
 
250
  .tile .front {
251
  @apply border-[1.5px] border-solid border-gray-300;
frontend/src/types.ts CHANGED
@@ -1,5 +1,5 @@
1
  export const enum LetterState {
2
- INITIAL = 0,
3
  CORRECT = 'correct',
4
  PRESENT = 'present',
5
  ABSENT = 'absent'
@@ -8,5 +8,6 @@ export const enum LetterState {
8
  export interface Tile {
9
  letter: string;
10
  state: LetterState;
 
11
  }
12
  export type Board = Tile[][];
 
1
  export const enum LetterState {
2
+ INITIAL = '',
3
  CORRECT = 'correct',
4
  PRESENT = 'present',
5
  ABSENT = 'absent'
 
8
  export interface Tile {
9
  letter: string;
10
  state: LetterState;
11
+ correct: string;
12
  }
13
  export type Board = Tile[][];