<script lang="ts">
    import Header from "$lib/header.svelte";
    import GamedevWebring from "$lib/webrings/gamedev.svelte";

    var lastIndex = -1;
    let meImg: string = "common/me/a.webp";

    function getRandom(to: number): number {
        var buf = new Uint8Array(1);
        crypto.getRandomValues(buf);
        if (buf[0] % to == lastIndex) {
            return getRandom(to);
        }
        lastIndex = buf[0] % to;
        return buf[0] % to;
    }
    let setPicture = function() {
        var pictures = ["a", "b", "c", "e", "f"];
        var selectedPicture = pictures[getRandom(pictures.length)];
        meImg = "common/me/" + selectedPicture + ".webp";
    };
</script>

<Header />

<h1><i>Moin!</i> ~ welcome to my website :)</h1>
<p><a href="/projects/projectn5/devlog">projects</a></p>

<div class="container">
    <div class="subcontainer">
        
    </div>
    <div class="subcontainer">
        <h3>about ↬<img id="me-img" class="me-img" title="hi there" src={meImg} onclick={setPicture}>↫ me </h3>

        <p>Hi! I'm Deniz. I'm a programmer, sometimes a music producer, and rarely a hard-working student in Northern Germany. Welcome to my webpage!</p>

        <p>Here you can find information on things I like sharing. check out my projects, especially the devlog of the game I'm working on!</p>

        <h3>contact me: how to</h3>

        <p>Feel free to contact me via these means:</p>

        <GamedevWebring />
    </div>
</div>

<style>
    .container {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .subcontainer {
        max-width: 50%;
    }
    .subcontainer:last-child {
        margin-left: 16px;
    }
    .me-img {
        width: 32px;
        display: inline-block;
    }
</style>