From 6e57826fc4a9e783f6123c4967903c2f4a49a84b Mon Sep 17 00:00:00 2001 From: MTRNord Date: Sat, 18 Mar 2023 21:37:29 +0100 Subject: [PATCH] Run prettier and add editorconfig --- .editorconfig | 7 + .eslintrc.cjs | 8 +- .prettierignore | 6 +- .prettierrc.json | 6 +- package.json | 45 ++-- src/project.ts | 4 +- src/scenes/imageEvent.tsx | 415 ++++++++++++++++++++---------------- src/scenes/textEvent.tsx | 431 ++++++++++++++++++++------------------ tsconfig.json | 10 +- vite.config.ts | 4 +- 10 files changed, 519 insertions(+), 417 deletions(-) create mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..dc0fc7f --- /dev/null +++ b/.editorconfig @@ -0,0 +1,7 @@ +root = true +[*] +end_of_line = lf +insert_final_newline = true +charset = utf-8 +indent_style = space +indent_size = 4 diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 5d4c1b5..0e60941 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,6 +1,10 @@ module.exports = { - extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'], + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'prettier', + ], parser: '@typescript-eslint/parser', plugins: ['@typescript-eslint'], root: true, -}; \ No newline at end of file +}; diff --git a/.prettierignore b/.prettierignore index 2336d3f..3dc1b39 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,4 +1,8 @@ .github node_modules output -public \ No newline at end of file +public +package-lock.json +README.md +LICENSE +src/global.css \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json index 0967ef4..b327bd0 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1 +1,5 @@ -{} +{ + "tabWidth": 4, + "semi": true, + "singleQuote": true +} diff --git a/package.json b/package.json index 9d4b015..25c7ca7 100644 --- a/package.json +++ b/package.json @@ -1,24 +1,25 @@ { - "name": "matrix-events", - "private": true, - "version": "0.0.0", - "scripts": { - "serve": "vite", - "build": "tsc && vite build" - }, - "dependencies": { - "@motion-canvas/2d": "^3.3.3", - "@motion-canvas/core": "^3.3.0" - }, - "devDependencies": { - "@motion-canvas/ui": "^3.3.0", - "@motion-canvas/vite-plugin": "^3.3.0", - "@typescript-eslint/eslint-plugin": "^5.55.0", - "@typescript-eslint/parser": "^5.55.0", - "eslint": "^8.36.0", - "eslint-config-prettier": "^8.7.0", - "prettier": "2.8.4", - "typescript": "^4.9.5", - "vite": "^4.2.0" - } + "name": "matrix-events", + "private": true, + "version": "0.0.0", + "scripts": { + "serve": "vite", + "build": "tsc && vite build", + "format": "prettier --write ." + }, + "dependencies": { + "@motion-canvas/2d": "^3.3.3", + "@motion-canvas/core": "^3.3.0" + }, + "devDependencies": { + "@motion-canvas/ui": "^3.3.0", + "@motion-canvas/vite-plugin": "^3.3.0", + "@typescript-eslint/eslint-plugin": "^5.55.0", + "@typescript-eslint/parser": "^5.55.0", + "eslint": "^8.36.0", + "eslint-config-prettier": "^8.7.0", + "prettier": "2.8.4", + "typescript": "^4.9.5", + "vite": "^4.2.0" + } } diff --git a/src/project.ts b/src/project.ts index 6d63160..a325012 100644 --- a/src/project.ts +++ b/src/project.ts @@ -6,6 +6,6 @@ import imageEvent from './scenes/imageEvent?scene'; import './global.css'; export default makeProject({ - scenes: [textEvent, imageEvent], - background: '#F2E1C1', + scenes: [textEvent, imageEvent], + background: '#F2E1C1', }); diff --git a/src/scenes/imageEvent.tsx b/src/scenes/imageEvent.tsx index cb5a1cc..26ef501 100644 --- a/src/scenes/imageEvent.tsx +++ b/src/scenes/imageEvent.tsx @@ -1,10 +1,27 @@ import { makeScene2D } from '@motion-canvas/2d/lib/scenes'; -import { Rect, Layout, Circle, Txt, Img } from '@motion-canvas/2d/lib/components'; -import { CodeBlock, edit, lines } from '@motion-canvas/2d/lib/components/CodeBlock'; +import { + Rect, + Layout, + Circle, + Txt, + Img, +} from '@motion-canvas/2d/lib/components'; +import { + CodeBlock, + edit, + lines, +} from '@motion-canvas/2d/lib/components/CodeBlock'; import { createRef } from '@motion-canvas/core/lib/utils'; import { all, delay, waitUntil } from '@motion-canvas/core/lib/flow'; -import { BG, BOLD, BOXLEFT, BOXRIGHT, HIGHLIGHT, TEXTBOX, } from '../utils/constants'; +import { + BG, + BOLD, + BOXLEFT, + BOXRIGHT, + HIGHLIGHT, + TEXTBOX, +} from '../utils/constants'; import contentImage from '../assets/image.jpg'; import contentBlurhash from '../assets/blurhash.png'; import { easeOutCubic } from '@motion-canvas/core/lib/tweening'; @@ -35,199 +52,231 @@ export const IMAGE_EVENT = `{ const NEXT_EVENT = `{}`; export default makeScene2D(function* (view) { - const colLeft = createRef(); - const colRight = createRef(); - const colRightBG = createRef(); - const codeTextContainer = createRef(); - const leftContainer = createRef(); - const textEvent = createRef(); - const eventContent = createRef(); - const contentImageRef = createRef(); - const contentBlurhashRef = createRef(); + const colLeft = createRef(); + const colRight = createRef(); + const colRightBG = createRef(); + const codeTextContainer = createRef(); + const leftContainer = createRef(); + const textEvent = createRef(); + const eventContent = createRef(); + const contentImageRef = createRef(); + const contentBlurhashRef = createRef(); - view.add( - <> - - - - - - - - - - + view.add( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + , + + + + + ); - - - - - + //yield* slideTransition(Direction.Right, 1); - - - - - + const IMAGE_SMALL = 392; + const CONTAINER_IMAGE_SMALL = 400; + const IMAGE_EXPANDED = 400; + const CONTAINER_IMAGE_EXPANDED = 408; - - - - - - - - - - , - - - - - , - ); + let animation_length = easeOutCubic(0.8); + yield* waitUntil('Show Text Event'); + colLeft().save(); + colRight().save(); + textEvent().save(); + eventContent().save(); + contentImageRef().save(); + contentBlurhashRef().save(); + yield* all( + colLeft().grow(4, animation_length), + colRight().grow(1, animation_length), + codeTextContainer().fontSize(CODESIZE_SMALLER, animation_length), + colRightBG().margin.left(10, 0.1), - //yield* slideTransition(Direction.Right, 1); + eventContent().width(CONTAINER_IMAGE_SMALL, animation_length), + eventContent().height(CONTAINER_IMAGE_SMALL, animation_length), + contentImageRef().width(IMAGE_SMALL, animation_length), + contentImageRef().height(IMAGE_SMALL, animation_length), + contentBlurhashRef().width(IMAGE_SMALL, animation_length), + contentBlurhashRef().height(IMAGE_SMALL, animation_length), + delay(0.25, all(textEvent().opacity(1, 0.3))) + ); + yield* waitUntil('Show Blurhash'); - const IMAGE_SMALL = 392; - const CONTAINER_IMAGE_SMALL = 400; - const IMAGE_EXPANDED = 400; - const CONTAINER_IMAGE_EXPANDED = 408; + animation_length = easeOutCubic(1.5); + const radius = 5; + const padding = 8; + const fontSizeHighlighted = 32; + const dashes = [15, 15]; + const dashSize = 4; - let animation_length = easeOutCubic(0.8); - yield* waitUntil('Show Text Event') - colLeft().save(); - colRight().save(); - textEvent().save(); - eventContent().save(); - contentImageRef().save(); - contentBlurhashRef().save(); - yield* all( - colLeft().grow(4, animation_length), - colRight().grow(1, animation_length), - codeTextContainer().fontSize(CODESIZE_SMALLER, animation_length), - colRightBG().margin.left(10, 0.1), + yield* all( + codeTextContainer().selection(lines(13), animation_length), - eventContent().width(CONTAINER_IMAGE_SMALL, animation_length), - eventContent().height(CONTAINER_IMAGE_SMALL, animation_length), - contentImageRef().width(IMAGE_SMALL, animation_length), - contentImageRef().height(IMAGE_SMALL, animation_length), - contentBlurhashRef().width(IMAGE_SMALL, animation_length), - contentBlurhashRef().height(IMAGE_SMALL, animation_length), - delay(0.25, - all( - textEvent().opacity(1, 0.3), - ) - ) - ); - yield* waitUntil('Show Blurhash') + eventContent().stroke(HIGHLIGHT, animation_length), + eventContent().lineDash(dashes, animation_length), + eventContent().padding(padding, animation_length), + eventContent().radius(radius, animation_length), + eventContent().lineWidth(dashSize, animation_length), + eventContent().width(CONTAINER_IMAGE_EXPANDED, animation_length), + eventContent().height(CONTAINER_IMAGE_EXPANDED, animation_length), + contentImageRef().width(IMAGE_EXPANDED, animation_length), + contentImageRef().height(IMAGE_EXPANDED, animation_length), + contentBlurhashRef().width(IMAGE_EXPANDED, animation_length), + contentBlurhashRef().height(IMAGE_EXPANDED, animation_length) + ); - animation_length = easeOutCubic(1.5); - const radius = 5; - const padding = 8; - const fontSizeHighlighted = 32; - const dashes = [15, 15]; - const dashSize = 4; + yield* waitUntil('Show Content'); + yield* all( + codeTextContainer().selection(lines(7, 16), animation_length), - yield* all( - codeTextContainer().selection(lines(13), animation_length), + //contentImageRef().opacity(0, animation_length), + contentBlurhashRef().opacity(0, animation_length) + ); - eventContent().stroke(HIGHLIGHT, animation_length), - eventContent().lineDash(dashes, animation_length), - eventContent().padding(padding, animation_length), - eventContent().radius(radius, animation_length), - eventContent().lineWidth(dashSize, animation_length), - eventContent().width(CONTAINER_IMAGE_EXPANDED, animation_length), - eventContent().height(CONTAINER_IMAGE_EXPANDED, animation_length), - contentImageRef().width(IMAGE_EXPANDED, animation_length), - contentImageRef().height(IMAGE_EXPANDED, animation_length), - contentBlurhashRef().width(IMAGE_EXPANDED, animation_length), - contentBlurhashRef().height(IMAGE_EXPANDED, animation_length), - ) + yield* waitUntil('Back to Overview'); - yield* waitUntil('Show Content'); - yield* all( - codeTextContainer().selection(lines(7, 16), animation_length), + animation_length = 0.8; + yield* all( + colLeft().restore(animation_length), + colRight().restore(animation_length), + codeTextContainer().fontSize(33, animation_length), + textEvent().restore(animation_length), + codeTextContainer().selection(lines(0, 18), animation_length), + delay(animation_length - 0.1, colRightBG().margin.left(0, 0.1)) + ); - //contentImageRef().opacity(0, animation_length), - contentBlurhashRef().opacity(0, animation_length) - ); + yield* waitUntil('Next Slide'); + yield* codeTextContainer().edit(1.2)`${edit(IMAGE_EVENT, NEXT_EVENT)}`; - yield* waitUntil('Back to Overview') - - animation_length = 0.8; - yield* all( - colLeft().restore(animation_length), - colRight().restore(animation_length), - codeTextContainer().fontSize(33, animation_length), - textEvent().restore(animation_length), - codeTextContainer().selection(lines(0, 18), animation_length), - delay(animation_length - 0.1, - colRightBG().margin.left(0, 0.1) - ) - ); - - yield* waitUntil('Next Slide') - yield* codeTextContainer().edit(1.2)`${edit(IMAGE_EVENT, NEXT_EVENT)}` - - yield* waitUntil('Next') + yield* waitUntil('Next'); }); diff --git a/src/scenes/textEvent.tsx b/src/scenes/textEvent.tsx index f780f74..8d39b51 100644 --- a/src/scenes/textEvent.tsx +++ b/src/scenes/textEvent.tsx @@ -1,11 +1,25 @@ import { makeScene2D } from '@motion-canvas/2d/lib/scenes'; import { Rect, Layout, Circle, Txt } from '@motion-canvas/2d/lib/components'; -import { CodeBlock, edit, lines } from '@motion-canvas/2d/lib/components/CodeBlock'; +import { + CodeBlock, + edit, + lines, +} from '@motion-canvas/2d/lib/components/CodeBlock'; import { createRef } from '@motion-canvas/core/lib/utils'; import { all, delay, waitUntil } from '@motion-canvas/core/lib/flow'; -import { BG, BOLD, BOXLEFT, BOXRIGHT, HIGHLIGHT, TEXTBOX } from '../utils/constants'; -import { IMAGE_EVENT, CODESIZE_DEFAULT as CODESIZE_IMAGE_EVENT } from './imageEvent'; +import { + BG, + BOLD, + BOXLEFT, + BOXRIGHT, + HIGHLIGHT, + TEXTBOX, +} from '../utils/constants'; +import { + IMAGE_EVENT, + CODESIZE_DEFAULT as CODESIZE_IMAGE_EVENT, +} from './imageEvent'; import { easeOutCubic } from '@motion-canvas/core/lib/tweening'; const CODESIZE_DEFAULT = 48; @@ -23,217 +37,236 @@ const TEXT_EVENT = `{ }`; export default makeScene2D(function* (view) { - const colLeft = createRef(); - const colRight = createRef(); - const colRightBG = createRef(); - const codeTextContainer = createRef(); - const leftContainer = createRef(); - const textEvent = createRef(); - const eventContent = createRef(); - const eventContentText = createRef(); - const eventTimestamp = createRef(); - const eventTimestampText = createRef(); - const eventUsername = createRef(); - const eventAvatar = createRef(); - const eventUsernameText = createRef(); + const colLeft = createRef(); + const colRight = createRef(); + const colRightBG = createRef(); + const codeTextContainer = createRef(); + const leftContainer = createRef(); + const textEvent = createRef(); + const eventContent = createRef(); + const eventContentText = createRef(); + const eventTimestamp = createRef(); + const eventTimestampText = createRef(); + const eventUsername = createRef(); + const eventAvatar = createRef(); + const eventUsernameText = createRef(); - view.add( - <> - - - - - - - - - - + view.add( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + , + + + + + ); - - - - - + yield* waitUntil('Show Text Event'); - - - - - - - - - - - , - - - - - , - ); + let animation_length = easeOutCubic(0.8); + colLeft().save(); + colRight().save(); + textEvent().save(); + yield* all( + colLeft().grow(4, animation_length), + colRight().grow(1, animation_length), + codeTextContainer().fontSize(23, animation_length), + colRightBG().margin.left(10, 0.1), + delay(0.25, all(textEvent().opacity(1, 0.3))) + ); + yield* waitUntil('Show Content'); - yield* waitUntil('Show Text Event') + animation_length = easeOutCubic(1.5); + const radius = 5; + const padding = 8; + const fontSizeHighlighted = 32; + const dashes = [15, 15]; + const dashSize = 4; + eventContent().save(); + eventContentText().save(); + yield* all( + codeTextContainer().selection(lines(1, 4), animation_length), - let animation_length = easeOutCubic(0.8); - colLeft().save(); - colRight().save(); - textEvent().save(); - yield* all( - colLeft().grow(4, animation_length), - colRight().grow(1, animation_length), - codeTextContainer().fontSize(23, animation_length), - colRightBG().margin.left(10, 0.1), - delay(0.25, - all( - textEvent().opacity(1, 0.3), - ) - ) - ); - yield* waitUntil('Show Content') + eventContentText().fontSize(fontSizeHighlighted, animation_length), + eventContent().stroke(HIGHLIGHT, animation_length), + eventContent().lineDash(dashes, animation_length), + eventContent().padding(padding, animation_length), + eventContent().radius(radius, animation_length), + eventContent().lineWidth(dashSize, animation_length) + ); - animation_length = easeOutCubic(1.5); - const radius = 5; - const padding = 8; - const fontSizeHighlighted = 32; - const dashes = [15, 15]; - const dashSize = 4; + yield* waitUntil('Show Timestamp'); + eventTimestamp().save(); + eventTimestampText().save(); + yield* all( + codeTextContainer().selection(lines(5), animation_length), - eventContent().save(); - eventContentText().save(); - yield* all( - codeTextContainer().selection(lines(1, 4), animation_length), + eventContentText().restore(animation_length), + eventContent().restore(animation_length), - eventContentText().fontSize(fontSizeHighlighted, animation_length), - eventContent().stroke(HIGHLIGHT, animation_length), - eventContent().lineDash(dashes, animation_length), - eventContent().padding(padding, animation_length), - eventContent().radius(radius, animation_length), - eventContent().lineWidth(dashSize, animation_length), - ) + eventTimestampText().fontSize(fontSizeHighlighted, animation_length), + eventTimestampText().fill('#fff', animation_length), + eventTimestamp().stroke(HIGHLIGHT, animation_length), + eventTimestamp().lineDash(dashes, animation_length), + eventTimestamp().padding(padding, animation_length), + eventTimestamp().radius(radius, animation_length), + eventTimestamp().lineWidth(dashSize, animation_length) + ); - yield* waitUntil('Show Timestamp') - eventTimestamp().save(); - eventTimestampText().save(); - yield* all( - codeTextContainer().selection(lines(5), animation_length), + yield* waitUntil('Show sender'); + yield* all( + codeTextContainer().selection(lines(6), animation_length), - eventContentText().restore(animation_length), - eventContent().restore(animation_length), + eventTimestampText().restore(animation_length), + eventTimestamp().restore(animation_length), - eventTimestampText().fontSize(fontSizeHighlighted, animation_length), - eventTimestampText().fill('#fff', animation_length), - eventTimestamp().stroke(HIGHLIGHT, animation_length), - eventTimestamp().lineDash(dashes, animation_length), - eventTimestamp().padding(padding, animation_length), - eventTimestamp().radius(radius, animation_length), - eventTimestamp().lineWidth(dashSize, animation_length), + eventUsernameText().fontSize(fontSizeHighlighted, animation_length), + eventUsername().stroke(HIGHLIGHT, animation_length), + eventUsername().lineDash(dashes, animation_length), + eventUsername().padding(padding, animation_length), + eventUsername().radius(radius, animation_length), + eventUsername().lineWidth(dashSize, animation_length), - ) + eventAvatar().stroke(HIGHLIGHT, animation_length), + eventAvatar().lineDash(dashes, animation_length), + eventAvatar().padding(padding, animation_length), + eventAvatar().lineWidth(dashSize, animation_length) + ); - yield* waitUntil('Show sender') - yield* all( - codeTextContainer().selection(lines(6), animation_length), + yield* waitUntil('Back to Overview'); - eventTimestampText().restore(animation_length), - eventTimestamp().restore(animation_length), + animation_length = 0.8; + yield* all( + colLeft().restore(animation_length), + colRight().restore(animation_length), + codeTextContainer().fontSize(CODESIZE_IMAGE_EVENT, animation_length), + textEvent().restore(animation_length), + codeTextContainer().selection(lines(0, 10), animation_length), + delay(animation_length - 0.1, colRightBG().margin.left(0, 0.1)) + ); - eventUsernameText().fontSize(fontSizeHighlighted, animation_length), - eventUsername().stroke(HIGHLIGHT, animation_length), - eventUsername().lineDash(dashes, animation_length), - eventUsername().padding(padding, animation_length), - eventUsername().radius(radius, animation_length), - eventUsername().lineWidth(dashSize, animation_length), - - - eventAvatar().stroke(HIGHLIGHT, animation_length), - eventAvatar().lineDash(dashes, animation_length), - eventAvatar().padding(padding, animation_length), - eventAvatar().lineWidth(dashSize, animation_length), - ) - - yield* waitUntil('Back to Overview') - - animation_length = 0.8; - yield* all( - colLeft().restore(animation_length), - colRight().restore(animation_length), - codeTextContainer().fontSize(CODESIZE_IMAGE_EVENT, animation_length), - textEvent().restore(animation_length), - codeTextContainer().selection(lines(0, 10), animation_length), - delay(animation_length - 0.1, - colRightBG().margin.left(0, 0.1) - ) - ); - - yield* waitUntil('Next Slide') - yield* codeTextContainer().edit(1.2)`${edit(TEXT_EVENT, IMAGE_EVENT)}` + yield* waitUntil('Next Slide'); + yield* codeTextContainer().edit(1.2)`${edit(TEXT_EVENT, IMAGE_EVENT)}`; }); diff --git a/tsconfig.json b/tsconfig.json index 789b7d1..1438c59 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,7 @@ { - "extends": "@motion-canvas/2d/tsconfig.project.json", - "compilerOptions": { - "baseUrl": "src" - }, - "include": ["src"] + "extends": "@motion-canvas/2d/tsconfig.project.json", + "compilerOptions": { + "baseUrl": "src" + }, + "include": ["src"] } diff --git a/vite.config.ts b/vite.config.ts index bf32088..780bc34 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,6 +1,6 @@ -import {defineConfig} from 'vite'; +import { defineConfig } from 'vite'; import motionCanvas from '@motion-canvas/vite-plugin'; export default defineConfig({ - plugins: [motionCanvas()], + plugins: [motionCanvas()], });