jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

linting

This commit is contained in:
“chrisshank” 2024-11-18 13:30:53 -08:00
parent a6552d8927
commit c7d6243cb9
4 changed files with 16 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
demo/collision.html
View File

@ -25,21 +25,19 @@
</style> </style>
</head> </head>
<body> <body>
<fc-geometry x="100" y="100" width="50" height="50"></fc-geometry> <fc-geometry x="100" y="100" width="50" height="50"> Hello World </fc-geometry>
<fc-geometry x="200" y="200" width="50" height="50"></fc-geometry> <fc-geometry x="200" y="200" width="50" height="50"></fc-geometry>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
FolkGeometry.register(); FolkGeometry.register();
const geometryElements = document.querySelectorAll('fc-geometry'); const geometryElements = document.querySelectorAll('fc-geometry');
function collisionDetection(rect1, rect2) { function collisionDetection(rect1, rect2) {
return ( return (
rect1.left < rect2.right && rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top
rect1.right > rect2.left &&
rect1.top < rect2.bottom &&
rect1.bottom > rect2.top
); );
} }

26
demo/music.html
View File

@ -16,6 +16,8 @@
} }
fc-geometry:has(record-player) { fc-geometry:has(record-player) {
box-shadow: 10px 0px 150px 0px rgba(0, 0, 0, 0.61);
&::part(resize-nw), &::part(resize-nw),
&::part(resize-ne), &::part(resize-ne),
&::part(resize-se), &::part(resize-se),
@ -30,14 +32,9 @@
</style> </style>
</head> </head>
<body> <body>
<!--
sips -c 326 276 --cropOffset 1 1 *.png --out pngs/
ffmpeg -framerate 25 -pattern_type glob -i '*.png' -c:v prores -pix_fmt yuva444p10le dancing-flower.mov
ffmpeg -framerate 25 -f image2 -pattern_type glob -i '*.png' -c:v libvpx-vp9 -pix_fmt yuva420p dancing-flowers.webm
-->
<fc-geometry x="100" y="75" width="330" height="198"> <fc-geometry x="100" y="75" width="330" height="198">
<record-player> <record-player>
<audio src="/Feather.mp3"></audio> <audio src="/Feather.mov"></audio>
</record-player> </record-player>
</fc-geometry> </fc-geometry>
@ -69,11 +66,15 @@
FolkGeometry.register(); FolkGeometry.register();
RecordPlayer.register(); RecordPlayer.register();
let proximityDistance = 200; /**
sips -c 326 276 --cropOffset 1 1 *.png --out pngs/
ffmpeg -framerate 25 -pattern_type glob -i '*.png' -c:v prores -pix_fmt yuva444p10le dancing-flower.mov
ffmpeg -framerate 25 -f image2 -pattern_type glob -i '*.png' -c:v libvpx-vp9 -pix_fmt yuva420p dancing-flowers.webm
*/
let proximityDistance = 150;
const proximitySet = new Set(); const proximitySet = new Set();
const recordPlayerGeometry = document.querySelector( const recordPlayerGeometry = document.querySelector('fc-geometry:has(record-player)');
'fc-geometry:has(record-player)'
);
const recordPlayer = recordPlayerGeometry.firstElementChild; const recordPlayer = recordPlayerGeometry.firstElementChild;
const flowers = document.querySelectorAll('fc-geometry:has(video)'); const flowers = document.querySelectorAll('fc-geometry:has(video)');
// set playback rate when video is ready // set playback rate when video is ready
@ -88,10 +89,7 @@
function collisionDetection(rect1, rect2) { function collisionDetection(rect1, rect2) {
return ( return (
rect1.left < rect2.right && rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top
rect1.right > rect2.left &&
rect1.top < rect2.bottom &&
rect1.bottom > rect2.top
); );
} }

BIN
demo/public/Feather.mov Normal file
View File

Binary file not shown.

2
src/spreadsheet/spreadsheet.ts
View File

@ -5,7 +5,7 @@ styles.replaceSync(`
--column-number: 10; --column-number: 10;
--row-number: 10; --row-number: 10;
--cell-height: 1.75rem; --cell-height: 1.75rem;
--cell-width: 200px; --cell-width: 100px;
--border-color: #e1e1e1; --border-color: #e1e1e1;
border: solid 1px var(--border-color); border: solid 1px var(--border-color);
box-sizing: border-box; box-sizing: border-box;