mirror of
https://github.com/yogstation13/Yogstation.git
synced 2025-02-26 09:04:50 +00:00
722472091b
* Servants of Ratvar know the overall cult status at all times 🆑 Joan rscadd: Added the clockcult "Global Records" alert, which clock cultists can mouse over to check a variety of information on the clockcult's status, including living servants, number of caches, CV, tinkerer's daemons, if there's an unconverted AI, what clockwork generals can be invoked, and what scripture is unlocked. /🆑 Added a tooltip style for clockcult, for fancy clockcult tooltips.
242 lines
8.1 KiB
HTML
242 lines
8.1 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: #610002;}
|
|
.cult .content {color: #0F0B0C; border-color: #A10000; background-color: #4A363B;}
|
|
|
|
.clockcult .wrap {border-color: #170800;}
|
|
.clockcult .content {color: #B18B25; border-color: #000000; background-color: #5F380E;}
|
|
|
|
.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;}
|
|
|
|
/* 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: #1E0101;}
|
|
.operative .content {color: #FFFFFF; border-color: #750000; background-color: #350000;}
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="wrap" class="wrap">
|
|
<div id="content" class="content"></div>
|
|
</div>
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
|
|
<script type="text/javascript">
|
|
var tooltip = {
|
|
'tileSize': 32,
|
|
'control': '',
|
|
'params': {},
|
|
'clientView': 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
|
|
var mapWidth = map['view-size'].x,
|
|
mapHeight = map['view-size'].y,
|
|
tilesShown = (tooltip.clientView * 2) + 1,
|
|
realIconSize = mapWidth / tilesShown,
|
|
resizeRatio = realIconSize / tooltip.tileSize,
|
|
//Calculate letterboxing offsets
|
|
leftOffset = (map.size.x - mapWidth) / 2,
|
|
topOffset = (map.size.y - mapHeight) / 2;
|
|
|
|
//alert(realIconSize + ' | ' +tooltip.tileSize + ' | ' + resizeRatio); //DEBUG
|
|
|
|
//Parse out the tile and cursor locations from params (e.g. "icon-x=32;icon-y=29;screen-loc=3:10,15:29")
|
|
var paramsA = tooltip.params.cursor.split(';');
|
|
if (paramsA.length < 3) {return false;} //Sometimes screen-loc is never sent ahaha fuck you byond
|
|
//icon-x
|
|
var iconX = paramsA[0];
|
|
iconX = iconX.split('=');
|
|
iconX = parseInt(iconX[1]);
|
|
//icon-y
|
|
var iconY = paramsA[1];
|
|
iconY = iconY.split('=');
|
|
iconY = parseInt(iconY[1]);
|
|
//screen-loc
|
|
var screenLoc = paramsA[2];
|
|
screenLoc = screenLoc.split('=');
|
|
screenLoc = screenLoc[1].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 * resizeRatio);
|
|
}
|
|
}
|
|
|
|
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) * resizeRatio);
|
|
} else { //Cursor entered on the offset tile
|
|
if (northOffset < 0) { //Offset southwards
|
|
topOffset = topOffset - ((tooltip.tileSize + northOffset) * resizeRatio);
|
|
} else { //Offset northwards
|
|
top--;
|
|
topOffset = topOffset - (northOffset * resizeRatio);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//Handle special cases (for fuck sake)
|
|
if (tooltip.special !== 'none') {
|
|
//Put yo special cases here
|
|
}
|
|
|
|
//Clamp values
|
|
left = (left < 0 ? 0 : (left > tilesShown ? tilesShown : left));
|
|
top = (top < 0 ? 0 : (top > tilesShown ? tilesShown : top));
|
|
|
|
//Calculate where on the screen the popup should appear (below the hovered tile)
|
|
var posX = Math.round(((left - 1) * realIconSize) + leftOffset + tooltip.padding); //-1 to position at the left of the target tile
|
|
var posY = Math.round(((tilesShown - top + 1) * realIconSize) + 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 docWidth = $wrap.outerWidth(),
|
|
docHeight = $wrap.outerHeight();
|
|
|
|
if (posY + docHeight > map.size.y) { //Is the bottom edge below the window? Snap it up if so
|
|
posY = (posY - docHeight) - realIconSize - 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, clientView, text, theme, special) {
|
|
//Assign our global object
|
|
tooltip.params = $.parseJSON(params);
|
|
tooltip.clientView = parseInt(clientView);
|
|
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>
|