BuboBubo/rsgp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleaning the codebase

Browse Source
This commit is contained in:
Raphaël Forment
2025-10-12 11:17:58 +02:00
parent 7b99dc0f0d
commit 6c11c5756a
5 changed files with 681 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/lib/components/ProcessorPopup.svelte Normal file
View File

@ -0,0 +1,128 @@
<script lang="ts">
import { getAllProcessors } from "../audio/processors/registry";
import type { AudioProcessor } from "../audio/processors/AudioProcessor";
interface Props {
onselect: (processor: AudioProcessor) => void;
}
let { onselect }: Props = $props();
const allProcessors = getAllProcessors().sort((a, b) =>
a.getName().localeCompare(b.getName())
);
</script>
<div class="processor-popup">
{#each allProcessors as processor}
<button
class="processor-tile"
data-description={processor.getDescription()}
onclick={() => onselect(processor)}
>
{processor.getName()}
</button>
{/each}
</div>
<style>
.processor-popup {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #000;
border: 2px solid #fff;
padding: 0.5rem;
z-index: 1000;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.4rem;
width: 90vw;
max-width: 400px;
margin-bottom: 0.5rem;
max-height: 60vh;
overflow-y: auto;
}
.processor-tile {
background-color: #1a1a1a;
border: 1px solid #444;
padding: 0.5rem 0.4rem;
text-align: center;
cursor: pointer;
transition: background-color 0.2s, border-color 0.2s;
font-size: 0.8rem;
color: #fff;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.processor-tile:hover {
background-color: #2a2a2a;
border-color: #646cff;
}
.processor-tile::after {
content: attr(data-description);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
padding: 0.5rem 0.75rem;
background-color: #0a0a0a;
border: 1px solid #444;
color: #ccc;
font-size: 0.85rem;
width: max-content;
max-width: 200px;
white-space: normal;
word-wrap: break-word;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
z-index: 1001;
margin-bottom: 0.25rem;
display: none;
}
@media (min-width: 768px) {
.processor-popup {
grid-template-columns: repeat(3, 1fr);
width: 500px;
max-width: 500px;
padding: 0.6rem;
gap: 0.5rem;
}
.processor-tile {
font-size: 0.85rem;
padding: 0.6rem 0.5rem;
}
.processor-tile::after {
display: block;
max-width: 300px;
}
.processor-tile:hover::after {
opacity: 1;
}
}
@media (min-width: 1024px) {
.processor-popup {
grid-template-columns: repeat(4, 1fr);
width: 600px;
max-width: 600px;
padding: 0.75rem;
}
.processor-tile {
font-size: 0.85rem;
padding: 0.6rem 0.4rem;
}
}
</style>

76
src/lib/components/VUMeter.svelte
View File

@ -88,10 +88,20 @@
if (!buffer) return;
const [leftDB, rightDB] = calculateLevels();
const isHorizontal = width > height;
if (isHorizontal) {
drawHorizontal(ctx, leftDB, rightDB, width, height);
} else {
drawVertical(ctx, leftDB, rightDB, width, height);
}
}
function drawVertical(ctx: CanvasRenderingContext2D, leftDB: number, rightDB: number, width: number, height: number) {
const channelWidth = width / 2;
drawChannel(ctx, 0, leftDB, channelWidth, height);
drawChannel(ctx, channelWidth, rightDB, channelWidth, height);
drawChannelVertical(ctx, 0, leftDB, channelWidth, height);
drawChannelVertical(ctx, channelWidth, rightDB, channelWidth, height);
ctx.strokeStyle = '#333';
ctx.lineWidth = 1;
@ -101,6 +111,20 @@
ctx.stroke();
}
function drawHorizontal(ctx: CanvasRenderingContext2D, leftDB: number, rightDB: number, width: number, height: number) {
const channelHeight = height / 2;
drawChannelHorizontal(ctx, 0, leftDB, width, channelHeight);
drawChannelHorizontal(ctx, channelHeight, rightDB, width, channelHeight);
ctx.strokeStyle = '#333';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, channelHeight);
ctx.lineTo(width, channelHeight);
ctx.stroke();
}
function dbToY(db: number, height: number): number {
const minDB = -60;
const maxDB = 0;
@ -109,7 +133,15 @@
return height - (normalized * height);
}
function drawChannel(ctx: CanvasRenderingContext2D, x: number, levelDB: number, width: number, height: number) {
function dbToX(db: number, width: number): number {
const minDB = -60;
const maxDB = 0;
const clampedDB = Math.max(minDB, Math.min(maxDB, db));
const normalized = (clampedDB - minDB) / (maxDB - minDB);
return normalized * width;
}
function drawChannelVertical(ctx: CanvasRenderingContext2D, x: number, levelDB: number, width: number, height: number) {
const gridMarks = [0, -3, -6, -10, -20, -40, -60];
ctx.strokeStyle = '#222';
ctx.lineWidth = 1;
@ -146,6 +178,44 @@
}
}
}
function drawChannelHorizontal(ctx: CanvasRenderingContext2D, y: number, levelDB: number, width: number, height: number) {
const gridMarks = [0, -3, -6, -10, -20, -40, -60];
ctx.strokeStyle = '#222';
ctx.lineWidth = 1;
for (const db of gridMarks) {
const x = dbToX(db, width);
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y + height);
ctx.stroke();
}
if (levelDB === -Infinity) return;
const segments = [
{ startDB: -60, endDB: -18, color: '#00ff00' },
{ startDB: -18, endDB: -6, color: '#ffff00' },
{ startDB: -6, endDB: 0, color: '#ff0000' }
];
for (const segment of segments) {
if (levelDB >= segment.startDB) {
const startX = dbToX(segment.startDB, width);
const endX = dbToX(segment.endDB, width);
const clampedLevelDB = Math.min(levelDB, segment.endDB);
const levelX = dbToX(clampedLevelDB, width);
const segmentWidth = levelX - startX;
if (segmentWidth > 0) {
ctx.fillStyle = segment.color;
ctx.fillRect(startX, y, segmentWidth, height);
}
}
}
}
</script>
<canvas bind:this={canvas}></canvas>

159
src/lib/components/WelcomeModal.svelte Normal file
View File

@ -0,0 +1,159 @@
<script lang="ts">
interface Props {
onclose: () => void;
}
let { onclose }: Props = $props();
</script>
<div
class="modal-overlay"
role="button"
tabindex="0"
onclick={onclose}
onkeydown={(e) => e.key === "Enter" && onclose()}
>
<div
class="modal-content"
role="dialog"
aria-labelledby="modal-title"
tabindex="-1"
onclick={(e) => e.stopPropagation()}
onkeydown={(e) => e.stopPropagation()}
>
<h1 id="modal-title">Vending Machine</h1>
<p class="description">
Oh, looks like you found a sound vending machine. This one seems slightly
broken and it seems that you can get sounds for free... Have fun!
</p>
<div class="modal-links">
<p>
Created by <a
href="https://raphaelforment.fr"
target="_blank"
rel="noopener noreferrer">Raphaël Forment (BuboBubo)</a
>
</p>
<p>
Licensed under <a
href="https://www.gnu.org/licenses/gpl-3.0.html"
target="_blank"
rel="noopener noreferrer">GPL 3.0</a
>
</p>
</div>
<button class="modal-close" onclick={onclose}>Start</button>
</div>
</div>
<style>
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
}
.modal-content {
background-color: #000;
border: 2px solid #fff;
padding: 1.5rem;
max-width: 500px;
width: 90%;
color: #fff;
max-height: 90vh;
overflow-y: auto;
}
.modal-content h1 {
margin: 0 0 0.75rem 0;
font-size: 1.5rem;
font-weight: bold;
}
.modal-content .description {
margin: 0 0 1rem 0;
line-height: 1.5;
color: #ccc;
font-size: 0.9rem;
}
.modal-links {
margin: 1rem 0;
padding: 0.75rem 0;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
}
.modal-links p {
margin: 0.4rem 0;
font-size: 0.85rem;
color: #ccc;
line-height: 1.4;
}
.modal-links a {
color: #646cff;
text-decoration: none;
word-break: break-word;
}
.modal-links a:hover {
text-decoration: underline;
}
.modal-close {
margin-top: 0.75rem;
width: 100%;
padding: 0.65rem;
font-size: 1rem;
background-color: #fff;
color: #000;
border: none;
cursor: pointer;
font-weight: bold;
}
.modal-close:hover {
background-color: #ddd;
}
@media (min-width: 768px) {
.modal-content {
padding: 2rem;
}
.modal-content h1 {
font-size: 2rem;
margin: 0 0 1rem 0;
}
.modal-content .description {
margin: 0 0 1.5rem 0;
font-size: 1rem;
line-height: 1.6;
}
.modal-links {
margin: 1.5rem 0;
padding: 1rem 0;
}
.modal-links p {
font-size: 0.9rem;
margin: 0.5rem 0;
}
.modal-close {
margin-top: 1rem;
padding: 0.75rem;
font-size: 1.1rem;
}
}
</style>