Frontend: turn all SVGs into Vue components.

paveloom-a · Jun 18, 2024 · cd83f12 · cd83f12
1 parent 024c527
commit cd83f12
Show file tree

Hide file tree

Showing 22 changed files with 225 additions and 368 deletions.
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
@@ -74,12 +74,12 @@ export default [
           "newlines-between": "always",
           "pathGroups": [
             {
-              pattern: "@/components/**",
+              pattern: "@/components/*",
               group: "internal",
               position: "before",
             },
             {
-              pattern: "@/icons/**",
+              pattern: "@/components/buttons/*",
               group: "internal",
               position: "before",
             },

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -35,7 +35,6 @@
     "vite": "=5.2.11",
     "vite-bundle-analyzer": "=0.9.4",
     "vite-plugin-pwa": "=0.20.0",
-    "vite-svg-loader": "=5.1.0",
     "vue-eslint-parser": "=9.4.2",
     "vue-tsc": "=2.0.19"
   }

diff --git a/frontend/src/components/Counter.vue b/frontend/src/components/Counter.vue
@@ -3,19 +3,17 @@ import { computed, ref, watchEffect } from "vue";
 
 import Block from "@/components/Block.vue";
 import Box from "@/components/Box.vue";
-import BuffButton from "@/components/BuffButton.vue";
-import Button from "@/components/Button.vue";
 import Text from "@/components/Text.vue";
 import Timer from "@/components/Timer.vue";
 
-import AcceptIcon from "@/icons/accept.svg";
-import BackwardIcon from "@/icons/backward.svg";
-import CancelIcon from "@/icons/cancel.svg";
-import ForwardIcon from "@/icons/forward.svg";
-import MinusIcon from "@/icons/minus.svg";
-import PlayIcon from "@/icons/play.svg";
-import PlusIcon from "@/icons/plus.svg";
-import StopIcon from "@/icons/stop.svg";
+import AcceptButton from "@/components/buttons/AcceptButton.vue";
+import BuffButton from "@/components/buttons/BuffButton.vue";
+import CancelButton from "@/components/buttons/CancelButton.vue";
+import DecreaseMaxTimeButton from "@/components/buttons/DecreaseMaxTimeButton.vue";
+import IncreaseMaxTimeButton from "@/components/buttons/IncreaseMaxTimeButton.vue";
+import ReverseButton from "@/components/buttons/ReverseButton.vue";
+import StartButton from "@/components/buttons/StartButton.vue";
+import StopButton from "@/components/buttons/StopButton.vue";
 
 import state from "@/state";
 import { formatSeconds, hoursToMilliseconds } from "@/utils";
@@ -85,15 +83,12 @@ watchEffect(() => {
   }
 });
 
-const MIN_MAX_TIME = hoursToMilliseconds(24);
-const MAX_MAX_TIME = hoursToMilliseconds(72);
-
 function increaseMaxTime() {
-  state.refs.maxTime.value = Math.min(MAX_MAX_TIME, state.refs.maxTime.value + hoursToMilliseconds(1));
+  state.refs.maxTime.value = Math.min(state.refs.maxTime.maximum, state.refs.maxTime.value + hoursToMilliseconds(1));
 }
 
 function decreaseMaxTime() {
-  state.refs.maxTime.value = Math.max(MIN_MAX_TIME, state.refs.maxTime.value - hoursToMilliseconds(1));
+  state.refs.maxTime.value = Math.max(state.refs.maxTime.minimum, state.refs.maxTime.value - hoursToMilliseconds(1));
 }
 
 function reverseTime() {
@@ -136,44 +131,20 @@ function nextBuff() {
   <Box>
     <Timer :time />
     <Block v-if="view==='gameOff'">
-      <Button @click="startGame">
-        <PlayIcon />
-      </Button>
+      <StartButton @click="startGame" />
       <BuffButton @click="nextBuff" />
-      <Button
-        :disabled="state.refs.maxTime.value === MAX_MAX_TIME"
-        @click="increaseMaxTime"
-      >
-        <PlusIcon />
-      </Button>
-      <Button
-        :disabled="state.refs.maxTime.value === MIN_MAX_TIME"
-        @click="decreaseMaxTime"
-      >
-        <MinusIcon />
-      </Button>
+      <IncreaseMaxTimeButton @click="increaseMaxTime" />
+      <DecreaseMaxTimeButton @click="decreaseMaxTime" />
     </Block>
     <Block v-else-if="view==='gameOn'">
-      <Button
-        :class="!state.refs.isReverseOn.value && 'suggested'"
-        @click="reverseTime"
-      >
-        <BackwardIcon v-if="state.refs.isReverseOn.value" />
-        <ForwardIcon v-else />
-      </Button>
+      <ReverseButton @click="reverseTime" />
       <BuffButton @click="nextBuff" />
-      <Button @click="toggleStopping">
-        <StopIcon />
-      </Button>
+      <StopButton @click="toggleStopping" />
     </Block>
     <Block v-else-if="view==='stopping'">
       <Text>You sure?</Text>
-      <Button @click="stopGame">
-        <AcceptIcon />
-      </Button>
-      <Button @click="toggleStopping">
-        <CancelIcon />
-      </Button>
+      <AcceptButton @click="stopGame" />
+      <CancelButton @click="toggleStopping" />
     </Block>
   </Box>
 </template>
diff --git a/frontend/src/components/buttons/AcceptButton.vue b/frontend/src/components/buttons/AcceptButton.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+defineEmits<{ click: [] }>();
+
+import Button from "@/components/Button.vue";
+</script>
+
+<template>
+  <Button @click="$emit('click')">
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path class="background" d="M 17.5,6.5 H 6.5 v 11 h 11 z" fill="none" />
+      <path d="m 13.5,11.5 h -1 v 1 h 1 z" fill="black" />
+      <path d="m 12.5,12.5 h -1 v 1 h 1 z" fill="black" />
+      <path d="m 14.5,10.5 h -1 v 1 h 1 z" fill="black" />
+      <path d="m 15.5,9.5 h -1 v 1 h 1 z" fill="black" />
+      <path d="m 11.5,13.5 h -1 v 1 h 1 z" fill="black" />
+      <path d="M 9.5,11.5 H 8.5 v 1 H 9.5 Z" fill="black" />
+      <path d="m 10.5,12.5 h -1 v 1 h 1 z" fill="black" />
+      <path d="m 6.5,5.5 v 1 h 11 v -1 z" fill="black" />
+      <path d="m 18.5,6.5 h -1 v 11 h 1 z" fill="black" />
+      <path d="m 6.5,17.5 v 1 h 11 v -1 z" fill="black" />
+      <path d="m 5.5,17.5 h 1 v -11 h -1 z" fill="black" />
+    </svg>
+  </Button>
+</template>