diff options
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | Makefile | 63 | ||||
| -rw-r--r-- | assets/mrred.png | bin | 0 -> 768 bytes | |||
| -rw-r--r-- | config/deploy.m4 | 2 | ||||
| -rw-r--r-- | config/extension.js | 2 | ||||
| -rw-r--r-- | config/test.m4 | 2 | ||||
| -rw-r--r-- | flake.nix | 17 | ||||
| -rw-r--r-- | main.css | 108 | ||||
| -rw-r--r-- | src/Auth.js | 15 | ||||
| -rw-r--r-- | src/Main.purs | 87 | ||||
| -rw-r--r-- | templates/api/register.html | 39 | ||||
| -rw-r--r-- | templates/pubnix/button.html (renamed from templates/button.html) | 12 | ||||
| -rw-r--r-- | templates/pubnix/index.html (renamed from templates/index.html) | 1 | ||||
| -rw-r--r-- | templates/pubnix/obs.html (renamed from templates/obs.html) | 2 |
14 files changed, 312 insertions, 39 deletions
@@ -1,3 +1,4 @@ +result .direnv .psc-ide-port main.js @@ -1,45 +1,70 @@ -.PHONY: all dist deploy extension clean +.PHONY: all dist clean api deploy_pubnix pubnix extension -TEMPLATES=$(shell ls templates) +TEMPLATES_API=$(shell ls templates/api) +TEMPLATES_PUBNIX=$(shell ls templates/pubnix) -all: dist $(addprefix dist/test/,$(TEMPLATES)) dist/test/assets dist/test/main.js dist/test/main.css - -deploy: dist $(addprefix dist/deploy/,$(TEMPLATES)) dist/deploy/assets dist/deploy/main.js dist/deploy/main.css - rsync -av dist/deploy/ "pub.colonq.computer:~/public_html/" +all: api pubnix extension dist: - mkdir -p dist/test - mkdir -p dist/deploy + mkdir -p dist/api/test + mkdir -p dist/api/deploy + mkdir -p dist/pubnix/test + mkdir -p dist/pubnix/deploy main.js: $(shell find src) purs-nix bundle -dist/%/assets: $(shell find assets) dist +# api +deploy_api: dist $(addprefix dist/api/deploy/,$(TEMPLATES_API)) dist/api/deploy/assets dist/api/deploy/main.js dist/api/deploy/main.css + +api: dist $(addprefix dist/api/test/,$(TEMPLATES_API)) dist/api/test/assets dist/api/test/main.js dist/api/test/main.css + +dist/api/%/main.js: main.js dist + cp $< $@ + +dist/api/%/main.css: main.css dist + cp $< $@ + +dist/api/%/assets: $(shell find assets) dist rm -rf $@ mkdir -p $@ cp -r assets/* $@ -dist/%/main.js: main.js dist - cp $< $@ +define GEN_RULE_API +dist/api/%/$(template): config/%.m4 templates/api/$(template) + sh -c "m4 $$^ >$$@" +endef +$(foreach template,$(TEMPLATES_API), $(eval $(GEN_RULE_API))) -dist/extension/main.css: extension/main.css dist - cp $< $@ +# pubnix +deploy_pubnix: dist $(addprefix dist/pubnix/deploy/,$(TEMPLATES_PUBNIX)) dist/pubnix/deploy/assets dist/pubnix/deploy/main.js dist/pubnix/deploy/main.css + rsync -av dist/pubnix/deploy/ "pub.colonq.computer:~/public_html/" + +pubnix: dist $(addprefix dist/pubnix/test/,$(TEMPLATES_PUBNIX)) dist/pubnix/test/assets dist/pubnix/test/main.js dist/pubnix/test/main.css -dist/%/main.css: main.css dist +dist/pubnix/%/main.js: main.js dist cp $< $@ -dist/%/index.html: config/%.m4 dist index-template.html - sh -c "m4 $< >$@" +dist/pubnix/%/main.css: main.css dist + cp $< $@ +dist/pubnix/%/assets: $(shell find assets) dist + rm -rf $@ + mkdir -p $@ + cp -r assets/* $@ -define GEN_RULE -dist/%/$(template): config/%.m4 templates/$(template) +define GEN_RULE_PUBNIX +dist/pubnix/%/$(template): config/%.m4 templates/pubnix/$(template) sh -c "m4 $$^ >$$@" endef -$(foreach template,$(TEMPLATES), $(eval $(GEN_RULE))) +$(foreach template,$(TEMPLATES_PUBNIX), $(eval $(GEN_RULE_PUBNIX))) +# extension extension: dist dist/extension/assets dist/extension/manifest.json dist/extension/background.js dist/extension/main.js dist/extension/main.css dist/extension/config.js +dist/extension/main.css: extension/main.css dist + cp $< $@ + dist/extension/manifest.json: extension/manifest.dhall dhall-to-json <$< >$@ diff --git a/assets/mrred.png b/assets/mrred.png Binary files differnew file mode 100644 index 0000000..966cd1b --- /dev/null +++ b/assets/mrred.png diff --git a/config/deploy.m4 b/config/deploy.m4 index 97fc61f..dba1e04 100644 --- a/config/deploy.m4 +++ b/config/deploy.m4 @@ -1,4 +1,6 @@ define(`CONFIG_SUBST', ` globalThis.mode = 0; 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 44b69d3..48502a0 100644 --- a/config/extension.js +++ b/config/extension.js @@ -1,2 +1,2 @@ -globalThis.mode = 1; +globalThis.mode = 2; globalThis.apiServer = "https://api.colonq.computer/api"; diff --git a/config/test.m4 b/config/test.m4 index 6d41963..4db341e 100644 --- a/config/test.m4 +++ b/config/test.m4 @@ -2,5 +2,5 @@ define(`CONFIG_SUBST', ` globalThis.mode = 0; globalThis.apiServer = "http://localhost:8000/api"; globalThis.clientID = "q486jugzn2my4iw6l181o006ugye4j" -globalThis.authRedirectURL = "http://localhost:8000"; +globalThis.authRedirectURL = "http://localhost:8000/register"; ') @@ -33,6 +33,22 @@ srcs = [ "src" ]; }; bundt = purescript.bundle {}; + + bundleAPI = pkgs.stdenv.mkDerivation { + name = "bundt-bundle-api"; + src = ./.; + buildInputs = [ + (purescript.command {}) + pkgs.m4 + ]; + buildPhase = " + make deploy_api + "; + installPhase = '' + mkdir -p $out + cp -r dist/api/deploy/* $out/ + ''; + }; in { devShells.x86_64-linux.default = pkgs.mkShell { buildInputs = [ @@ -48,6 +64,7 @@ }; packages.x86_64-linux = { default = bundt; + inherit bundleAPI; }; }; } @@ -16,6 +16,10 @@ html, body { width: 100%; } +.lcolonq-invisible { + visibility: hidden; +} + body.lcolonq-index { font-family: "Iosevka Comfy"; font-weight: bold; @@ -113,3 +117,107 @@ body.lcolonq-obs { .right { float: right; } + +body.lcolonq-button-body { + background-color: #eeeeee; + user-select: none; +} + +.lcolonq-button { + position: absolute; + height: 90vh; + width: 40vw; + object-fit: fill; + image-rendering: pixelated; + border: dotted #888888; + margin-top: 5vh; + margin-bottom: 5vh; + margin-left: 5vw; + margin-right: 5vw; +} + +a.lcolonq-button-link :hover { + background-color: #cccccc; +} + +a.lcolonq-button-link :active { + background-color: #aaaaaa; +} + +#lcolonq-button-green { + left: 0px; +} + +#lcolonq-button-red { + right: 0px; +} + +#lcolonq-register-container { + position: absolute; + top: 0px; + left: 0px; + display: grid; + width: 100%; + height: 100%; + grid-template-rows: 1fr 1fr 1fr; + grid-template-columns: 1fr 2fr 1fr; +} + +#lcolonq-register-box { + grid-row: 2; + grid-column: 2; + text-align: center; +} + +#lcolonq-register-link { + color: white; + background-color: #6441a5; + border-radius: 0.5rem; + padding: 10px; + cursor: pointer; + user-select: none; +} + +#lcolonq-register-link:hover { + background-color: #533094; +} + +#lcolonq-registered-container { + position: absolute; + top: 0px; + left: 0px; + display: grid; + width: 100%; + height: 100%; + grid-template-rows: 1fr 1fr 1fr; + grid-template-columns: 1fr 2fr 1fr; +} + +#lcolonq-registered-box { + grid-row: 2; + grid-column: 2; + display: flex; + justify-content: center; +} + +.lcolonq-registered-fieldname { + font-weight: bold; +} + +#lcolonq-register-error-container { + position: absolute; + top: 0px; + left: 0px; + display: grid; + width: 100%; + height: 100%; + grid-template-rows: 1fr 1fr 1fr; + grid-template-columns: 1fr 2fr 1fr; +} + +#lcolonq-register-error-box { + grid-row: 2; + grid-column: 2; + display: flex; + justify-content: center; +} diff --git a/src/Auth.js b/src/Auth.js index 7254c40..81ddad9 100644 --- a/src/Auth.js +++ b/src/Auth.js @@ -30,16 +30,17 @@ function getFragmentQuery() { export const _getToken = (Just) => (Nothing) => (pair) => () => { const frag = getFragmentQuery(); const token = frag.get("id_token"); - if (token) { - document.cookie = `id_token=${token}; path=/; SameSite=Strict`; - } - let id_token = null; + document.location.hash = ""; + // if (token) { + // document.cookie = `id_token=${token}; path=/; SameSite=Strict`; + // } + // let id_token = null; let authnonce = null; for (let c of document.cookie.split("; ")) { const [k, v] = c.split("="); - if (k === "id_token") id_token = v; - else if (k === "authnonce") authnonce = v; + // if (k === "id_token") id_token = v; + if (k === "authnonce") authnonce = v; } - if (id_token && authnonce) return Just(pair(id_token)(authnonce)); + if (token && authnonce) return Just(pair(token)(authnonce)); return Nothing; }; diff --git a/src/Main.purs b/src/Main.purs index bb5fa57..a7c9726 100644 --- a/src/Main.purs +++ b/src/Main.purs @@ -5,12 +5,14 @@ import Prelude import Audio as Audio import Auth (AuthInfo, authHeader, getToken, startTwitchAuth) import Config as Config +import Data.String as String import Data.Array (head) import Data.Array as Array import Data.Foldable (fold) import Data.Maybe (Maybe(..)) import Data.Traversable (for, for_) import Data.Tuple (Tuple(..)) +import Data.HTTP.Method (Method(..)) import Effect (Effect) import Effect.Aff (Aff, launchAff_) import Effect.Class (class MonadEffect, liftEffect) @@ -91,6 +93,24 @@ appendText parent s = do setText :: forall m. MonadEffect m => DOM.Element -> String -> m Unit setText e s = liftEffect $ DOM.Node.setTextContent s $ DOM.El.toNode e +addClass :: forall m. MonadEffect m => String -> DOM.Element -> m Unit +addClass c e = do + cl <- liftEffect $ DOM.El.classList e + _ <- liftEffect $ DOM.DTL.add cl c + pure unit + +removeClass :: forall m. MonadEffect m => String -> DOM.Element -> m Unit +removeClass c e = do + cl <- liftEffect $ DOM.El.classList e + _ <- liftEffect $ DOM.DTL.remove cl c + pure unit + +toggleClass :: forall m. MonadEffect m => String -> DOM.Element -> m Unit +toggleClass c e = do + cl <- liftEffect $ DOM.El.classList e + _ <- liftEffect $ DOM.DTL.toggle cl c + pure unit + updateSubtitle :: Aff Unit updateSubtitle = do subtitle <- byId "lcolonq-subtitle" @@ -107,8 +127,12 @@ checkAuth auth = do } resp -mainHomepage :: Effect Unit -mainHomepage = launchAff_ do +mainApi :: Effect Unit +mainApi = launchAff_ do + pure unit + +mainPubnix :: Effect Unit +mainPubnix = launchAff_ do liftEffect $ log "hi" startModel marq <- byId "lcolonq-marquee" @@ -125,7 +149,7 @@ mainHomepage = launchAff_ do updateSubtitle subtitle <- byId "lcolonq-subtitle" listen subtitle "click" \_ev -> do - startTwitchAuth + -- startTwitchAuth launchAff_ updateSubtitle for_ (Array.range 0 6) \i -> do @@ -148,10 +172,59 @@ mainObs :: Effect Unit mainObs = launchAff_ do startModel +buttonPress :: String -> Aff Unit +buttonPress b = do + void $ fetch (Config.apiServer <> "/sentiment/" <> b) + { method: POST + } +mainButton :: Effect Unit +mainButton = launchAff_ do + liftEffect $ log "hello from button" + green <- byId "lcolonq-button-link-green" + listen green "click" \_ev -> do + liftEffect $ log "+2" + launchAff_ $ buttonPress "green" + red <- byId "lcolonq-button-link-red" + listen red "click" \_ev -> do + liftEffect $ log "-2" + launchAff_ $ buttonPress "red" + +mainRegister :: Effect Unit +mainRegister = launchAff_ do + liftEffect $ log "hello from registration page" + link <- byId "lcolonq-register-link" + getToken >>= case _ of + Just a@(Tuple t n) -> do -- if there's an auth token in the fragment, ask the API to register us + { text: resp } <- fetch (Config.apiServer <> "/register") + { headers: + { "Authorization": authHeader a + } + } + r <- resp + case String.split (String.Pattern " ") r of + [user, pass] -> do + container <- byId "lcolonq-registered-container" + removeClass "lcolonq-invisible" container + fieldUsername <- byId "lcolonq-registered-username" + setText fieldUsername user + fieldPassword <- byId "lcolonq-registered-password" + setText fieldPassword pass + _ -> do + container <- byId "lcolonq-register-error-container" + removeClass "lcolonq-invisible" container + _ -> do -- otherwise, show the button to register + container <- byId "lcolonq-register-container" + removeClass "lcolonq-invisible" container + listen link "click" \_ev -> do + liftEffect $ log "register" + startTwitchAuth + main :: Effect Unit main = case Config.mode of - 0 -> mainHomepage - 1 -> mainExtension - 2 -> mainObs - -- 3 -> mainButton + 0 -> mainApi + 1 -> mainPubnix + 2 -> mainExtension + 3 -> mainObs + 4 -> mainButton + 5 -> mainRegister _ -> throw "unknown mode" diff --git a/templates/api/register.html b/templates/api/register.html new file mode 100644 index 0000000..00ccb0c --- /dev/null +++ b/templates/api/register.html @@ -0,0 +1,39 @@ +<!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>LCOLONQ Elite Registration</title> + <link rel="icon" href="./assets/mrgreen.png"> + <link rel="stylesheet" type="text/css" href="./main.css"> + <script type="module"> +CONFIG_SUBST + globalThis.mode = 5; + </script> + <script type="module" src="./main.js"></script> + </head> + <body class="lcolonq-register"> + <div id="lcolonq-register-container" class="lcolonq-invisible"> + <div id="lcolonq-register-box"> + <a id="lcolonq-register-link">click to register with twitch dot tuvalu</a> + </div> + </div> + <div id="lcolonq-registered-container" class="lcolonq-invisible"> + <div id="lcolonq-registered-box"> + <div id="lcolonq-registered-box-interior"> + registered! + <div><span class="lcolonq-registered-fieldname">username:</span> <span id="lcolonq-registered-username"></span></div> + <div><span class="lcolonq-registered-fieldname">password:</span> <span id="lcolonq-registered-password"></span></div> + </div> + </div> + </div> + <div id="lcolonq-register-error-container" class="lcolonq-invisible"> + <div id="lcolonq-register-error-box"> + <div> + <p>some kind of error occured, unable to register</p> + <p>bug clonk about it idk</p> + </div> + </div> + </div> + </body> +</html> diff --git a/templates/button.html b/templates/pubnix/button.html index e2f9fb0..17211eb 100644 --- a/templates/button.html +++ b/templates/pubnix/button.html @@ -3,15 +3,21 @@ <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>LCOLONQ Browser Source</title> + <title>The Button</title> <link rel="icon" href="./assets/mrgreen.png"> <link rel="stylesheet" type="text/css" href="./main.css"> <script type="module"> CONFIG_SUBST - globalThis.mode = 3; + globalThis.mode = 4; </script> <script type="module" src="./main.js"></script> </head> - <body class="lcolonq-button"> + <body class="lcolonq-button-body"> + <a id="lcolonq-button-link-green" class="lcolonq-button-link"> + <img src="./assets/mrgreen.png" class="lcolonq-button" id="lcolonq-button-green" /> + </a> + <a id="lcolonq-button-link-red" class="lcolonq-button-link"> + <img src="./assets/mrred.png" class="lcolonq-button" id="lcolonq-button-red" /> + </a> </body> </html> diff --git a/templates/index.html b/templates/pubnix/index.html index 8827694..bddb19f 100644 --- a/templates/index.html +++ b/templates/pubnix/index.html @@ -8,6 +8,7 @@ <link rel="stylesheet" type="text/css" href="./main.css"> <script type="module"> CONFIG_SUBST + globalThis.mode = 1; </script> <script type="module" src="./main.js"></script> </head> diff --git a/templates/obs.html b/templates/pubnix/obs.html index 999035a..b5c3c05 100644 --- a/templates/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 = 2; + globalThis.mode = 3; </script> <script type="module" src="./main.js"></script> </head> |
