Spaces:
Running
Running
| <script lang="ts"> | |
| // Svelte | |
| import { onMount } from "svelte"; | |
| import { page } from "$app/stores"; | |
| // Images | |
| import preview from "$lib/images/preview.png"; | |
| // Variables | |
| let isMobile: boolean = false; | |
| let isLinkCopied: boolean = false; | |
| onMount(() => { | |
| if (window.innerWidth < 768) { | |
| isMobile = true; | |
| } | |
| }); | |
| function copyToClipboard(): void { | |
| navigator.clipboard.writeText($page.url.toString()); | |
| isLinkCopied = true; | |
| } | |
| </script> | |
| <!--Main container--> | |
| <div | |
| class="flex flex-col justify-center text-slate-100 font-Hellovetica items-center p-4 w-full" | |
| > | |
| <!--Title container--> | |
| <div | |
| class="flex flex-col justify-center items-center space-y-4 text-center sm:mt-20 mt-12" | |
| > | |
| <h1 class="text-xl capitalize">Spaceship freeride</h1> | |
| <p class="text-xs">Take a break and enjoy a little freeride.</p> | |
| </div> | |
| {#if !isMobile} | |
| <div class="relative mt-10 border-slate-800 border-[3px]"> | |
| <!--Game--> | |
| <iframe | |
| src="game/index.html" | |
| frameborder="0" | |
| title="Spaceship Drift" | |
| height="512" | |
| width="512" | |
| class="" | |
| /> | |
| <!--Corners--> | |
| <div | |
| class="h-[3px] bg-[#0C0F19] w-[3px] z-10 absolute -top-[3px] -left-[3px]" | |
| /> | |
| <div | |
| class="h-[3px] bg-[#0C0F19] w-[3px] z-10 absolute -bottom-[3px] -left-[3px]" | |
| /> | |
| <div | |
| class="h-[3px] bg-[#0C0F19] w-[3px] z-10 absolute -top-[3px] -right-[3px]" | |
| /> | |
| <div | |
| class="h-[3px] bg-[#0C0F19] w-[3px] z-10 absolute -bottom-[3px] -right-[3px]" | |
| /> | |
| </div> | |
| <!--Infos--> | |
| <div | |
| class="flex flex-row justify-center items-center text-[9px] mt-4 text-slate-500" | |
| > | |
| <p>Use arrow keys. SPACE to fire.</p> | |
| </div> | |
| {/if} | |
| {#if isMobile} | |
| <div class="flex flex-col justify-center items-center mt-10 text-center"> | |
| <img | |
| src={preview} | |
| alt="Preview of the game" | |
| class="w-60 border-slate-800 border-[2px]" | |
| height="64" | |
| width="64" | |
| /> | |
| <p class="text-xs text-slate-500 mt-6"> | |
| Looks like you're on mobile! Please visit on your laptop. | |
| </p> | |
| <button | |
| on:click|preventDefault={copyToClipboard} | |
| class="flex flex-row justify-center items-center px-3 py-5 text-xs w-full bg-slate-800 mt-6" | |
| > | |
| <p class="mt-1"> | |
| {isLinkCopied ? "Copied!" : "Copy the link for later"} | |
| </p> | |
| </button> | |
| </div> | |
| {/if} | |
| {#if !isMobile} | |
| <!--It's all about the Game feel--> | |
| <p class="text-center mt-2 text-[9px] text-slate-500">It's all about <a href="https://arxiv.org/pdf/2011.09201.pdf" target="_blank" class="tex-center underline">game feel</a></p> | |
| {/if} | |
| <!--Credits--> | |
| <div | |
| class="flex flex-row justify-center items-center text-center {isMobile ? "mt-20" : "fixed bottom-6"} text-[9px] text-slate-500" | |
| > | |
| <p> | |
| Made by <a href="https://www.hugoduprez.com/" target="_blank" class="underline">Hugo</a | |
| > | |
| with | |
| <a href="https://godotengine.org/" target="_blank" class="underline" | |
| >Godot</a | |
| >, | |
| <a href="https://svelte.dev/" target="_blank" class="underline">Svelte</a | |
| >, | |
| <a href="https://www.scenario.com/" target="_blank" class="underline" | |
| >Scenario</a | |
| >, and | |
| <a href="https://www.pixelicious.xyz/" target="_blank" class="underline" | |
| >Pixelicious</a | |
| > | |
| </p> | |
| </div> | |
| </div> | |