From f09c2bcc727e2c3b885eeb38afb594663119dc97 Mon Sep 17 00:00:00 2001 From: Piotr Halama Date: Sun, 23 Jun 2024 22:06:19 +0200 Subject: [PATCH] make linter a bit more happy --- .eslintrc.cjs | 22 ++- e2e/dummy.spec.ts | 8 +- playwright.config.ts | 74 +++++---- src/App.vue | 2 +- src/components/CanvasItem.vue | 141 ++++++++-------- src/components/RunnerItem.vue | 100 ++++++------ src/components/__tests__/CanvasItem.spec.ts | 14 +- src/main.ts | 10 +- src/router/index.ts | 20 +-- src/stores/counter.ts | 8 +- src/utils/loadImage.ts | 2 +- src/utils/renderText.ts | 2 +- src/views/PhotoView.vue | 168 ++++++++++---------- src/views/RunnerView.vue | 136 ++++++++-------- src/views/YoutubeView.vue | 147 +++++++++-------- src/vuetifyInstance.ts | 4 +- tsconfig.app.json | 6 +- tsconfig.node.json | 6 +- vite.config.ts | 2 +- vitest.config.ts | 2 +- 20 files changed, 447 insertions(+), 427 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 6f40582..9ed81a7 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -3,12 +3,32 @@ require('@rushstack/eslint-patch/modern-module-resolution') module.exports = { root: true, - 'extends': [ + extends: [ 'plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-typescript', '@vue/eslint-config-prettier/skip-formatting' ], + rules: { + '@typescript-eslint/no-explicit-any': 'error', + '@typescript-eslint/no-shadow': 'error', + 'one-var': 'error', + /* + * 'require-await': 'off', + * '@typescript-eslint/require-await': 'error', + */ + 'func-style': 'error', + eqeqeq: 'error', + 'max-lines-per-function': 'error', + 'max-statements': 'error', + '@typescript-eslint/no-use-before-define': 'error', + 'no-warning-comments': 'warn', + 'max-lines': 'error', + 'multiline-comment-style': 'error', + 'prefer-const': 'error', + 'no-eq-null': 'error' + //no-magic-numbers + }, parserOptions: { ecmaVersion: 'latest' } diff --git a/e2e/dummy.spec.ts b/e2e/dummy.spec.ts index b4f0c96..da3667a 100644 --- a/e2e/dummy.spec.ts +++ b/e2e/dummy.spec.ts @@ -1,7 +1,9 @@ -import { test, expect } from '@playwright/test' +import { expect, test } from '@playwright/test' -// See here how to get started: -// https://playwright.dev/docs/intro +/* + * See here how to get started: + * https://playwright.dev/docs/intro + */ test('visits the app root url', async ({ page }) => { await page.goto('/') await expect(page.locator('div.v-toolbar-title__placeholder')).toContainText('GPST') diff --git a/playwright.config.ts b/playwright.config.ts index 01d5d18..3a32d40 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -5,7 +5,7 @@ import { defineConfig, devices } from '@playwright/test' * Read environment variables from file. * https://github.com/motdotla/dotenv */ -// require('dotenv').config(); +// Require('dotenv').config(); /** * See https://playwright.dev/docs/test-configuration. @@ -22,7 +22,7 @@ export default defineConfig({ timeout: 5000 }, /* Fail the build on CI if you accidentally left test.only in the source code. */ - forbidOnly: !!process.env.CI, + forbidOnly: Boolean(process.env.CI), /* Retry on CI only */ retries: process.env.CI ? 2 : 0, /* Opt out of parallel tests on CI. */ @@ -40,7 +40,7 @@ export default defineConfig({ trace: 'on-first-retry', /* Only on CI systems run the tests headless */ - headless: !!process.env.CI + headless: Boolean(process.env.CI) }, /* Configure projects for major browsers */ @@ -57,44 +57,50 @@ export default defineConfig({ ...devices['Desktop Firefox'] } } - // { - // name: 'webkit', - // use: { - // ...devices['Desktop Safari'] - // } - // } + /* + * { + * name: 'webkit', + * use: { + * ...devices['Desktop Safari'] + * } + * } + */ /* Test against mobile viewports. */ - // { - // name: 'Mobile Chrome', - // use: { - // ...devices['Pixel 5'], - // }, - // }, - // { - // name: 'Mobile Safari', - // use: { - // ...devices['iPhone 12'], - // }, - // }, + /* + * { + * name: 'Mobile Chrome', + * use: { + * ...devices['Pixel 5'], + * }, + * }, + * { + * name: 'Mobile Safari', + * use: { + * ...devices['iPhone 12'], + * }, + * }, + */ /* Test against branded browsers. */ - // { - // name: 'Microsoft Edge', - // use: { - // channel: 'msedge', - // }, - // }, - // { - // name: 'Google Chrome', - // use: { - // channel: 'chrome', - // }, - // }, + /* + * { + * name: 'Microsoft Edge', + * use: { + * channel: 'msedge', + * }, + * }, + * { + * name: 'Google Chrome', + * use: { + * channel: 'chrome', + * }, + * }, + */ ], /* Folder for test artifacts such as screenshots, videos, traces, etc. */ - // outputDir: 'test-results/', + // OutputDir: 'test-results/', /* Run your local dev server before starting the tests */ webServer: { diff --git a/src/App.vue b/src/App.vue index a97029f..01cf17f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,6 @@ diff --git a/src/components/CanvasItem.vue b/src/components/CanvasItem.vue index 7ea78c8..d2e5c1c 100644 --- a/src/components/CanvasItem.vue +++ b/src/components/CanvasItem.vue @@ -3,83 +3,74 @@ import { onMounted, ref } from 'vue' import type { Ref } from 'vue' const props = defineProps<{ - canvasWidth: number - canvasHeight: number - title: string -}>() - -const emit = defineEmits<{ - canvasContext: [canvas: HTMLCanvasElement] - updateBackground: [file: string] - updateScale: [scale: number] - updatePos: [left: number, top: number] - updateRotation: [rotation: number] -}>() - -const canvasDragged = ref(false) -const canvasModel: Ref = ref(null) - -// TODO remove after testing -const sumX = ref(0) -const sumY = ref(0) - -function canvasDrop(e: DragEvent) { - if (e.dataTransfer!.items && e.dataTransfer!.items.length == 1) { - //emit('string', e.dataTransfer!.items[0]) - let reader = new FileReader() - reader.onloadend = function () { - emit('updateBackground', reader.result as string) + canvasWidth: number + canvasHeight: number + title: string + }>(), + emit = defineEmits<{ + canvasContext: [canvas: HTMLCanvasElement] + updateBackground: [file: string] + updateScale: [scale: number] + updatePos: [left: number, top: number] + updateRotation: [rotation: number] + }>(), + canvasDragged = ref(false), + canvasModel: Ref = ref(null), + // TODO: remove after testing + sumX = ref(0), + sumY = ref(0), + canvasDrop = function (e: DragEvent) { + if (e.dataTransfer!.items && e.dataTransfer!.items.length === 1) { + //Emit('string', e.dataTransfer!.items[0]) + const reader = new FileReader() + reader.onloadend = function () { + emit('updateBackground', reader.result as string) + } + reader.readAsDataURL(e.dataTransfer!.items[0].getAsFile()!) } - reader.readAsDataURL(e.dataTransfer!.items[0].getAsFile()!) - } -} - -function canvasWheel(e: WheelEvent) { - if (e.deltaY > 0) { - emit('updateScale', -0.02) - } else { - emit('updateScale', 0.02) - } -} - -function canvasMouseDown(e: MouseEvent) { - if ((e.buttons & 1) == 1) { - canvasDragged.value = true - canvasModel.value!.classList.add('cursor-grabbing') - canvasModel.value!.classList.remove('cursor-grab') - } - // wheel button - if (((e.buttons >> 2) & 1) == 1) { - emit('updateRotation', 90) - } -} - -function windowMouseUp(e: MouseEvent) { - if (canvasModel.value != null && (e.buttons & 1) == 0) { - canvasDragged.value = false - sumX.value = 0 - sumY.value = 0 - canvasModel.value!.classList.remove('cursor-grabbing') - canvasModel.value!.classList.add('cursor-grab') - } -} - -function windowMouseMove(e: MouseEvent) { - if (canvasDragged.value) { - sumX.value += e.movementX - sumY.value += e.movementY - emit('updatePos', e.movementX, e.movementY) + }, + canvasWheel = function (e: WheelEvent) { + if (e.deltaY > 0) { + emit('updateScale', -0.02) + } else { + emit('updateScale', 0.02) + } + }, + canvasMouseDown = function (e: MouseEvent) { + if ((e.buttons & 1) === 1) { + canvasDragged.value = true + canvasModel.value!.classList.add('cursor-grabbing') + canvasModel.value!.classList.remove('cursor-grab') + } + // Wheel button + if (((e.buttons >> 2) & 1) === 1) { + emit('updateRotation', 90) + } + }, + windowMouseUp = function (e: MouseEvent) { + if (canvasModel.value !== null && (e.buttons & 1) === 0) { + canvasDragged.value = false + sumX.value = 0 + sumY.value = 0 + canvasModel.value!.classList.remove('cursor-grabbing') + canvasModel.value!.classList.add('cursor-grab') + } + }, + windowMouseMove = function (e: MouseEvent) { + if (canvasDragged.value) { + sumX.value += e.movementX + sumY.value += e.movementY + emit('updatePos', e.movementX, e.movementY) + } + }, + savePNG = function () { + const data = canvasModel.value!.toDataURL('image/png'), + a = document.createElement('a') + a.download = `${props.title}.png` + a.href = data + a.click() + console.info(`Zapis do pliku${props.title}.png`) } -} - -function savePNG() { - const data = canvasModel.value!.toDataURL('image/png') - let a = document.createElement('a') - a.download = props.title + '.png' - a.href = data - a.click() - console.info('Zapis do pliku' + props.title + '.png') -} // TODO this might break if the button is lifted outside of a browser window, oh well onMounted(() => { diff --git a/src/components/RunnerItem.vue b/src/components/RunnerItem.vue index 685673f..7fdcab3 100644 --- a/src/components/RunnerItem.vue +++ b/src/components/RunnerItem.vue @@ -4,34 +4,32 @@ import type { Ref } from 'vue' import axios from 'axios' -const inputBackground: Ref = ref(null) -const inputRunner = ref('') -const inputTitle = ref('') -const inputSubtitle = ref('') -const inputCategory = ref('') -const inputTime = ref('') -const inputMoney = ref(0) - -const props = defineProps<{ - runner: string - title: string - subtitle: string - category: string - enableTime?: boolean - time?: string - enableMoney?: boolean - money?: number -}>() - -const emit = defineEmits<{ - updateBackground: [b: string] - updateRunner: [r: string] - updateTitle: [t: string] - updateSubtitle: [s: string] - updateCategory: [c: string] - updateTime: [t: string] - updateMoney: [m: number] -}>() +const inputBackground: Ref = ref(null), + inputRunner = ref(''), + inputTitle = ref(''), + inputSubtitle = ref(''), + inputCategory = ref(''), + inputTime = ref(''), + inputMoney = ref(0), + props = defineProps<{ + runner: string + title: string + subtitle: string + category: string + enableTime?: boolean + time?: string + enableMoney?: boolean + money?: number + }>(), + emit = defineEmits<{ + updateBackground: [b: string] + updateRunner: [r: string] + updateTitle: [t: string] + updateSubtitle: [s: string] + updateCategory: [c: string] + updateTime: [t: string] + updateMoney: [m: number] + }>() if (props.runner) { inputRunner.value = props.runner @@ -58,18 +56,32 @@ if (props.money) { emit('updateMoney', Math.round(props.money)) } -// if (inputMoney.value <= 0) { -// updateMoney() -// } +/* + * If (inputMoney.value <= 0) { + * updateMoney() + * } + */ -function onNewBackground() { - console.log(inputBackground.value!.files![0]) - let reader = new FileReader() - reader.onloadend = function () { - emit('updateBackground', reader.result as string) +var onNewBackground = function () { + console.log(inputBackground.value!.files![0]) + const reader = new FileReader() + reader.onloadend = function () { + emit('updateBackground', reader.result as string) + } + reader.readAsDataURL(inputBackground.value!.files![0]) + }, + updateMoney = function () { + axios + .get( + `${ + import.meta.env.VITE_DONATION_TRACKER_BASE_URL + + import.meta.env.VITE_DONATION_TRACKER_SLUG + }?json=gpst` + ) + .then((resp) => { + inputMoney.value = Number(resp.data.agg.amount) + }) } - reader.readAsDataURL(inputBackground.value!.files![0]) -} watch(inputRunner, () => { emit('updateRunner', inputRunner.value.trim()) @@ -89,18 +101,6 @@ watch(inputTime, () => { watch(inputMoney, () => { emit('updateMoney', Math.round(inputMoney.value)) }) - -function updateMoney() { - axios - .get( - import.meta.env.VITE_DONATION_TRACKER_BASE_URL + - import.meta.env.VITE_DONATION_TRACKER_SLUG + - '?json=gpst' - ) - .then((resp) => { - inputMoney.value = Number(resp.data.agg.amount) - }) -}