style(prettier): format project

src/components/accordion.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const {title} = defineProps<{ title: string }>();
+const { title } = defineProps<{ title: string }>();
 const showForm = ref<boolean>(false);
 </script>
 
@@ -8,11 +8,11 @@ const showForm = ref<boolean>(false);
     <div class="header" @click="showForm = !showForm">
       <h2>{{ title }}</h2>
       <button class="button">
-        <IconOpen :class="{icon_close: showForm}" class="icon"/>
+        <IconOpen :class="{ icon_close: showForm }" class="icon" />
       </button>
     </div>
     <div class="content" v-show="showForm">
-      <slot/>
+      <slot />
     </div>
   </section>
 </template>
@@ -26,8 +26,8 @@ const showForm = ref<boolean>(false);
 
 .header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
   column-gap: 12px;
   user-select: none;
   cursor: pointer;

src/components/board.vue

@@ -7,14 +7,20 @@ onMounted(() => {
   canvas.value.width = window.innerWidth;
   canvas.value.height = window.innerHeight;
 
-  const ctx = canvas.value.getContext("2d");
+  const ctx = canvas.value.getContext('2d');
 
   if (!ctx) return;
 
-  ctx.fillStyle = "red";
+  ctx.fillStyle = 'red';
 
   type Point = [number, number, number, number];
 
+  const sizeX = canvas.value.width;
+  const sizeY = canvas.value.height;
+
+  const centerX = sizeX / 2;
+  const centerY = sizeY / 2;
+
   const points: Point[] = [
     [500, 500, 500, 1],
     [500, 500, 700, 1],
@@ -87,16 +93,6 @@ onMounted(() => {
     ];
   };
 
-  // Identity matrix
-  const identity = (): Point[] => {
-    return [
-      [1, 0, 0, 0],
-      [0, 1, 0, 0],
-      [0, 0, 1, 0],
-      [0, 0, 0, 1],
-    ];
-  };
-
   // Multiply array of points by matrix
   const multiply = (points: Point[], matrix: Point[]): Point[] => {
     const result: Point[] = [];
@@ -121,8 +117,11 @@ onMounted(() => {
   };
 
   // Draw figure
-  const drawFigure = (points: Point[], faces: [number, number, number, number][]) => {
-    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
+  const drawFigure = (
+    points: Point[],
+    faces: [number, number, number, number][]
+  ) => {
+    ctx.clearRect(0, 0, sizeX, sizeY);
 
     faces.forEach((face) => {
       ctx.beginPath();
@@ -135,16 +134,13 @@ onMounted(() => {
     });
   };
 
-  // Rotation animation all axis on the center of the canvas
+  // Rotation animation all axis in the center of the canvas
   let angle = 0;
 
   const animate = () => {
     const matrix = multiply(
       multiply(
-        multiply(
-          translate(canvas.value.width / 2, canvas.value.height / 2, 0),
-          rotateX(angle)
-        ),
+        multiply(translate(centerX, centerY, 0), rotateX(angle)),
         rotateY(angle)
       ),
       rotateZ(angle)
@@ -164,7 +160,5 @@ onMounted(() => {
 </script>
 
 <template>
-  <canvas ref="canvas">
-    Sorry, your browser doesn't support canvas.
-  </canvas>
+  <canvas ref="canvas"> Sorry, your browser doesn't support canvas. </canvas>
 </template>

src/components/form/range.vue

@@ -1,22 +1,28 @@
 <script setup lang="ts">
-import {HTMLElementEvent} from '@/types/dom';
+import { HTMLElementEvent } from '@/types/dom';
 
 const {
   label,
   min,
   max,
   defaultValue,
-  step = 0.1
-} = defineProps<{ label: string, min: number, max: number, defaultValue: number, step?: number }>();
+  step = 0.1,
+} = defineProps<{
+  label: string;
+  min: number;
+  max: number;
+  defaultValue: number;
+  step?: number;
+}>();
 
 const emit = defineEmits<{
-  (event: 'change', value: number): void
+  (event: 'change', value: number): void;
 }>();
 
 const value = ref<number>(defaultValue);
 
 const onChange = (event: Event) => {
-  const {target} = event as HTMLElementEvent<HTMLInputElement>;
+  const { target } = event as HTMLElementEvent<HTMLInputElement>;
   value.value = target.valueAsNumber;
   emit('change', value.value);
 };
@@ -26,12 +32,27 @@ const onChange = (event: Event) => {
   <div class="block">
     <label class="label">
       {{ label }}
-      <input :max="max" :min="min" :value="value" class="input" type="number" @input="onChange"/>
+      <input
+        :max="max"
+        :min="min"
+        :value="value"
+        class="input"
+        type="number"
+        @input="onChange"
+      />
     </label>
     <div class="range">
       <div class="range__border">{{ min }}</div>
-      <input :max="max" :min="min" :step="step" :value="value" class="range__input" type="range" @input="onChange"
-             @dblclick="value = defaultValue"/>
+      <input
+        :max="max"
+        :min="min"
+        :step="step"
+        :value="value"
+        class="range__input"
+        type="range"
+        @input="onChange"
+        @dblclick="value = defaultValue"
+      />
       <div class="range__border">{{ max }}</div>
     </div>
   </div>
@@ -62,7 +83,7 @@ const onChange = (event: Event) => {
     margin: 0;
   }
 
-  &[type=number] {
+  &[type='number'] {
     -moz-appearance: textfield;
   }
 }
@@ -86,9 +107,10 @@ const onChange = (event: Event) => {
   border-radius: 4px;
   margin: 10px 0;
   background: #e2e4e6;
-  transition: opacity .2s;
+  transition: opacity 0.2s;
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     opacity: 1;
   }
 
@@ -102,6 +124,4 @@ const onChange = (event: Event) => {
     cursor: pointer;
   }
 }
-
-
 </style>

src/components/grid/container.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="grid">
-    <slot/>
+    <slot />
   </div>
 </template>
 
 <style scoped lang="scss">
 .grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
   grid-column-gap: 16px;
   grid-row-gap: 16px;
+  grid-template-columns: repeat(2, 1fr);
 }
 </style>

src/components/grid/element.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-const {title, isActive = false} = defineProps<{ title?: string, isActive?: boolean }>();
-
+const { title, isActive = false } = defineProps<{
+  title?: string;
+  isActive?: boolean;
+}>();
 </script>
 
 <template>
-  <button class="block" :class="{'block_active': isActive}">
+  <button class="block" :class="{ block_active: isActive }">
     <div class="picture"></div>
     <div v-if="title" class="title">{{ title }}</div>
   </button>
@@ -23,7 +25,6 @@ const {title, isActive = false} = defineProps<{ title?: string, isActive?: boole
   height: 200px;
   position: relative;
   cursor: pointer;
-  box-sizing: border-box;
   border-radius: 8px;
   background-color: #fae9ef;
   color: #67122c;
@@ -54,8 +55,8 @@ const {title, isActive = false} = defineProps<{ title?: string, isActive?: boole
 }
 
 .title {
-  margin-top: 8px;
   width: 100%;
+  margin-top: 8px;
   text-align: left;
 }
 </style>