github/wasm-pong
1
0
Fork 0
mirror of https://github.com/thilo-behnke/wasm-pong.git synced 2026-05-21 03:02:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

enhancement/ui-improvements-for-pong

Browse Source
This commit is contained in:
Thilo Behnke
2022-07-03 16:49:55 +02:00
parent bc4ecc21ab
commit f3cded9b6b
7 changed files with 37 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,6 +11,7 @@
import type {Readable} from "svelte/store";
import {SessionType} from "./store/model/session";
import EvenTicker from "./components/EvenTicker.svelte";
import Line from "./components/Line.svelte";
let sessionStore: Readable<SessionStore>;
let debug = false;
@@ -57,14 +58,15 @@
></ModeSelect>
</div>
{:else}
<SessionWrapper session={session} let:inputs={inputs} let:tick={tick} let:events={events}>
<SessionWrapper session={session} let:inputs={inputs} let:tick={tick} let:events={events} let:handleError={handleError}>
<div class="game-area">
<div class="game-area__session">
<SessionInfo session={session}></SessionInfo>
</div>
<div class="game-area__canvas">
<Canvas debug={debug} session={session} inputs={inputs} tick={tick} on:tick={event => tick(...event.detail)}>
<Canvas debug={debug} session={session} inputs={inputs} tick={tick} handleError={handleError} on:tick={event => tick(...event.detail)} let:dimensions={dimensions}>
<Fps></Fps>
<Line x={dimensions.width / 2} y={0} height={dimensions.height} dashed={true}></Line>
</Canvas>
</div>
<div class="game-area__hud">

3
client/svelte-client/src/components/Canvas.svelte
View File

@@ -95,7 +95,6 @@
style="width: {$width}px; height: {$height}px;"
></canvas>
<svelte:window on:resize|passive={handleResize}/>
<slot></slot>
<slot dimensions={{width: $width, height: $height}}></slot>
<style>
</style>

21
client/svelte-client/src/components/Line.svelte Normal file
View File

@@ -0,0 +1,21 @@
<script lang="ts">
import {renderable} from "../store/engine";
import {drawLine, mainColor} from "../store/render";
export let x = 0;
export let y = 0;
export let height = 0;
export let dashed: boolean = false;
renderable(props => {
const { engineCtx: ctx } = props;
ctx.fillStyle = mainColor;
if (dashed) {
ctx.setLineDash([5, 15]);
}
drawLine(ctx, x, y, x, height, mainColor);
ctx.setLineDash([]);
});
</script>
<slot></slot>

8
client/svelte-client/src/components/SessionWrapper.svelte
View File

@@ -13,12 +13,12 @@
{#if !session}
<h1>no session</h1>
{:else if session.type === SessionType.LOCAL}
<LocalSessionWrapper session={session} let:inputs={inputs} let:objects={objects} let:tick={tick} let:events={events}>
<slot inputs={inputs} objects={objects} tick={tick} events={events}></slot>
<LocalSessionWrapper session={session} let:inputs={inputs} let:objects={objects} let:tick={tick} let:events={events} let:handleError={handleError}>
<slot inputs={inputs} objects={objects} tick={tick} events={events} handleError={handleError}></slot>
</LocalSessionWrapper>
{:else}
<NetworkSessionWrapper session={session} let:inputs={inputs} let:objects={objects} let:tick={tick} let:events={events}>
<slot inputs={inputs} objects={objects} tick={tick} events={events}></slot>
<NetworkSessionWrapper session={session} let:inputs={inputs} let:objects={objects} let:tick={tick} let:events={events} let:handleError={handleError}>
<slot inputs={inputs} objects={objects} tick={tick} events={events} handleError={handleError}></slot>
</NetworkSessionWrapper>
{/if}
</div>

2
client/svelte-client/src/components/Text.svelte
View File

@@ -15,7 +15,7 @@
renderable(props => {
const { engineCtx: ctx } = props;
if (text) {
ctx.fillStyle = 'black';
ctx.fillStyle = color;
ctx.font = `${fontSize}px ${fontFamily}`;
ctx.textAlign = align;
ctx.textBaseline = baseline;

4
client/svelte-client/src/store/render.ts
View File

@@ -1,6 +1,6 @@
import main from "../main";
const mainColor = '#ff3e00';
export const mainColor = '#ff3e00';
export const drawObjects = (ctx: CanvasRenderingContext2D, objects, [width, height], debug = false) => {
objects.forEach(obj => {
@@ -33,7 +33,7 @@ export const drawObjects = (ctx: CanvasRenderingContext2D, objects, [width, heig
})
}
const drawLine = (ctx, from_x, from_y, to_x, to_y, color) => {
export const drawLine = (ctx, from_x, from_y, to_x, to_y, color) => {
ctx.beginPath();
ctx.moveTo(from_x, from_y);
ctx.strokeStyle = color;

8
pong/src/game_field.rs
View File

@@ -242,8 +242,8 @@ impl DefaultGameObject {
y: y as f64,
},
Vector::new(0., 1.),
(field.width as f64) / 25.,
(field.height as f64) / 4.,
(field.width as f64) / 60.,
(field.height as f64) / 10.,
))),
Box::new(DefaultPhysicsComp::new(Vector::zero(), true)),
))
@@ -261,7 +261,7 @@ impl DefaultGameObject {
y: y as f64,
},
Vector::zero(),
(field.width as f64) / 80.,
(field.width as f64) / 120.,
))),
Box::new(DefaultPhysicsComp::new(Vector::zero(), false)),
))
@@ -349,7 +349,7 @@ pub enum Bound {
TOP,
RIGHT,
BOTTOM,
LEFT,
LEFT
}
pub struct Bounds(pub Bound, pub Box<dyn GameObject>);