From 57e6b3735787f8136ad344a8d170dbf2981d0509 Mon Sep 17 00:00:00 2001 From: LLLL Colonq Date: Mon, 18 Nov 2024 03:24:01 -0500 Subject: Change mode configuration, added initial menu --- config/deploy.m4 | 2 +- config/extension.js | 2 +- config/test.m4 | 2 +- main.css | 128 ++++++++++++++++++++++---- src/Audio.js | 14 +-- src/Config.purs | 2 +- src/Main.purs | 27 +++--- src/Model.js | 2 +- templates/api/menu.html | 213 +++++++++++++++++++++++++++++++++++++++++++ templates/api/register.html | 2 +- templates/pubnix/button.html | 2 +- templates/pubnix/index.html | 32 +++---- templates/pubnix/obs.html | 2 +- 13 files changed, 370 insertions(+), 60 deletions(-) create mode 100644 templates/api/menu.html 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"; diff --git a/main.css b/main.css index 12dae61..9707ee4 100644 --- a/main.css +++ b/main.css @@ -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 @@ + + + + + + Our Tasty Menu 😋 + + + + + + +
+
+

the men:u

+ exclusively for Our Esteemed Patrons +
+
+
+
+

mental clarity

+ pure water. + served at table with garnish of honeysuckle and fenugreek. + strong notes of spring ice. +
+
+

boost

+ caffeine, taurine, L-theanine. + 999 essential vitamins and minerals. + 100% real. + elite performance. +
+
+

boost

+ caffeine, taurine, L-theanine. + 999 essential vitamins and minerals. + 100% real. + elite performance. +
+
+

lurker check in

+ spun candy lightly dusted with elm ash. + smoked. +
+
+

submit headline

+ bread sandwich enriched with extra iron. + the latest and greatest. + read all about it. +
+
+

cycle gizmos

+ distilled speed. + a hint of cranberry. +
+
+

allow streamer to drink

+ it is booze. + do not ask about our liquor license. +
+
+

talk to clone

+ long pork. + cooked at table. + optional floral garnish. +
+
+

deslug

+ one hundred and fifty tiny slugs. + half salted. +
+
+

spinne

+ one hundred and fifty tiny spiders. + unsalted. +
+
+

SEASICKNESS GENERATOR

+ wine-dark chocolate. + topped with chunky salt. + bring your own barf bag. +
+
+

INTJ stare

+ crispened potato snacks. + insufficient sodium chloride. +
+
+

the pharaoh's curse

+ a hot wind. + cold mountain mint. + a hint of night. +
+
+

forsen

+ one hundred and fifty swedish fish. + heavily salted. +
+
+

pursue idol dream

+ lemon lime gumdrops. + effervescent special sauce. + fireworks display included. + penlights not included. +
+
+

live LCOLONQ reaction

+ one american pound of real american beef. + server will provide laconic soliloquy about indulgence when asked. + for a small fee. +
+
+

activate spell card

+ izakaya fare par excellence. + human sacrifices not included. + go ask the tengu. +
+
+

bells of bezelea

+ bronze and dreamstuff. + mountain thyme garnish. + ϕιλία. +
+
+

palette swap (eyes)

+ it is eyes. + what did you expect. +
+
+

palette swap (hair)

+ it is hair. + what did you expect. +
+
+

palette swap (highlight)

+ it is highlight. + what did you expect. +
+
+

hex

+ wiedźmin geralt z rivii. + zwany również białym wilkiem. + zwalcza zagrażające ludziom potwory. +
+
+

antipiracy

+ salty sea dogs. + hot. + solid gold bullion. + absolutely filthy lucre. +
+
+

super idol

+ Super idol 的笑容都没你的甜 + 八月正午的阳光都没你耀眼 + 热爱105度的你 滴滴清纯的蒸馏水 +
+
+

arrow

+ freshly-hunted game hen. + stuffed inside a freshly-hunted pheasant. + stuffed inside a freshly-hunted grouse. + boiled. +
+
+

gamer

+ a bunch of random shit from the zelda cookbook that we stacked together. + idk man. + haha coins haha. + how epic. +
+
+

"the friend zone"

+
+

live friend reaction

+ cranberry juice with frozen cranberry juice ice. + served alongside a cranberry hinted blood pudding. +
+
+

talk to friend

+ you guessed it. + more cranberries. + or maybe it depends on the moon phase. + we play this one by ear. + surprise. +
+
+

feed friend

+ hamburber colon three. + are these still funny. + i love you. +
+
+

show friend wikipedia page

+ copper ore and longing. + big red donation prompt. + free. +
+
+

friend composes song

+ one hundred and fifty tiny singing birds. + they've never heard of salt. + before. +
+
+
+
+
+ + 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 @@ 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 @@ 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 @@ - + - -
- LCOLONQ -