From 0445bbcc076ff18a8393f6610750ea5171a10929 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Wed, 16 Mar 2022 15:40:22 +1400
Subject: Add fake chat page

---
 src/routes/chat.svelte     | 94 ++++++++++++++++++++++++++++++++++++++++++++++
 src/routes/election.svelte | 26 -------------
 2 files changed, 94 insertions(+), 26 deletions(-)
 create mode 100644 src/routes/chat.svelte
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>
-- 
cgit 

