Spaces:
Runtime error
Runtime error
add dots on spaces
Browse files- frontend/src/app.html +1 -1
- frontend/src/routes/index.svelte +16 -5
- 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-
|
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(
|
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
|
193 |
-
{tile.
|
|
|
|
|
|
|
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-
|
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 =
|
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[][];
|