diff options
| -rw-r--r-- | main.css | 56 | ||||
| -rw-r--r-- | src/Main.purs | 2 | ||||
| -rw-r--r-- | src/Main/Menu.purs | 4 | ||||
| -rw-r--r-- | src/Main/Soundboard.purs | 24 | ||||
| -rw-r--r-- | src/UI.js | 6 | ||||
| -rw-r--r-- | src/UI.purs | 12 | ||||
| -rw-r--r-- | templates/api/soundboard.html | 43 |
7 files changed, 142 insertions, 5 deletions
@@ -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 @@ -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><num> 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> |