Hugging Face's logo

Spaces:
Atualli
/
painel
Sleeping

App Files
painel
File size: 4,335 Bytes 
1bc8781
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
 
<script lang="ts">
	import { colors, cheersMessages, badgesComponents } from '$lib/utils';
	import type { Board } from '../types';
	import { fade, scale } from 'svelte/transition';
	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
	import type { SvelteComponent } from 'svelte';
	import { dev } from '$app/env';

	const dispatch = createEventDispatcher();

	export let board: Board;
	export let currentRowIndex: number;
	export let imagePaths: string[];
	export let totalStreaks: number;
	const message = cheersMessages[currentRowIndex];
	import domtoimage from 'dom-to-image';
	const apiUrl = dev ? 'http://localhost:7860/' : '';

	let modalEl: HTMLDivElement;
	let elToShare: HTMLDivElement;
	let disableDownload: boolean = false;

	async function saveFile(node: HTMLDivElement) {
		disableDownload = true;
		try {
			const blob = await domtoimage.toBlob(node, { bgcolor: '#000' });
			const a = document.createElement('a');
			a.download = `sucess-${Date.now()}.png`;
			a.target = '_self';
			a.onclick = async (e) => {
				disableDownload = true;
				if (a.href) {
					URL.revokeObjectURL(a.href);
					disableDownload = false;
					return;
				}
				a.href = URL.createObjectURL(blob);
				disableDownload = false;
			};
			a.click();
			console.log('Downloding image.');
		} catch (err) {
			console.log(err.name, err.message);
		}
	}
	const onKeyup = (e: KeyboardEvent) => {
		if (e.key === 'Escape' || e.key === 'Enter') {
			dispatch('restart');
		} else if (e.key === ' ') {
			saveFile(elToShare);
		}
	};

	let badgeComponent: SvelteComponent;

	onMount(async () => {
		if (totalStreaks in badgesComponents) {
			const compName = badgesComponents[totalStreaks];
			badgeComponent = (await import(`./badges/${compName}.svelte`)).default;
		}
		setTimeout(() => {
			window.addEventListener('keyup', onKeyup, true);
		}, 1000);
	});

	onDestroy(() => {
		window.removeEventListener('keyup', onKeyup, true);
	});
	const s = 10;
	const p = 1;
	const rx = s / 10;
</script>

<!-- Modal  made with tailwind -->
<div bind:this={modalEl} class="modal relative z-50" transition:fade>
	<div class="message">
		<div class="border-0">
			<div class="p-3" bind:this={elToShare}>
				<header class="p-3 flex justify-between items-center">
					<h1 class="text-xs font-bold uppercase whitespace-nowrap">WORDALLE 🥑</h1>
					<span class="font-light">hf.co/wordalle</span>
				</header>
				<h2 class="text-center uppercase tracking-widest font-extrabold">{message}</h2>
				<div class="grid grid-cols-3 gap-2 p-3 relative">
					{#if totalStreaks in badgesComponents}
						<div
							transition:scale={{ duration: 500 }}
							class="absolute left-0 right-0 top-0 bottom-0 flex place-content-center place-items-center"
						>
							<svelte:component this={badgeComponent} classNames="w-full max-w-[180px]" />
						</div>
					{/if}
					{#each imagePaths as image}
						<div>
							<img src={apiUrl + image} alt="" class="aspect-square	w-full h-full" />
						</div>
					{/each}
				</div>
				<svg
					class="w-full p-3 mx-auto max-h-[30vh]"
					viewBox="0 0 {board[0].length * (p + s) - p} {board.length * (p + s) - p}"
					xmlns="http://www.w3.org/2000/svg"
				>
					{#each board as row, y}
						{#each row as tile, x}
							<rect
								fill={colors[tile.state]}
								x={x * (s + p)}
								y={y * (s + p)}
								width={s}
								height={s}
								{rx}
							/>
						{/each}
					{/each}
				</svg>
			</div>
		</div>
		<div class="p-3 px-6 flex text-base">
			<button
				disabled={disableDownload}
				class="min-w-[15ch] flex-1 mr-1"
				on:click={() => saveFile(elToShare)}
			>
				{!disableDownload ? 'SAVE SCREENSHOT' : 'SAVING..'}
			</button>
			<button class="flex-1 ml-1" on:click={() => dispatch('restart')}> NEXT </button>
		</div>
	</div>
</div>

<style lang="postcss" scoped>
	.message {
		@apply text-white bg-black bg-opacity-80 font-semibold p-10 z-20 rounded-md transition-opacity duration-300 ease-in-out mx-auto max-w-lg;
	}
	.modal {
		@apply fixed top-0 left-0 w-screen min-h-screen z-10 bg-black bg-opacity-80 backdrop-blur-sm;
		transform: translateZ(1000px);
		transform-style: preserve-3d;
	}
	.go-tweet,
	button {
		@apply bg-gray-700 hover:bg-gray-900 text-white font-bold p-1 my-1 text-sm rounded transition-opacity duration-500 ease-in-out;
	}
</style>