Gazelle + Fluid backups | Gaz.AI [user guest524483]

    #gazella {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -200px;
      margin-left: -200px;
      width: 400px;
      height: 400px;
      pointer-events: none;
    }

    .peopleCounter {
      font-family: Sans Serif;
      font-weight: bold;
      font-size: 30px;
      color: white;
      text-align: center;
      vertical-align: middle;

      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -200px;
      width: 400px;
      height: 100px;
      z-index: 102;
      pointer-events: none;
    }

            @font-face {
                font-family: 'iconfont';
                src: url('iconfont.ttf') format('truetype');
            }

            * {
                user-select: none;
            }

            html, body {
                overflow: hidden;
                background-color: #000;
            }

            body {
                margin: 0;
                position: fixed;
                width: 100%;
                height: 100%;
                background: black;
            }

            canvas {
                width: 100%;
                height: 100%;
            }

            .dg {
                opacity: 0.9;
            }

            .dg .property-name {
                overflow: visible;
            }

            .bigFont {
                font-size: 150%;
                color: #8C8C8C;
            }

            .cr.function.appBigFont {
                font-size: 150%;
                line-height: 2...

extends BWithResources;

need latest hjs.
need latest hjavascript.
need latest isRelativeOrAbsoluteURL.
need latest isRelativeURL.

S filter = "drop-shadow(16px 16px 10px black)";

S cssGazella, cssFluid;
bool wsVerbose;

transient volatile int count;

void counterUpdate {
  inQ(r {
    int n = webSockets.size();
    if (count == n) ret;
    count = n;
    beaPrint(renderVars("counterUpdate", +n));
    webSockets.broadcast(counterEvent());
  });
}

S counterEvent() {
  ret jsonEvalMsg(
    replaceDollarVars([[
      $(document).ready(function() {
        $(".peopleCounter").html($count);
      });
    ]], +count));
}

class WebSocketSet {
  Set<WebSocketInfo> set = syncWeakSet();
  
  void add(WebSocketInfo ws) {
    if (ws == null) ret;
    ws.onClose(() -> remove(ws));
    if (set.add(ws))
      counterUpdate();
  }
  
  void remove(WebSocketInfo ws) {
    if (set.remove(ws))
      counterUpdate();
  }
  
  int size() { ret l(set); }...

    #gazella {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -200px;
      margin-left: -200px;
      width: 400px;
      height: 400px;
      pointer-events: none;
    }

            @font-face {
                font-family: 'iconfont';
                src: url('iconfont.ttf') format('truetype');
            }

            * {
                user-select: none;
            }

            html, body {
                overflow: hidden;
                background-color: #000;
            }

            body {
                margin: 0;
                position: fixed;
                width: 100%;
                height: 100%;
                background: black;
            }

            canvas {
                width: 100%;
                height: 100%;
            }

            .dg {
                opacity: 0.9;
            }

            .dg .property-name {
                overflow: visible;
            }

            .bigFont {
                font-size: 150%;
                color: #8C8C8C;
            }

            .cr.function.appBigFont {
                font-size: 150%;
                line-height: 2...

need latest hjs.
need latest hjavascript.
need latest isRelativeOrAbsoluteURL.
need latest isRelativeURL.

S filter = "drop-shadow(16px 16px 10px black)";

S cssGazella, cssFluid;

O html() {
  ret htmlFix(
    htitle("Gaz.AI")
    + hmobilefix()
    + HInitWebSocket()!
    + hbase("https://gazelle.rocks/beaHTML/257881/WebGL-Fluid-Simulation/")
    + hcss(cssGazella)
  /*+ [[
        <!--<script type="text/javascript" src="dat.gui.min.js"></script>-->
    ]]*/
    + hcss(cssFluid)
      + hcanvas()
      + hjs("./script.js")
    + hdiv(himgsnippet(#1103000, width := 400, height := 400,
      style := "filter: " + filter, id := "gazella"))
  );
}