style(prettier): format project

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "tabWidth": 2,
+  "printWidth": 80,
+  "semi": true
+}

package-lock.json

@@ -12,6 +12,7 @@
         "@vueuse/nuxt": "^9.3.1",
         "husky": "^8.0.2",
         "nuxt": "^3.0.0",
+        "prettier": "^2.8.0",
         "sass": "^1.55.0",
         "vue-tsc": "^1.0.9"
       }
@@ -6071,6 +6072,21 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/prettier": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.0.tgz",
+      "integrity": "sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.0.0.tgz",
@@ -12363,6 +12379,12 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "prettier": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.0.tgz",
+      "integrity": "sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA==",
+      "dev": true
+    },
     "pretty-bytes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.0.0.tgz",

package.json

@@ -23,6 +23,7 @@
     "@vueuse/nuxt": "^9.3.1",
     "husky": "^8.0.2",
     "nuxt": "^3.0.0",
+    "prettier": "^2.8.0",
     "sass": "^1.55.0",
     "vue-tsc": "^1.0.9"
   }

src/app.vue

@@ -1,5 +1,5 @@
 <template>
   <NuxtLayout>
-    <NuxtPage/>
+    <NuxtPage />
   </NuxtLayout>
 </template>

src/assets/styles/_fonts.scss

@@ -19,7 +19,8 @@
     @font-face {
       font-family: $font-family;
       src: url('#{$font-with-path}Italic.eot');
-      src: local('#{$font-with-dash}Italic'), local('#{$font-with-space} Italic'),
+      src: local('#{$font-with-dash}Italic'),
+        local('#{$font-with-space} Italic'),
         url('#{$font-with-path}Italic.eot?#iefix') format('embedded-opentype'),
         url('#{$font-with-path}Italic.woff2') format('woff2'),
         url('#{$font-with-path}Italic.woff') format('woff'),
@@ -38,14 +39,15 @@ $fonts: (
   Black: 700,
 );
 
-@include MakeFont('Formular', $fonts, '@/assets/fonts/formular');
-
 @font-face {
   font-family: 'Computer Modern Serif';
   src: url('@/assets/fonts/computer-modern/cmunrm.eot');
-  src: url('@/assets/fonts/computer-modern/cmunrm.eot?#iefix') format('embedded-opentype'),
+  src: url('@/assets/fonts/computer-modern/cmunrm.eot?#iefix')
+      format('embedded-opentype'),
     url('@/assets/fonts/computer-modern/cmunrm.woff') format('woff'),
     url('@/assets/fonts/computer-modern/cmunrm.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
 }
+
+@include MakeFont('Formular', $fonts, '@/assets/fonts/formular');

src/assets/styles/_scroll.scss

@@ -7,6 +7,6 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: var(--scroll-color);
   transition: background-color 0.1s;
+  background-color: var(--scroll-color);
 }

src/assets/styles/main.scss

@@ -4,15 +4,17 @@
 @import 'scroll';
 @import 'animations';
 
-html, body, #__nuxt {
+html,
+body,
+#__nuxt {
   width: 100%;
   height: 100%;
 }
 
 body {
-  background-color: var(--background-color-primary);
-  color: var(--font-color-primary);
   font-family: Formular, Helvetica, Arial, sans-serif;
+  color: var(--font-color-primary);
+  background-color: var(--background-color-primary);
 }
 
 button {
@@ -21,7 +23,8 @@ button {
   cursor: pointer;
 }
 
-h1, h2 {
+h1,
+h2 {
   font-size: 20px;
   font-weight: 600;
 }

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][]) => {
+  const drawFigure = (
-    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
+    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(
+        multiply(translate(centerX, centerY, 0), rotateX(angle)),
-          translate(canvas.value.width / 2, canvas.value.height / 2, 0),
-          rotateX(angle)
-        ),
         rotateY(angle)
       ),
       rotateZ(angle)
@@ -164,7 +160,5 @@ onMounted(() => {
 </script>
 
 <template>
-  <canvas ref="canvas">
+  <canvas ref="canvas"> Sorry, your browser doesn't support canvas. </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
+  step = 0.1,
-} = defineProps<{ label: string, min: number, max: number, defaultValue: number, step?: number }>();
+} = 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"
+      <input
-             @dblclick="value = defaultValue"/>
+        :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>

src/layouts/default.vue

@@ -5,19 +5,23 @@ const showMenu = ref<boolean>(false);
 <template>
   <div class="wrapper">
     <div class="content">
-      <button v-if="!showMenu" class="button button__show" @click="showMenu = true">
+      <button
-        <IconMenu/>
+        v-if="!showMenu"
+        class="button button__show"
+        @click="showMenu = true"
+      >
+        <IconMenu />
       </button>
       <template v-else>
         <div class="controls">
-          <slot/>
+          <slot />
         </div>
         <button class="button button__hide" @click="showMenu = false">
-          <IconHide/>
+          <IconHide />
         </button>
       </template>
     </div>
-    <Board class="canvas"/>
+    <Board class="canvas" />
   </div>
 </template>
 
@@ -40,7 +44,6 @@ const showMenu = ref<boolean>(false);
 
 .controls {
   position: relative;
-  box-sizing: border-box;
   padding: 28px 24px;
   background-color: white;
   border-radius: 8px;

src/pages/figure.vue

@@ -15,19 +15,45 @@ const activeProjection = ref<number>(0);
 <template>
   <div class="container">
     <Accordion title="Перемещение">
-      <FormRange v-for="axis in axes" :label="`${axis} =`" :min="-10" :max="10" :step="0.1" :defaultValue="0"/>
+      <FormRange
+        v-for="axis in axes"
+        :label="`${axis} =`"
+        :min="-10"
+        :max="10"
+        :step="0.1"
+        :defaultValue="0"
+      />
     </Accordion>
     <Accordion title="Вращение">
-      <FormRange v-for="axis in axes" :label="`${axis} =`" :min="0" :max="359" :step="1" :defaultValue="0"/>
+      <FormRange
+        v-for="axis in axes"
+        :label="`${axis} =`"
+        :min="0"
+        :max="359"
+        :step="1"
+        :defaultValue="0"
+      />
     </Accordion>
     <Accordion title="Масштабирование">
-      <FormRange v-for="axis in axes" :key="axis" :label="`${axis} =`" :min="0.1" :max="5" :step="0.1"
+      <FormRange
-                 :defaultValue="1"/>
+        v-for="axis in axes"
+        :key="axis"
+        :label="`${axis} =`"
+        :min="0.1"
+        :max="5"
+        :step="0.1"
+        :defaultValue="1"
+      />
     </Accordion>
     <Accordion title="Проекции">
       <GridContainer>
-        <GridElement v-for="(projection, i) in projections" :key="projection" :is-active="activeProjection === i"
+        <GridElement
-                     :title="projection" @click="activeProjection = i"/>
+          v-for="(projection, i) in projections"
+          :key="projection"
+          :is-active="activeProjection === i"
+          :title="projection"
+          @click="activeProjection = i"
+        />
       </GridContainer>
     </Accordion>
   </div>

src/pages/index.vue

@@ -5,9 +5,6 @@ const figures = ['Тетраэдр', 'Гексаэдр', 'Октаэдр', 'До
 <template>
   <h1>Выберете фигуру</h1>
   <GridContainer>
-    <GridElement v-for="figure in figures" :key="figure" :title="figure"/>
+    <GridElement v-for="figure in figures" :key="figure" :title="figure" />
   </GridContainer>
 </template>
-
-<style scoped lang="scss">
-</style>

src/server/api/test.ts

@@ -1,6 +1,4 @@
 export default defineEventHandler(() => {
-  console.log('Request received');
-
   return {
     api: 'works',
   };