research/statebuddy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

digital watch can play beep sound

Browse source
This commit is contained in:
Joeri Exelmans 2025-10-26 13:44:23 +01:00
parent 25fbb26fd7
commit 56467e5ea5
4 changed files with 28 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/App/Plant/DigitalWatch/DigitalWatch.tsx
View file

@ -4,7 +4,10 @@ import digitalFont from "./digital-font.ttf";
import { Plant } from "../Plant";
import { RaisedEvent } from "@/statecharts/runtime_types";
import sndBeep from "./beep.wav";
import "./DigitalWatch.css";
import { useAudioContext } from "@/App/useAudioContext";
import { useEffect } from "react";
type DigitalWatchState = {
light: boolean;
@ -12,10 +15,12 @@ type DigitalWatchState = {
m: number;
s: number;
alarm: boolean;
beep: boolean;
}
type DigitalWatchProps = {
state: DigitalWatchState,
speed: number
callbacks: {
onTopLeftPressed: () => void;
onTopRightPressed: () => void;
@ -28,10 +33,20 @@ type DigitalWatchProps = {
},
}
export function DigitalWatch({state: {light, h, m, s, alarm}, callbacks}: DigitalWatchProps) {
export function DigitalWatch({state: {light, h, m, s, alarm, beep}, speed, callbacks}: DigitalWatchProps) {
const twoDigits = (n: number) => n < 0 ? " " : ("0"+n.toString()).slice(-2);
const hhmmss = `${twoDigits(h)}:${twoDigits(m)}:${twoDigits(s)}`;
const [playSound, preloadAudio] = useAudioContext(speed);
preloadAudio(sndBeep);
useEffect(() => {
if (beep) {
playSound(sndBeep, false);
}
}, [beep])
return <>
<style>{`
@font-face{
@ -78,6 +93,7 @@ export const DigitalWatchPlant: Plant<DigitalWatchState> = {
{ kind: "event", event: "setS", paramName: 's' },
{ kind: "event", event: "setLight", paramName: 'lightOn'},
{ kind: "event", event: "setAlarm", paramName: 'alarmOn'},
{ kind: "event", event: "beep", paramName: 'beep'},
],
outputEvents: [
{ kind: "event", event: "topLeftPressed" },
@ -95,6 +111,7 @@ export const DigitalWatchPlant: Plant<DigitalWatchState> = {
h: 12,
m: 0,
s: 0,
beep: false,
},
reduce: (inputEvent: RaisedEvent, state: DigitalWatchState) => {
if (inputEvent.name === "setH") {
@ -118,9 +135,12 @@ export const DigitalWatchPlant: Plant<DigitalWatchState> = {
if (inputEvent.name === "unsetAlarm") {
return { ...state, alarm: false };
}
if (inputEvent.name === "beep") {
return { ...state, beep: inputEvent.param };
}
return state; // unknown event - ignore it
},
render: (state, raiseEvent) => <DigitalWatch state={state} callbacks={{
render: (state, raiseEvent, speed) => <DigitalWatch state={state} speed={speed} callbacks={{
onTopLeftPressed: () => raiseEvent({name: "topLeftPressed"}),
onTopRightPressed: () => raiseEvent({name: "topRightPressed"}),
onBottomRightPressed: () => raiseEvent({name: "bottomRightPressed"}),