Add prettier and eslint, use state to save previous versions of elements
This commit is contained in:
parent
f6c7d8eb48
commit
d647f8c394
|
@ -0,0 +1,6 @@
|
||||||
|
module.exports = {
|
||||||
|
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
|
||||||
|
parser: '@typescript-eslint/parser',
|
||||||
|
plugins: ['@typescript-eslint'],
|
||||||
|
root: true,
|
||||||
|
};
|
|
@ -0,0 +1,4 @@
|
||||||
|
.github
|
||||||
|
node_modules
|
||||||
|
output
|
||||||
|
public
|
|
@ -0,0 +1 @@
|
||||||
|
{}
|
File diff suppressed because it is too large
Load Diff
|
@ -7,12 +7,17 @@
|
||||||
"build": "tsc && vite build"
|
"build": "tsc && vite build"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@motion-canvas/2d": "^3.3.2",
|
"@motion-canvas/2d": "^3.3.3",
|
||||||
"@motion-canvas/core": "^3.3.0"
|
"@motion-canvas/core": "^3.3.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@motion-canvas/ui": "^3.3.0",
|
"@motion-canvas/ui": "^3.3.0",
|
||||||
"@motion-canvas/vite-plugin": "^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",
|
"typescript": "^4.9.5",
|
||||||
"vite": "^4.2.0"
|
"vite": "^4.2.0"
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 { BG, BOLD, BOXLEFT, BOXRIGHT, HIGHLIGHT, TEXTBOX, } from '../utils/constants';
|
||||||
import contentImage from '../assets/image.jpg';
|
import contentImage from '../assets/image.jpg';
|
||||||
import contentBlurhash from '../assets/blurhash.png';
|
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;
|
const CODESIZE_SMALLER = 16;
|
||||||
|
|
||||||
export const IMAGE_EVENT = `{
|
export const IMAGE_EVENT = `{
|
||||||
|
@ -152,12 +153,18 @@ export default makeScene2D(function* (view) {
|
||||||
const IMAGE_EXPANDED = 400;
|
const IMAGE_EXPANDED = 400;
|
||||||
const CONTAINER_IMAGE_EXPANDED = 408;
|
const CONTAINER_IMAGE_EXPANDED = 408;
|
||||||
|
|
||||||
let animation_length = 0.8;
|
let animation_length = easeOutCubic(0.8);
|
||||||
yield* waitUntil('Show Text Event')
|
yield* waitUntil('Show Text Event')
|
||||||
|
colLeft().save();
|
||||||
|
colRight().save();
|
||||||
|
textEvent().save();
|
||||||
|
eventContent().save();
|
||||||
|
contentImageRef().save();
|
||||||
|
contentBlurhashRef().save();
|
||||||
yield* all(
|
yield* all(
|
||||||
colLeft().grow(4, 0.8),
|
colLeft().grow(4, animation_length),
|
||||||
colRight().grow(1, 0.8),
|
colRight().grow(1, animation_length),
|
||||||
codeTextContainer().fontSize(CODESIZE_SMALLER, 0.8),
|
codeTextContainer().fontSize(CODESIZE_SMALLER, animation_length),
|
||||||
colRightBG().margin.left(10, 0.1),
|
colRightBG().margin.left(10, 0.1),
|
||||||
|
|
||||||
eventContent().width(CONTAINER_IMAGE_SMALL, animation_length),
|
eventContent().width(CONTAINER_IMAGE_SMALL, animation_length),
|
||||||
|
@ -174,12 +181,13 @@ export default makeScene2D(function* (view) {
|
||||||
);
|
);
|
||||||
yield* waitUntil('Show Blurhash')
|
yield* waitUntil('Show Blurhash')
|
||||||
|
|
||||||
animation_length = 1.5;
|
animation_length = easeOutCubic(1.5);
|
||||||
const radius = 5;
|
const radius = 5;
|
||||||
const padding = 8;
|
const padding = 8;
|
||||||
const fontSizeHighlighted = 32;
|
const fontSizeHighlighted = 32;
|
||||||
const dashes = [15, 15];
|
const dashes = [15, 15];
|
||||||
const dashSize = 4;
|
const dashSize = 4;
|
||||||
|
|
||||||
yield* all(
|
yield* all(
|
||||||
codeTextContainer().selection(lines(13), animation_length),
|
codeTextContainer().selection(lines(13), animation_length),
|
||||||
|
|
||||||
|
@ -206,14 +214,14 @@ export default makeScene2D(function* (view) {
|
||||||
|
|
||||||
yield* waitUntil('Back to Overview')
|
yield* waitUntil('Back to Overview')
|
||||||
|
|
||||||
const animation_time = 0.8;
|
animation_length = 0.8;
|
||||||
yield* all(
|
yield* all(
|
||||||
colLeft().grow(0, animation_time),
|
colLeft().restore(animation_length),
|
||||||
colRight().grow(1, animation_time),
|
colRight().restore(animation_length),
|
||||||
codeTextContainer().fontSize(33, animation_time),
|
codeTextContainer().fontSize(33, animation_length),
|
||||||
textEvent().opacity(0, animation_time),
|
textEvent().restore(animation_length),
|
||||||
codeTextContainer().selection(lines(0, 18), animation_time),
|
codeTextContainer().selection(lines(0, 18), animation_length),
|
||||||
delay(0.7,
|
delay(animation_length - 0.1,
|
||||||
colRightBG().margin.left(0, 0.1)
|
colRightBG().margin.left(0, 0.1)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
|
@ -5,7 +5,8 @@ import { createRef } from '@motion-canvas/core/lib/utils';
|
||||||
import { all, delay, waitUntil } from '@motion-canvas/core/lib/flow';
|
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 { 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;
|
const CODESIZE_DEFAULT = 48;
|
||||||
|
|
||||||
|
@ -82,6 +83,8 @@ export default makeScene2D(function* (view) {
|
||||||
alignItems="center"
|
alignItems="center"
|
||||||
justifyContent="center"
|
justifyContent="center"
|
||||||
fill={TEXTBOX}
|
fill={TEXTBOX}
|
||||||
|
lineWidth={0}
|
||||||
|
lineDash={[0, 0]}
|
||||||
>
|
>
|
||||||
<Txt ref={eventTimestampText} fill={'#b9bec6'} fontFamily="Inter" fontSize={18} text={"00:14"} />
|
<Txt ref={eventTimestampText} fill={'#b9bec6'} fontFamily="Inter" fontSize={18} text={"00:14"} />
|
||||||
</Rect>
|
</Rect>
|
||||||
|
@ -102,6 +105,8 @@ export default makeScene2D(function* (view) {
|
||||||
alignItems="center"
|
alignItems="center"
|
||||||
justifyContent="center"
|
justifyContent="center"
|
||||||
fill={TEXTBOX}
|
fill={TEXTBOX}
|
||||||
|
lineWidth={0}
|
||||||
|
lineDash={[0, 0]}
|
||||||
>
|
>
|
||||||
<Txt ref={eventContentText} fill={'#fff'} fontFamily="Inter" fontSize={24} text={"Hello Matrix!"} />
|
<Txt ref={eventContentText} fill={'#fff'} fontFamily="Inter" fontSize={24} text={"Hello Matrix!"} />
|
||||||
</Rect>
|
</Rect>
|
||||||
|
@ -136,10 +141,16 @@ export default makeScene2D(function* (view) {
|
||||||
);
|
);
|
||||||
|
|
||||||
yield* waitUntil('Show Text Event')
|
yield* waitUntil('Show Text Event')
|
||||||
|
|
||||||
|
|
||||||
|
let animation_length = easeOutCubic(0.8);
|
||||||
|
colLeft().save();
|
||||||
|
colRight().save();
|
||||||
|
textEvent().save();
|
||||||
yield* all(
|
yield* all(
|
||||||
colLeft().grow(4, 0.8),
|
colLeft().grow(4, animation_length),
|
||||||
colRight().grow(1, 0.8),
|
colRight().grow(1, animation_length),
|
||||||
codeTextContainer().fontSize(23, 0.8),
|
codeTextContainer().fontSize(23, animation_length),
|
||||||
colRightBG().margin.left(10, 0.1),
|
colRightBG().margin.left(10, 0.1),
|
||||||
delay(0.25,
|
delay(0.25,
|
||||||
all(
|
all(
|
||||||
|
@ -149,12 +160,15 @@ export default makeScene2D(function* (view) {
|
||||||
);
|
);
|
||||||
yield* waitUntil('Show Content')
|
yield* waitUntil('Show Content')
|
||||||
|
|
||||||
const animation_length = 1.5;
|
animation_length = easeOutCubic(1.5);
|
||||||
const radius = 5;
|
const radius = 5;
|
||||||
const padding = 8;
|
const padding = 8;
|
||||||
const fontSizeHighlighted = 32;
|
const fontSizeHighlighted = 32;
|
||||||
const dashes = [15, 15];
|
const dashes = [15, 15];
|
||||||
const dashSize = 4;
|
const dashSize = 4;
|
||||||
|
|
||||||
|
eventContent().save();
|
||||||
|
eventContentText().save();
|
||||||
yield* all(
|
yield* all(
|
||||||
codeTextContainer().selection(lines(1, 4), animation_length),
|
codeTextContainer().selection(lines(1, 4), animation_length),
|
||||||
|
|
||||||
|
@ -167,13 +181,13 @@ export default makeScene2D(function* (view) {
|
||||||
)
|
)
|
||||||
|
|
||||||
yield* waitUntil('Show Timestamp')
|
yield* waitUntil('Show Timestamp')
|
||||||
|
eventTimestamp().save();
|
||||||
|
eventTimestampText().save();
|
||||||
yield* all(
|
yield* all(
|
||||||
codeTextContainer().selection(lines(5), animation_length),
|
codeTextContainer().selection(lines(5), animation_length),
|
||||||
|
|
||||||
eventContentText().fontSize(24, animation_length),
|
eventContentText().restore(animation_length),
|
||||||
eventContent().padding(0, animation_length),
|
eventContent().restore(animation_length),
|
||||||
eventContent().radius(0, animation_length),
|
|
||||||
eventContent().lineWidth(0, animation_length),
|
|
||||||
|
|
||||||
eventTimestampText().fontSize(fontSizeHighlighted, animation_length),
|
eventTimestampText().fontSize(fontSizeHighlighted, animation_length),
|
||||||
eventTimestampText().fill('#fff', animation_length),
|
eventTimestampText().fill('#fff', animation_length),
|
||||||
|
@ -189,11 +203,8 @@ export default makeScene2D(function* (view) {
|
||||||
yield* all(
|
yield* all(
|
||||||
codeTextContainer().selection(lines(6), animation_length),
|
codeTextContainer().selection(lines(6), animation_length),
|
||||||
|
|
||||||
eventTimestampText().fontSize(24, animation_length),
|
eventTimestampText().restore(animation_length),
|
||||||
eventTimestampText().fill('#b9bec6', animation_length),
|
eventTimestamp().restore(animation_length),
|
||||||
eventTimestamp().padding(0, animation_length),
|
|
||||||
eventTimestamp().radius(0, animation_length),
|
|
||||||
eventTimestamp().lineWidth(0, animation_length),
|
|
||||||
|
|
||||||
eventUsernameText().fontSize(fontSizeHighlighted, animation_length),
|
eventUsernameText().fontSize(fontSizeHighlighted, animation_length),
|
||||||
eventUsername().stroke(HIGHLIGHT, animation_length),
|
eventUsername().stroke(HIGHLIGHT, animation_length),
|
||||||
|
@ -211,20 +222,18 @@ export default makeScene2D(function* (view) {
|
||||||
|
|
||||||
yield* waitUntil('Back to Overview')
|
yield* waitUntil('Back to Overview')
|
||||||
|
|
||||||
const animation_time = 0.8;
|
animation_length = 0.8;
|
||||||
yield* all(
|
yield* all(
|
||||||
colLeft().grow(0, animation_time),
|
colLeft().restore(animation_length),
|
||||||
colRight().grow(1, animation_time),
|
colRight().restore(animation_length),
|
||||||
codeTextContainer().fontSize(33, animation_time),
|
codeTextContainer().fontSize(CODESIZE_IMAGE_EVENT, animation_length),
|
||||||
textEvent().opacity(0, animation_time),
|
textEvent().restore(animation_length),
|
||||||
codeTextContainer().selection(lines(0, 10), animation_time),
|
codeTextContainer().selection(lines(0, 10), animation_length),
|
||||||
delay(0.7,
|
delay(animation_length - 0.1,
|
||||||
colRightBG().margin.left(0, 0.1)
|
colRightBG().margin.left(0, 0.1)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
yield* waitUntil('Next Slide')
|
yield* waitUntil('Next Slide')
|
||||||
yield* codeTextContainer().edit(1.2)`${edit(TEXT_EVENT, IMAGE_EVENT)}`
|
yield* codeTextContainer().edit(1.2)`${edit(TEXT_EVENT, IMAGE_EVENT)}`
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue