<script>
import Keyboard from "./Keyboard.svelte";
let logs = [];
function noteOn(event) {
logs = [`Note ${event.detail} was pressed!`, ...logs];
}
function noteOff(event) {
logs = [`Note ${event.detail} was released!`, ...logs];
}
</script>
<svelte:head>
<title>Svelte Piano</title>
</svelte:head>
<Keyboard octaves={2} on:noteon={noteOn} on:noteoff={noteOff} />
{#each logs as log}
<div>{log}</div>
{/each}