Browse Source

* Fixed map customization changing map size with walls

master
vvandenb 2 years ago
parent
commit
7e055a93f6
  1. 10
      front/volume/src/components/Pong/MapCustomization.svelte

10
front/volume/src/components/Pong/MapCustomization.svelte

@ -2,7 +2,7 @@
import { onMount } from "svelte"; import { onMount } from "svelte";
import { Point, Rect } from "./utils"; import { Point, Rect } from "./utils";
import type { Map } from "./Map"; import type { Map } from "./Map";
import { DEFAULT_BALL_SIZE } from "./constants"; import { DEFAULT_BALL_SIZE, DEFAULT_MAP_SIZE } from "./constants";
export let map: Map; export let map: Map;
let canvas: HTMLCanvasElement; let canvas: HTMLCanvasElement;
@ -62,15 +62,19 @@
const index = map.walls.findIndex((w) => w.collides(click)); const index = map.walls.findIndex((w) => w.collides(click));
if (index != -1) map.walls.splice(index, 1); if (index != -1) map.walls.splice(index, 1);
} }
function sizeChange() {
map.walls = [];
}
</script> </script>
<div> <div>
<h1>Map Customization:</h1> <h1>Map Customization:</h1>
<div> <div>
Width: Width:
<input type="range" min="400" max="1000" bind:value={map.size.x} /> <input type="range" min={DEFAULT_MAP_SIZE.x} max=1000 bind:value={map.size.x} on:input={sizeChange} />
Height: Height:
<input type="range" min="300" max="800" bind:value={map.size.y} /> <input type="range" min={DEFAULT_MAP_SIZE.y} max=800 bind:value={map.size.y} on:input={sizeChange} />
</div> </div>
<canvas <canvas
bind:this={canvas} bind:this={canvas}

Loading…
Cancel
Save