Spaces:
Running
Running
File size: 3,165 Bytes
1f90db4 747e8bf b64c993 1f90db4 b64c993 1f90db4 b64c993 1f90db4 b64c993 1f90db4 b64c993 747e8bf b64c993 7895b26 803c2f1 b64c993 46d5f0e b64c993 7895b26 fb27964 b64c993 747e8bf b64c993 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
<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>
|