<script lang="ts">
    import { onMount } from "svelte";
    import krgsay from "$lib/assets/krgsay.png";

    let content = '嗨小朋友们大家好！\n你们认识我是谁吗？';

    onMount(async () => {
        (window as any)['setContent'] = (_content: string) => {
            content = _content;
        };
    });
</script>

<div id="main" style={`background-image: url(${krgsay}); width: 800px; height: 800px; margin: 20px;`}>
    <div class="inner">{ content }</div>
</div>

<style>
@font-face {
    font-family: "QuanPixel 8px";
    src: url("$lib/assets/quan.ttf");
}

#main {
    font-family: "QuanPixel 8px";
    font-size: 32px;
    color: #658ca6;
    position: relative;
    line-height: 40px;
}

#main>.inner {
    position: absolute;
    left: 32px;
    top: 108px;
    width: 568px;
    height: 380px;
    padding: 0 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: pre-wrap;
}
</style>
