diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/routes/chat.svelte | 94 | ||||
| -rw-r--r-- | src/routes/election.svelte | 26 |
2 files changed, 94 insertions, 26 deletions
diff --git a/src/routes/chat.svelte b/src/routes/chat.svelte new file mode 100644 index 0000000..186077b --- /dev/null +++ b/src/routes/chat.svelte @@ -0,0 +1,94 @@ +<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() { + // const mode = modesEl.value + let url = 'https://fake-chat.matdoes.dev/render.png?' + // console.log(userEl.innerText) + url = url + `m=${modeId}` + if (modeUsesIgn) url += `&u=${ign}` + if (modeUsesData) url += '&d=' + encodeURIComponent(data) + if (transparentBackground) url += '&t=1' + + generatedUrl = url + imageDisplay = 'none' + + // console.log(url) + // outputImageEl.src = url + // outputImageEl.style.display = 'none' + // outputImageEl.onload = () => { + // outputImageEl.style.display = 'block' + // } + } +</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> diff --git a/src/routes/election.svelte b/src/routes/election.svelte index 3937527..a0c78ce 100644 --- a/src/routes/election.svelte +++ b/src/routes/election.svelte @@ -130,32 +130,6 @@ </div> {/if} - <!-- -<h2>Previous election <span class="candidate-year">({{ skyblockYear(data.previous.year) }})</span></h2> -<div class="mayor-candidates"> - {% for candidate in data.previous.candidates|sort(true, false, 'votes') %} - <div class="mayor"> - {% set color = colorCodes[candidate.color] if candidate.color else null %} - <div> - <h3{% if color %} style="color: {{color}}"{% endif %}>{{candidate.name}}</h3> - <p class="mayor-vote-count"><span class="mayor-vote-count-number"{% if color %} style="color: {{color}}"{% endif %}>{{candidate.votes.toLocaleString()}}</span> votes</p> - {% if candidate.name == data.previous.winner %} - <p class="mayor-winner">Winner</p> - {% endif %} - {{ renderMayor(candidate.name) }} - </div> - <ul class="mayor-perks"> - {% for perk in candidate.perks %} - <div class="mayor-perk"> - <h4{% if color %} style="color: {{ color }}"{% endif %}>{{ perk.name }}</h4> - <p>{{ perk.description|formattingCodeToHtml|safe }}</p> - </div> - {% endfor %} - </ul> - </div> - {% endfor %} -</div> --> - <h2> Previous election <span class="candidate-year">(Year {data.previous.year})</span> </h2> |