Add prettier and eslint, use state to save previous versions of elements

This commit is contained in:
MTRNord 2023-03-18 21:30:34 +01:00
parent f6c7d8eb48
commit d647f8c394
No known key found for this signature in database
7 changed files with 1676 additions and 42 deletions

6
.eslintrc.cjs Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
root: true,
};

4
.prettierignore Normal file
View File

@ -0,0 +1,4 @@
.github
node_modules
output
public

1
.prettierrc.json Normal file
View File

@ -0,0 +1 @@
{}

1609
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -7,13 +7,18 @@
"build": "tsc && vite build"
},
"dependencies": {
"@motion-canvas/2d": "^3.3.2",
"@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"
}
}
}

View File

@ -7,8 +7,9 @@ import { all, delay, waitUntil } from '@motion-canvas/core/lib/flow';
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';
const CODESIZE_DEFAULT = 33;
export const CODESIZE_DEFAULT = 33;
const CODESIZE_SMALLER = 16;
export const IMAGE_EVENT = `{
@ -152,12 +153,18 @@ export default makeScene2D(function* (view) {
const IMAGE_EXPANDED = 400;
const CONTAINER_IMAGE_EXPANDED = 408;
let animation_length = 0.8;
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, 0.8),
colRight().grow(1, 0.8),
codeTextContainer().fontSize(CODESIZE_SMALLER, 0.8),
colLeft().grow(4, animation_length),
colRight().grow(1, animation_length),
codeTextContainer().fontSize(CODESIZE_SMALLER, animation_length),
colRightBG().margin.left(10, 0.1),
eventContent().width(CONTAINER_IMAGE_SMALL, animation_length),
@ -174,12 +181,13 @@ export default makeScene2D(function* (view) {
);
yield* waitUntil('Show Blurhash')
animation_length = 1.5;
animation_length = easeOutCubic(1.5);
const radius = 5;
const padding = 8;
const fontSizeHighlighted = 32;
const dashes = [15, 15];
const dashSize = 4;
yield* all(
codeTextContainer().selection(lines(13), animation_length),
@ -206,14 +214,14 @@ export default makeScene2D(function* (view) {
yield* waitUntil('Back to Overview')
const animation_time = 0.8;
animation_length = 0.8;
yield* all(
colLeft().grow(0, animation_time),
colRight().grow(1, animation_time),
codeTextContainer().fontSize(33, animation_time),
textEvent().opacity(0, animation_time),
codeTextContainer().selection(lines(0, 18), animation_time),
delay(0.7,
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)
)
);

View File

@ -5,7 +5,8 @@ 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 } from './imageEvent';
import { IMAGE_EVENT, CODESIZE_DEFAULT as CODESIZE_IMAGE_EVENT } from './imageEvent';
import { easeOutCubic } from '@motion-canvas/core/lib/tweening';
const CODESIZE_DEFAULT = 48;
@ -82,6 +83,8 @@ export default makeScene2D(function* (view) {
alignItems="center"
justifyContent="center"
fill={TEXTBOX}
lineWidth={0}
lineDash={[0, 0]}
>
<Txt ref={eventTimestampText} fill={'#b9bec6'} fontFamily="Inter" fontSize={18} text={"00:14"} />
</Rect>
@ -102,6 +105,8 @@ export default makeScene2D(function* (view) {
alignItems="center"
justifyContent="center"
fill={TEXTBOX}
lineWidth={0}
lineDash={[0, 0]}
>
<Txt ref={eventContentText} fill={'#fff'} fontFamily="Inter" fontSize={24} text={"Hello Matrix!"} />
</Rect>
@ -136,10 +141,16 @@ export default makeScene2D(function* (view) {
);
yield* waitUntil('Show Text Event')
let animation_length = easeOutCubic(0.8);
colLeft().save();
colRight().save();
textEvent().save();
yield* all(
colLeft().grow(4, 0.8),
colRight().grow(1, 0.8),
codeTextContainer().fontSize(23, 0.8),
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(
@ -149,12 +160,15 @@ export default makeScene2D(function* (view) {
);
yield* waitUntil('Show Content')
const animation_length = 1.5;
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),
@ -167,13 +181,13 @@ export default makeScene2D(function* (view) {
)
yield* waitUntil('Show Timestamp')
eventTimestamp().save();
eventTimestampText().save();
yield* all(
codeTextContainer().selection(lines(5), animation_length),
eventContentText().fontSize(24, animation_length),
eventContent().padding(0, animation_length),
eventContent().radius(0, animation_length),
eventContent().lineWidth(0, animation_length),
eventContentText().restore(animation_length),
eventContent().restore(animation_length),
eventTimestampText().fontSize(fontSizeHighlighted, animation_length),
eventTimestampText().fill('#fff', animation_length),
@ -189,11 +203,8 @@ export default makeScene2D(function* (view) {
yield* all(
codeTextContainer().selection(lines(6), animation_length),
eventTimestampText().fontSize(24, animation_length),
eventTimestampText().fill('#b9bec6', animation_length),
eventTimestamp().padding(0, animation_length),
eventTimestamp().radius(0, animation_length),
eventTimestamp().lineWidth(0, animation_length),
eventTimestampText().restore(animation_length),
eventTimestamp().restore(animation_length),
eventUsernameText().fontSize(fontSizeHighlighted, animation_length),
eventUsername().stroke(HIGHLIGHT, animation_length),
@ -211,20 +222,18 @@ export default makeScene2D(function* (view) {
yield* waitUntil('Back to Overview')
const animation_time = 0.8;
animation_length = 0.8;
yield* all(
colLeft().grow(0, animation_time),
colRight().grow(1, animation_time),
codeTextContainer().fontSize(33, animation_time),
textEvent().opacity(0, animation_time),
codeTextContainer().selection(lines(0, 10), animation_time),
delay(0.7,
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)}`
});