Skip to content

Commit ebf031d

Browse files
fcastrovillifcastrovilli
committed
feat: images test
1 parent 91ebc35 commit ebf031d

File tree

13 files changed

+241
-16
lines changed

13 files changed

+241
-16
lines changed

‎custom_theme.ts

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
2+
3+
export const customTheme: CustomThemeConfig = {
4+
name: 'bnw-theme',
5+
properties: {
6+
// =~= Theme Properties =~=
7+
'--theme-font-family-base': `system-ui`,
8+
'--theme-font-family-heading': `system-ui`,
9+
'--theme-font-color-base': '0 0 0',
10+
'--theme-font-color-dark': '255 255 255',
11+
'--theme-rounded-base': '9999px',
12+
'--theme-rounded-container': '8px',
13+
'--theme-border-base': '1px',
14+
// =~= Theme On-X Colors =~=
15+
'--on-primary': '0 0 0',
16+
'--on-secondary': '255 255 255',
17+
'--on-tertiary': '0 0 0',
18+
'--on-success': '0 0 0',
19+
'--on-warning': '0 0 0',
20+
'--on-error': '255 255 255',
21+
'--on-surface': '255 255 255',
22+
// =~= Theme Colors =~=
23+
// primary | #ffffff
24+
'--color-primary-50': '255 255 255', // #ffffff
25+
'--color-primary-100': '255 255 255', // #ffffff
26+
'--color-primary-200': '255 255 255', // #ffffff
27+
'--color-primary-300': '255 255 255', // #ffffff
28+
'--color-primary-400': '255 255 255', // #ffffff
29+
'--color-primary-500': '255 255 255', // #ffffff
30+
'--color-primary-600': '230 230 230', // #e6e6e6
31+
'--color-primary-700': '191 191 191', // #bfbfbf
32+
'--color-primary-800': '153 153 153', // #999999
33+
'--color-primary-900': '125 125 125', // #7d7d7d
34+
// secondary | #4F46E5
35+
'--color-secondary-50': '229 227 251', // #e5e3fb
36+
'--color-secondary-100': '220 218 250', // #dcdafa
37+
'--color-secondary-200': '211 209 249', // #d3d1f9
38+
'--color-secondary-300': '185 181 245', // #b9b5f5
39+
'--color-secondary-400': '132 126 237', // #847eed
40+
'--color-secondary-500': '79 70 229', // #4F46E5
41+
'--color-secondary-600': '71 63 206', // #473fce
42+
'--color-secondary-700': '59 53 172', // #3b35ac
43+
'--color-secondary-800': '47 42 137', // #2f2a89
44+
'--color-secondary-900': '39 34 112', // #272270
45+
// tertiary | #0EA5E9
46+
'--color-tertiary-50': '219 242 252', // #dbf2fc
47+
'--color-tertiary-100': '207 237 251', // #cfedfb
48+
'--color-tertiary-200': '195 233 250', // #c3e9fa
49+
'--color-tertiary-300': '159 219 246', // #9fdbf6
50+
'--color-tertiary-400': '86 192 240', // #56c0f0
51+
'--color-tertiary-500': '14 165 233', // #0EA5E9
52+
'--color-tertiary-600': '13 149 210', // #0d95d2
53+
'--color-tertiary-700': '11 124 175', // #0b7caf
54+
'--color-tertiary-800': '8 99 140', // #08638c
55+
'--color-tertiary-900': '7 81 114', // #075172
56+
// success | #84cc16
57+
'--color-success-50': '237 247 220', // #edf7dc
58+
'--color-success-100': '230 245 208', // #e6f5d0
59+
'--color-success-200': '224 242 197', // #e0f2c5
60+
'--color-success-300': '206 235 162', // #ceeba2
61+
'--color-success-400': '169 219 92', // #a9db5c
62+
'--color-success-500': '132 204 22', // #84cc16
63+
'--color-success-600': '119 184 20', // #77b814
64+
'--color-success-700': '99 153 17', // #639911
65+
'--color-success-800': '79 122 13', // #4f7a0d
66+
'--color-success-900': '65 100 11', // #41640b
67+
// warning | #EAB308
68+
'--color-warning-50': '252 244 218', // #fcf4da
69+
'--color-warning-100': '251 240 206', // #fbf0ce
70+
'--color-warning-200': '250 236 193', // #faecc1
71+
'--color-warning-300': '247 225 156', // #f7e19c
72+
'--color-warning-400': '240 202 82', // #f0ca52
73+
'--color-warning-500': '234 179 8', // #EAB308
74+
'--color-warning-600': '211 161 7', // #d3a107
75+
'--color-warning-700': '176 134 6', // #b08606
76+
'--color-warning-800': '140 107 5', // #8c6b05
77+
'--color-warning-900': '115 88 4', // #735804
78+
// error | #D41976
79+
'--color-error-50': '249 221 234', // #f9ddea
80+
'--color-error-100': '246 209 228', // #f6d1e4
81+
'--color-error-200': '244 198 221', // #f4c6dd
82+
'--color-error-300': '238 163 200', // #eea3c8
83+
'--color-error-400': '225 94 159', // #e15e9f
84+
'--color-error-500': '212 25 118', // #D41976
85+
'--color-error-600': '191 23 106', // #bf176a
86+
'--color-error-700': '159 19 89', // #9f1359
87+
'--color-error-800': '127 15 71', // #7f0f47
88+
'--color-error-900': '104 12 58', // #680c3a
89+
// surface | #000000
90+
'--color-surface-50': '217 217 217', // #d9d9d9
91+
'--color-surface-100': '204 204 204', // #cccccc
92+
'--color-surface-200': '191 191 191', // #bfbfbf
93+
'--color-surface-300': '153 153 153', // #999999
94+
'--color-surface-400': '77 77 77', // #4d4d4d
95+
'--color-surface-500': '0 0 0', // #000000
96+
'--color-surface-600': '0 0 0', // #000000
97+
'--color-surface-700': '0 0 0', // #000000
98+
'--color-surface-800': '0 0 0', // #000000
99+
'--color-surface-900': '0 0 0' // #000000
100+
}
101+
};

‎src/app.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en" class="dark">
33
<head>
44
<meta charset="utf-8" />
55
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
66
<meta name="viewport" content="width=device-width" />
77
%sveltekit.head%
88
</head>
9-
<body data-sveltekit-preload-data="hover" data-theme="crimson">
9+
<body data-sveltekit-preload-data="hover" data-theme="bnw-theme">
1010
<div style="display: contents">%sveltekit.body%</div>
1111
</body>
1212
</html>

‎src/lib/images.svelte

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<script lang="ts">
2+
import * as Tone from 'tone';
3+
const poly = new Tone.PolySynth().toDestination();
4+
import { synth_options, scale } from './store';
5+
import Scale from '@tonaljs/scale';
6+
7+
$: selected_scale = Scale.get($scale);
8+
9+
$: {
10+
poly.set({
11+
envelope: {
12+
...$synth_options
13+
},
14+
volume: -10
15+
});
16+
}
17+
18+
function attack(note: string) {
19+
poly.triggerAttack(note);
20+
}
21+
22+
function release(note: string) {
23+
poly.triggerRelease(note);
24+
}
25+
</script>
26+
27+
<div class="flex items-center justify-center h-screen w-screen p-0">
28+
<section class="p-0 m-0">
29+
<div class="grid grid-cols-11">
30+
<div class="col-span-7 h-full">
31+
<button
32+
on:contextmenu={() => {
33+
return false;
34+
}}
35+
on:pointerdown={() => attack(selected_scale.notes[0])}
36+
on:pointerup={() => release(selected_scale.notes[0])}
37+
on:pointerleave={() => release(selected_scale.notes[0])}
38+
>
39+
<img class="h-auto max-w-full" src="/images/01_A.png" alt="Sezione 1" />
40+
</button>
41+
<div class="flex flex-row">
42+
<button
43+
on:contextmenu={() => {
44+
return false;
45+
}}
46+
on:pointerdown={() => attack(selected_scale.notes[3])}
47+
on:pointerup={() => release(selected_scale.notes[3])}
48+
on:pointerleave={() => release(selected_scale.notes[3])}
49+
>
50+
<img class="h-full w-auto" src="/images/04_F.png" alt="Sezione 4" />
51+
</button>
52+
<button
53+
on:contextmenu={() => {
54+
return false;
55+
}}
56+
on:pointerdown={() => attack(selected_scale.notes[4])}
57+
on:pointerup={() => release(selected_scale.notes[4])}
58+
on:pointerleave={() => release(selected_scale.notes[4])}
59+
>
60+
<img class="h-full w-auto" src="/images/05_D.png" alt="Sezione 5" />
61+
</button>
62+
</div>
63+
</div>
64+
<div class="grid col-span-4 grid-rows-1">
65+
<button
66+
on:contextmenu={() => {
67+
return false;
68+
}}
69+
on:pointerdown={() => attack(selected_scale.notes[1])}
70+
on:pointerup={() => release(selected_scale.notes[1])}
71+
on:pointerleave={() => release(selected_scale.notes[1])}
72+
>
73+
<img class="h-auto max-w-full" src="/images/02_B.png" alt="Sezione 2" />
74+
</button>
75+
<button
76+
on:contextmenu={() => {
77+
return false;
78+
}}
79+
on:pointerdown={() => attack(selected_scale.notes[2])}
80+
on:pointerup={() => release(selected_scale.notes[2])}
81+
on:pointerleave={() => release(selected_scale.notes[2])}
82+
>
83+
<img class="h-auto max-w-full" src="/images/03_G.png" alt="Sezione 3" />
84+
</button>
85+
<button
86+
on:contextmenu={() => {
87+
return false;
88+
}}
89+
on:pointerdown={() => attack(selected_scale.notes[5])}
90+
on:pointerup={() => release(selected_scale.notes[5])}
91+
on:pointerleave={() => release(selected_scale.notes[5])}
92+
>
93+
<img class="h-auto max-w-full" src="/images/06_C.png" alt="Sezione 6" />
94+
</button>
95+
</div>
96+
</div>
97+
<div class="flex flex-row w-full">
98+
<button
99+
on:contextmenu={() => {
100+
return false;
101+
}}
102+
on:pointerdown={() => attack(selected_scale.notes[6])}
103+
on:pointerup={() => release(selected_scale.notes[6])}
104+
on:pointerleave={() => release(selected_scale.notes[6])}
105+
>
106+
<img class="h-auto max-w-full" src="/images/07_Fsharp.png" alt="Sezione 7" />
107+
</button>
108+
<button
109+
on:contextmenu={() => {
110+
return false;
111+
}}
112+
on:pointerdown={() => attack(selected_scale.notes[0])}
113+
on:pointerup={() => release(selected_scale.notes[0])}
114+
on:pointerleave={() => release(selected_scale.notes[0])}
115+
>
116+
<img class="h-auto max-w-full" src="/images/08_E.png" alt="Sezione 8" />
117+
</button>
118+
</div>
119+
</section>
120+
</div>

‎src/routes/images/+page.svelte

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<script lang="ts">
2+
import Images from '$lib/images.svelte';
3+
</script>
4+
5+
<Images />

‎static/images/01_A.png

24.9 KB
Loading

‎static/images/02_B.png

5.69 KB
Loading

‎static/images/03_G.png

4.53 KB
Loading

‎static/images/04_F.png

6.96 KB
Loading

‎static/images/05_D.png

6.77 KB
Loading

‎static/images/06_C.png

5 KB
Loading

‎static/images/07_Fsharp.png

5.09 KB
Loading

‎static/images/08_E.png

7.96 KB
Loading

‎tailwind.config.ts

+13-14
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
1-
import { join } from 'path'
2-
import type { Config } from 'tailwindcss'
3-
import { skeleton } from '@skeletonlabs/tw-plugin'
1+
import { join } from 'path';
2+
import type { Config } from 'tailwindcss';
3+
import { skeleton } from '@skeletonlabs/tw-plugin';
4+
import { customTheme } from './custom_theme';
45

56
export default {
67
darkMode: 'class',
7-
content: ['./src/**/*.{html,js,svelte,ts}', join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')],
8+
content: [
9+
'./src/**/*.{html,js,svelte,ts}',
10+
join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
11+
],
812
theme: {
9-
extend: {},
13+
extend: {}
1014
},
1115
plugins: [
1216
skeleton({
1317
themes: {
14-
preset: [
15-
{
16-
name: 'crimson',
17-
enhancements: true,
18-
},
19-
],
20-
},
21-
}),
22-
],
18+
custom: [customTheme]
19+
}
20+
})
21+
]
2322
} satisfies Config;

0 commit comments

Comments
 (0)