Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/FractalHQ/fractils
Browse files Browse the repository at this point in the history
  • Loading branch information
@dllmusic
dllmusic committed Feb 23, 2024
2 parents cdcd625 + ecfe953 commit 5100b52
Show file tree
Hide file tree
Showing 9 changed files with 1,047 additions and 272 deletions.
95 changes: 53 additions & 42 deletions src/lib/css/shadows.scss
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,54 @@
@mixin shadows {
--shadow-color: 0deg 0% 0%;

--shadow-xs: 0px 0.3px 0.3px hsl(var(--shadow-color) / 0.53),
-0.1px 1.5px 1.6px -1.4px hsl(var(--shadow-color) / 0.48),
-0.2px 6.3px 6.7px -2.9px hsl(var(--shadow-color) / 0.43);

--shadow-xs: 0rem 0.015rem 0.02rem hsl(var(--shadow-color) / 0.01),
0rem 0.15rem 0.04rem hsl(var(--shadow-color) / 0.01), 0rem 0.07rem 0.075rem hsl(var(--shadow-color) / 0.011),
0rem 0.1rem 0.1rem hsl(var(--shadow-color) / 0.022), 0rem 0.125rem 0.125rem hsl(var(--shadow-color) / 0.033),
0rem 0.15rem 0.25rem hsl(var(--shadow-color) / 0.05);
--shadow-sm: 0rem 0.0313rem 0.0469rem hsl(var(--shadow-color) / 0.02),
0rem 0.125rem 0.0938rem hsl(var(--shadow-color) / 0.02),
0rem 0.1563rem 0.125rem hsl(var(--shadow-color) / 0.025),
0rem 0.1875rem 0.1875rem hsl(var(--shadow-color) / 0.05),
0rem 0.3125rem 0.3125rem hsl(var(--shadow-color) / 0.05),
0rem 0.4375rem 0.625rem hsl(var(--shadow-color) / 0.075);
--shadow: 0rem 0.0469rem 0.0625rem hsl(var(--shadow-color) / 0.015),
0rem 0.1563rem 0.125rem hsl(var(--shadow-color) / 0.02),
0rem 0.2813rem 0.1875rem hsl(var(--shadow-color) / 0.025),
0rem 0.3125rem 0.3125rem hsl(var(--shadow-color) / 0.0325),
0rem 0.625rem 0.625rem hsl(var(--shadow-color) / 0.045), 0rem 0.625rem 1.25rem hsl(var(--shadow-color) / 0.05);
--shadow-lg: 0rem 0.0781rem 0.0625rem hsl(var(--shadow-color) / 0.035),
0rem 0.1563rem 0.1563rem hsl(var(--shadow-color) / 0.04),
0rem 0.2813rem 0.3125rem hsl(var(--shadow-color) / 0.045), 0rem 0.3125rem 0.5rem hsl(var(--shadow-color) / 0.05),
0rem 0.625rem 0.9375rem hsl(var(--shadow-color) / 0.06), 0rem 1.25rem 1.875rem hsl(var(--shadow-color) / 0.07);
--shadow-xl: 0px 0.3px 0.3px hsl(var(--shadow-color) / 0.49),
-0.1px 2.1px 2.2px -0.6px hsl(var(--shadow-color) / 0.47),
-0.2px 4.6px 4.9px -1.2px hsl(var(--shadow-color) / 0.45),
-0.4px 9.2px 9.8px -1.7px hsl(var(--shadow-color) / 0.42),
-0.7px 17.4px 18.5px -2.3px hsl(var(--shadow-color) / 0.4),
-1.2px 30.6px 32.6px -2.9px hsl(var(--shadow-color) / 0.38);
--shadow-xxl: 0px 0.3px 0.3px hsl(var(--shadow-color) / 0.69), 0px 1.1px 1px -0.5px hsl(var(--shadow-color) / 0.63),
0px 2.3px 2.1px -1.1px hsl(var(--shadow-color) / 0.57),
-0.1px 4.4px 4.1px -1.6px hsl(var(--shadow-color) / 0.51),
-0.1px 8px 7.4px -2.2px hsl(var(--shadow-color) / 0.45),
-0.2px 13.7px 12.7px -2.7px hsl(var(--shadow-color) / 0.39),
-0.4px 22.1px 20.6px -3.3px hsl(var(--shadow-color) / 0.33),
-0.6px 33.8px 31.4px -3.8px hsl(var(--shadow-color) / 0.28);

--shadow-inset: 0 0 5px 0 #000 inset;
--shadow-inset-b: 0 0 13px 0 #000a inset, 0 0 5px 0 #000a inset, 0 0 3px 1px #0009 inset;
}
--shadow-color: 0deg 0% 0%;

&[theme='light'] {
--shadow-color: 0deg 0% 50%;
}

--shadow-xs: 0rem 0.015rem 0.02rem hsl(var(--shadow-color) / 0.01),
0rem 0.15rem 0.04rem hsl(var(--shadow-color) / 0.01),
0rem 0.07rem 0.075rem hsl(var(--shadow-color) / 0.011),
0rem 0.1rem 0.1rem hsl(var(--shadow-color) / 0.022),
0rem 0.125rem 0.125rem hsl(var(--shadow-color) / 0.033),
0rem 0.15rem 0.25rem hsl(var(--shadow-color) / 0.05);

--shadow-sm: 0rem 0.0313rem 0.0469rem hsl(var(--shadow-color) / 0.02),
0rem 0.125rem 0.0938rem hsl(var(--shadow-color) / 0.02),
0rem 0.1563rem 0.125rem hsl(var(--shadow-color) / 0.025),
0rem 0.1875rem 0.1875rem hsl(var(--shadow-color) / 0.05),
0rem 0.3125rem 0.3125rem hsl(var(--shadow-color) / 0.05),
0rem 0.4375rem 0.625rem hsl(var(--shadow-color) / 0.075);

--shadow: 0rem 0.0469rem 0.0625rem hsl(var(--shadow-color) / 0.015),
0rem 0.1563rem 0.125rem hsl(var(--shadow-color) / 0.02),
0rem 0.2813rem 0.1875rem hsl(var(--shadow-color) / 0.025),
0rem 0.3125rem 0.3125rem hsl(var(--shadow-color) / 0.0325),
0rem 0.625rem 0.625rem hsl(var(--shadow-color) / 0.045),
0rem 0.625rem 1.25rem hsl(var(--shadow-color) / 0.05);

--shadow-lg: 0rem 0.0781rem 0.0625rem hsl(var(--shadow-color) / 0.035),
0rem 0.1563rem 0.1563rem hsl(var(--shadow-color) / 0.04),
0rem 0.2813rem 0.3125rem hsl(var(--shadow-color) / 0.045),
0rem 0.3125rem 0.5rem hsl(var(--shadow-color) / 0.05),
0rem 0.625rem 0.9375rem hsl(var(--shadow-color) / 0.06),
0rem 1.25rem 1.875rem hsl(var(--shadow-color) / 0.07);

--shadow-xl: 0px 0.3px 0.3px hsl(var(--shadow-color) / 0.49),
-0.1px 2.1px 2.2px -0.6px hsl(var(--shadow-color) / 0.47),
-0.2px 4.6px 4.9px -1.2px hsl(var(--shadow-color) / 0.45),
-0.4px 9.2px 9.8px -1.7px hsl(var(--shadow-color) / 0.42),
-0.7px 17.4px 18.5px -2.3px hsl(var(--shadow-color) / 0.4),
-1.2px 30.6px 32.6px -2.9px hsl(var(--shadow-color) / 0.38);

--shadow-xxl: 0px 0.3px 0.3px hsl(var(--shadow-color) / 0.69),
0px 1.1px 1px -0.5px hsl(var(--shadow-color) / 0.63),
0px 2.3px 2.1px -1.1px hsl(var(--shadow-color) / 0.57),
-0.1px 4.4px 4.1px -1.6px hsl(var(--shadow-color) / 0.51),
-0.1px 8px 7.4px -2.2px hsl(var(--shadow-color) / 0.45),
-0.2px 13.7px 12.7px -2.7px hsl(var(--shadow-color) / 0.39),
-0.4px 22.1px 20.6px -3.3px hsl(var(--shadow-color) / 0.33),
-0.6px 33.8px 31.4px -3.8px hsl(var(--shadow-color) / 0.28);

--shadow-inset: 0 0 5px 0 #000 inset;
--shadow-inset-b: 0 0 13px 0 #000a inset, 0 0 5px 0 #000a inset, 0 0 3px 1px #0009 inset;
}
31 changes: 24 additions & 7 deletions src/lib/css/theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,25 @@ $theme-a: #00bcd4;
$theme-b: #f8d2c9;
$theme-c: #ba788a;

$dark-a: #15161d;
$dark-b: #282a36;
$dark-c: #1d252e;
$dark-d: #3a3a44;
// $dark-a: #15161d;
// $dark-b: #21232d;
// $dark-c: #181f27;
// $dark-d: #3a3a44;
// $light-a: #ffffff;
// $light-b: #dfe1e9;
// $light-c: #c3c4c7;
// $light-d: #777d8f;

$dark-a: #0B0B11;
$dark-b: #15161D;
$dark-c: #1F202D;
$dark-d: #353746;
$dark-e: #474A5B;
$light-a: #ffffff;
$light-b: #dfe1e9;
$light-c: #c3c4c7;
$light-d: #777d8f;
$light-c: #BABECA;
$light-d: #777D8F;
$light-e: #5F6377;

// Enables alpha manipulation, ie: rgba(var(--fg-a-rgb), 0.5)
@mixin variables($map) {
Expand All @@ -23,7 +34,7 @@ html {
// &[theme='dark'] {
@include variables(
(
darker: #0b0e11,
always-dark: $dark-a,

theme-a: $theme-a,
theme-b: $theme-b,
Expand All @@ -33,19 +44,23 @@ html {
dark-b: $dark-b,
dark-c: $dark-c,
dark-d: $dark-d,
dark-e: $dark-e,
light-a: $light-a,
light-b: $light-b,
light-c: $light-c,
light-d: $light-d,
light-e: $light-e,

bg-a: $dark-a,
bg-b: $dark-b,
bg-c: $dark-c,
bg-d: $dark-d,
bg-e: $dark-e,
fg-a: $light-a,
fg-b: $light-b,
fg-c: $light-c,
fg-d: $light-d,
fg-e: $light-e,
)
);
// }
Expand All @@ -61,10 +76,12 @@ html {
fg-b: $dark-b,
fg-c: $dark-c,
fg-d: $dark-d,
fg-e: $dark-e,
bg-a: $light-a,
bg-b: $light-b,
bg-c: $light-c,
bg-d: $light-d,
bg-e: $light-e,
)
);
}
Expand Down
150 changes: 127 additions & 23 deletions src/lib/gui/Folder.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,31 +216,139 @@ export class Folder {
}

#createIcon() {
const strokeWidth = 1
const x = 12
const y = 12
const r = 4
const fill = 'var(--bg-a)'
const theme = 'var(--theme-a)'
const altStroke = 'var(--fg-d)'

this.#folderIcon ??= document.createElement('div')
this.#folderIcon.classList.add('icon-folder-container')

const orbCount = [...this.allChildren, ...this.controls.values()].length

const circs = [
{ id: 1, cx: 16.43, cy: 11.93, r: 1.1103 },
{ id: 2, cx: 15.13, cy: 15.44, r: 0.8081 },
{ id: 3, cx: 15.13, cy: 8.423, r: 0.8081 },
{ id: 4, cx: 12.49, cy: 16.05, r: 0.4788 },
{ id: 5, cx: 12.42, cy: 7.876, r: 0.545 },
{ id: 6, cx: 10.43, cy: 15.43, r: 0.2577 },
{ id: 7, cx: 10.43, cy: 8.506, r: 0.2769 },
{ id: 8, cx: 17.85, cy: 14.59, r: 0.5635 },
{ id: 9, cx: 17.85, cy: 9.295, r: 0.5635 },
{ id: 10, cx: 19.19, cy: 12.95, r: 0.5635 },
{ id: 11, cx: 19.19, cy: 10.9, r: 0.5635 },
{ id: 12, cx: 20.38, cy: 11.96, r: 0.2661 },
{ id: 13, cx: 19.74, cy: 14.07, r: 0.2661 },
{ id: 14, cx: 19.74, cy: 9.78, r: 0.2661 },
{ id: 15, cx: 20.7, cy: 12.96, r: 0.2661 },
{ id: 16, cx: 20.7, cy: 10.9, r: 0.2661 },
{ id: 17, cx: 21.38, cy: 11.96, r: 0.2661 },
] as const

function circ(c: { id: number; cx: number; cy: number; r: number }) {
return /*html*/ `<circle
class="alt c${c.id}"
cx="${c.cx * 1.1}"
cy="${c.cy}"
r="${c.r}"
style="transition-delay: ${c.id * 0.05}s;"
/>`
}

function toCircs(ids: number[]) {
return ids.map((id) => circ(circs[id - 1])).join('\n')
}

const circMap = {
0: [],
1: [1],
2: [2, 3],
3: [1, 2, 3],
4: [2, 3, 4, 5],
5: [1, 2, 3, 4, 5],
6: [2, 3, 4, 5, 6, 7],
7: [1, 2, 3, 4, 5, 6, 7],
8: [1, 2, 3, 4, 5, 6, 7, 8],
9: [1, 2, 3, 4, 5, 6, 7, 8, 9],
10: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
11: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
12: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
13: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
14: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
15: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
16: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
17: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17],
}

const circles = toCircs(circMap[Math.min(orbCount, circs.length)])
const bounce = 'cubic-bezier(0.36, 0, 0.66, -0.56)'
const ease = 'cubic-bezier(0.23, 1, 0.320, 1)'

const css = /*css*/ `
.icon-folder {
stroke: var(--theme-a);
fill: var(--theme-a);
overflow: visible;
}
.icon-folder circle {
transition: 0.25s;
.icon-folder circle, .icon-folder line {
transform-origin: center;
transition-duration: 0.33s;
transition-timing-function: ${ease};
}
.icon-folder circle.b {
/*//? Circle A */
.icon-folder circle.a {
transform: scale(0.5);
stroke: ${fill};
fill: ${theme};
transition: all .2s ${bounce}, stroke 2s ${bounce};
}
.closed .icon-folder circle.a {
transform: scale(1);
stroke: ${theme};
fill: ${fill};
}
/*//? Circle B */
.icon-folder circle.b {
transform: scale(1.75);
stroke: none;
fill: ${fill};
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.83, 1, 0.820, 1);
}
.closed .icon-folder circle.b {
transform: scale(2);
transform: scale(1);
fill: ${fill};
}
/*//? Circle Alt */
.icon-folder circle.alt {
transform: scale(0);
transform: translate(0, 0) scale(0);
stroke: none;
fill: ${theme};
transition-duration: 1.5s;
transition-timing-function: ${ease};
}
.closed .icon-folder circle.alt {
transform: scale(1);
}`
transform: translate(-3px, 0) scale(1.8);
transition-duration: 0.5s;
transition-timing-function: ${ease};
}
`.trim()

this.#folderIcon.innerHTML = /*html*/ `
<svg
Expand All @@ -249,23 +357,19 @@ export class Folder {
height="100%"
viewBox="0 0 24 24"
fill="none"
stroke-width="1"
stroke-width="${strokeWidth}"
stroke-linecap="round"
stroke-linejoin="round"
class="icon-folder"
overflow="visible"
>
${this.allChildren.map((_: Folder, ii: number) => {
const i = ii + 1
const x = 14 + i * 6
// const y = 12 + i * 3
const y = 12
const r = Math.pow(2, -i * 0.5)
return /*html*/ `<circle class="alt" cx="${x}" cy="${y}" r="${r}" fill="var(--theme-a)" />`
})}
<circle class="a" cx="12" cy="12" r="3" stroke="var(--theme-a)" fill="var(--theme-a)" />
<circle class="b" cx="12" cy="12" r="3" stroke="var(--bg-a)" fill="none" />
<!-- Vertical line that spans downwards to fill 100% of it's flexbox parent -->
<line x1="12" y1="12" x2="12" y2="100%" stroke="var(--theme-a)" />
<circle class="b" cx="${x}" cy="${y}" r="${r}" stroke="${altStroke}" stroke-width="0.1" fill="none" />
<circle class="a" cx="${x}" cy="${y}" r="${r}" stroke="${theme}" fill="${fill}" />
${circles}
<style lang="css">
${css}
</style>
Expand Down
Loading

0 comments on commit 5100b52

Please sign in to comment.