mirror of
https://github.com/vgstation-coders/vgstation13.git
synced 2025-12-09 16:14:13 +00:00
2f82cbcbb7
* new construct sprites * rebase * juggerwall * juggerdash * cultvox&plasmasuits * wraithphase * artificer HUD * artificer uses forge * jhgjhlhluijkj * artificer ray * hex et caetera * safety * fixes * aaa * generic * ok travis you win
202 lines
7.8 KiB
HTML
202 lines
7.8 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: #009900;}
|
|
.blob .content {border-color: #66FF00; background-color: #475E13;}
|
|
.wraith .wrap {border-color: #492136;}
|
|
.wraith .content {border-color: #331726; background-color: #471962;}
|
|
.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;}
|
|
|
|
/* Radial Tooltips */
|
|
.radial-default .wrap {border-color: #2B2B33;}
|
|
.radial-default .content {color: #6087A0; border-color: #2B2B33; background-color: #36363C;}
|
|
.radial-cult .wrap {border-color: #000000;}
|
|
.radial-cult .content {font-family: 'Courier New'; color: #ffec66 ; border-color: #FF0000; background-color:#180404;}
|
|
.radial-cult2 .wrap {border-color: #2f0000;}
|
|
.radial-cult2 .content {font-family: 'Courier New'; color: #940000 ; border-color: #000000; background-color:#221817;}
|
|
|
|
/* 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;}
|
|
|
|
</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': {},
|
|
'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>
|