diff options
| author | mat <27899617+mat-1@users.noreply.github.com> | 2022-12-15 20:19:42 -0600 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-12-15 20:19:42 -0600 |
| commit | ed5eedab8f9fc90dadf5c442cf559572d1b35f0c (patch) | |
| tree | 01a763fd11810e9970f14f7dae180e95b279de9a /src/routes/chat/+page.svelte | |
| parent | 89bf3d31e36ad3bdfd45461ee6fb69a4c791f848 (diff) | |
| parent | 103689520f51991a1e9a4ca5829fe2f46d1a32c2 (diff) | |
| download | skyblock-stats-ed5eedab8f9fc90dadf5c442cf559572d1b35f0c.tar.gz skyblock-stats-ed5eedab8f9fc90dadf5c442cf559572d1b35f0c.tar.bz2 skyblock-stats-ed5eedab8f9fc90dadf5c442cf559572d1b35f0c.zip | |
Merge pull request #6 from skyblockstats/sveltekit-v1
Sveltekit v1
Diffstat (limited to 'src/routes/chat/+page.svelte')
| -rw-r--r-- | src/routes/chat/+page.svelte | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte new file mode 100644 index 0000000..df7aeee --- /dev/null +++ b/src/routes/chat/+page.svelte @@ -0,0 +1,85 @@ +<script lang="ts"> + import Head from '$lib/Head.svelte' + + import Header from '$lib/Header.svelte' + + let data = '' + let ign = '' + let transparentBackground = false + let modeId: string + + let generatedUrl = '' + + $: modeUsesData = !['fr', 'f', 'fdeny', 'gdisband', 'pinvite'].includes(modeId) + $: modeUsesIgn = !['custom'].includes(modeId) + + let imageDisplay: 'none' | 'block' = 'none' + + function generateImage() { + let url = 'https://fake-chat.matdoes.dev/render.png?' + url = url + `m=${modeId}` + if (modeUsesIgn) url += `&u=${ign}` + if (modeUsesData) url += '&d=' + encodeURIComponent(data) + if (transparentBackground) url += '&t=1' + + generatedUrl = url + imageDisplay = 'none' + } +</script> + +<Head title="Hypixel Fake Chat Generator" /> +<Header /> + +<main> + <h1>Hypixel Fake Chat Generator</h1> + <select id="modes" bind:value={modeId}> + <option value="chat">Public chat</option> + <option value="dm">Private message</option> + <option value="fr">Friend request</option> + <option value="f">Friend accept</option> + <option value="fdeny">Friend deny</option> + <option value="gchat">Guild chat</option> + <option value="gdisband">Guild disband</option> + <option value="pchat">Party chat</option> + <option value="pinvite">Party invite</option> + <option value="custom">Custom</option> + </select> + {#if modeUsesIgn} + <input id="ign" placeholder="Enter user" bind:value={ign} /> + {/if} + {#if modeUsesData} + <input id="data" placeholder="Enter message" bind:value={data} /> + {/if} + <label> + <input type="checkbox" id="transparent-background" bind:checked={transparentBackground} /> Transparent + background + </label> + <button id="generate" on:click={generateImage}>Generate image</button> + <!-- svelte-ignore a11y-missing-attribute --> + <img + src={generatedUrl} + id="outputImage" + style="display:{imageDisplay}" + on:load={() => (imageDisplay = 'block')} + /> +</main> + +<style> + input { + border: 1px solid rgba(255, 255, 255, 0.2); + } + button { + background-color: #222; + border: 1px solid rgba(255, 255, 255, 0.2); + color: #aaa; + } + select, + input, + button { + display: block; + margin-bottom: 0.5em; + } + #transparent-background { + display: inline-block; + } +</style> |