sivkyne/src/lib/calculator/Calculator.svelte

<script lang="ts">
    import Button from "$lib/header/Button.svelte";
    import { onMount } from "svelte";
    import words from "$lib/en-lang.json";
import { base } from "$app/paths";

    let lang = words["calculator"];
    let types = lang["types"];

    interface Commission {
        type: string,
        name: string,
        price: number,
        example: string,
        questions?: any[],
        answers?: any[],
    }

    let commissions: Commission[] = [];

    let number: number;
    $: number = commissions.length + 1;

    function setup() {
        const urlParams = new URLSearchParams(window.location.search);
        urlParams.forEach((value, key) => {
            if(key == "commissions") {
                commissions = JSON.parse(value);
            }
        });
        if(commissions.length == 0) base();
    }

    function update_example(commission: Commission) {
        let lastQuestion = commission.questions[commission.questions.length - 1];
        let lastAnswer = commission.answers[commission.answers.length - 1];
        let example = "";
        commission.example = "";
        let type = types.filter(value => {
            return value['name'] == commission.type;
        });
        type = type[0];

        let count = 0;
        commission.questions.forEach(value => {
            if(type['examples_from'] == value['name']) {
                lastQuestion = commission.questions[count];
                lastAnswer = commission.answers[count];
            }
            count++;
        })

        lastQuestion.options.forEach(value => {
            if(value['name'] == lastAnswer['option']) {
                example = value['example'];
            }
        });

        console.log(example);

        type['examples'].forEach(value => {
            if(value['name'] == example) {
                commission.example = value['url'];
            }
        });
    }

    function base() {
        let commission = {
            "type": types[0]["name"],
            "name": "Commission " + number,
            "example": types[0]["example"],
            "price": 10,
        };
        update_commission_type(commission);
        update_example(commission);
        update_price(commission);
        commissions.push(commission);
        commissions = commissions;
    }

    function save() {
        const urlParams = new URLSearchParams(window.location.search);
        urlParams.set("commissions", JSON.stringify(commissions));

        let url = window.location.origin + window.location.pathname + "?" + urlParams.toString();

        navigator.clipboard.writeText(url);
        window.history.replaceState( {} , document.title, url);
    }

    function update_commission_type(commission: Commission) {
        types.forEach(element => {
            if(element["name"] == commission.type) {
                commission.questions = element["questions"];
            }
        });
        commission.answers = [];
        commission.questions.forEach(value => {
            commission.answers.push({'name': value.name, 'option': value.options[0]['name']});
        });
        update_price(commission);
        update_example(commission);
        console.log(commission.answers);
    }

    function update_price(commission: Commission) {
        commission.price = 0;

        for (let index = 0; index < commission.questions.length; index++) {
            const question = commission.questions[index];
            const answer = commission.answers[index];

            question['options'].forEach(value => {
                if(value['name'] == answer['option']) {
                    commission.price += value['price'];
                }
            });
        }
    }

    async function load() {
        window.location.href = await navigator.clipboard.readText();
    }

    function createNew() {
        base();
        save();
    }

    function remove(name: string) {
        commissions = commissions.filter(value => {
            return value.name != name;
        });
        save();
    }

    onMount(() => {
        setup();
    });
</script>

<main class="container flex flex-col gap-5">
    <section class="container bg-slate-800 rounded-lg shadow-lg p-3 flex flex-col w-full gap-5">
        <nav class="flex flex-col lg:flex-row gap-3 justify-between justify-items-stretch items-center">
            <Button href="/">⬅️ Back to home</Button>
            <Button href="/commissions">🎨 Visit commissions page</Button>
            <Button href="/commissions/tos">⚖️ Read Terms of Service</Button>
        </nav>
    </section>

    <section class="container bg-slate-800 rounded-lg shadow-lg p-5 flex flex-col w-full gap-10">
        <div class="flex justify-between -ml-2 -mr-2">
            <div class="w-full flex gap-3">
                <span><Button on:click={createNew}>➕ Add Commission</Button></span>
            </div>
            <div class="w-full flex justify-end gap-3">
                <span><Button on:click={save}>💾 Save to Clipboard</Button></span>
                <span><Button on:click={load}>✨ Load from Clipboard</Button></span>
            </div>
        </div>

        <div class="flex items-center justify-between">
            <div class="flex items-center gap-5">
                <h3 class="text-6xl">🧮</h3>
                <div class="flex flex-col gap-2">
                    <div class="flex gap-3">
                        <h4 class="text-xl font-bold">Total</h4>
                        <p class="bg-green-500 py-1 text-sm px-5 rounded-lg">$20</p>
                    </div>
                    <p class="italic text-gray-200 text-sm">This figure is an estimate, the final price may differ.<br/>All commissions are strictly SFW only.</p>
                </div>
            </div>
        </div>
    </section>

    {#each [...commissions].reverse() as commission}
        <section class="flex gap-5">
            <div class="w-3/5 bg-slate-800 rounded-lg shadow-lg p-5 flex flex-col gap-5">
                <div class="flex justify-between">
                    <h3 class="text-xl font-bold flex gap-5">{commission.name}<p class="bg-green-500 py-1 text-sm px-5 rounded-lg">${commission.price}</p></h3>
                    <span>
                        <Button on:click={() => {remove(commission.name)}}>🗑️</Button>
                    </span>
                </div>

                <form class="flex flex-col gap-10" on:change={() => {update_example(commission)}}>
                    <div class="flex flex-col gap-1">
                        <label for={commission.type}>Type of commission</label>
                        <select class="bg-slate-600 p-2 rounded-lg" bind:value={commission.type} on:change={() => {update_commission_type(commission)}}>
                            {#each types as question}
                                <option value={question.name}>{question.name}</option>
                            {/each}
                        </select>
                    </div>

                    {#each commission.questions as question, key}
                        <div class="flex flex-col gap-1">
                            <label for={commission.answers[key]['option']}>{question.name}</label>
                            <select class="bg-slate-600 p-2 rounded-lg" bind:value={commission.answers[key]['option']} on:change={() => {update_price(commission)}}>
                                {#each question.options as option}
                                    <option value={option.name}>{option.name} | ${option.price}</option>
                                {/each}
                            </select>
                        </div>
                    {/each}
                </form>
            </div>

            <div class="w-2/5">
                {#if commission.example != ""}
                    <div class="relative bg-black bg-opacity-50 rounded-xl shadow-xl">
                        <p class="xl:block hidden absolute top-0 right-0 text-right -rotate-12 font-bold text-4xl -mb-40 -mr-40">
                            🠔 Example!
                        </p>
                        <img src={commission.example} alt="example" class="rounded-xl shadow-xl w-full" />
                    </div>
                {:else}
                    <div class="relative w-full aspect-square bg-black bg-opacity-50 rounded-xl shadow-xl">
                        <p class="w-full h-full absolute inset-0 flex items-center justify-center text-center opacity-50 -rotate-45 font-bold text-6xl">
                            NO EXAMPLE AVAILABLE
                        </p>
                    </div>
                {/if}
            </div>
        </section>
    {/each}
</main>