Compare commits
No commits in common. "d3ebe593d256db78f298e0b5b0de77bf2b48c1d7" and "82907f451ef8503f91305324707031163ce2bcc0" have entirely different histories.
d3ebe593d2
...
82907f451e
20 changed files with 22 additions and 2572 deletions
|
|
@ -1 +0,0 @@
|
||||||
*/node_modules
|
|
||||||
25
Earthfile
25
Earthfile
|
|
@ -1,31 +1,6 @@
|
||||||
VERSION 0.7
|
VERSION 0.7
|
||||||
FROM node:lts
|
FROM node:lts
|
||||||
|
|
||||||
avsync-video-frames:
|
|
||||||
# https://pptr.dev/troubleshooting
|
|
||||||
RUN apt-get update && apt-get -y install libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 && rm -rf /var/lib/apt/lists/*
|
|
||||||
RUN npm install -g pnpm
|
|
||||||
RUN groupadd -r pptruser && useradd -r -g pptruser -G audio,video pptruser && mkdir /home/pptruser && chown -R pptruser:pptruser /home/pptruser
|
|
||||||
USER pptruser
|
|
||||||
COPY av-sync /av-sync
|
|
||||||
WORKDIR /av-sync
|
|
||||||
CACHE /home/pptruser/.local/share/pnpm
|
|
||||||
RUN pnpm install
|
|
||||||
ARG FPS=60
|
|
||||||
ARG CYCLES=4
|
|
||||||
ARG SIZE=1200
|
|
||||||
RUN pnpm serve-render --fps $FPS --cycles $CYCLES --size $SIZE --output frames
|
|
||||||
SAVE ARTIFACT frames
|
|
||||||
|
|
||||||
avsync-video:
|
|
||||||
FROM debian:bookworm
|
|
||||||
RUN apt-get update && apt-get install -y ffmpeg && rm -rf /var/lib/apt/lists/*
|
|
||||||
COPY +avsync-video-frames/frames /frames
|
|
||||||
RUN find frames -type f | sort | xargs -I {} sh -c 'echo "file {}" >> /frames.txt'
|
|
||||||
ARG FPS=60
|
|
||||||
RUN ffmpeg -r $FPS -f concat -i /frames.txt -c:v libvpx-vp9 -lossless 1 -pix_fmt yuva420p -an avsync.webm
|
|
||||||
SAVE ARTIFACT avsync.mp4
|
|
||||||
|
|
||||||
site:
|
site:
|
||||||
RUN npm install -g pnpm
|
RUN npm install -g pnpm
|
||||||
COPY package.json pnpm-lock.yaml /site
|
COPY package.json pnpm-lock.yaml /site
|
||||||
|
|
|
||||||
24
av-sync/.gitignore
vendored
24
av-sync/.gitignore
vendored
|
|
@ -1,24 +0,0 @@
|
||||||
# Logs
|
|
||||||
logs
|
|
||||||
*.log
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
pnpm-debug.log*
|
|
||||||
lerna-debug.log*
|
|
||||||
|
|
||||||
node_modules
|
|
||||||
dist
|
|
||||||
dist-ssr
|
|
||||||
*.local
|
|
||||||
|
|
||||||
# Editor directories and files
|
|
||||||
.vscode/*
|
|
||||||
!.vscode/extensions.json
|
|
||||||
.idea
|
|
||||||
.DS_Store
|
|
||||||
*.suo
|
|
||||||
*.ntvs*
|
|
||||||
*.njsproj
|
|
||||||
*.sln
|
|
||||||
*.sw?
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
# Svelte + TS + Vite
|
|
||||||
|
|
||||||
This template should help get you started developing with Svelte and TypeScript in Vite.
|
|
||||||
|
|
||||||
## Recommended IDE Setup
|
|
||||||
|
|
||||||
[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
|
|
||||||
|
|
||||||
## Need an official Svelte framework?
|
|
||||||
|
|
||||||
Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
|
|
||||||
|
|
||||||
## Technical considerations
|
|
||||||
|
|
||||||
**Why use this over SvelteKit?**
|
|
||||||
|
|
||||||
- It brings its own routing solution which might not be preferable for some users.
|
|
||||||
- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
|
|
||||||
|
|
||||||
This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
|
|
||||||
|
|
||||||
Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
|
|
||||||
|
|
||||||
**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
|
|
||||||
|
|
||||||
Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
|
|
||||||
|
|
||||||
**Why include `.vscode/extensions.json`?**
|
|
||||||
|
|
||||||
Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
|
|
||||||
|
|
||||||
**Why enable `allowJs` in the TS template?**
|
|
||||||
|
|
||||||
While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
|
|
||||||
|
|
||||||
**Why is HMR not preserving my local component state?**
|
|
||||||
|
|
||||||
HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
|
|
||||||
|
|
||||||
If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
|
|
||||||
|
|
||||||
```ts
|
|
||||||
// store.ts
|
|
||||||
// An extremely simple external store
|
|
||||||
import { writable } from 'svelte/store'
|
|
||||||
export default writable(0)
|
|
||||||
```
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<title>AV SYNC</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<script type="module" src="/src/main.ts"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
{
|
|
||||||
"name": "av-sync",
|
|
||||||
"private": true,
|
|
||||||
"version": "0.0.0",
|
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
|
||||||
"dev": "vite",
|
|
||||||
"build": "vite build",
|
|
||||||
"preview": "vite preview",
|
|
||||||
"check": "svelte-check --tsconfig ./tsconfig.json",
|
|
||||||
"render": "node render.js",
|
|
||||||
"serve-render": "concurrently -P -k -s command-1 \"pnpm run dev --port 8626\" \"wait-on http://localhost:8626 && pnpm run render --url http://localhost:8626 {@}\" --"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@sveltejs/vite-plugin-svelte": "^3.0.2",
|
|
||||||
"@tsconfig/svelte": "^5.0.2",
|
|
||||||
"commander": "^12.0.0",
|
|
||||||
"concurrently": "^8.2.2",
|
|
||||||
"puppeteer": "^22.1.0",
|
|
||||||
"svelte": "^4.2.10",
|
|
||||||
"svelte-check": "^3.6.3",
|
|
||||||
"tslib": "^2.6.2",
|
|
||||||
"typescript": "^5.2.2",
|
|
||||||
"vite": "^5.1.0",
|
|
||||||
"wait-on": "^7.2.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
|
|
@ -1,48 +0,0 @@
|
||||||
import { Command } from 'commander';
|
|
||||||
import puppeteer from 'puppeteer';
|
|
||||||
import fs from 'fs';
|
|
||||||
|
|
||||||
const program = new Command();
|
|
||||||
program
|
|
||||||
.requiredOption('-o, --output <output>', 'Output directory')
|
|
||||||
.requiredOption('--fps <fps>', 'Frames per second')
|
|
||||||
.requiredOption('--cycles <cycles>', 'Number of cycles')
|
|
||||||
.requiredOption('--size <size>', 'Size of the output in pixels')
|
|
||||||
.requiredOption('--url <url>', 'URL to render')
|
|
||||||
.parse(process.argv);
|
|
||||||
const options = program.opts();
|
|
||||||
|
|
||||||
// mkdir p output path
|
|
||||||
if (!fs.existsSync(options.output)) {
|
|
||||||
fs.mkdirSync(options.output, { recursive: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
const browser = await puppeteer.launch({
|
|
||||||
args: ['--no-sandbox']
|
|
||||||
});
|
|
||||||
const page = await browser.newPage();
|
|
||||||
|
|
||||||
await page.setViewport({ width: parseInt(options.size, 10), height: parseInt(options.size, 10) });
|
|
||||||
await page.goto(options.url);
|
|
||||||
|
|
||||||
await page.evaluate(async (fps) => {
|
|
||||||
// @ts-ignore
|
|
||||||
await window.setFps(fps);
|
|
||||||
}, options.fps);
|
|
||||||
|
|
||||||
const totalFrames = parseInt(options.fps) * parseInt(options.cycles);
|
|
||||||
for (let frame = 0; frame < totalFrames; frame++) {
|
|
||||||
let start = Date.now();
|
|
||||||
await page.evaluate(async (n) => {
|
|
||||||
// @ts-ignore
|
|
||||||
await window.setFrame(n);
|
|
||||||
}, frame);
|
|
||||||
const path = `${options.output}/${frame.toString().padStart(Math.log10(totalFrames) + 1, '0')}.png`;
|
|
||||||
await page.screenshot({ path, omitBackground: true });
|
|
||||||
let end = Date.now();
|
|
||||||
console.log(`Captured frame ${frame}/${totalFrames} (took ${end - start}ms)`);
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Done.');
|
|
||||||
|
|
||||||
await browser.close();
|
|
||||||
|
|
@ -1,104 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
// time in seconds
|
|
||||||
import { onMount, tick } from 'svelte';
|
|
||||||
import SectorIndicator from './components/SectorIndicator.svelte';
|
|
||||||
import FlashIndicator from './components/FlashIndicator.svelte';
|
|
||||||
|
|
||||||
export let frame = 0;
|
|
||||||
export let fps = 60;
|
|
||||||
export let debug = false;
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
window.setFps = async (newFps: number) => {
|
|
||||||
fps = newFps;
|
|
||||||
await tick();
|
|
||||||
};
|
|
||||||
|
|
||||||
window.setFrame = async (frameNumber: number) => {
|
|
||||||
frame = frameNumber;
|
|
||||||
await tick();
|
|
||||||
};
|
|
||||||
|
|
||||||
if (window.location.search.includes('debug')) {
|
|
||||||
debug = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (window.location.search.includes('play')) {
|
|
||||||
setInterval(() => {
|
|
||||||
frame++;
|
|
||||||
frame %= fps * 4;
|
|
||||||
}, 1000 / fps);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (window.location.search.includes('frame')) {
|
|
||||||
const frameNumber = parseInt(window.location.search.split('frame=')[1]);
|
|
||||||
if (!isNaN(frameNumber)) {
|
|
||||||
frame = frameNumber;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<main class:debug>
|
|
||||||
<div class="cyclic">
|
|
||||||
<div class="circular sector">
|
|
||||||
<SectorIndicator {frame} {fps} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="circular flash">
|
|
||||||
<FlashIndicator {frame} {fps} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if debug}
|
|
||||||
<div class="controls">
|
|
||||||
<input type="range" min="0" max={fps * 4} bind:value={frame} />
|
|
||||||
<div class="label">{frame} ({frame % fps}) / {Math.round((frame / fps) * 100) / 100} s)</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
main {
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
|
|
||||||
color: white;
|
|
||||||
--color-active: red;
|
|
||||||
--color-inactive: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular {
|
|
||||||
width: 25vw;
|
|
||||||
height: 25vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cyclic {
|
|
||||||
position: absolute;
|
|
||||||
top: 25%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
width: 100vw;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
}
|
|
||||||
|
|
||||||
main.debug {
|
|
||||||
background: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 80vw;
|
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
& input {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
html, body {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
export let frame: number;
|
|
||||||
export let fps: number;
|
|
||||||
|
|
||||||
let el: SVGSVGElement;
|
|
||||||
$: center = el?.clientWidth / 2;
|
|
||||||
$: radius = center;
|
|
||||||
|
|
||||||
let opacity = 1;
|
|
||||||
$: opacity = ease(1 - ((frame % fps) / fps) * 2);
|
|
||||||
|
|
||||||
function ease(x: number) {
|
|
||||||
x = Math.max(0, Math.min(1, x));
|
|
||||||
return 1 - Math.cos((x * Math.PI) / 2);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<svg class="indicator" bind:this={el} style="--opacity: {opacity}">
|
|
||||||
<circle cx={center} cy={center} r={radius}></circle>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.indicator {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
circle {
|
|
||||||
fill: var(--color-active);
|
|
||||||
opacity: var(--opacity);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
export let frame: number;
|
|
||||||
export let fps: number;
|
|
||||||
|
|
||||||
let el: SVGSVGElement;
|
|
||||||
$: center = el?.clientWidth / 2;
|
|
||||||
$: radius = center;
|
|
||||||
let d = '';
|
|
||||||
|
|
||||||
$: {
|
|
||||||
const angle = ((frame / fps) * 360) % 360;
|
|
||||||
const radians = (angle * Math.PI) / 180;
|
|
||||||
const x = center + radius * Math.cos(radians);
|
|
||||||
const y = center + radius * Math.sin(radians);
|
|
||||||
d = `M${center},${center} L${center + radius},${center} A${radius},${radius} 0 ${angle > 180 ? 1 : 0} 1 ${x},${y} Z`;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<svg class="indicator" class:sync={frame % fps === 0} bind:this={el}>
|
|
||||||
<circle cx={center} cy={center} r={radius}></circle>
|
|
||||||
<path {d}></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.indicator {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.indicator:not(.sync) circle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
circle {
|
|
||||||
fill: var(--color-active);
|
|
||||||
}
|
|
||||||
|
|
||||||
path {
|
|
||||||
fill: var(--color-inactive);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
import './app.css';
|
|
||||||
import App from './App.svelte';
|
|
||||||
|
|
||||||
const app = new App({
|
|
||||||
target: document.getElementById('app')!
|
|
||||||
});
|
|
||||||
|
|
||||||
export default app;
|
|
||||||
11
av-sync/src/vite-env.d.ts
vendored
11
av-sync/src/vite-env.d.ts
vendored
|
|
@ -1,11 +0,0 @@
|
||||||
/// <reference types="svelte" />
|
|
||||||
/// <reference types="vite/client" />
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
interface Window {
|
|
||||||
setFps: (fps: number) => Promise<void>;
|
|
||||||
setFrame: (frame: number) => Promise<void>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export {};
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
|
|
||||||
// for more information about preprocessors
|
|
||||||
preprocess: vitePreprocess(),
|
|
||||||
}
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
{
|
|
||||||
"extends": "@tsconfig/svelte/tsconfig.json",
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "ESNext",
|
|
||||||
"useDefineForClassFields": true,
|
|
||||||
"module": "ESNext",
|
|
||||||
"resolveJsonModule": true,
|
|
||||||
/**
|
|
||||||
* Typecheck JS in `.svelte` and `.js` files by default.
|
|
||||||
* Disable checkJs if you'd like to use dynamic types in JS.
|
|
||||||
* Note that setting allowJs false does not prevent the use
|
|
||||||
* of JS in `.svelte` files.
|
|
||||||
*/
|
|
||||||
"allowJs": true,
|
|
||||||
"checkJs": true,
|
|
||||||
"isolatedModules": true
|
|
||||||
},
|
|
||||||
"include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
|
|
||||||
"references": [{ "path": "./tsconfig.node.json" }]
|
|
||||||
}
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"composite": true,
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"module": "ESNext",
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"strict": true
|
|
||||||
},
|
|
||||||
"include": ["vite.config.ts"]
|
|
||||||
}
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
import { defineConfig } from 'vite'
|
|
||||||
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [svelte()],
|
|
||||||
})
|
|
||||||
|
|
@ -16,8 +16,6 @@
|
||||||
let verticalMargin = MARGIN_SIZE;
|
let verticalMargin = MARGIN_SIZE;
|
||||||
let unloaded = true;
|
let unloaded = true;
|
||||||
|
|
||||||
let transparent = false;
|
|
||||||
|
|
||||||
function updateCounts() {
|
function updateCounts() {
|
||||||
const gridWidth = window.innerWidth - MARGIN_SIZE;
|
const gridWidth = window.innerWidth - MARGIN_SIZE;
|
||||||
const gridHeight = window.innerHeight - MARGIN_SIZE;
|
const gridHeight = window.innerHeight - MARGIN_SIZE;
|
||||||
|
|
@ -71,11 +69,11 @@
|
||||||
<div
|
<div
|
||||||
class="background"
|
class="background"
|
||||||
class:unloaded
|
class:unloaded
|
||||||
class:transparent
|
|
||||||
class:even-vertical={verticalCount % 2 === 0}
|
class:even-vertical={verticalCount % 2 === 0}
|
||||||
style="--horizontal-count: {horizontalCount};
|
style="--horizontal-count: {horizontalCount};
|
||||||
--vertical-count: {verticalCount};
|
--vertical-count: {verticalCount};
|
||||||
--block-size: {blockSize}px;
|
--block-size: {blockSize}px;
|
||||||
|
--corner-blocks: {cornerBlocks};
|
||||||
--horizontal-margin: {horizontalMargin}px;
|
--horizontal-margin: {horizontalMargin}px;
|
||||||
--vertical-margin: {verticalMargin}px;"
|
--vertical-margin: {verticalMargin}px;"
|
||||||
>
|
>
|
||||||
|
|
@ -88,21 +86,15 @@
|
||||||
<div class="edges">
|
<div class="edges">
|
||||||
{#each ['top', 'bottom'] as edge}
|
{#each ['top', 'bottom'] as edge}
|
||||||
<div class="edge {edge}">
|
<div class="edge {edge}">
|
||||||
{#each [...Array(horizontalCount).keys()] as n}
|
{#each [...Array(horizontalCount - cornerBlocks * 2).keys()] as _}
|
||||||
<div
|
<div class="block"></div>
|
||||||
class="block"
|
|
||||||
class:corner-block={n < cornerBlocks || n >= horizontalCount - cornerBlocks}
|
|
||||||
></div>
|
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
{#each ['left', 'right'] as edge}
|
{#each ['left', 'right'] as edge}
|
||||||
<div class="edge {edge}">
|
<div class="edge {edge}">
|
||||||
{#each [...Array(verticalCount).keys()] as n}
|
{#each [...Array(verticalCount - cornerBlocks * 2).keys()] as _}
|
||||||
<div
|
<div class="block"></div>
|
||||||
class="block"
|
|
||||||
class:corner-block={n < cornerBlocks || n >= verticalCount - cornerBlocks}
|
|
||||||
></div>
|
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
@ -129,6 +121,8 @@
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
--corner-color: white;
|
--corner-color: white;
|
||||||
|
--corner-height: calc(var(--vertical-margin) + var(--corner-blocks) * var(--block-size));
|
||||||
|
--corner-width: calc(var(--horizontal-margin) + var(--corner-blocks) * var(--block-size));
|
||||||
}
|
}
|
||||||
|
|
||||||
.corner {
|
.corner {
|
||||||
|
|
@ -137,19 +131,19 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
&.top {
|
&.top {
|
||||||
top: 0;
|
top: 0;
|
||||||
height: var(--vertical-margin);
|
height: var(--corner-height);
|
||||||
}
|
}
|
||||||
&.bottom {
|
&.bottom {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
height: var(--vertical-margin);
|
height: var(--corner-height);
|
||||||
}
|
}
|
||||||
&.left {
|
&.left {
|
||||||
left: 0;
|
left: 0;
|
||||||
width: var(--horizontal-margin);
|
width: var(--corner-width);
|
||||||
}
|
}
|
||||||
&.right {
|
&.right {
|
||||||
right: 0;
|
right: 0;
|
||||||
width: var(--horizontal-margin);
|
width: var(--corner-width);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -169,14 +163,9 @@
|
||||||
|
|
||||||
& .top,
|
& .top,
|
||||||
& .bottom {
|
& .bottom {
|
||||||
width: calc(100vw - var(--horizontal-margin) * 2);
|
width: calc(100vw - var(--corner-width) * 2);
|
||||||
height: calc(var(--margin-size) * 2);
|
height: calc(var(--margin-size) * 2);
|
||||||
left: var(--horizontal-margin);
|
left: var(--corner-width);
|
||||||
|
|
||||||
& .block {
|
|
||||||
width: var(--block-size);
|
|
||||||
height: var(--vertical-margin);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
& .left {
|
& .left {
|
||||||
|
|
@ -190,79 +179,27 @@
|
||||||
& .left,
|
& .left,
|
||||||
& .right {
|
& .right {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: calc(100vh - var(--vertical-margin) * 2);
|
height: calc(100vh - var(--corner-height) * 2);
|
||||||
width: calc(var(--margin-size) * 2);
|
width: calc(var(--margin-size) * 2);
|
||||||
top: var(--vertical-margin);
|
top: var(--corner-height);
|
||||||
|
|
||||||
& .block {
|
|
||||||
width: var(--horizontal-margin);
|
|
||||||
height: var(--block-size);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
& .block {
|
& .block {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
height: var(--block-size);
|
||||||
|
width: var(--block-size);
|
||||||
|
|
||||||
background: black;
|
background: white;
|
||||||
&:nth-child(odd) {
|
&:nth-child(odd) {
|
||||||
background: white;
|
background: black;
|
||||||
}
|
|
||||||
|
|
||||||
&.corner-block {
|
|
||||||
background: white;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.block,
|
.background.even-vertical .edges .right .block {
|
||||||
.corner {
|
background: black;
|
||||||
transition: background 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background.even-vertical .edges .right .block:not(.corner-block) {
|
|
||||||
background: white;
|
|
||||||
&:nth-child(odd) {
|
&:nth-child(odd) {
|
||||||
background: black;
|
background: white;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.background.transparent {
|
|
||||||
& .block {
|
|
||||||
background: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .edge {
|
|
||||||
&.top .block {
|
|
||||||
border-right: 1px solid gray;
|
|
||||||
&:first-child {
|
|
||||||
border-left: 1px solid gray;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.bottom .block {
|
|
||||||
border-right: 1px solid gray;
|
|
||||||
&:first-child {
|
|
||||||
border-left: 1px solid gray;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.left .block {
|
|
||||||
border-bottom: 1px solid gray;
|
|
||||||
&:first-child {
|
|
||||||
border-top: 1px solid gray;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.right .block {
|
|
||||||
border-bottom: 1px solid gray;
|
|
||||||
&:first-child {
|
|
||||||
border-top: 1px solid gray;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .corner {
|
|
||||||
background: transparent !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue