feat: initial commit

client/src/App.vue

@@ -0,0 +1,65 @@
+<template>
+  <div id="app">
+    <div class="toggle-button" @click="toggleFullScreen">
+      toggleFullScreen
+    </div>
+    <image-stream :path="streamSource"/>
+    <Nipple :position="'left'" @move="moveCamera"/>
+    <Nipple :position="'right'" @move="moveWalle"/>
+  </div>
+</template>
+
+<script>
+import ImageStream from './components/ImageStream.vue';
+import Nipple from './components/Nipple.vue';
+
+export default {
+  name: 'App',
+  mounted() {
+  },
+  data() {
+    return {
+      streamSource: '/imagestream.mjpg',
+    };
+  },
+  methods: {
+    toggleFullScreen() {
+      if (document.fullscreenElement) {
+        document.exitFullscreen();
+      } else {
+        window.document.body.requestFullscreen();
+      }
+    },
+    moveCamera({ distance, angle }) {
+      console.log({ action: 'camera', distance, angle });
+    },
+    moveWalle({ distance, angle }) {
+      this.$socket.emit('move', {
+        angle, distance,
+      });
+      // console.log({ action: 'walle', distance, angle });
+    },
+  },
+  components: {
+    ImageStream,
+    Nipple,
+  },
+};
+</script>
+
+<style lang="scss">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+}
+
+.toggle-button {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: #42b983;
+  color: white;
+}
+</style>