stendhal/srcjs/stendhal.html

359 lines
12 KiB
HTML
Raw Permalink Normal View History

<!doctype html>
2023-02-25 10:02:12 +01:00
<html data-data-path="/data" data-tileset-path="/tileset" data-ws="/ws/">
<!--
2017-05-28 00:24:34 +02:00
/***************************************************************************
2023-01-13 08:42:13 +01:00
* (C) Copyright 2014-2023 - Stendhal *
2017-05-28 00:24:34 +02:00
***************************************************************************
* *
* This program is free software; you can redistribute it and/or modify *
* it under the terms of the GNU Affero General Public License as *
* published by the Free Software Foundation; either version 3 of the *
2017-05-28 00:24:34 +02:00
* License, or (at your option) any later version. *
* *
***************************************************************************/
-->
2023-01-12 19:05:35 +01:00
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stendhal</title>
<link rel="stylesheet" type="text/css" href="stendhal.css">
2023-01-21 19:44:42 +01:00
<meta name="viewport" content="interactive-widget=resizes-content">
2023-01-12 19:05:35 +01:00
</head>
2023-01-12 19:05:35 +01:00
<body id="body" class="background">
2020-05-22 18:39:40 +02:00
<div id="client">
2023-01-12 19:05:35 +01:00
<div id="leftColumn" class="unselectable mainColumn">
<canvas id="minimap" width="128" height="128"></canvas>
<div id="zoneinfo">
<div id="zonename"></div>
2023-01-14 01:39:53 +01:00
<div id="skulls"></div>
</div>
<div id="stats">
<canvas id="karmabar" class="statbar"></canvas>
<div id="hptext" class="stattext"></div>
<canvas id="hpbar" class="statbar"></canvas>
<div id="otherstats" class="stattext"></div>
</div>
<div id="buddyList">
<ul id="buddyListUL"></ul>
</div>
<div id="group-panel">
2023-01-22 22:49:20 +01:00
<div class="group-nogroup">
<div>You are not a member of a group</div>
<div class="group-invites"></div>
2023-01-22 22:49:20 +01:00
</div>
2023-01-22 23:38:38 +01:00
<div class="group-group hidden">
<div>Looting: <button class="group-lootmode"></div>
Leader: <span class="group-leader"></span>
Members:
<div class="group-members">
</div>
2023-01-22 22:49:20 +01:00
</div>
<div class="group-buttons">
<button class="group-chat"><img src="/data/gui/chat.png"></button>
<button class="group-invite"><img src="/data/gui/buddy_online.png"></button>
<button class="group-part"><img src="/data/gui/buddy_offline.png"></button>
</div>
</div>
</div>
2023-01-12 19:05:35 +01:00
<div id="middleColumn" class="mainColumn">
<div id="topPanel"></div>
<canvas id="gamewindow" width="640" height="480" tabindex="-1">Sorry, this page only works in modern web browsers.</canvas>
<div id="bottomPanel" class="mainColumn">
<input id="chatinput" type="text" name="chatinput" autocomplete="off" autofocus>
<div id="chat"></div>
</div>
</div>
2023-01-12 19:05:35 +01:00
<div id="rightColumn" class="mainColumn">
2023-01-13 20:36:44 +01:00
<div>
<button id="menubutton">&nbsp;&nbsp;Menu</button>
<button id="soundbutton">🔇</button>
2023-01-13 20:36:44 +01:00
</div>
<div id="equipmentborder">
<div id="equipment" class="equipment">
<div id="head0" class="itemSlot"></div>
<div id="lhand0" class="itemSlot"></div>
<div id="rhand0" class="itemSlot"></div>
<div id="finger0" class="itemSlot"></div>
<div id="armor0" class="itemSlot"></div>
<div id="cloak0" class="itemSlot"></div>
<div id="legs0" class="itemSlot"></div>
<div id="feet0" class="itemSlot"></div>
<div id="pouch0" class="itemSlot"></div>
</div>
</div>
</div>
2023-01-12 19:05:35 +01:00
</div>
<div id="popupcontainer"></div>
</div>
<div id="loginpopup" class="popupdiv">
Cross world teleport initiated. Please hold tight.
<div class="progressbar"><div class="progressbarvalue">&nbsp;</div></div>
</div>
2023-01-12 19:05:35 +01:00
<template id="empty-template">
</template>
<template id="empty-div-template">
<div></div>
</template>
<template id="group-member-template">
<div>
<div class="group-member-name"></div>
</div>
</template>
2023-02-27 00:05:50 +01:00
<template id="statbar-template">
<canvas class="statbar"></canvas>
</template>
<template id="tabpanel-template">
<div class="tabpanel">
<div class="tabpanel-content"></div>
<div class="tabpanel-tabs"></div>
</div>
</template>
2023-01-12 19:05:35 +01:00
<template id="window-template">
<div class="windowdiv">
<div class='windowtitlebar background'>
<div class='windowtitleclose'>X</div>
<span class="windowtitle"></span>
</div>
<div class="windowcontent"></div>
</div>
2023-01-12 19:05:35 +01:00
</template>
2023-01-12 19:05:35 +01:00
<template id="iteminventory-template">
<div class="inventorypopup">
2020-05-22 18:39:40 +02:00
</div>
2023-01-12 19:05:35 +01:00
</template>
2020-05-22 18:39:40 +02:00
2023-01-12 19:05:35 +01:00
<template id="applicationmenudialog-template">
<div class="actionmenu">
2020-05-22 18:39:40 +02:00
</div>
2023-01-12 19:05:35 +01:00
</template>
2023-01-12 19:05:35 +01:00
<template id="contextmenu-template">
<div class="contextmenu actionmenu">
</div>
</template>
2022-03-30 03:21:53 -07:00
2023-01-12 19:05:35 +01:00
<template id="dropquantityselectordialog-template">
<div>
<input type="number" min="0" value="1" class="quantityselectorvalue">
<button class="quantityselectorbutton">Drop</button>
</div>
</template>
2023-01-12 19:05:35 +01:00
<template id="imageviewer-template">
<div class="imageviewer background">
<h3></h3>
<img>
</div>
</template>
2023-01-15 15:38:14 +01:00
<template id="tradedialog-template">
<div class="tradepopup">
2023-01-17 00:06:17 +01:00
<div id="trade-partner-column" class="trade-column">
<div id="trade-partner-name">Other's offer</div>
<div id="trade-partner-items"></div>
<div id="trade-partner-status">Changing</div>
2023-01-15 15:38:14 +01:00
<button id="trade-accept" disabled>Accept</button>
</div>
<div id="trade-my-column" class="trade-column">
<div id="trade-my-name">My offer</div>
<div id="trade-my-items"></div>
<div id="trade-my-status">Changing</div>
2023-01-17 00:06:17 +01:00
<button id="trade-offer">Offer</button>
2023-01-15 15:38:14 +01:00
</div>
<hr class="clear">
<button id="trade-cancel">Cancel</button>
</div>
</template>
2023-01-12 19:05:35 +01:00
<template id="travellogdialog-template">
<div class="tavellogpopup">
<div class="tavellogtabpanel">
</div>
2023-01-12 19:05:35 +01:00
<div class="tlog_hlayout">
<select class="travellogitems" size="20"></select>
<div class="tlog_rpane">
<div class="travellogdetails"></div>
</div>
</div>
2023-01-12 19:05:35 +01:00
</div>
</template>
<template id="showfloatingwindow-template">
<button></button>
</template>
<template id="settingsdialog-template">
<div>
<div class="verticalgroup">
<div class="horizontalgroup">
<div id="settings_panel1" class="verticalgroup vgroupcol">
<label class="checksetting"><input type="checkbox" id="chk_light">Light effects</label>
<label class="checksetting"><input type="checkbox" id="chk_weather">Weather</label>
<label class="checksetting"><input type="checkbox" id="chk_blood">Blood</label>
<label class="checksetting"><input type="checkbox" id="chk_nonude">Cover naked entities</label>
<label class="checksetting"><input type="checkbox" id="chk_shadows">Shadows</label>
<label class="checksetting"><input type="checkbox" id="chk_speechcr">Creature speech bubbles</label>
<label class="checksetting"><input type="checkbox" id="chk_hpbar">Status panel HP bar</label>
</div>
<div id="settings_panel2" class="verticalgroup vgroupcol">
<label class="checksetting"><input type="checkbox" id="chk_dblclick">Double-click items</label>
<label class="checksetting"><input type="checkbox" id="chk_chestqp">Quick pickup from chests</label>
<label class="checksetting"><input type="checkbox" id="chk_movecont">Continuous movement</label>
<label class="checksetting"><input type="checkbox" id="chk_pvtsnd">Private message notifications</label>
</div>
<div id="settings_panel3" class="verticalgroup vgroupcolr">
<div>
2023-01-12 19:05:35 +01:00
<label for="selecttheme">Theme:</label>
<select id="selecttheme"></select>
</div>
2023-01-12 19:05:35 +01:00
<div>
<label for="selfontbody">Main font:</label>
<select id="selfontbody"></select>
</div>
<div>
<label for="selfontchat">Chat log font:</label>
<select id="selfontchat"></select>
</div>
2023-01-12 19:05:35 +01:00
<div>
<label for="selfonttlog">Travel log font:</label>
<select id="selfonttlog"></select>
</div>
</div>
</div>
2023-01-12 19:05:35 +01:00
<div class="horizontalgroup dialogbuttons">
<button id="btn_config_reload" class="btnleft">Reload</button>
<button id="btn_config_close">Close</button>
</div>
2023-01-12 19:05:35 +01:00
</div>
</div>
</template>
2023-01-12 19:05:35 +01:00
<template id="outfitdialog-template">
<div class="background">
<div class="horizontalgroup">
2023-01-12 19:05:35 +01:00
<!-- part selectors -->
2022-03-15 18:02:30 -07:00
<div class="verticalgroup">
2022-03-13 03:08:01 -07:00
<div class="horizontalgroup">
2023-01-12 19:05:35 +01:00
<button type="button" id="setoutfitprevhair">&lt;</button>
<canvas id="setoutfithaircanvas" width="48" height="64"></canvas>
<button type="button" id="setoutfitnexthair">&gt;</button>
2022-03-15 18:02:30 -07:00
</div>
2023-01-12 19:05:35 +01:00
<div class="horizontalgroup">
<button type="button" id="setoutfitpreveyes">&lt;</button>
<canvas id="setoutfiteyescanvas" width="48" height="64"></canvas>
<button type="button" id="setoutfitnexteyes">&gt;</button><br>
2022-03-15 18:02:30 -07:00
</div>
2023-01-12 19:05:35 +01:00
<div class="horizontalgroup">
<button type="button" id="setoutfitprevmouth">&lt;</button>
<canvas id="setoutfitmouthcanvas" width="48" height="64"></canvas>
<button type="button" id="setoutfitnextmouth">&gt;</button><br>
2022-03-25 20:32:33 -07:00
</div>
2023-01-12 19:05:35 +01:00
<div class="horizontalgroup">
<button type="button" id="setoutfitprevhead">&lt;</button>
<canvas id="setoutfitheadcanvas" width="48" height="64"></canvas>
<button type="button" id="setoutfitnexthead">&gt;</button><br>
2022-03-15 18:02:30 -07:00
</div>
2022-03-13 03:08:01 -07:00
2023-01-12 19:05:35 +01:00
<div class="horizontalgroup">
<button type="button" id="setoutfitprevbody">&lt;</button>
<canvas id="setoutfitbodycanvas" width="48" height="64"></canvas>
<button type="button" id="setoutfitnextbody">&gt;</button><br>
2022-03-15 18:02:30 -07:00
</div>
2022-03-13 03:08:01 -07:00
2023-01-12 19:05:35 +01:00
<div class="horizontalgroup">
<button type="button" id="setoutfitprevdress">&lt;</button>
<canvas id="setoutfitdresscanvas" width="48" height="64"></canvas>
<button type="button" id="setoutfitnextdress">&gt;</button>
2022-03-13 03:08:01 -07:00
</div>
</div>
2023-01-12 19:05:35 +01:00
<!-- color selectors -->
<div class="verticalgroup">
<div class="verticalgroup">
<div class="horizontalgroup">
2023-01-12 19:05:35 +01:00
<input type="checkbox" id="setoutfithaircolortoggle">
<label for="setoutfithaircolortoggle">Hair color</label>
</div>
<canvas id="setoutfithaircolorcanvas" width="80" height="52"></canvas>
<canvas id="setoutfithaircolorgradient" width="80" height="10"></canvas>
</div>
2023-01-12 19:05:35 +01:00
<div class="verticalgroup">
<div class="horizontalgroup">
<input type="checkbox" id="setoutfiteyescolortoggle">
<label for="setoutfiteyescolortoggle">Eyes color</label>
</div>
<canvas id="setoutfiteyescolorcanvas" width="80" height="52"></canvas>
<canvas id="setoutfiteyescolorgradient" width="80" height="10"></canvas>
</div>
2023-01-12 19:05:35 +01:00
<div class="verticalgroup">
<div class="horizontalgroup">
<input type="checkbox" id="setoutfitskincolortoggle">
<label for="setoutfitskincolortoggle">Skin color</label>
</div>
<canvas id="setoutfitskincolorcanvas" width="80" height="52"></canvas>
<canvas id="setoutfitskincolorgradient" width="80" height="10"></canvas>
</div>
2023-01-12 19:05:35 +01:00
<div class="verticalgroup">
<div class="horizontalgroup">
<input type="checkbox" id="setoutfitdresscolortoggle">
<label for="setoutfitdresscolortoggle">Dress color</label>
</div>
<canvas id="setoutfitdresscolorcanvas" width="80" height="52"></canvas>
<canvas id="setoutfitdresscolorgradient" width="80" height="10"></canvas>
</div>
</div>
2023-01-12 19:05:35 +01:00
<!-- hat & mask part selectors -->
<div class="verticalgroup">
2023-01-12 19:05:35 +01:00
<div class="horizontalgroup">
<button type="button" id="setoutfitprevhat">&lt;</button>
<canvas id="setoutfithatcanvas" width="48" height="64"></canvas>
<button type="button" id="setoutfitnexthat">&gt;</button>
</div>
2023-01-12 19:05:35 +01:00
<div class="horizontalgroup">
<button type="button" id="setoutfitprevmask">&lt;</button>
<canvas id="setoutfitmaskcanvas" width="48" height="64"></canvas>
<button type="button" id="setoutfitnextmask">&gt;</button>
</div>
2023-01-12 19:05:35 +01:00
</div>
2023-01-12 19:05:35 +01:00
<!-- horizontal group -->
<div><canvas id="setoutfitcompositecanvas" width="48" height="64"></canvas></div>
</div>
<div align="right"><button type="button" id="setoutfitcancel">Cancel</button>
<button type="button" id="setoutfitapply">Change Outfit</button></div>
</div>
</template> <!-- outfitdialog-template -->
<script type="text/javascript" src="stendhal-compiled.js"></script>
</body>
</html>