mirror of
https://github.com/CHOMPStation2/CHOMPStation2.git
synced 2025-12-10 10:12:45 +00:00
411 lines
12 KiB
HTML
411 lines
12 KiB
HTML
<!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;
|
|
}
|
|
|
|
.clockwork .wrap {
|
|
border-color: #170800;
|
|
}
|
|
.clockwork .content {
|
|
color: #b18b25;
|
|
border-color: #000000;
|
|
background-color: #5f380e;
|
|
}
|
|
|
|
.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>
|