index of sounds

oskarrough · Feb 9, 2021 · 853f735 · 853f735
1 parent 78b5926
commit 853f735
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 0 deletions.
diff --git a/public/index-sound.html b/public/index-sound.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="description" content="A video card game for the web" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
+		<title>Slay the Web</title>
+		<link rel="manifest" href="manifest.webmanifest" />
+    <meta name="mobile-web-app-capable" content="yes">
+		<meta name="theme-color" content="#116f54" />
+		<meta name="msapplication-TileColor" content="#116f54">
+		<link rel="icon" type="image/png" href="/ui/images/favicons/favicon-512.png" sizes="512x512" />
+		<link rel="shortcut icon" href="/ui/images/favicons/favicon.ico">
+		<link rel="apple-touch-icon" href="/ui/images/favicon-512.png" />
+		<link rel="stylesheet" href="ui/index.css" />
+	</head>
+	<body>
+		<div id="SlayTheWebSounds"></div>
+
+		<script async src="ui/index-sound.js" type="module"></script>
+		<script>
+			// Offline support
+			if (!location.origin.includes('localhost') && 'serviceWorker' in navigator) {
+				window.addEventListener('load', () => {
+					navigator.serviceWorker.register('/service-worker.js')
+				})
+			}
+		</script>
+		<noscript>
+			<p>
+				You need JavaScript enabled to play Slay The Web.
+				See <a href="https://github.com/oskarrough/slaytheweb/">github.com/oskarrough/slaytheweb/</a>.
+			</p>
+		</noscript>
+
+	</body>
+</html>
diff --git a/public/ui/index-sound.js b/public/ui/index-sound.js
@@ -0,0 +1,12 @@
+import {html, render} from '../web_modules/htm/preact/standalone.module.js'
+import {playSound} from './sounds.js'
+
+// the osunds of the library
+const SLWSounds = (props) => html`
+	<article class="Sounds">
+		<h1>Play the sound library.</h1>
+		<p><button autofocus onClick=${playSound}>Play sound</a></p>
+	</article>
+`
+
+render(html` <${SLWSounds}/> `, document.querySelector('#SlayTheWebSounds'))
diff --git a/public/ui/sounds.js b/public/ui/sounds.js
@@ -0,0 +1,8 @@
+import * as Tone from '../web_modules/tone.js'
+
+//create a synth and connect it to the main output (your speakers)
+const synth = new Tone.Synth().toDestination()
+
+export const playSoundFromCard = (card) => {
+	synth.triggerAttackRelease("C4", "8n")
+}