diff --git a/public/assets/cookies.png b/public/assets/cookies.png new file mode 100644 index 0000000..ab418ca Binary files /dev/null and b/public/assets/cookies.png differ diff --git a/public/assets/email-baking.png b/public/assets/email-baking.png new file mode 100644 index 0000000..86f7df4 Binary files /dev/null and b/public/assets/email-baking.png differ diff --git a/server.js b/server.js index c81883c..69a2b74 100644 --- a/server.js +++ b/server.js @@ -38,6 +38,8 @@ app.ws('/hit-send', (ws, request) => { console.log(`From: ${message.from}\nTo:${message.to}\n\n${message.text}`) console.log(`\n--------------------------- END EMAIL ---------------------------`) + // TODO: actually send the email + setTimeout(() => { ws.send(JSON.stringify({ success: true, diff --git a/src/App.svelte b/src/App.svelte index 9c1edf9..6db2f09 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -196,8 +196,21 @@ step -= 1 } + function stepOne() { + step = 1 + } + + function stepTwo() { + step = 2 + } + + // This is to display which email is sending next let nowSending + // And this is for the progress bar, mainly + let emailsSoFar = 0 + let emailsToSend = 0 + /** * Hit Send * @@ -229,6 +242,9 @@ }) } + // keep track of how many we had to start witth + emailsToSend = emails.length + emailsSoFar = 0 // okay, now let's open a socket to the server! let socketProtocol = (window.location.protocol === 'https:' ? 'wss:' : 'ws:') @@ -236,7 +252,7 @@ let socket = new WebSocket(socketUrl) socket.onopen = function() { - nowSending = emails.pop() + nowSending = emails.shift() socket.send(JSON.stringify(nowSending)) } @@ -252,13 +268,16 @@ console.log(`${message.to}'s email sent successfully!`) // send the next one - nowSending = emails.pop() + nowSending = emails.shift() if (!!nowSending) { socket.send(JSON.stringify(nowSending)) console.log(`Sending: ${nowSending.to}`) + + // update the counter for the progress bar + emailsSoFar += 1 } else { socket.close() - step = 2 + step = 5 } } else { console.error('Something went wrong :(') @@ -353,21 +372,30 @@ {/if} {#if step == 4} -
- {#if !!nowSending } -
-
-

From: {nowSending.from || '[NOBODY!!!]'}

-

To: {nowSending.to || '[NOBODY!!!]'}

-
- {@html nowSending.html} -
+ Email Oven with cookies inside +

Chip Choc

+

Your cookies are being cut...

+ {emailsToSend ? emailsSoFar/emailsToSend*100 : 0} % + + {#if !!nowSending } +
+
+

From: {nowSending.from || '[NOBODY!!!]'}

+

To: {nowSending.to || '[NOBODY!!!]'}

+
+ {@html nowSending.html}
- {/if} -

Chip Choc

-

Your cookies are being cut...

{/if} + {/if} + + {#if step == 5} + A Pile of Cookies +

Wheee!

+

All emails sent successfully.

+ + + {/if} @@ -431,4 +459,16 @@ padding: 1em; border: 1px solid black; } + + progress { + width: 100%; + max-width: 640px; + margin: 1em; + color: #800020; + } + + progress::-moz-progress-bar, + progress::-webkit-progress-value { + background-color: #800020; + } diff --git a/src/pics/email-baking.svg b/src/pics/email-baking.svg new file mode 100644 index 0000000..b358214 --- /dev/null +++ b/src/pics/email-baking.svg @@ -0,0 +1,271 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +