chore: eslint 9

jschirrmacher · Aug 11, 2024 · 381cb03 · 381cb03
1 parent 05785de
commit 381cb03
Show file tree

Hide file tree

Showing 28 changed files with 710 additions and 401 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -3,9 +3,9 @@
   "editor.formatOnSave": true,
   "files.eol": "\n",
   "[typescript]": {
-    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[vue]": {
-    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,20 @@
+import js from "@eslint/js"
+import pluginVue from "eslint-plugin-vue"
+import ts from "typescript-eslint"
+
+export default [
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  ...pluginVue.configs["flat/recommended"],
+  {
+    files: ['*.vue', '**/*.vue'],
+    languageOptions: {
+      parserOptions: {
+        parser: '@typescript-eslint/parser'
+      }
+    }
+  },
+  {
+    ignores: ["dist/"],
+  },
+]
diff --git a/frontend/App.vue b/frontend/App.vue
@@ -101,7 +101,11 @@ nextTick(resize)
     :camera-angle-y="-car.angle"
     :camera-zoom="camera.zoom"
   >
-    <TheCar :motor-speed-left="leftMotorSpeed" :motor-speed-right="rightMotorSpeed" :direction="car.angle" />
+    <TheCar
+      :motor-speed-left="leftMotorSpeed"
+      :motor-speed-right="rightMotorSpeed"
+      :direction="car.angle"
+    />
   </ThreeDeeWorld>
 </template>
 

diff --git a/frontend/components/ABox.vue b/frontend/components/ABox.vue
@@ -11,12 +11,12 @@ defineProps<{
 
 <template>
   <div class="box">
-    <div class="top"></div>
-    <div class="bottom"></div>
-    <div class="left"></div>
-    <div class="right"></div>
-    <div class="front"></div>
-    <div class="back"></div>
+    <div class="top" />
+    <div class="bottom" />
+    <div class="left" />
+    <div class="right" />
+    <div class="front" />
+    <div class="back" />
   </div>
 </template>
 

diff --git a/frontend/components/CarChassis.vue b/frontend/components/CarChassis.vue
@@ -10,7 +10,13 @@ defineProps<{
 </script>
 
 <template>
-  <ABox class="car-chassis" :length="length + 'px'" :width="width + 'px'" :height="height + 'px'" :color="color" />
+  <ABox
+    class="car-chassis"
+    :length="length + 'px'"
+    :width="width + 'px'"
+    :height="height + 'px'"
+    :color="color"
+  />
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/frontend/components/CarWheel.vue b/frontend/components/CarWheel.vue
@@ -34,10 +34,24 @@ const containerTransformTranslate = computed(() => `${-radius}px, ${-radius * 2}
 
 <template>
   <div class="wheel-container">
-    <div class="wheel" :style="animationSpeed">
-      <img class="side" :src="wheel" />
-      <img class="side" :src="wheel" />
-      <div v-for="(style, index) in tireStyles" :key="index" class="tire-tread" :style="style" />
+    <div
+      class="wheel"
+      :style="animationSpeed"
+    >
+      <img
+        class="side"
+        :src="wheel"
+      >
+      <img
+        class="side"
+        :src="wheel"
+      >
+      <div
+        v-for="(style, index) in tireStyles"
+        :key="index"
+        class="tire-tread"
+        :style="style"
+      />
     </div>
   </div>
 </template>

diff --git a/frontend/components/FlightIndicator.vue b/frontend/components/FlightIndicator.vue
@@ -25,8 +25,20 @@ const speedoStart = computed(() => (speedoPerimeter * 2) / 3)
 </script>
 
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="200" height="200">
-    <circle cx="500" cy="500" r="495" :stroke="color" stroke-width="10" fill="transparent" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1000 1000"
+    width="200"
+    height="200"
+  >
+    <circle
+      cx="500"
+      cy="500"
+      r="495"
+      :stroke="color"
+      stroke-width="10"
+      fill="transparent"
+    />
     <g id="windrose">
       <circle
         transform-origin="center center"
@@ -40,16 +52,64 @@ const speedoStart = computed(() => (speedoPerimeter * 2) / 3)
         :stroke-dasharray="windroseDashArray"
         :stroke-dashoffset="windroseDivisionWidth / 2"
       />
-      <text :transform="transformText" x="500" y="120">N</text>
-      <text :transform="transformText" x="940" y="530">E</text>
-      <text :transform="transformText" x="500" y="990">S</text>
-      <text :transform="transformText" x="80" y="530">W</text>
+      <text
+        :transform="transformText"
+        x="500"
+        y="120"
+      >N</text>
+      <text
+        :transform="transformText"
+        x="940"
+        y="530"
+      >E</text>
+      <text
+        :transform="transformText"
+        x="500"
+        y="990"
+      >S</text>
+      <text
+        :transform="transformText"
+        x="80"
+        y="530"
+      >W</text>
     </g>
 
-    <line id="horizon-20" x1="300" x2="700" y1="300" y2="300" :stroke="color" stroke-width="7" />
-    <line id="horizon-10" x1="200" x2="800" y1="400" y2="400" :stroke="color" stroke-width="7" />
-    <line id="horizon--10" x1="200" x2="800" y1="600" y2="600" :stroke="color" stroke-width="7" />
-    <line id="horizon--20" x1="300" x2="700" y1="700" y2="700" :stroke="color" stroke-width="7" />
+    <line
+      id="horizon-20"
+      x1="300"
+      x2="700"
+      y1="300"
+      y2="300"
+      :stroke="color"
+      stroke-width="7"
+    />
+    <line
+      id="horizon-10"
+      x1="200"
+      x2="800"
+      y1="400"
+      y2="400"
+      :stroke="color"
+      stroke-width="7"
+    />
+    <line
+      id="horizon--10"
+      x1="200"
+      x2="800"
+      y1="600"
+      y2="600"
+      :stroke="color"
+      stroke-width="7"
+    />
+    <line
+      id="horizon--20"
+      x1="300"
+      x2="700"
+      y1="700"
+      y2="700"
+      :stroke="color"
+      stroke-width="7"
+    />
 
     <circle
       id="speedo"
@@ -63,9 +123,25 @@ const speedoStart = computed(() => (speedoPerimeter * 2) / 3)
       :stroke-dashoffset="speedoStart"
     />
 
-    <text data-v-0b94a63f="" y="600" x="500" style="font-size: 300px" fill="white">{{ speed }}</text>
+    <text
+      data-v-0b94a63f=""
+      y="600"
+      x="500"
+      style="font-size: 300px"
+      fill="white"
+    >
+      {{ speed }}
+    </text>
 
-    <line id="horizon" x1="0" x2="1000" y1="500" y2="500" :stroke="color" stroke-width="15" />
+    <line
+      id="horizon"
+      x1="0"
+      x2="1000"
+      y1="500"
+      y2="500"
+      :stroke="color"
+      stroke-width="15"
+    />
   </svg>
 </template>
 

diff --git a/frontend/components/JoystickHandle.vue b/frontend/components/JoystickHandle.vue
@@ -80,7 +80,9 @@ function touchstart() {
     snapBackTimer = setTimeout(backTowardsCenter, 20)
   }
 
-  snapBackTimer && clearTimeout(snapBackTimer)
+  if (snapBackTimer) {
+    clearTimeout(snapBackTimer)
+  }
   snapBackTimer = undefined
   document.addEventListener("mousemove", handleMove, { passive: false })
   document.addEventListener("touchmove", handleMove, { passive: false })
@@ -90,8 +92,17 @@ function touchstart() {
 </script>
 
 <template>
-  <div id="pad" ref="pad">
-    <div id="pad-handle" ref="padHandle" :style="padHandleStyle" @mousedown="touchstart" @touchstart="touchstart"></div>
+  <div
+    id="pad"
+    ref="pad"
+  >
+    <div
+      id="pad-handle"
+      ref="padHandle"
+      :style="padHandleStyle"
+      @mousedown="touchstart"
+      @touchstart="touchstart"
+    />
   </div>
 </template>
 

diff --git a/frontend/components/KeyboardControl.vue b/frontend/components/KeyboardControl.vue
@@ -22,20 +22,52 @@ const keyMap = {
 function keydown(event: KeyboardEvent) {
   const key = keyMap[event.key as keyof typeof keyMap] || event.key
   const code = (event.shiftKey ? "Shift" : "") + key
-  commands[code] && commands[code]()
+  if (commands[code]) {
+    commands[code]()
+  }
 }
 
 window.addEventListener("keydown", keydown)
 </script>
 
 <template>
   <nav>
-    <button id="ArrowUp" @click="commands.ArrowUp">ᐃ</button>
-    <button id="ArrowLeft" @click="commands.ArrowLeft">ᐊ</button>
-    <button id="ArrowRight" @click="commands.ArrowRight">ᐅ</button>
-    <button id="ArrowDown" @click="commands.ArrowDown">ᐁ</button>
-    <button id="Plus" @click="commands.Plus">+</button>
-    <button id="Minus" @click="commands.Minus">&nbsp;</button>
+    <button
+      id="ArrowUp"
+      @click="commands.ArrowUp"
+    >
+      ᐃ
+    </button>
+    <button
+      id="ArrowLeft"
+      @click="commands.ArrowLeft"
+    >
+      ᐊ
+    </button>
+    <button
+      id="ArrowRight"
+      @click="commands.ArrowRight"
+    >
+      ᐅ
+    </button>
+    <button
+      id="ArrowDown"
+      @click="commands.ArrowDown"
+    >
+      ᐁ
+    </button>
+    <button
+      id="Plus"
+      @click="commands.Plus"
+    >
+      +
+    </button>
+    <button
+      id="Minus"
+      @click="commands.Minus"
+    >
+&nbsp;
+    </button>
   </nav>
 </template>
 

diff --git a/frontend/components/TheCar.vue b/frontend/components/TheCar.vue
@@ -17,21 +17,42 @@ const wheelWidth = 50
 
 <template>
   <div class="car">
-    <CarChassis :length="length" :width="width" :height="height" color="#000000" />
+    <CarChassis
+      :length="length"
+      :width="width"
+      :height="height"
+      color="#000000"
+    />
     <div class="left">
       <div class="back">
-        <CarWheel :speed="motorSpeedLeft" :diameter="wheelDiameter" :width="wheelWidth" />
+        <CarWheel
+          :speed="motorSpeedLeft"
+          :diameter="wheelDiameter"
+          :width="wheelWidth"
+        />
       </div>
       <div class="front">
-        <CarWheel :speed="motorSpeedLeft" :diameter="wheelDiameter" :width="wheelWidth" />
+        <CarWheel
+          :speed="motorSpeedLeft"
+          :diameter="wheelDiameter"
+          :width="wheelWidth"
+        />
       </div>
     </div>
     <div class="right">
       <div class="back">
-        <CarWheel :speed="motorSpeedRight" :diameter="wheelDiameter" :width="wheelWidth" />
+        <CarWheel
+          :speed="motorSpeedRight"
+          :diameter="wheelDiameter"
+          :width="wheelWidth"
+        />
       </div>
       <div class="front">
-        <CarWheel :speed="motorSpeedRight" :diameter="wheelDiameter" :width="wheelWidth" />
+        <CarWheel
+          :speed="motorSpeedRight"
+          :diameter="wheelDiameter"
+          :width="wheelWidth"
+        />
       </div>
     </div>
   </div>

diff --git a/frontend/components/ThreeDeeWorld.vue b/frontend/components/ThreeDeeWorld.vue
@@ -33,7 +33,10 @@ const setupStyle = computed(() => {
 <template>
   <div id="perspective">
     <div id="camera">
-      <div id="setup" :style="setupStyle">
+      <div
+        id="setup"
+        :style="setupStyle"
+      >
         <!-- <div id="floor" />
         <div id="directions">
           <div id="north">N</div>