-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #115 from RuneLabsxyz/Better-UI
Better UI
- Loading branch information
Showing
18 changed files
with
584 additions
and
7,996 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| <script lang="ts"> | ||
| import { createEventDispatcher } from 'svelte'; | ||
| import { goto } from '$app/navigation'; | ||
| import { username, account, clearAccountStorage } from '$stores/account'; | ||
| import Button from '$lib/ui/Button.svelte'; | ||
| export let show = false; | ||
| const dispatch = createEventDispatcher(); | ||
| function closeModal() { | ||
| dispatch('close'); | ||
| } | ||
| function logout() { | ||
| clearAccountStorage(); | ||
| closeModal(); | ||
| goto('/'); | ||
| } | ||
| let showCopied = false; | ||
| function compressAddress(address: string): string { | ||
| if (!address) return 'Not available'; | ||
| return `${address.slice(0, 6)}...${address.slice(-4)}`; | ||
| } | ||
| function copyAddress() { | ||
| if ($account && $account.address) { | ||
| navigator.clipboard.writeText($account.address) | ||
| .then(() => { | ||
| showCopied = true; | ||
| setTimeout(() => showCopied = false, 2000); | ||
| }) | ||
| .catch(err => console.error('Failed to copy: ', err)); | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| {#if show && $account && $username} | ||
| <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> | ||
| <div class="bg-white border-4 border-black rounded-lg p-6 w-11/12 max-w-md"> | ||
| <div class="flex items-center mb-4"> | ||
| <img src="/logos/controller/controller.png" alt="Controller" class="w-12 h-12 mx-auto" /> | ||
| </div> | ||
| <div class="mb-4 space-y-4"> | ||
| <div class="flex flex-col items-center space-y-2"> | ||
| <p class="font-bold text-lg">{$username.toUpperCase()}</p> | ||
| <div class="flex items-center"> | ||
| <span class="break-all">{compressAddress($account?.address)}</span> | ||
| <button | ||
| on:click={copyAddress} | ||
| class="ml-2 px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded text-sm" | ||
| > | ||
| Copy | ||
| </button> | ||
| </div> | ||
| {#if $account?.address && showCopied} | ||
| <span class="text-green-600 text-sm">Copied!</span> | ||
| {/if} | ||
| <p class="text-sm text-center mt-2"> | ||
| Top up some STARK on this address to start playing! | ||
| </p> | ||
| </div> | ||
| <slot></slot> | ||
| </div> | ||
| <div class="flex justify-between"> | ||
| <Button on:click={logout}>Logout</Button> | ||
| <Button on:click={closeModal}>Close</Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {/if} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| <script lang="ts"> | ||
| import { dojoStore } from '$stores/dojoStore' | ||
| import { componentValueStore } from '$dojo/componentValueStore' | ||
| import GameList from '$lib/games/GameList.svelte' | ||
| import { type Entity } from '@dojoengine/recs' | ||
| import Button from '$lib/ui/Button.svelte' | ||
| import { cn } from '$lib/css/cn' | ||
| import { goToSession, joinSession } from '$lib/game' | ||
| import { account } from '$stores/account' | ||
| let availableSessions: any = null | ||
| let currentSessions: any = null | ||
| let playerEntity: Entity | ||
| $: ({ clientComponents, torii, client } = $dojoStore as any) | ||
| $: globalentity = torii.poseidonHash([BigInt(0).toString()]) | ||
| $: if ($account) playerEntity = torii.poseidonHash([$account?.address]) | ||
| $: global = componentValueStore(clientComponents.Global, globalentity) | ||
| $: player = componentValueStore(clientComponents.Player, playerEntity) | ||
| $: if ($global) { | ||
| if ($player) { | ||
| console.log('player', $player) | ||
| currentSessions = $player.games.map((game: { value: any }) => game.value) | ||
| let playerGames = new Set(currentSessions) | ||
| currentSessions = currentSessions.map((e: any) => ({ value: e })) | ||
| availableSessions = $global.pending_sessions.filter( | ||
| (session: { value: unknown }) => !playerGames.has(session.value) | ||
| ) | ||
| console.log('currentSessions', currentSessions, currentSessions.length) | ||
| console.log( | ||
| 'availableSessions', | ||
| availableSessions, | ||
| availableSessions.length | ||
| ) | ||
| } else { | ||
| availableSessions = $global.pending_sessions | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <div class={cn('flex flex-col h-full')}> | ||
| <div class="flex p-5 py-2 mb-4 items-center border-b-4 border-black"> | ||
| <h1 class="text-3xl font-bold">Play</h1> | ||
| <span class="flex-grow"></span> | ||
| <Button href="/client/games/create">+ New Game</Button> | ||
| </div> | ||
| <div | ||
| class={cn('flex flex-col', { | ||
| 'justify-center': !availableSessions, | ||
| })} | ||
| > | ||
| {#if availableSessions && availableSessions.length > 0} | ||
| <h1 class="text-xl ml-5 mb-3 font-bold">Games available</h1> | ||
| <GameList | ||
| {availableSessions} | ||
| on:select={(session) => joinSession(session.detail)} | ||
| /> | ||
| {:else} | ||
| <div class="self-center align-middle flex flex-col gap-2"> | ||
| <p>No games are currently available.</p> | ||
| <Button href="/client/games/create">+ New Game</Button> | ||
| </div> | ||
| {/if} | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- | ||
| <div class="flex justify-between p-4 fixed bottom-0 left-0 right-0 bg-white"> | ||
| <button | ||
| class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-700 transition" | ||
| on:click={() => { | ||
| window.location.href = '/' | ||
| }}>Back</button | ||
| > | ||
| <button | ||
| class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition" | ||
| on:click={() => { | ||
| goto('/client/games/create') | ||
| }}>Create Game</button | ||
| > | ||
| </div> | ||
| --> |
Oops, something went wrong.