106 lines
3.5 KiB
Svelte
106 lines
3.5 KiB
Svelte
<script>
|
|
import UserListed from "$lib/components/UserListed.svelte";
|
|
export let game;
|
|
let state = 0;
|
|
|
|
function updateState(newState) {
|
|
state = newState;
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{game?.name} - Rowblox</title>
|
|
</svelte:head>
|
|
|
|
<div class="mx-auto rounded-lg shadow border border-gray-300 p-4 divide-y">
|
|
<div class="flex">
|
|
<img class="float-left h-[22.5rem]" alt="" src="/img/background.png" />
|
|
<div class="w-full flex flex-col pl-4">
|
|
<div class="max-w-[22.9rem]">
|
|
<p class="text-3xl font-bold truncate">{game?.name}</p>
|
|
<p class="text-zinc-500">By <a class="font-bold text-blue-500" href="/users/{game?.creator?._id}">{game?.creator?.username}</a></p>
|
|
</div>
|
|
<span class="flex-grow" />
|
|
<div class="flex">
|
|
<a class="flex-auto text-lg text-blue-500 px-4 py-0.5 rounded shadow-lg border-2 border-blue-500 hover:bg-opacity-50 hover:bg-blue-500 mr-0.5 mb-1 text-center" href="/games/{game?.id}/edit">
|
|
Edit
|
|
</a>
|
|
<button class="flex-auto text-lg text-blue-500 px-4 py-0.5 rounded shadow-lg border-2 border-blue-500 hover:bg-opacity-50 hover:bg-blue-500 ml-0.5 mb-1">Host</button>
|
|
</div>
|
|
<button class="text-2xl text-blue-500 px-4 py-2 rounded shadow-lg border-2 border-blue-500 hover:bg-opacity-50 hover:bg-blue-500">Play</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg shadow border border-gray-300 p-2 mt-4">
|
|
<div class="flex flex-row text-xl text-center text-black">
|
|
<button
|
|
class="flex-auto {state == 0 && 'font-bold text-black text-opacity-30'}"
|
|
on:click={() => {
|
|
updateState(0);
|
|
}}>About</button
|
|
>
|
|
<button
|
|
class="flex-auto {state == 1 && 'font-bold text-black text-opacity-30'}"
|
|
on:click={() => {
|
|
updateState(1);
|
|
}}>Store</button
|
|
>
|
|
<button
|
|
class="flex-auto {state == 2 && 'font-bold text-black text-opacity-30'}"
|
|
on:click={() => {
|
|
updateState(2);
|
|
}}>Players</button
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
{#if state == 0}
|
|
<div class="rounded-lg shadow border border-gray-300 p-2 mt-4 divide-y">
|
|
<div class="pb-2">
|
|
<p class="px-2 py-1 font-bold text-xl">Description</p>
|
|
<p class="px-2 text-black text-opacity-80">Test Game</p>
|
|
</div>
|
|
<div class="flex flex-row pb-2">
|
|
<div class="mx-4 mt-4 text-center flex-grow">
|
|
<p class="text-zinc-500 inline-block">Players</p>
|
|
<p class="">0</p>
|
|
</div>
|
|
<div class="mx-4 mt-4 text-center flex-grow">
|
|
<p class="text-zinc-500 inline-block">Visits</p>
|
|
<p class="">0</p>
|
|
</div>
|
|
<div class="mx-4 mt-4 text-center flex-grow">
|
|
<p class="text-zinc-500 inline-block">Created</p>
|
|
<p class="">10/10/22</p>
|
|
</div>
|
|
<div class="mx-4 mt-4 text-center flex-grow">
|
|
<p class="text-zinc-500 inline-block">Updated</p>
|
|
<p class="">10/10/22</p>
|
|
</div>
|
|
<div class="mx-4 mt-4 text-center flex-grow">
|
|
<p class="text-zinc-500 inline-block">Max Players</p>
|
|
<p class="">No Limit</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{:else if state == 1}
|
|
<div class="rounded-lg shadow border border-gray-300 p-2 mt-4">
|
|
<p class="px-2 py-1 font-bold text-xl">Gamepasses</p>
|
|
<p class="px-2 text-black text-opacity-80">This store does not have any gamepasses for sale.</p>
|
|
</div>
|
|
{:else if state == 2}
|
|
<div class="rounded-lg shadow border border-gray-300 p-2 mt-4">
|
|
<p class="px-2 py-1 font-bold text-xl">Players</p>
|
|
<p class="px-2 text-black text-opacity-80">This game does not have any players.</p>
|
|
</div>
|
|
|
|
<div class="rounded-lg shadow border border-gray-300 p-2 mt-4">
|
|
<p class="px-2 py-1 font-bold text-xl mb-1">Players</p>
|
|
<UserListed />
|
|
<UserListed />
|
|
<UserListed />
|
|
<UserListed />
|
|
</div>
|
|
{/if}
|