Greencircle site

5 files changed, 299 insertions, 4 deletions

diff --git a/flake.nix b/flake.nix
index e8249ea..a5c4d87 100644
--- a/flake.nix
+++ b/flake.nix
@@ -65,6 +65,21 @@
           cp -r dist/auth/deploy/* $out/
         '';
       };
+      bundleGreencircle = pkgs.stdenv.mkDerivation  {
+        name = "bundt-bundle-greencircle";
+        src = ./.;
+        buildInputs = [
+          (purescript.command {})
+          pkgs.m4
+        ];
+        buildPhase = "
+          make deploy_greencircle
+        ";
+        installPhase = ''
+          mkdir -p $out
+          cp -r dist/greencircle/deploy/* $out/
+        '';
+      };
     in {
       devShells.x86_64-linux.default = pkgs.mkShell {
         buildInputs = [
@@ -83,6 +98,7 @@
         inherit
           bundleAPI
           bundleAuth
+          bundleGreencircle
         ;
       };
       overlay = self: super: {
@@ -90,6 +106,7 @@
           inherit
             bundleAPI
             bundleAuth
+            bundleGreencircle
           ;
         };
       };
diff --git a/main.css b/main.css
index 612f69c..6dd2b89 100644
--- a/main.css
+++ b/main.css
@@ -460,8 +460,8 @@ a.lcolonq-button-link :active {
     margin-right: 1rem;
     margin-bottom: 1rem;
     display: grid;
-    grid-auto-flow: dense;
-    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+    justify-content: center;
+    grid-template-columns: repeat(auto-fit, 20rem);
     grid-auto-rows: minmax(10rem, auto);
     gap: 1rem;
 }
@@ -469,6 +469,15 @@ a.lcolonq-button-link :active {
 .lcolonq-gc-panel {
     border: solid black;
     padding: 1rem;
+    /* display: none; */
+}
+
+.lcolonq-gc-panel:hover {
+    background-color: #eeeeee;
+}
+
+.lcolonq-gc-visible {
+    display: block;
 }
 
 .lcolonq-gc-panel h2 {
diff --git a/src/Main/Greencircle.purs b/src/Main/Greencircle.purs
index 17f3e0c..1fa434c 100644
--- a/src/Main/Greencircle.purs
+++ b/src/Main/Greencircle.purs
@@ -2,10 +2,55 @@ module Main.Greencircle where
 
 import Prelude
 
+import Config as Config
+import Data.Array as Array
+import Data.HTTP.Method (Method(..))
+import Data.Maybe (Maybe(..))
+import Data.String as String
+import Data.String.Pattern as String
+import Data.Traversable (for, for_)
 import Effect (Effect)
+import Effect.Aff (launchAff_)
 import Effect.Class (liftEffect)
 import Effect.Console (log)
+import Fetch (fetch)
+import UI as UI
+import Utils as Utils
+
+adjective :: Int -> String
+adjective x
+  | x == 0 = "sleepy"
+  | x == 1 = "singular"
+  | x == 2 = "double trouble"
+  | x == 3 = "triplicate"
+  | otherwise = "relentless"
+
+updateLive :: Effect Unit
+updateLive = launchAff_ do
+  { text: resp } <- fetch (Config.apiServer <> "/circle") {}
+  res <- resp
+  let names =
+        Array.filter (not <<< String.null)
+        $ String.split (String.Pattern " ")
+        $ String.replaceAll (String.Pattern "\"") (String.Replacement "")
+        $ String.replaceAll (String.Pattern "(") (String.Replacement "")
+        $ String.replaceAll (String.Pattern ")") (String.Replacement "") res
+  adj <- Utils.byId "lcolonq-gc-adjective"
+  Utils.setText adj $ adjective $ Array.length names
+  for_ names \n -> do
+    liftEffect $ log n
+    p <- Utils.byId $ "lcolonq-gc-panel-" <> n
+    Utils.addClass "lcolonq-gc-visible" p
 
 main :: Effect Unit
 main = do
   liftEffect $ log "hello it is greencircle"
+  panels <- Utils.queryAll ".lcolonq-gc-panel"
+  for_ panels \p -> do
+    pid <- Utils.getId p
+    case String.stripPrefix (String.Pattern "lcolonq-gc-panel-") pid of
+      Nothing -> pure unit
+      Just user -> do
+        Utils.listen p "click" \_ev -> do
+          UI.redirect $ "https://twitch.tv/" <> user
+  updateLive
diff --git a/src/Utils.purs b/src/Utils.purs
index 4755436..8c530ef 100644
--- a/src/Utils.purs
+++ b/src/Utils.purs
@@ -54,6 +54,9 @@ query q = do
     Nothing -> liftEffect $ throw $ "could not find element matching query: " <> q
     Just x -> pure x
 
+getId :: forall m. MonadEffect m => DOM.Element -> m String
+getId e = liftEffect $ DOM.El.id e
+
 listen :: forall m. MonadEffect m => DOM.Element -> String -> (Ev.Event -> Effect Unit) -> m Unit
 listen e ev f = do
   l <- liftEffect $ Ev.Tar.eventListener f
diff --git a/templates/greencircle/index.html b/templates/greencircle/index.html
index 0e02871..64ecbaf 100644
--- a/templates/greencircle/index.html
+++ b/templates/greencircle/index.html
@@ -57,17 +57,18 @@ CONFIG_SUBST
                 </p>
             </div>
             <div id="lcolonq-gc-relentless">
-                <h1>"greencircle" is relentless</h1>
+                <h1>"greencircle" is <span id="lcolonq-gc-adjective"></span></h1>
             </div>
             <div id="lcolonq-gc-panels">
                 <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-lcolonq">
                     <h2>LCOLONQ</h2>
-                    little ffreak. online <span class="lcolonq-gc-now">now</span>.
+                    little ffreak. <span class="lcolonq-gc-now">online</span>.
                 </div>
                 <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-prodzpod">
                     <h2>prodzpod</h2>
                     cool guy (they). creatureform. gizmo development and game development also. inconceivably powerful.
                     also they're live <span class="lcolonq-gc-now">right now</span> btw you should go say hi.
+                    they're insane at tetris.
                 </div>
                 <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-tyumici">
                     <h2>Tyumici</h2>
@@ -77,6 +78,226 @@ CONFIG_SUBST
                     if you were wondering, they're streaming <span class="lcolonq-gc-now">now</span>.
                     you are encouraged to investigate this.
                 </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-ellg">
+                    <h2>ellg</h2>
+                    world's premiere video game ost enthusiast.
+                    very skilled programmer.
+                    funny (for real).
+                    they're a gamer, too, from time to time.
+                    you should go and enjoy their company <span class="lcolonq-gc-now">immediately</span>.
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-jakecreatesstuff">
+                    <h2>JakeCreatesStuff</h2>
+                    his name is jake and he creates stuff.
+                    robotics enjoyer.
+                    plays games on "unconventional" peripherals.
+                    a real sweetheart, and they're live <span class="lcolonq-gc-now">right now</span>!
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-badcop_">
+                    <h2>badcop_</h2>
+                    neither a cop nor bad.
+                    frequently enjoys web programming in bash.
+                    makes cool games, too.
+                    you should learn more, here, <span class="lcolonq-gc-now">now</span>.
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-basie">
+                    <h2>basie</h2>
+                    indie game developer.
+                    he is a kiwi. i recently learned this means from new zealand.
+                    they're cool and nice and talented.
+                    they deserve many accolades.
+                    or perhaps just a hello, since they're doing the thing <span class="lcolonq-gc-now">now</span>.
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-hexadigital">
+                    <h2>Hexadigital</h2>
+                    a plant in the shape of a friend.
+                    a committed gamer, but they've been known to do a bit of programming.
+                    makes stuff for retroachievements, a cool project that you should look up if you don't know it already.
+                    they're up to something <span class="lcolonq-gc-now">right now</span> check it out!
+                    
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-venorrak">
+                    <h2>Venorrak</h2>
+                    a television man.
+                    builds many fun things on the web.
+                    curator of the Joel archive, and a dear friend.
+                    consider investigating: they are <span class="lcolonq-gc-now">broadcasting</span>!
+                    you will not regret this.
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-zulleyy3">
+                    <h2>zulleyy3</h2>
+                    comfortable and relaxed.
+                    zulleyy3 often broadcasts planning their day, getting work done, or reading wikipedia.
+                    a good place to relax. they have cool hibike euphonium pictures.
+                    maybe you will also like going there.
+                    it is <span class="lcolonq-gc-now">now</span>.
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-vasher_1025">
+                    <h2>vasher_1025</h2>
+                    enigmatic puzzle enjoyer.
+                    international being of mystery.
+                    tends to stream advent of code in december, and sporadic interesting game stuff otherwise.
+                    if they're live now (<span class="lcolonq-gc-now">they are</span>) you should catch them.
+                    it's a rare treat.
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-cr4zyk1tty">
+                    <h2>CR4ZYK1TTY</h2>
+                    also known as numbers form.
+                    extravagant godot slash strange device integration efforts.
+                    a true Joeler, from way back.
+                    pleasant to talk with and listen to.
+                    a good friend of us all, and of you, soon.
+                    they're streaming <span class="lcolonq-gc-now">now</span>.
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-yellowberryhn">
+                    <h2>yellowberryHN</h2>
+                    yellowberry hacker news.
+                    yellowberry hungary.
+                    yellowberry harpnet.
+                    one of the coolest people i've ever met.
+                    <span class="lcolonq-gc-now">witness</span>, you'll get it.
+                    owns and develops software for multiple (multiple) arcade machines.
+                    a man of many interests and talents.
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-kotarucomplex">
+                    <h2>KotaruComplex</h2>
+                    the ideal mix of cool gaming and gamer cool.
+                    has a cool workshop.
+                    has streamed welding in the past, among other things.
+                    they're <span class="lcolonq-gc-now">around</span>!
+                    maybe you will find something you enjoy!
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-yiffweed">
+                    <h2>yiffweed</h2>
+                    good at math and puzzles.
+                    they like mazes a lot too.
+                    developing a really cool roguelike.
+                    also arpg gaming.
+                    they're up to <span class="lcolonq-gc-now">something</span>.
+                    you should check it out!
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-biggaymikey">
+                    <h2>BigGayMikey</h2>
+                    comfortable gaming and comfortable programming.
+                    a constant and soothing presence.
+                    they have a really cool cat on the screen that i like a lot.
+                    they're doing something <span class="lcolonq-gc-now">now</span> live.
+                    it's worth a look, perhaps you can make a new friend.
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-37ln37">
+                    <h2>37LN37</h2>
+                    thirtyseven natural log thirtyseven.
+                    they are an insanely talented artist.
+                    you may think i'm just saying that.
+                    click and you will see.
+                    they're doing stuff <span class="lcolonq-gc-now">live</span>!
+                    (probably drawing).
+                    they are also a vocaloid enjoyer.
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-vesdev">
+                    <h2>vesdev</h2>
+                    finnish game developer.
+                    i went to their stream once and they had their editor open aongside both warframe and osrs.
+                    actively interacting with all of the above.
+                    they have a cool keyboard and a camera for it too.
+                    consider: it's vesdev <span class="lcolonq-gc-now">now</span>, begin.
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-bvnanana">
+                    <h2>bvnanana</h2>
+                    artist and game developer.
+                    aesthetically pleasing twitch redeems and overall setup.
+                    wonderful banana creature.
+                    <span class="lcolonq-gc-now">banana!</span>
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-yukievt">
+                    <h2>YukieVT</h2>
+                    cat (sometimes also worm).
+                    programming, often for dos.
+                    also circuits and hardware and music and many other things besides.
+                    yook does it all.
+                    you ought to check it out, <span class="lcolonq-gc-now">go</span>.
+                    try throwing the cheese.
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-colinahscopy_">
+                    <h2>Colinahscopy_</h2>
+                    programmer and real human man.
+                    a cool and chill guy.
+                    newspaper archival enthusiast.
+                    excellent!
+                    you should look: <span class="lcolonq-gc-now">here</span>!
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-novaliminal">
+                    <h2>NovaLiminal</h2>
+                    game developer and retro mmo enjoyer.
+                    comfortable vibrations.
+                    pleasant times online.
+                    also factory type gameplay?
+                    it's a question that you can answer, once you find out here, <span class="lcolonq-gc-now">now</span>.
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-meisaka">
+                    <h2>Meisaka</h2>
+                    programmer and factorio enthusiast.
+                    has a very cool computer (false) connected to the broadcast.
+                    frequently low-level stuff.
+                    fox style.
+                    sometimes they also like ffxiv too.
+                    here, <span class="lcolonq-gc-now">now</span>.
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-nineteenninetyx">
+                    <h2>NineteenNinetyX</h2>
+                    mother speedrunner.
+                    neato television-based gaming.
+                    a dear friend to many, and also <span class="lcolonq-gc-now">now</span> to you.
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-ricardo_stryki">
+                    <h2>Ricardo_Stryki</h2>
+                    strange independent games.
+                    some programming learning also.
+                    in english and spanish, perhaps this is of interest.
+                    if it is: <span class="lcolonq-gc-now">it's going</span>.
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-exodrifter_">
+                    <h2>exodrifter_</h2>
+                    indie game developer (real).
+                    runs a cool forum called tsuki.
+                    board games exclamation point question mark!?
+                    all of these things and more, <span class="lcolonq-gc-now">right now</span>, click.
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-raymarch">
+                    <h2>RayMarch</h2>
+                    graphics programmer.
+                    self-described infamous twitch chatter.
+                    shaders!
+                    shaders!
+                    <span class="lcolonq-gc-now">shaders</span>!
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-saladforrest">
+                    <h2>SaladForrest</h2>
+                    cool creature with impeccable taste.
+                    interactive stream technology development.
+                    something about hershey.
+                    they're streaming <span class="lcolonq-gc-now">now</span> btw.
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-bigbookofbug">
+                    <h2>bigbookofbug</h2>
+                    huge tome of insect.
+                    lisp programming in the bugzone.
+                    good for the book fans and the bug fans.
+                    occasional gaming, too.
+                    it is <span class="lcolonq-gc-now">happening</span>!
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-cipherlunis">
+                    <h2>CipherLunis</h2>
+                    mobile app development.
+                    also gaming? gaming!
+                    a pleasant fox type character.
+                    you will not regret: <span class="lcolonq-gc-now">here</span>.
+                </div>
+                <div class="lcolonq-gc-panel" id="lcolonq-gc-panel-imgeiser">
+                    <h2>imgeiser</h2>
+                    he is geiser.
+                    he is <span class="lcolonq-gc-now">live</span>.
+                </div>
             </div>
         </div>
     </body>