style(prettier): format project

2026-03-20 02:44:40 +00:00 · 2022-11-24 06:17:48 +07:00
parent 9a5c028ac0
commit aa8d740ca9
16 changed files with 159 additions and 84 deletions
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "tabWidth": 2,
+  "printWidth": 80,
+  "semi": true
+}
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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"
  }
--- a/src/app.vue
+++ b/src/app.vue
@@ -1,5 +1,5 @@
 <template>
  <NuxtLayout>
-    <NuxtPage/>
+    <NuxtPage />
  </NuxtLayout>
 </template>
--- a/src/assets/styles/_fonts.scss
+++ b/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');
--- a/src/assets/styles/_scroll.scss
+++ b/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);
 }
--- a/src/assets/styles/main.scss
+++ b/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;
 }
--- a/src/components/accordion.vue
+++ b/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;
--- a/src/components/board.vue
+++ b/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>
--- a/src/components/form/range.vue
+++ b/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>
--- a/src/components/grid/container.vue
+++ b/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>
--- a/src/components/grid/element.vue
+++ b/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>
--- a/src/layouts/default.vue
+++ b/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">
-        <IconMenu/>
+      <button
+        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;
--- a/src/pages/figure.vue
+++ b/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"
-                 :defaultValue="1"/>
+      <FormRange
+        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"
-                     :title="projection" @click="activeProjection = i"/>
+        <GridElement
+          v-for="(projection, i) in projections"
+          :key="projection"
+          :is-active="activeProjection === i"
+          :title="projection"
+          @click="activeProjection = i"
+        />
      </GridContainer>
    </Accordion>
  </div>
--- a/src/pages/index.vue
+++ b/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>
--- a/src/server/api/test.ts
+++ b/src/server/api/test.ts
@@ -1,6 +1,4 @@
 export default defineEventHandler(() => {
-  console.log('Request received');
-
  return {
    api: 'works',
  };