cyberpresidentvanellope/CHOMPStation2
1
0
Fork 0
mirror of https://github.com/CHOMPStation2/CHOMPStation2.git synced 2025-12-10 18:22:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Manualbiome (#11216)

Browse Source
This commit is contained in:
Kashargul
2025-07-21 22:37:45 +02:00
committed by GitHub
parent afa0b4bfdb
commit f39fdae47c
280 changed files with 18208 additions and 17558 deletions
Download Patch File Download Diff File Expand all files Collapse all files

589
code/modules/tooltip/tooltip.html
View File

@@ -1,269 +1,410 @@
<!DOCTYPE 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;
}
<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;
}
.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;
}
.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;
}
h1 {
margin: -5px 0 2px 0;
font-size: 1.2em;
line-height: 1.4;
}
p {
margin: 0;
line-height: 1.2;
}
p {
margin: 0;
line-height: 1.2;
}
/* Custom Themes */
.blob .wrap {border-color: #2E2E2E;}
.blob .content {color: #82ED00; border-color: #4E4C4A; background-color: #191918;}
/* 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;}
.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;}
.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;}
.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;}
.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;}
.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;}
.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;}
.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;}
/* 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;}
.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;}
.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;}
.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;}
.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;}
.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;}
.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;}
.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;
}
</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
//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";
//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));
//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
//alert(realIconSize + ' | ' +tooltip.tileSize + ' | ' + resizeRatio); //DEBUG
const parameters = new Object();
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];
}
//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]);
//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
//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;
}
}
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;
}
}
}
}
}
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
}
//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;
//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
//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
//alert(mapWidth+' | '+mapHeight+' | '+tilesShown+' | '+realIconSize+' | '+leftOffset+' | '+topOffset+' | '+left+' | '+top+' | '+posX+' | '+posY); //DEBUG
$("body").attr("class", tooltip.theme);
$('body').attr('class', tooltip.theme);
var $content = $("#content"),
$wrap = $("#wrap");
$wrap.attr("style", "");
$content.off("mouseover");
$content.html(tooltip.text);
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
$wrap.width($wrap.width() + 2); //Dumb hack to fix a bizarre sizing bug
var pixelRatio = 1;
if (window.devicePixelRatio) {
pixelRatio = window.devicePixelRatio;
}
var pixelRatio = 1;
if (window.devicePixelRatio) {
pixelRatio = window.devicePixelRatio;
}
var docWidth = Math.floor($wrap.outerWidth() * pixelRatio),
docHeight = Math.floor($wrap.outerHeight() * pixelRatio);
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;
}
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";
//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;
$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>
//Go get the map details
window.location =
"byond://winget?callback=tooltip.updateCallback;id=mapwindow.map;property=size,view-size";
},
};
</script>
</body>
</html>