Lamp page seems to be working as before

client/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="container">
-    <div id="allBackground"></div>
     <RouterView />
+    <div id="allBackground"></div>
   </div>
 
   <div class="credits">
@@ -37,6 +37,14 @@ const currentYear = new Date().getFullYear();
   height: 100%;
 }
 
+#container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #333333;
+  color: white;
+}
+
 #allBackground {
   position: absolute;
   width: 120%;

client/src/assets/base.css

@@ -48,14 +48,6 @@ a.button {
   --base-color-fg: #ffffff;
 }
 
-#container {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background-color: #333333;
-  color: white;
-}
-
 h1 {
   margin: 0;
   display: flex;

client/src/views/GameOver.vue

@@ -10,7 +10,8 @@
 </template>
 
 <script lang="ts">
-export default {};
+import { defineComponent } from "vue";
+export default defineComponent({});
 </script>
 <style scoped>
 #wait,

client/src/views/GetReady.vue

@@ -12,7 +12,8 @@
 </template>
 
 <script lang="ts">
-export default {};
+import { defineComponent } from "vue";
+export default defineComponent({});
 </script>
 <style scoped>
 #getReady {

client/src/views/Home.vue

@@ -22,7 +22,8 @@
 </template>
 
 <script lang="ts">
-export default {};
+import { defineComponent } from "vue";
+export default defineComponent({});
 </script>
 <style scoped>
 #home {

client/src/views/HowTo.vue

@@ -18,7 +18,8 @@
 </template>
 
 <script lang="ts">
-export default {};
+import { defineComponent } from "vue";
+export default defineComponent({});
 </script>
 <style scoped>
 #how {

client/src/views/Join.vue

@@ -1,7 +1,8 @@
 <template></template>
 
 <script lang="ts">
-export default {};
+import { defineComponent } from "vue";
+export default defineComponent({});
 </script>
 <style scoped>
 #wait,

client/src/views/Lamp.vue

@@ -5,44 +5,139 @@
     </div>
     <div class="line">
       <label>Animation Mode</label>
-      <select name="animation" id="animation-picker">
-        <option value="None">None</option>
-        <option value="Strobe">Strobe</option>
-        <option value="Alternating">Alternating</option>
-        <option value="Rainbow">Rainbow</option>
-        <option value="Fire">Fire</option>
-        <option value="Fire rotating">Fire Wheel</option>
-        <option value="Stars">Stars</option>
-        <option value="Matrix">Matrix Wheel</option>
-        <option value="Sliding Window">Sliding Window</option>
-        <option value="Old School Segments">Old School Segments</option>
-        <option value="Game of Life">Game of Life</option>
+      <select
+        v-model="selectedAnimation"
+        @change="onNewAnimation"
+        name="animation"
+        id="animation-picker"
+      >
+        <option v-for="option in animationOptions" :value="option">
+          {{ option }}
+        </option>
       </select>
     </div>
     <div class="line">
       <label>Color 1</label>
       <div>
-        <input type="color" data-id="0" class="color-picker" />
+        <input
+          v-model="hexColors[0]"
+          @change="onNewColor"
+          type="color"
+          class="color-picker"
+        />
       </div>
     </div>
     <div class="line">
       <label>Color 2</label>
       <div>
-        <input type="color" data-id="1" class="color-picker" />
+        <input
+          v-model="hexColors[1]"
+          @change="onNewColor"
+          type="color"
+          class="color-picker"
+        />
       </div>
     </div>
     <div class="line">
       <label>Top Led Number</label>
       <div>
-        <input type="number" class="top-led-number" min="0" step="1" />
+        <input
+          v-model="topLedNb"
+          @change="onNewTopLed"
+          type="number"
+          class="top-led-number"
+          min="0"
+          step="1"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-export default {};
+import { defineComponent } from "vue";
+import { Color } from "../../../server/color";
+
+export default defineComponent({
+  data() {
+    return {
+      // TODO fetch current color
+      hexColors: ["#000000", "#000000"] as string[],
+      selectedAnimation: "",
+      // TODO Query from server
+      animationOptions: [
+        "None",
+        "Strobe",
+        "Alternating",
+        "Rainbow",
+        "Fire",
+        "Fire rotating",
+        "Stars",
+        "Matrix",
+        "Sliding Window",
+        "Old School Segments",
+        "Game of Life",
+      ],
+      topLedNb: 0,
+    };
+  },
+
+  computed: {
+    colors: {
+      get(): Color[] {
+        return this.hexColors.map((hex: string) => Color.fromHex(hex));
+      },
+      set(colors: Color[]) {
+        this.hexColors = colors.map((c) => Color.toHex(c));
+      },
+    },
+  },
+
+  mounted() {
+    // TODO
+  },
+
+  methods: {
+    // Color Picker
+    onNewColor() {
+      this.sendColors(this.colors);
+    },
+
+    onNewAnimation() {
+      this.sendAnimnation(this.selectedAnimation);
+    },
+
+    onNewTopLed() {
+      this.sendTopLedNb(this.topLedNb);
+    },
+
+    // Send colors to the server
+    sendColors(colors: Color[]) {
+      const xhr = new XMLHttpRequest();
+      xhr.open("POST", "/lamp/colors", true);
+      xhr.setRequestHeader("Content-Type", "application/json");
+      xhr.send(JSON.stringify(colors));
+    },
+
+    // Send animation mode to the server
+    sendAnimnation(animationName: string) {
+      const xhr = new XMLHttpRequest();
+      xhr.open("POST", "/lamp/animation", true);
+      xhr.setRequestHeader("Content-Type", "application/json");
+      xhr.send(JSON.stringify({ animation: animationName }));
+    },
+
+    // Send top led number to the server
+    sendTopLedNb(topLedNb: number) {
+      const xhr = new XMLHttpRequest();
+      xhr.open("POST", "/lamp/set-top-led", true);
+      xhr.setRequestHeader("Content-Type", "application/json");
+      xhr.send(JSON.stringify({ topLedNb }));
+    },
+  },
+});
 </script>
+
 <style scoped>
 input {
   height: 100%;

client/src/views/Play.vue

@@ -14,7 +14,8 @@
 </template>
 
 <script lang="ts">
-export default {};
+import { defineComponent } from "vue";
+export default defineComponent({});
 </script>
 <style scoped>
 #play .button {

client/src/views/Settings.vue

@@ -7,7 +7,8 @@
 </template>
 
 <script lang="ts">
-export default {};
+import { defineComponent } from "vue";
+export default defineComponent({});
 </script>
 <style scoped>
 #changeGameOptions {

client/src/views/Spectate.vue

@@ -9,7 +9,8 @@
 </template>
 
 <script lang="ts">
-export default {};
+import { defineComponent } from "vue";
+export default defineComponent({});
 </script>
 <style scoped>
 #spectate {

client/src/views/Wait.vue

@@ -9,11 +9,8 @@
 </template>
 
 <script lang="ts">
-export default {
-  data() {
-    return {};
-  },
-};
+import { defineComponent } from "vue";
+export default defineComponent({});
 </script>
 <style scoped>
 #wait {

server/color.ts

@@ -63,6 +63,22 @@ export class Color {
         });
     }
 
+    public static fromHex(hexString: string): Color {
+        return new Color(
+            parseInt(hexString.substring(1, 3), 16),
+            parseInt(hexString.substring(3, 5), 16),
+            parseInt(hexString.substring(5, 7), 16),
+            0
+        );
+    }
+
+    public static toHex(color: Color): string {
+        return "#" +
+            color.r.toString(16) +
+            color.g.toString(16) +
+            color.b.toString(16);
+    }
+
     constructor(public r: number, public g: number, public b: number, public w: number = 0) {}
 }