From 7e055a93f69a56ee1ebacf53e02e6eccdbd70248 Mon Sep 17 00:00:00 2001
From: vvandenb <vvandenb12@gmail.com>
Date: Mon, 6 Mar 2023 07:44:22 +0100
Subject: [PATCH] * Fixed map customization changing map size with walls

---
 .../volume/src/components/Pong/MapCustomization.svelte | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/front/volume/src/components/Pong/MapCustomization.svelte b/front/volume/src/components/Pong/MapCustomization.svelte
index d3f21cf..29b2f36 100644
--- a/front/volume/src/components/Pong/MapCustomization.svelte
+++ b/front/volume/src/components/Pong/MapCustomization.svelte
@@ -2,7 +2,7 @@
   import { onMount } from "svelte";
   import { Point, Rect } from "./utils";
   import type { Map } from "./Map";
-  import { DEFAULT_BALL_SIZE } from "./constants";
+  import { DEFAULT_BALL_SIZE, DEFAULT_MAP_SIZE } from "./constants";
 
   export let map: Map;
   let canvas: HTMLCanvasElement;
@@ -62,15 +62,19 @@
     const index = map.walls.findIndex((w) => w.collides(click));
     if (index != -1) map.walls.splice(index, 1);
   }
+
+  function sizeChange() {
+    map.walls = [];
+  }
 </script>
 
 <div>
   <h1>Map Customization:</h1>
   <div>
     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:
-    <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>
   <canvas
     bind:this={canvas}