Files
Yogstation/code/modules/goonchat/browserassets/html/browserOutput.html
Nich d957ab7e26 Use spritesheets to reduce time spent sending PNG assets by 90+% (#37399)
The total number of assets to be sent has been reduced from 1532 to 76, with time between first asset and last going from about 112s to about 7s (a 93% reduction) by my measure. The following assets have been coalesced:

    705 pipe images (used by RPD) -> 1 spritesheet + css
    595 research design icons (used by R&D console) -> 3 spritesheets + css
    116 OOC emoji + 15 language icons -> 1 spritesheet + css
    27 PDA icons -> 1 spritesheet + css
    11 paperwork stamps -> 1 spritesheet + css
2018-05-11 22:39:09 +02:00

55 lines
2.9 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="font-awesome.css" />
<link rel="stylesheet" type="text/css" href="browserOutput.css" />
<link rel="stylesheet" type="text/css" href="spritesheet_chat.css" />
<script type="text/javascript" src="errorHandler.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="json2.min.js"></script>
</head>
<body>
<div id="loading">
<i class="icon-spinner icon-2x"></i>
<div>
Loading...<br><br>
If this takes longer than 30 seconds, it will automatically reload a maximum of 5 times.<br>
If it <b>still</b> doesn't work, use the bug report button at the top right of the window.
</div>
</div>
<div id="messages">
</div>
<div id="userBar" style="display: none;">
<div id="ping">
<i class="icon-circle" id="pingDot"></i>
<span class="ms" id="pingMs">--ms</span>
</div>
<div id="audio">
<a href="#" class="subCell toggle" id="toggleAudio" title="Audio"><i class="icon-volume-up"></i></a>
</div>
<div id="options">
<a href="#" class="subCell toggle" id="toggleOptions" title="Options"><i class="icon-cog"></i></a>
</div>
<div class="sub" id="subOptions">
<a href="#" class="subCell decreaseFont topCell" id="decreaseFont"><span>Decrease font size</span> <i class="icon-font">-</i></a>
<a href="#" class="subCell increaseFont" id="increaseFont"><span>Increase font size</span> <i class="icon-font">+</i></a>
<a href="#" class="subCell decreaseLineHeight" id="decreaseLineHeight"><span>Decrease line height</span> <i class="icon-text-height">-</i></a>
<a href="#" class="subCell increaseLineHeight" id="increaseLineHeight"><span>Increase line height</span> <i class="icon-text-height">+</i></a>
<a href="#" class="subCell togglePing" id="togglePing"><span>Toggle ping display</span> <i class="icon-circle"></i></a>
<a href="#" class="subCell highlightTerm" id="highlightTerm"><span>Highlight string</span> <i class="icon-tag"></i></a>
<a href="#" class="subCell saveLog" id="saveLog"><span>Save chat log</span> <i class="icon-save"></i></a>
<a href="#" class="subCell toggleCombine" id="toggleCombine"><span>Toggle line combining</span> <i class="icon-filter"></i></a>
<a href="#" class="subCell clearMessages" id="clearMessages"><span>Clear all messages</span> <i class="icon-eraser"></i></a>
</div>
<div class="sub" id="subAudio">
<span class="subCell topCell" id="musicVolumeSpan"><input type="range" class="hidden" id="musicVolume"><span id="musicVolumeText">Admin music volume</span><i class="icon-music"></i></span>
</div>
</div>
<audio class="hidden" id="adminMusic" autoplay></audio>
<script type="text/javascript" src="browserOutput.js"></script>
</body>
</html>