diff options
| -rw-r--r-- | config/deploy.m4 | 2 | ||||
| -rw-r--r-- | config/extension.js | 2 | ||||
| -rw-r--r-- | config/test.m4 | 2 | ||||
| -rw-r--r-- | main.css | 128 | ||||
| -rw-r--r-- | src/Audio.js | 14 | ||||
| -rw-r--r-- | src/Config.purs | 2 | ||||
| -rw-r--r-- | src/Main.purs | 27 | ||||
| -rw-r--r-- | src/Model.js | 2 | ||||
| -rw-r--r-- | templates/api/menu.html | 213 | ||||
| -rw-r--r-- | templates/api/register.html | 2 | ||||
| -rw-r--r-- | templates/pubnix/button.html | 2 | ||||
| -rw-r--r-- | templates/pubnix/index.html | 32 | ||||
| -rw-r--r-- | templates/pubnix/obs.html | 2 |
13 files changed, 370 insertions, 60 deletions
diff --git a/config/deploy.m4 b/config/deploy.m4 index dba1e04..dc99c4b 100644 --- a/config/deploy.m4 +++ b/config/deploy.m4 @@ -1,5 +1,5 @@ define(`CONFIG_SUBST', ` -globalThis.mode = 0; +globalThis.mode = "api"; globalThis.apiServer = "https://api.colonq.computer/api"; globalThis.clientID = "q486jugzn2my4iw6l181o006ugye4j" globalThis.authRedirectURL = "https://api.colonq.computer/register"; diff --git a/config/extension.js b/config/extension.js index 48502a0..cabc898 100644 --- a/config/extension.js +++ b/config/extension.js @@ -1,2 +1,2 @@ -globalThis.mode = 2; +globalThis.mode = "extension"; globalThis.apiServer = "https://api.colonq.computer/api"; diff --git a/config/test.m4 b/config/test.m4 index 4db341e..0049d84 100644 --- a/config/test.m4 +++ b/config/test.m4 @@ -1,5 +1,5 @@ define(`CONFIG_SUBST', ` -globalThis.mode = 0; +globalThis.mode = "api"; globalThis.apiServer = "http://localhost:8000/api"; globalThis.clientID = "q486jugzn2my4iw6l181o006ugye4j" globalThis.authRedirectURL = "http://localhost:8000/register"; @@ -1,3 +1,4 @@ +/* shared */ @font-face { font-family: "Iosevka Comfy"; src: url("assets/iosevka-comfy-regular.ttf") format("truetype"); @@ -8,7 +9,7 @@ html { font-size: 16pt; } -html, body { +body { overflow: hidden; margin: 0 !important; padding: 0 !important; @@ -16,11 +17,20 @@ html, body { width: 100%; } +.right { + float: right; +} + .lcolonq-invisible { visibility: hidden; } -body.lcolonq-index { +.lcolonq-reverse { + transform: scale(-1, 1); +} + +/* pubnix-index */ +body.lcolonq-pubnix-index { font-family: "Iosevka Comfy"; font-weight: bold; color: black; @@ -33,11 +43,11 @@ body.lcolonq-index { linear-gradient(to bottom, grey 1px, transparent 1px); } -body.lcolonq-obs { +body.lcolonq-pubnix-index-obs { background-color: rbga(0,0,0,0); } -#lcolonq-title { +#lcolonq-pubnix-index-title { position: absolute; top: 2rem; bottom: 0px; @@ -47,22 +57,22 @@ body.lcolonq-obs { font-size: 20vw; } -.lcolonq-letter { +.lcolonq-pubnix-index-letter { display: inline-block; } -.lcolonq-letter:hover { +.lcolonq-pubnix-index-letter:hover { color: #333333; } -#lcolonq-subtitle { +#lcolonq-pubnix-index-subtitle { font-size: 5vw; margin-top: -5vw; margin-right: 12vw; text-align: right; } -#lcolonq-header { +#lcolonq-pubnix-index-header { background-color: #cccccf; position: absolute; left: 0px; @@ -72,16 +82,16 @@ body.lcolonq-obs { border-bottom: 0.2rem ridge; } -#lcolonq-header a { +#lcolonq-pubnix-index-header a { color: black; } -#lcolonq-header marquee { +#lcolonq-pubnix-index-header marquee { color: black; padding-top: 0.4rem; } -#lcolonq-footer { +#lcolonq-pubnix-index-footer { background-color: #cccccf; position: absolute; left: 0px; @@ -91,7 +101,7 @@ body.lcolonq-obs { border-top: 0.2rem groove; } -#lcolonq-footer a { +#lcolonq-pubnix-index-footer a { display: inline-block; color: black; margin-top: 0.2rem; @@ -102,11 +112,11 @@ body.lcolonq-obs { border: 0.1rem outset; } -#lcolonq-footer a:active { +#lcolonq-pubnix-index-footer a:active { border: 0.1rem inset; } -#lcolonq-canvas { +#lcolonq-pubnix-index-canvas { position: absolute; bottom: 2rem; left: 0px; @@ -114,10 +124,7 @@ body.lcolonq-obs { height: 832px; } -.right { - float: right; -} - +/* button */ body.lcolonq-button-body { background-color: #eeeeee; user-select: none; @@ -152,6 +159,7 @@ a.lcolonq-button-link :active { right: 0px; } +/* register */ #lcolonq-register-container { position: absolute; top: 0px; @@ -221,3 +229,87 @@ a.lcolonq-button-link :active { display: flex; justify-content: center; } + +/* menu */ +#lcolonq-menu { + overflow: scroll; + height: auto; +} + +#lcolonq-menu-grid { + position: absolute; + top: 0px; + left: 0px; + display: grid; + width: 100%; + height: 100%; + grid-template-rows: max-content 4fr; + grid-template-columns: 1fr 2fr 1fr; +} + +#lcolonq-menu-header { + grid-row: 1; + grid-column: 2; + text-align: center; + padding-bottom: 1rem; +} + +#lcolonq-menu-header h1 { + margin-bottom: 0rem; +} + +#lcolonq-menu-body { + grid-row: 2; + grid-column: 2; +} + +#lcolonq-menu-body-grid { + display: grid; + grid-auto-flow: dense; + grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); + grid-auto-rows: minmax(10rem, auto); + gap: 1rem; + margin-bottom: 1rem; +} + +#lcolonq-menu-friendzone { + grid-column: 1/-1; + display: grid; + grid-auto-flow: dense; + grid-template-columns: subgrid; + grid-template-rows: auto; /* first row is just the title */ + grid-auto-rows: minmax(10rem, auto); + gap: 1rem; + outline: solid; + outline-offset: 2rem; + margin-top: 2rem; + margin-bottom: 2rem; +} + +#lcolonq-menu-friendzone-title { + grid-column: 1/-1; + text-align: center; + margin-top: 0rem; +} + +.lcolonq-menu-box { + border: solid; + border-color: black; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 1rem; +} + +.lcolonq-menu-box:hover { + background-color: #eeeeee; +} + +.lcolonq-menu-box h3 { + text-align: center; + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +.lcolonq-menu-box-long { + grid-row-end: span 2; +} diff --git a/src/Audio.js b/src/Audio.js index 2a9ae54..57bc131 100644 --- a/src/Audio.js +++ b/src/Audio.js @@ -8,13 +8,13 @@ function initializeCtx() { initialized = true; ctx = new window.AudioContext(); voiceTracks = [ - document.getElementById("lcolonq-audio-voice-0"), - document.getElementById("lcolonq-audio-voice-1"), - document.getElementById("lcolonq-audio-voice-2"), - document.getElementById("lcolonq-audio-voice-3"), - document.getElementById("lcolonq-audio-voice-4"), - document.getElementById("lcolonq-audio-voice-5"), - document.getElementById("lcolonq-audio-voice-6"), + document.getElementById("lcolonq-pubnix-index-audio-voice-0"), + document.getElementById("lcolonq-pubnix-index-audio-voice-1"), + document.getElementById("lcolonq-pubnix-index-audio-voice-2"), + document.getElementById("lcolonq-pubnix-index-audio-voice-3"), + document.getElementById("lcolonq-pubnix-index-audio-voice-4"), + document.getElementById("lcolonq-pubnix-index-audio-voice-5"), + document.getElementById("lcolonq-pubnix-index-audio-voice-6"), ]; } catch (e) { initialized = false; diff --git a/src/Config.purs b/src/Config.purs index 536f163..20b0ec2 100644 --- a/src/Config.purs +++ b/src/Config.purs @@ -1,6 +1,6 @@ module Config where -foreign import mode :: Int +foreign import mode :: String foreign import apiServer :: String foreign import clientID :: String foreign import authRedirectURL :: String diff --git a/src/Main.purs b/src/Main.purs index a7c9726..858d289 100644 --- a/src/Main.purs +++ b/src/Main.purs @@ -113,7 +113,7 @@ toggleClass c e = do updateSubtitle :: Aff Unit updateSubtitle = do - subtitle <- byId "lcolonq-subtitle" + subtitle <- byId "lcolonq-pubnix-index-subtitle" { text: catchphrase } <- fetch (Config.apiServer <> "/catchphrase") {} catchphrase >>= setText subtitle @@ -135,7 +135,7 @@ mainPubnix :: Effect Unit mainPubnix = launchAff_ do liftEffect $ log "hi" startModel - marq <- byId "lcolonq-marquee" + marq <- byId "lcolonq-pubnix-index-marquee" { text: motd } <- fetch (Config.apiServer <> "/motd") {} motd >>= setText marq @@ -147,13 +147,13 @@ mainPubnix = launchAff_ do _ -> pure unit updateSubtitle - subtitle <- byId "lcolonq-subtitle" + subtitle <- byId "lcolonq-pubnix-index-subtitle" listen subtitle "click" \_ev -> do -- startTwitchAuth launchAff_ updateSubtitle for_ (Array.range 0 6) \i -> do - letter <- byId $ "lcolonq-letter-" <> show i + letter <- byId $ "lcolonq-pubnix-index-letter-" <> show i listen letter "click" \_ev -> do Audio.playVoice true i listen letter "mouseover" \_ev -> do @@ -219,12 +219,17 @@ mainRegister = launchAff_ do liftEffect $ log "register" startTwitchAuth +mainMenu :: Effect Unit +mainMenu = launchAff_ do + liftEffect $ log "hello from menu" + main :: Effect Unit main = case Config.mode of - 0 -> mainApi - 1 -> mainPubnix - 2 -> mainExtension - 3 -> mainObs - 4 -> mainButton - 5 -> mainRegister - _ -> throw "unknown mode" + "api" -> mainApi + "pubnix" -> mainPubnix + "extension" -> mainExtension + "obs" -> mainObs + "button" -> mainButton + "register" -> mainRegister + "menu" -> mainMenu + _ -> throw $ "unknown mode: " <> Config.mode diff --git a/src/Model.js b/src/Model.js index 797bae4..2b49efb 100644 --- a/src/Model.js +++ b/src/Model.js @@ -1,4 +1,4 @@ -let canvas = document.getElementById("lcolonq-canvas"); +let canvas = document.getElementById("lcolonq-pubnix-index-canvas"); let socket = null; let currentFrame = null; diff --git a/templates/api/menu.html b/templates/api/menu.html new file mode 100644 index 0000000..b8e8673 --- /dev/null +++ b/templates/api/menu.html @@ -0,0 +1,213 @@ +<!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>Our Tasty Menu 😋</title> + <link rel="icon" href="./assets/mrgreen.png"> + <link rel="stylesheet" type="text/css" href="./main.css"> + <script type="module"> +CONFIG_SUBST + globalThis.mode = "menu"; + </script> + <script type="module" src="./main.js"></script> + </head> + <body id="lcolonq-menu"> + <div id="lcolonq-menu-grid"> + <div id="lcolonq-menu-header"> + <h1>the men:u</h1> + exclusively for Our Esteemed Patrons + </div> + <div id="lcolonq-menu-body"> + <div id="lcolonq-menu-body-grid"> + <div class="lcolonq-menu-box"> + <h3>mental clarity</h3> + pure water. + served at table with garnish of honeysuckle and fenugreek. + strong notes of spring ice. + </div> + <div class="lcolonq-menu-box"> + <h3>boost</h3> + caffeine, taurine, L-theanine. + 999 essential vitamins and minerals. + 100% real. + elite performance. + </div> + <div class="lcolonq-menu-box lcolonq-reverse"> + <h3>boost</h3> + caffeine, taurine, L-theanine. + 999 essential vitamins and minerals. + 100% real. + elite performance. + </div> + <div class="lcolonq-menu-box"> + <h3>lurker check in</h3> + spun candy lightly dusted with elm ash. + smoked. + </div> + <div class="lcolonq-menu-box lcolonq-menu-box-long"> + <h3>submit headline</h3> + bread sandwich enriched with extra iron. + the latest and greatest. + read all about it. + </div> + <div class="lcolonq-menu-box"> + <h3>cycle gizmos</h3> + distilled speed. + a hint of cranberry. + </div> + <div class="lcolonq-menu-box"> + <h3>allow streamer to drink</h3> + it is booze. + do not ask about our liquor license. + </div> + <div class="lcolonq-menu-box lcolonq-menu-box-long"> + <h3>talk to clone</h3> + long pork. + cooked at table. + optional floral garnish. + </div> + <div class="lcolonq-menu-box"> + <h3>deslug</h3> + one hundred and fifty tiny slugs. + half salted. + </div> + <div class="lcolonq-menu-box"> + <h3>spinne</h3> + one hundred and fifty tiny spiders. + unsalted. + </div> + <div class="lcolonq-menu-box"> + <h3>SEASICKNESS GENERATOR</h3> + wine-dark chocolate. + topped with chunky salt. + bring your own barf bag. + </div> + <div class="lcolonq-menu-box"> + <h3>INTJ stare</h3> + crispened potato snacks. + insufficient sodium chloride. + </div> + <div class="lcolonq-menu-box"> + <h3>the pharaoh's curse</h3> + a hot wind. + cold mountain mint. + a hint of night. + </div> + <div class="lcolonq-menu-box"> + <h3>forsen</h3> + one hundred and fifty swedish fish. + heavily salted. + </div> + <div class="lcolonq-menu-box"> + <h3>pursue idol dream</h3> + lemon lime gumdrops. + effervescent special sauce. + fireworks display included. + penlights not included. + </div> + <div class="lcolonq-menu-box"> + <h3>live LCOLONQ reaction</h3> + one american pound of real american beef. + server will provide laconic soliloquy about indulgence when asked. + for a small fee. + </div> + <div class="lcolonq-menu-box lcolonq-menu-box-long"> + <h3>activate spell card</h3> + izakaya fare par excellence. + human sacrifices not included. + go ask the tengu. + </div> + <div class="lcolonq-menu-box lcolonq-menu-box-long"> + <h3>bells of bezelea</h3> + bronze and dreamstuff. + mountain thyme garnish. + ϕιλία. + </div> + <div class="lcolonq-menu-box lcolonq-menu-box-long"> + <h3>palette swap (eyes)</h3> + it is eyes. + what did you expect. + </div> + <div class="lcolonq-menu-box lcolonq-menu-box-long"> + <h3>palette swap (hair)</h3> + it is hair. + what did you expect. + </div> + <div class="lcolonq-menu-box lcolonq-menu-box-long"> + <h3>palette swap (highlight)</h3> + it is highlight. + what did you expect. + </div> + <div class="lcolonq-menu-box lcolonq-menu-box-long"> + <h3>hex</h3> + wiedźmin geralt z rivii. + zwany również białym wilkiem. + zwalcza zagrażające ludziom potwory. + </div> + <div class="lcolonq-menu-box"> + <h3>antipiracy</h3> + salty sea dogs. + hot. + solid gold bullion. + absolutely filthy lucre. + </div> + <div class="lcolonq-menu-box"> + <h3>super idol</h3> + Super idol 的笑容都没你的甜 + 八月正午的阳光都没你耀眼 + 热爱105度的你 滴滴清纯的蒸馏水 + </div> + <div class="lcolonq-menu-box lcolonq-menu-box-long"> + <h3>arrow</h3> + freshly-hunted game hen. + stuffed inside a freshly-hunted pheasant. + stuffed inside a freshly-hunted grouse. + boiled. + </div> + <div class="lcolonq-menu-box"> + <h3>gamer</h3> + a bunch of random shit from the zelda cookbook that we stacked together. + idk man. + haha coins haha. + how epic. + </div> + <div id="lcolonq-menu-friendzone"> + <h2 id="lcolonq-menu-friendzone-title">"the friend zone"</h2> + <div class="lcolonq-menu-box"> + <h3>live friend reaction</h3> + cranberry juice with frozen cranberry juice ice. + served alongside a cranberry hinted blood pudding. + </div> + <div class="lcolonq-menu-box lcolonq-menu-box-long"> + <h3>talk to friend</h3> + you guessed it. + more cranberries. + or maybe it depends on the moon phase. + we play this one by ear. + surprise. + </div> + <div class="lcolonq-menu-box lcolonq-menu-box-long"> + <h3>feed friend</h3> + hamburber colon three. + are these still funny. + i love you. + </div> + <div class="lcolonq-menu-box lcolonq-menu-box-long"> + <h3>show friend wikipedia page</h3> + copper ore and longing. + big red donation prompt. + free. + </div> + <div class="lcolonq-menu-box lcolonq-menu-box-long"> + <h3>friend composes song</h3> + one hundred and fifty tiny singing birds. + they've never heard of salt. + before. + </div> + </div> + </div> + </div> + </div> + </body> +</html> diff --git a/templates/api/register.html b/templates/api/register.html index 00ccb0c..a589315 100644 --- a/templates/api/register.html +++ b/templates/api/register.html @@ -8,7 +8,7 @@ <link rel="stylesheet" type="text/css" href="./main.css"> <script type="module"> CONFIG_SUBST - globalThis.mode = 5; + globalThis.mode = "register"; </script> <script type="module" src="./main.js"></script> </head> diff --git a/templates/pubnix/button.html b/templates/pubnix/button.html index 17211eb..7878c7a 100644 --- a/templates/pubnix/button.html +++ b/templates/pubnix/button.html @@ -8,7 +8,7 @@ <link rel="stylesheet" type="text/css" href="./main.css"> <script type="module"> CONFIG_SUBST - globalThis.mode = 4; + globalThis.mode = "button"; </script> <script type="module" src="./main.js"></script> </head> diff --git a/templates/pubnix/index.html b/templates/pubnix/index.html index bddb19f..a9516e9 100644 --- a/templates/pubnix/index.html +++ b/templates/pubnix/index.html @@ -8,34 +8,34 @@ <link rel="stylesheet" type="text/css" href="./main.css"> <script type="module"> CONFIG_SUBST - globalThis.mode = 1; + globalThis.mode = "pubnix"; </script> <script type="module" src="./main.js"></script> </head> - <body class="lcolonq-index"> + <body class="lcolonq-pubnix-index"> <!-- RINGBEARER --> - <canvas id="lcolonq-canvas"></canvas> - <div id="lcolonq-title"> - <span class="lcolonq-letter" id="lcolonq-letter-0">L</span><span class="lcolonq-letter" id="lcolonq-letter-1">C</span><span class="lcolonq-letter" id="lcolonq-letter-2">O</span><span class="lcolonq-letter" id="lcolonq-letter-3">L</span><span class="lcolonq-letter" id="lcolonq-letter-4">O</span><span class="lcolonq-letter" id="lcolonq-letter-5">N</span><span class="lcolonq-letter" id="lcolonq-letter-6">Q</span> - <div id="lcolonq-subtitle"> + <canvas id="lcolonq-pubnix-index-canvas"></canvas> + <div id="lcolonq-pubnix-index-title"> + <span class="lcolonq-pubnix-index-letter" id="lcolonq-pubnix-index-letter-0">L</span><span class="lcolonq-pubnix-index-letter" id="lcolonq-pubnix-index-letter-1">C</span><span class="lcolonq-pubnix-index-letter" id="lcolonq-pubnix-index-letter-2">O</span><span class="lcolonq-pubnix-index-letter" id="lcolonq-pubnix-index-letter-3">L</span><span class="lcolonq-pubnix-index-letter" id="lcolonq-pubnix-index-letter-4">O</span><span class="lcolonq-pubnix-index-letter" id="lcolonq-pubnix-index-letter-5">N</span><span class="lcolonq-pubnix-index-letter" id="lcolonq-pubnix-index-letter-6">Q</span> + <div id="lcolonq-pubnix-index-subtitle"> </div> </div> - <div id="lcolonq-header"> + <div id="lcolonq-pubnix-index-header"> <a href="https://twitch.tv/LCOLONQ"> - <marquee id="lcolonq-marquee"> + <marquee id="lcolonq-pubnix-index-marquee"> </marquee> </a> </div> - <div id="lcolonq-footer"> + <div id="lcolonq-pubnix-index-footer"> <a href="https://pub.colonq.computer/~llll/cgi-bin/ring?me=llll&offset=-1">back</a> <a class="right" href="https://pub.colonq.computer/~llll/cgi-bin/ring?me=llll&offset=1">next</a> </div> - <audio id="lcolonq-audio-voice-0" src="assets/voice/0.wav"></audio> - <audio id="lcolonq-audio-voice-1" src="assets/voice/1.wav"></audio> - <audio id="lcolonq-audio-voice-2" src="assets/voice/2.wav"></audio> - <audio id="lcolonq-audio-voice-3" src="assets/voice/3.wav"></audio> - <audio id="lcolonq-audio-voice-4" src="assets/voice/4.wav"></audio> - <audio id="lcolonq-audio-voice-5" src="assets/voice/5.wav"></audio> - <audio id="lcolonq-audio-voice-6" src="assets/voice/6.wav"></audio> + <audio id="lcolonq-pubnix-index-audio-voice-0" src="assets/voice/0.wav"></audio> + <audio id="lcolonq-pubnix-index-audio-voice-1" src="assets/voice/1.wav"></audio> + <audio id="lcolonq-pubnix-index-audio-voice-2" src="assets/voice/2.wav"></audio> + <audio id="lcolonq-pubnix-index-audio-voice-3" src="assets/voice/3.wav"></audio> + <audio id="lcolonq-pubnix-index-audio-voice-4" src="assets/voice/4.wav"></audio> + <audio id="lcolonq-pubnix-index-audio-voice-5" src="assets/voice/5.wav"></audio> + <audio id="lcolonq-pubnix-index-audio-voice-6" src="assets/voice/6.wav"></audio> </body> </html> diff --git a/templates/pubnix/obs.html b/templates/pubnix/obs.html index b5c3c05..ab5a23b 100644 --- a/templates/pubnix/obs.html +++ b/templates/pubnix/obs.html @@ -8,7 +8,7 @@ <link rel="stylesheet" type="text/css" href="./main.css"> <script type="module"> CONFIG_SUBST - globalThis.mode = 3; + globalThis.mode = "obs"; </script> <script type="module" src="./main.js"></script> </head> |