Add soundboard

7 files changed, 142 insertions, 5 deletions

diff --git a/main.css b/main.css
index 3ae4a25..6b1511b 100644
--- a/main.css
+++ b/main.css
@@ -607,3 +607,59 @@ a.lcolonq-button-link :active {
     width: 100%;
     height: 100%;
 }
+
+/* soundboard */
+#lcolonq-soundboard {
+    color: white;
+    background-color: black;
+    overflow-y: scroll;
+    height: auto;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+#lcolonq-soundboard-container {
+    top: 0px;
+    width: min(90vw, 30rem);
+    height: 100%;
+}
+#lcolonq-soundboard-entryframe {
+    overflow: hidden;
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+    margin-left: 2rem;
+    margin-right: 2rem;
+}
+#lcolonq-soundboard-entry {
+    font-size: 30pt;
+    width: calc(100% - 2.2rem);
+    padding: 1rem;
+    color: white;
+    background-color: #111111;
+    border: 0.1rem solid darkgrey;
+}
+#lcolonq-soundboard-entry:focus {
+    outline: none;
+}
+#lcolonq-soundboard-entrytext {
+    white-space: nowrap;
+    color: darkgrey;
+}
+#lcolonq-soundboard-docs {
+    display: grid;
+    gap: 1rem;
+    grid-auto-flow: dense;
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+    grid-auto-rows: minmax(10rem, auto);
+    margin-bottom: 1rem;
+}
+.lcolonq-soundboard-doc {
+    border: 0.1rem solid darkgrey;
+    padding: 0.5rem;
+}
+.lcolonq-soundboard-doc h3 {
+    text-align: center;
+    margin-top: 0px;
+    margin-bottom: 0.5rem;
+}
diff --git a/src/Main.purs b/src/Main.purs
index ab98c40..509a738 100644
--- a/src/Main.purs
+++ b/src/Main.purs
@@ -15,6 +15,7 @@ import Main.Menu as Menu
 import Main.OBS as OBS
 import Main.Pubnix as Pubnix
 import Main.Register as Register
+import Main.Soundboard as Soundboard
 import Main.Throwshade as Throwshade
 
 main :: Effect Unit
@@ -26,6 +27,7 @@ main = case Config.mode of
   "button" -> Button.main
   "register" -> Register.main
   "menu" -> Menu.main
+  "soundboard" -> Soundboard.main
   "auth" -> Auth.main
   "greencircle" -> Greencircle.main
   "throwshade" -> Throwshade.main
diff --git a/src/Main/Menu.purs b/src/Main/Menu.purs
index 58364b6..0fc5fe1 100644
--- a/src/Main/Menu.purs
+++ b/src/Main/Menu.purs
@@ -3,6 +3,7 @@ module Main.Menu where
 import Prelude
 
 import Data.Foldable (for_)
+import Data.Tuple (Tuple(..))
 import Effect (Effect)
 import Effect.Aff (launchAff_)
 import Effect.Class (liftEffect)
@@ -19,4 +20,5 @@ main = launchAff_ do
   boxes <- queryAll ".lcolonq-menu-box"
   for_ boxes \box -> do
     listen box "click" \_ev -> do
-      UI.submitRedeem box
+      Tuple redeem inp <- UI.menuRedeemData box
+      UI.submitRedeem redeem inp
diff --git a/src/Main/Soundboard.purs b/src/Main/Soundboard.purs
new file mode 100644
index 0000000..eb9e0b4
--- /dev/null
+++ b/src/Main/Soundboard.purs
@@ -0,0 +1,24 @@
+module Main.Soundboard where
+
+import Prelude
+
+import Data.Maybe (Maybe(..))
+import Effect (Effect)
+import Effect.Aff (launchAff_)
+import Effect.Class (liftEffect)
+import Effect.Console (log)
+import UI as UI
+import Utils (byId, getValue, listen)
+import Web.UIEvent.KeyboardEvent as KbEv
+
+main :: Effect Unit
+main = launchAff_ do
+  liftEffect $ log "hello from soundboard"
+  el <- byId "lcolonq-soundboard-entry"
+  listen el "keydown" \ev -> launchAff_ do
+    case KbEv.fromEvent ev of
+      Just kbev -> do
+        when ("Enter" == KbEv.code kbev) do
+          inp <- getValue el
+          UI.submitRedeem "sound board" inp
+      Nothing -> pure unit
diff --git a/src/UI.js b/src/UI.js
index 59ab106..e4d9521 100644
--- a/src/UI.js
+++ b/src/UI.js
@@ -10,9 +10,13 @@ export const _redirect = (url) => () => {
     window.location.href = url;
 };
 
-export const _submitRedeem = (url) => (el) => () => {
+export const _menuRedeemData = (cons) => (el) => () => {
     const redeem = el.children[0].textContent;
     const inp = el.children[1]?.value;
+    return cons(redeem)(inp);
+};
+
+export const _submitRedeem = (url) => (redeem) => (inp) => () => {
     console.log(redeem, inp);
     const data = new FormData();
     data.append("name", redeem);
diff --git a/src/UI.purs b/src/UI.purs
index 645c346..dd2fa40 100644
--- a/src/UI.purs
+++ b/src/UI.purs
@@ -1,7 +1,9 @@
 module UI where
 
 import Prelude
+
 import Config as Config
+import Data.Tuple (Tuple(..))
 import Effect (Effect)
 import Effect.Class (class MonadEffect, liftEffect)
 import Web.DOM.Element as DOM.El
@@ -26,9 +28,13 @@ foreign import _redirect :: String -> Effect Unit
 redirect :: forall m. MonadEffect m => String -> m Unit
 redirect url = liftEffect $ _redirect url
 
-foreign import _submitRedeem :: String -> DOM.El.Element -> Effect Unit
-submitRedeem :: forall m. MonadEffect m => DOM.El.Element -> m Unit
-submitRedeem el = liftEffect $ _submitRedeem (Config.secureApiServer <> "/redeem") el
+foreign import _menuRedeemData :: (String -> String -> Tuple String String) -> DOM.El.Element -> Effect (Tuple String String)
+menuRedeemData :: forall m. MonadEffect m => DOM.El.Element -> m (Tuple String String)
+menuRedeemData el = liftEffect $ _menuRedeemData Tuple el
+
+foreign import _submitRedeem :: String -> String -> String -> Effect Unit
+submitRedeem :: forall m. MonadEffect m => String -> String -> m Unit
+submitRedeem redeem inp = liftEffect $ _submitRedeem (Config.secureApiServer <> "/redeem") redeem inp
 
 foreign import _setShader :: String -> Effect Unit
 setShader :: forall m. MonadEffect m => String -> m Unit
diff --git a/templates/api/soundboard.html b/templates/api/soundboard.html
new file mode 100644
index 0000000..60257ba
--- /dev/null
+++ b/templates/api/soundboard.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+        <title>NoiseBlaster 9999</title>
+        <link rel="icon" href="./assets/mrgreen.png">
+        <link rel="stylesheet" type="text/css" href="./main.css">
+        <script type="module">
+CONFIG_SUBST
+         globalThis.mode = "soundboard";
+        </script>
+        <script type="module" src="./main.js"></script>
+    </head>
+    <body id="lcolonq-soundboard">
+      <div id="lcolonq-soundboard-container">
+        <div id="lcolonq-soundboard-entryframe">
+          <input id="lcolonq-soundboard-entry" type="text">
+          <span id="lcolonq-soundboard-entrytext">noise noise noise noise noise noise noise noise noise noise</span>
+        </div>
+        <div id="lcolonq-soundboard-docs">
+          <div class="lcolonq-soundboard-doc">
+            <h3>sounds</h3>
+            there's a bunch of em.
+            maybe one day we'll list them here!
+          </div>
+          <div class="lcolonq-soundboard-doc">
+            <h3>effects</h3>
+            <ul>
+              <li>
+                <pre>reverse</pre>
+                Reverse the selected sound.
+              </li>
+              <li>
+                <pre>&lt;num&gt; tempo</pre>
+                Speed up or slow down the selected sound. Values greater than 1 will increase the speed, values between 0 and 1 will decrease the speed.
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </body>
+</html>