Electron-Svelte-Recipe-Planner/package/App.svelte
2021-12-16 00:55:59 -05:00

138 lines
No EOL
3 KiB
Svelte

<script>
import Uwu from './uwu.svelte'
var myWorker = new Worker('./worker.js')
var state = 0
var question = []
//temporary list. The var needs to exist to be replaced... Consider this init
var ping = [["a", "b", "c", "d"]]
const fs = require("fs")
//this reads the last
var read = fs.readFileSync("./public/q.json", "utf8")
myWorker.postMessage(read)
function playnut(){
console.log
var nut = new Audio("nut.mp3");
nut.play();
}
const onKeyPress = e => {
var value = document.getElementById("etc").value
if (e.charCode === 13) {
state = 1
if(value.length > 2){
if (state != 1){
}
myWorker.postMessage(value)
}
}
}
function smallSend(){
try{
var value = document.getElementById("etc").value
if(value.length > 2){
// ≈ used to denote that this is a small message.
if (state != 1){ state = 1 }
myWorker.postMessage(value+="≈")
console.log("supposedly sent", value)
}
}
catch { console.log("whatever") }
}
setInterval(smallSend, 500)
function goBack(){
console.log(question)
state = state-1; ping = []}
myWorker.onmessage = function(message) {
message = message["data"]
console.log(message)
if(message.includes("≈")){
console.log("recieved small")
ping = []
var messageParse = message.slice(0, -1).split(",")
//removes the ≈ denoting its a small message
ping = [...ping, [messageParse[1], messageParse[2], messageParse[3], messageParse[4], messageParse[5]]]
}
else{
ping = []
//converts the string to an array.
var sdo = JSON.parse(message)
console.log(sdo[0])
for(var x in sdo){
ping = [...ping,
[
sdo[x]["name"], sdo[x]["author"], sdo[x]["url"], sdo[x]["dateadded"], sdo[x]["imgurl"]
]
]
}
document.getElementById("etc").value = ""
console.log(ping.test)
}
console.log(ping[0])
}
</script>
<main>
<input id=etc on:keypress={onKeyPress} required>
{#if state == 0}
<button id="test" on:click={playnut}>can touch this</button>
{:else}
<button on:click={goBack}>
"GO BACK"
</button>
<div class="scroll">
{#each ping as x}
<Uwu title={x[0]}
author={x[1]}
subtitle={x[2]}
buttontext={x[3]} pulltext={"text"}
img={x[4]}
testlist = {question}/>
{/each}
</div>
{/if}
</main>
<style>
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
}
#etc { background: yellow; }
#etc:valid { outline: solid blue 2px; }
#etc:invalid { outline: solid red 2px; }
#abcd {
\or: #ff3e00;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
#abc {
color: #39c221;
text-transform: uppercase;
font-size: 6em;
font-weight: 100;
}
@media (min-width: 640px) {
main {
max-width: none;
}
}
.scroll
{
overflow: hidden;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
</style>