diff --git a/app/page.tsx b/app/page.tsx index 1683bae..91093e7 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -8,7 +8,7 @@ export default function Home() {
-

Noise - An audio-visual pitch for a game about sound

+

The Myrtle Tree - A game about sound and reliving memories.

By Rory Healy

diff --git a/components/audio/audio.module.css b/components/audio/audio.module.css new file mode 100644 index 0000000..62b36c9 --- /dev/null +++ b/components/audio/audio.module.css @@ -0,0 +1,39 @@ +.all { + display: flex; + flex-direction: column; + align-items: center; +} + +.button { + border: 1px; + border-radius: 10px; + border-color: rgb(60, 60, 60); + background-color: rgb(50, 50, 50); + color: white; + padding: 10px; + width: 50%; +} + +.button:hover { + background-color: rgb(60, 60, 60); +} + +.text { + color: white; +} + +.text p { + display: inline; + padding: 10px 0; +} + +.text a { + display: inline; + padding: 0 3px; + cursor: pointer; + text-decoration: underline; +} + +.text a:hover { + color: rgb(110, 150, 240); +} diff --git a/components/audio/audio.tsx b/components/audio/audio.tsx new file mode 100644 index 0000000..e6d16dc --- /dev/null +++ b/components/audio/audio.tsx @@ -0,0 +1,38 @@ +'use client'; + +import React from 'react'; +import styles from './audio.module.css'; + +type Display = 'text' | 'button'; + +export default function AudioButton({ file, text, type }: { file: string, text: string, type: Display }) { + const audio: HTMLAudioElement = new Audio('/public/audio/1.ogg') + if (audio === null) { + console.log('uhoh') + } + const id = `audio-${new Date().getTime()}` + + function makeAudio() { + if (type == 'text') { + return ( +
+
+ {text} + {/*
+
+ ); + } else if (type == 'button') { + return ( +
+ + {/*
+ ); + } + + return null; + } + + return makeAudio(); +} \ No newline at end of file diff --git a/public/audio/1.ogg b/public/audio/1.ogg new file mode 100644 index 0000000..ba17a5a Binary files /dev/null and b/public/audio/1.ogg differ