github/wasm-pong
1
0
Fork 0
mirror of https://github.com/thilo-behnke/wasm-pong.git synced 2026-07-28 10:41:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

select game mode before game starts

Browse Source
This commit is contained in:
Thilo Behnke
2022-06-19 22:18:20 +02:00
parent 842f65d16c
commit f63e6b12fc
4 changed files with 108 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
client/svelte-client/src/Action.svelte
View File

@@ -5,6 +5,10 @@
let sessionId = '';
const localSession = () => {
dispatch("local-create")
}
const createSession = () => {
dispatch("session-create")
}
@@ -29,10 +33,11 @@
</script>
<div class="game-actions">
<button on:click={() => createSession()}>Create Session</button>
<button on:click={() => localSession()}>Create Local Game</button>
<button on:click={() => createSession()}>Create Online Game</button>
<input bind:value={sessionId}/>
<button on:click={() => joinSession()}>Join Session</button>
<button on:click={() => watchSession()}>Watch Session</button>
<button on:click={() => joinSession()}>Join Online Game</button>
<button on:click={() => watchSession()}>Watch Online Game</button>
<button on:click={() => toggleDebug()}>Toggle Debug</button>
</div>

182
client/svelte-client/src/App.svelte
View File

@@ -1,97 +1,115 @@
<script lang="ts">
import { FieldWrapper } from "wasm-app";
import Canvas from "./Canvas.svelte";
import Fps from "./Fps.svelte";
import {keysPressed} from "./game/engine";
import Input from "./Input.svelte";
import {setContext} from "svelte";
import {sessionContext, sessionStore} from "./game/session";
import Action from "./Action.svelte";
import {network, networkContext} from "./game/network";
import {FieldWrapper} from "wasm-app";
import Canvas from "./Canvas.svelte";
import Fps from "./Fps.svelte";
import {keysPressed} from "./game/engine";
import Input from "./Input.svelte";
import {setContext} from "svelte";
import {sessionContext, sessionStore} from "./game/session";
import Action from "./Action.svelte";
import {network, networkContext} from "./game/network";
setContext(sessionContext, sessionStore);
setContext(networkContext, network);
setContext(sessionContext, sessionStore);
setContext(networkContext, network);
let debug = false;
let debug = false;
function handleKeydown({key}) {
if ($keysPressed.includes(key)) {
return;
}
$keysPressed = [...$keysPressed, key]
}
function handleKeyup({key}) {
if (!$keysPressed.includes(key)) {
return;
}
$keysPressed = $keysPressed.filter(key => key !== key)
}
function createSession() {
$network.loading = true;
sessionStore.createNetworkSession().then(() => {
$network.loading = false;
})
}
function joinSession(sessionId) {
$network.loading = true;
sessionStore.joinNetworkSession(sessionId).then(() => {
$network.loading = false;
})
}
function watchSession(sessionId) {
$network.loading = true;
sessionStore.watchNetworkSession(sessionId).then(() => {
$network.loading = false;
})
}
function handleKeydown({key}) {
if ($keysPressed.includes(key)) {
return;
}
$keysPressed = [...$keysPressed, key]
}
function toggleDebug() {
debug = true;
}
function handleKeyup({key}) {
if (!$keysPressed.includes(key)) {
return;
}
$keysPressed = $keysPressed.filter(key => key !== key)
}
function localSession() {
sessionStore.createLocalSession();
}
function createSession() {
$network.loading = true;
sessionStore.createNetworkSession().then(() => {
$network.loading = false;
})
}
function joinSession(sessionId) {
$network.loading = true;
sessionStore.joinNetworkSession(sessionId).then(() => {
$network.loading = false;
})
}
function watchSession(sessionId) {
$network.loading = true;
sessionStore.watchNetworkSession(sessionId).then(() => {
$network.loading = false;
})
}
function toggleDebug() {
debug = true;
}
</script>
<main>
{#if $network.loading}
loading...
{:else}
{JSON.stringify($sessionStore)}
{/if}
<Action
on:session-create={() => createSession()}
on:session-join={({detail: sessionId}) => joinSession(sessionId)}
on:session-watch={({detail: sessionId}) => watchSession(sessionId)}
on:debug-toggle={() => toggleDebug()}
></Action>
<div class="game-area">
<Canvas debug={debug}>
<Fps></Fps>
</Canvas>
<Input inputs={$keysPressed}></Input>
</div>
{#if $network.loading}
loading...
{:else}
{JSON.stringify($sessionStore)}
{/if}
{#if !$sessionStore.session}
<div class="mode-select">
<Action
on:local-create={() => localSession()}
on:session-create={() => createSession()}
on:session-join={({detail: sessionId}) => joinSession(sessionId)}
on:session-watch={({detail: sessionId}) => watchSession(sessionId)}
on:debug-toggle={() => toggleDebug()}
></Action>
</div>
{:else}
<div class="game-area">
<Canvas debug={debug}>
<Fps></Fps>
</Canvas>
<Input inputs={$keysPressed}></Input>
</div>
{/if}
</main>
<svelte:window on:keydown={handleKeydown} on:keyup={handleKeyup}/>
<style>
main {
display: flex;
flex-flow: column;
justify-content: start;
align-items: center;
}
main {
display: flex;
flex-flow: column;
justify-content: start;
align-items: center;
}
.game-area {
display: flex;
}
.mode-select {
h1 {
color: #ff3e00;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
}
@media (min-width: 640px) {
main {
max-width: none;
}
}
.game-area {
display: flex;
}
h1 {
color: #ff3e00;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
@media (min-width: 640px) {
main {
max-width: none;
}
}
</style>

1
client/svelte-client/src/Canvas.svelte
View File

@@ -26,7 +26,6 @@
let listeners = [];
let session = getContext(sessionContext);
console.log(session)
onMount(() => {
ctx = canvas.getContext('2d');

0
client/svelte-client/src/game/event.ts
View File