mirror of
https://github.com/Bubberstation/Bubberstation.git
synced 2025-12-30 03:22:41 +00:00
5a3c1d63cb
Hello everyone! Today I bring to you all a fancy new HUD for you lot to enjoy: The Trasen-Knox HUD! Lovingly based off of the Common Core lore maintained by EOBGames! Well, what is it? Its a HUD with a special theming based on the old 1970's CRT screens that were commonplace at the time, including the iconic neon green and the beige plastic casing! This PR also includes a new behavior so that its possible for each active hand icon to be unique, instead of it being a sole highlighted icon as it was before. image And for those wondering, it does indeed account for multiple limbs! image Finally, as seen in the first screenshot, this PR adds the behavior to hide the HUD icon when you insert a piece of equipment into the slot. Thank you for adding the behavior, Fikou! This is all as a step for upgrading and changing how the HUDs we interact with on a daily basis can be upgraded in the future to be more appealing visually! That, and it is simply gorgeous :) PositiveEntropy, Fikou add: Adds a new HUD: The Trasen-Knox HUD! With a theming based on classic 1970s CRT screen computers! code: Added behavior for unique icons for active hands. code: Added behavior that makes it so when you equip an item, the icon behind it defaults to the blank template type.
264 lines
9.1 KiB
HTML
264 lines
9.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: #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: #1E0101;}
|
|
.operative .content {color: #FFFFFF; border-color: #750000; background-color: #350000;}
|
|
|
|
.trasen-knox .wrap {border-color: #998e81;}
|
|
.trasen-knox .content {color: #3ce375; border-color: #998e81; background-color: #1e1d21;}
|
|
|
|
</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>
|