code/modules/tooltip/tooltip.html - master - Lachklen/MYtgstation

code/modules/tooltip/tooltip.html
401 строка12 KB
Jeremiah
Sets prettier to run on the repo (#91379)
30 май 2025, 07:23
30 май 2025, 07:239db2f69
<!doctype html>
<html>
  <head>
    <title>Tooltip</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
      body,
      html {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      .wrap {
        position: absolute;
        top: 0;
        left: 0;
        max-width: 298px;
        border: 2px solid #1b2967;
      }

      .content {
        font:
          bold 12px Arial,
          "Helvetica Neue",
          Helvetica,
          sans-serif;
        color: #ffffff;
        padding: 8px;
        border: 2px solid #0033cc;
        background: #005cb8;
      }

      h1 {
        margin: -5px 0 2px 0;
        font-size: 1.2em;
        line-height: 1.4;
      }

      p {
        margin: 0;
        line-height: 1.2;
      }

      /* Custom Themes */
      .blob .wrap {
        border-color: #2e2e2e;
      }
      .blob .content {
        color: #82ed00;
        border-color: #4e4c4a;
        background-color: #191918;
      }

      .parasite .wrap {
        border-color: #88868d;
      }
      .parasite .content {
        color: #efeeef;
        border-color: #35333a;
        background-color: #636169;
      }

      .alien .wrap {
        border-color: #33165b;
      }
      .alien .content {
        color: #25004a;
        border-color: #5a3076;
        background-color: #6d3a8e;
      }

      .wraith .wrap {
        border-color: #492136;
      }
      .wraith .content {
        border-color: #331726;
        background-color: #471962;
      }

      .cult .wrap {
        border-color: #292222;
      }
      .cult .content {
        color: #ff0000;
        border-color: #4c4343;
        background-color: #3c3434;
      }

      .pod .wrap {
        border-color: #052401;
      }
      .pod .content {
        border-color: #326d29;
        background-color: #569f4b;
      }

      .colo-pod .wrap {
        border-color: #256fb9;
      }
      .colo-pod .content {
        border-color: #000000;
        background-color: #000000;
      }

      .hisgrace .wrap {
        border-color: #7c1414;
      }
      .hisgrace .content {
        color: #15d512;
        border-color: #9d1414;
        background-color: #861414;
      }

      /* TG: Themes */
      /* ScreenUI */
      .midnight .wrap {
        border-color: #2b2b33;
      }
      .midnight .content {
        color: #6087a0;
        border-color: #2b2b33;
        background-color: #36363c;
      }

      .plasmafire .wrap {
        border-color: #21213d;
      }
      .plasmafire .content {
        color: #ffa800;
        border-color: #21213d;
        background-color: #1d1d36;
      }

      .retro .wrap {
        border-color: #005e00;
      }
      .retro .content {
        color: #003366;
        border-color: #005e00;
        background-color: #00bd00;
      }

      .slimecore .wrap {
        border-color: #18640e;
      }
      .slimecore .content {
        color: #6ea161;
        border-color: #11450b;
        background-color: #354e35;
      }

      .operative .wrap {
        border-color: #13121b;
      }
      .operative .content {
        color: #b01232;
        border-color: #13121b;
        background-color: #282831;
      }

      .trasen-knox .wrap {
        border-color: #998e81;
      }
      .trasen-knox .content {
        color: #3ce375;
        border-color: #998e81;
        background-color: #1e1d21;
      }

      .detective .wrap {
        border-color: #2c0f0c;
      }
      .detective .wrap {
        color: #c7b08b;
        border-color: #2c0f0c;
        background-color: #221c1a;
      }
    </style>
  </head>
  <body>
    <div id="wrap" class="wrap">
      <div id="content" class="content"></div>
    </div>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
      var tooltip = {
        tileSize: 32,
        control: "",
        params: {},
        client_view_w: 0,
        client_view_h: 0,
        text: "",
        theme: "",
        padding: 2,
        init: function (tileSize, control) {
          tooltip.tileSize = parseInt(tileSize);
          tooltip.control = control;
        },
        hide: function () {
          window.location =
            "byond://winset?id=" + tooltip.control + ";is-visible=false";
        },
        updateCallback: function (map) {
          if (typeof map === "undefined" || !map) {
            return false;
          }

          //alert(tooltip.params+' | '+tooltip.clientView+' | '+tooltip.text+' | '+tooltip.theme); //DEBUG

          //Some reset stuff to avoid fringe issues with sizing
          window.location =
            "byond://winset?id=" +
            tooltip.control +
            ";anchor1=0,0;size=999x999";

          //Get the real icon size according to the client view
          //FYI, this bit is even more borrowed from goon, our widescreen broke tooltips so I took a look at how they do it
          //To improve our code. Thanks gooncoders, very cool
          var mapWidth = map["view-size"].x,
            mapHeight = map["view-size"].y,
            tilesShownX = tooltip.client_view_w;
          tilesShownY = tooltip.client_view_h;
          (realIconSizeX = mapWidth / tilesShownX),
            (realIconSizeY = mapHeight / tilesShownY),
            (resizeRatioX = realIconSizeX / tooltip.tileSize),
            (resizeRatioY = realIconSizeY / tooltip.tileSize),
            //Calculate letterboxing offsets
            (leftOffset = (map.size.x - mapWidth) / 2),
            (topOffset = (map.size.y - mapHeight) / 2);

          //alert(realIconSize + ' | ' +tooltip.tileSize + ' | ' + resizeRatio); //DEBUG

          const parameters = new Object();

          //Parse out the contents of params (e.g. "icon-x=32;icon-y=29;screen-loc=3:10,15:29")
          //It is worth noting that params is not always ordered in the same way. We therefore need to write the code
          //To load their values in independantly of their order
          var paramsA = tooltip.params.cursor.split(";");
          for (var i = 0; i < paramsA.length; i++) {
            var entry = paramsA[i];
            var nameAndValue = entry.split("=");
            parameters[nameAndValue[0]] = nameAndValue[1];
          }

          //Sometimes screen-loc is never sent ahaha fuck you byond
          if (
            !parameters["icon-x"] ||
            !parameters["icon-y"] ||
            !parameters["screen-loc"]
          ) {
            return false;
          }
          //icon-x
          var iconX = parseInt(parameters["icon-x"]);
          //icon-y
          var iconY = parseInt(parameters["icon-y"]);
          //screen-loc
          var screenLoc = parameters["screen-loc"];
          screenLoc = screenLoc.split(",");
          if (screenLoc.length < 2) {
            return false;
          }
          var left = screenLoc[0];
          var top = screenLoc[1];
          if (!left || !top) {
            return false;
          }
          screenLoc = left.split(":");
          left = parseInt(screenLoc[0]);
          var enteredX = parseInt(screenLoc[1]);
          screenLoc = top.split(":");
          top = parseInt(screenLoc[0]);
          var enteredY = parseInt(screenLoc[1]);

          //Screen loc offsets on objects (e.g. "WEST+0:6,NORTH-1:26") can royally mess with positioning depending on where the cursor enters
          //This is a giant bitch to parse. Note that it only expects screen_loc in the format <west>,<north>.
          var oScreenLoc = tooltip.params.screenLoc.split(","); //o for original ok

          var west = oScreenLoc[0].split(":");
          if (west.length > 1) {
            //Only if west has a pixel offset
            var westOffset = parseInt(west[1]);
            if (westOffset !== 0) {
              if (iconX + westOffset !== enteredX) {
                //Cursor entered on the offset tile
                left = left + (westOffset < 0 ? 1 : -1);
              }
              leftOffset = leftOffset + westOffset * resizeRatioX;
            }
          }

          if (oScreenLoc.length > 1) {
            //If north is given
            var north = oScreenLoc[1].split(":");
            if (north.length > 1) {
              //Only if north has a pixel offset
              var northOffset = parseInt(north[1]);
              if (northOffset !== 0) {
                if (iconY + northOffset === enteredY) {
                  //Cursor entered on the original tile
                  top--;
                  topOffset =
                    topOffset - (tooltip.tileSize + northOffset) * resizeRatioY;
                } else {
                  //Cursor entered on the offset tile
                  if (northOffset < 0) {
                    //Offset southwards
                    topOffset =
                      topOffset -
                      (tooltip.tileSize + northOffset) * resizeRatioY;
                  } else {
                    //Offset northwards
                    top--;
                    topOffset = topOffset - northOffset * resizeRatioY;
                  }
                }
              }
            }
          }

          //Handle special cases (for fuck sake)
          if (tooltip.special !== "none") {
            //Put yo special cases here
          }

          //Clamp values
          left = left < 0 ? 0 : left > tilesShownX ? tilesShownX : left;
          top = top < 0 ? 0 : top > tilesShownY ? tilesShownY : top;

          //Calculate where on the screen the popup should appear (below the hovered tile)
          var posX = Math.round(
            (left - 1) * realIconSizeX + leftOffset + tooltip.padding,
          ); //-1 to position at the left of the target tile
          var posY = Math.round(
            (tilesShownY - top + 1) * realIconSizeY +
              topOffset +
              tooltip.padding,
          ); //+1 to position at the bottom of the target tile

          //alert(mapWidth+' | '+mapHeight+' | '+tilesShown+' | '+realIconSize+' | '+leftOffset+' | '+topOffset+' | '+left+' | '+top+' | '+posX+' | '+posY); //DEBUG

          $("body").attr("class", tooltip.theme);

          var $content = $("#content"),
            $wrap = $("#wrap");
          $wrap.attr("style", "");
          $content.off("mouseover");
          $content.html(tooltip.text);

          $wrap.width($wrap.width() + 2); //Dumb hack to fix a bizarre sizing bug

          var pixelRatio = 1;
          if (window.devicePixelRatio) {
            pixelRatio = window.devicePixelRatio;
          }

          var docWidth = Math.floor($wrap.outerWidth() * pixelRatio),
            docHeight = Math.floor($wrap.outerHeight() * pixelRatio);

          if (posY + docHeight > map.size.y) {
            //Is the bottom edge below the window? Snap it up if so
            posY = posY - docHeight - realIconSizeY - tooltip.padding;
          }

          //Actually size, move and show the tooltip box
          window.location =
            "byond://winset?id=" +
            tooltip.control +
            ";size=" +
            docWidth +
            "x" +
            docHeight +
            ";pos=" +
            posX +
            "," +
            posY +
            ";is-visible=true";

          $content.on("mouseover", function () {
            tooltip.hide();
          });
        },
        update: function (params, client_vw, clien_vh, text, theme, special) {
          //Assign our global object
          tooltip.params = $.parseJSON(params);
          tooltip.client_view_w = parseInt(client_vw);
          tooltip.client_view_h = parseInt(clien_vh);
          tooltip.text = text;
          tooltip.theme = theme;
          tooltip.special = special;

          //Go get the map details
          window.location =
            "byond://winget?callback=tooltip.updateCallback;id=mapwindow.map;property=size,view-size";
        },
      };
    </script>
  </body>
</html>