469 lines
17 KiB
HTML
469 lines
17 KiB
HTML
<!doctype html>
|
|
<html data-data-path="/data" data-tileset-path="/tileset" data-ws="/ws/">
|
|
<!--
|
|
/***************************************************************************
|
|
* (C) Copyright 2014-2024 - Stendhal *
|
|
***************************************************************************
|
|
* *
|
|
* 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 *
|
|
* License, or (at your option) any later version. *
|
|
* *
|
|
***************************************************************************/
|
|
-->
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<title>Stendhal</title>
|
|
<link rel="stylesheet" type="text/css" href="stendhal.css">
|
|
<meta name="viewport" content="interactive-widget=resizes-content">
|
|
</head>
|
|
|
|
<body id="body" class="background">
|
|
<div id="client">
|
|
<div id="leftColumn" class="unselectable mainColumn">
|
|
<canvas id="minimap" width="128" height="128"></canvas>
|
|
<div id="zoneinfo">
|
|
<div id="zonename"></div>
|
|
<div id="skulls"></div>
|
|
</div>
|
|
<div id="statuses-list"></div>
|
|
<div id="stats">
|
|
<div id="charname"></div>
|
|
<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">
|
|
<div class="group-nogroup">
|
|
<div>You are not a member of a group</div>
|
|
<div class="group-invites"></div>
|
|
</div>
|
|
<div class="group-group hidden">
|
|
<div>Looting: <button class="group-lootmode"></div>
|
|
Leader: <span class="group-leader"></span>
|
|
Members:
|
|
<div class="group-members">
|
|
</div>
|
|
</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>
|
|
|
|
<div id="middleColumn" class="mainColumn">
|
|
<div id="topPanel"></div>
|
|
<!-- FIXME: "viewport" and "chat" elements don't use fonts defined in "emoji-text" attribute, probably because
|
|
font is overridden in class definitions -->
|
|
<canvas id="viewport" class="emoji-text" width="640" height="480" tabindex="-1">Sorry, this page only works in modern web browsers.</canvas>
|
|
<div id="bottomPanel" class="mainColumn">
|
|
<div class="horizontalgroup">
|
|
<input id="chatinput" class="emoji-text" type="text" name="chatinput" autocomplete="off" autofocus>
|
|
<button id="send-button">send</button>
|
|
<button id="keywords-button">Hi!</button>
|
|
<button id="emojis-button" class="emoji-text">emoji</button>
|
|
</div>
|
|
<div id="chat" class="emoji-text"></div>
|
|
</div>
|
|
|
|
<!-- quick menu -->
|
|
<img class="qm-button" id="qm-main">
|
|
<img class="qm-button" id="qm-menu">
|
|
<img class="qm-button" id="qm-settings">
|
|
<img class="qm-button" id="qm-chat">
|
|
<img class="qm-button" id="qm-log">
|
|
<img class="qm-button" id="qm-sound">
|
|
<img class="qm-button" id="qm-joystick">
|
|
<img class="qm-button" id="qm-chatopts">
|
|
<img class="qm-button" id="qm-rotate-l">
|
|
<img class="qm-button" id="qm-rotate-r">
|
|
</div>
|
|
|
|
<div id="rightColumn" class="mainColumn">
|
|
<div id="menupanel">
|
|
<button id="menubutton">▼ Menu</button>
|
|
<button id="soundbutton">🔇</button>
|
|
</div>
|
|
<div>
|
|
</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>
|
|
</div>
|
|
|
|
<div id="joystick-container"></div>
|
|
|
|
<div id="popupcontainer"></div>
|
|
</div>
|
|
|
|
<div id="loginpopup" class="popupdiv">
|
|
Cross world teleport initiated. Please hold tight.
|
|
<div class="progressbar"><div class="progressbarvalue"> </div></div>
|
|
</div>
|
|
|
|
<template id="empty-template">
|
|
</template>
|
|
|
|
<template id="empty-div-template">
|
|
<div></div>
|
|
</template>
|
|
|
|
<template id="aboutdialog-template">
|
|
<div class="verticalgroup">
|
|
<div id="aboutdialog-content">
|
|
<p>Stendhal is an open source project, written and released under the <a href="https://www.gnu.org/licenses/agpl-3.0.html">GNU AGPL license</a> by the <a href="https://arianne-project.org">Arianne project</a>.
|
|
<p>Do you want to contribute? Have a look at <a href="/development/introduction.html">Development section</a> to join the list of contributors.
|
|
<div id="license" class="limitedsize"></div>
|
|
<div id="contributors" class="limitedsize"></div>
|
|
</div>
|
|
<div class="horizontalgroup dialogbuttons">
|
|
<button id="btn_config_close">Close</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="createaccountdialog-template">
|
|
<div>
|
|
<form class="credential-dialog">
|
|
<label for="username">Username*:</label> <input id="username" minlength="6" maxlength="20" required><br>
|
|
<label for="password">Password*:</label> <input id="password" type="password" minlength="6" maxlength="50" required><br>
|
|
<label for="passwordrepeat">Repeat Password*:</label> <input id="passwordrepeat" type="password" minlength="6" maxlength="50" required><br>
|
|
<label for="password">Email:</label> <input id="email" type="email"><br>
|
|
<input type="submit" id="loginbutton" value="Create Account"> <a id="loginlink" href="#login">Login with existing account...</a>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="logindialog-template">
|
|
<div>
|
|
<form class="credential-dialog">
|
|
<label for="username">Username*:</label> <input id="username" required><br>
|
|
<label for="password">Password*:</label> <input id="password" type="password" required><br>
|
|
<button id="loginbutton">Login</button> <a id="createlink" href="#create">Create new account...</a>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="choose-character-template">
|
|
<div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="group-member-template">
|
|
<div class="group-member-component">
|
|
<div class="group-member-name"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<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>
|
|
|
|
<template id="window-template">
|
|
<div class="windowdiv">
|
|
<div class='windowtitlebar background'>
|
|
<button class="windowtitleclose">X</button>
|
|
<span class="windowtitle unclickable"></span>
|
|
</div>
|
|
<div class="windowcontent"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="iteminventory-template">
|
|
<div class="inventorypopup">
|
|
</div>
|
|
</template>
|
|
|
|
<template id="applicationmenudialog-template">
|
|
<div class="actionmenu">
|
|
</div>
|
|
</template>
|
|
|
|
<template id="contextmenu-template">
|
|
<div class="contextmenu actionmenu">
|
|
</div>
|
|
</template>
|
|
|
|
<template id="dropquantityselectordialog-template">
|
|
<div>
|
|
<input type="number" min="0" value="1" class="quantityselectorvalue">
|
|
<button class="quantityselectorbutton">Drop</button>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="imageviewer-template">
|
|
<div class="imageviewer background">
|
|
<h3></h3>
|
|
<img>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="tradedialog-template">
|
|
<div class="tradepopup">
|
|
<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>
|
|
<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>
|
|
<button id="trade-offer">Offer</button>
|
|
</div>
|
|
<hr class="clear">
|
|
<button id="trade-cancel">Cancel</button>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="travellogdialog-template">
|
|
<div class="tavellogpopup">
|
|
<div class="tavellogtabpanel">
|
|
|
|
</div>
|
|
<div class="tlog_hlayout">
|
|
<select class="travellogitems" size="20"></select>
|
|
<div class="tlog_rpane">
|
|
<div class="travellogdetails"></div>
|
|
</div>
|
|
</div>
|
|
</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" class="experimental">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_charname">Status panel character name</label>
|
|
<label class="checksetting"><input type="checkbox" id="chk_hpbar">Status panel HP bar</label>
|
|
<label class="checksetting"><input type="checkbox" id="chk_activityindicator">Object activity indicator</label>
|
|
<label class="checksetting"><input type="checkbox" id="chk_floatchat">Floating chat panel</label>
|
|
<label class="checksetting"><input type="checkbox" id="chk_hidechat" class="experimental">Auto-hide chat panel</label>
|
|
<label class="checksetting"><input type="checkbox" id="chk_zoom">Touch zoom</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 and corpses</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>
|
|
<label class="checksetting"><input type="checkbox" id="chk_clickindicator">Display clicks/touches</label>
|
|
<label class="checksetting"><input type="checkbox" id="chk_pathfinding">Pathfinding via ground</label>
|
|
<label class="checksetting"><input type="checkbox" id="chk_pathfindingmm">Pathfinding via minimap</label>
|
|
<label class="checksetting"><input type="checkbox" id="chk_nativeemojis" class="experimental">Native emojis</label>
|
|
</div>
|
|
<div id="settings_panel3" class="verticalgroup vgroupcolr">
|
|
<div>
|
|
<label for="selecttheme">Theme:</label>
|
|
<select id="selecttheme"></select>
|
|
</div>
|
|
<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>
|
|
<div>
|
|
<label for="selfonttlog">Travel log font:</label>
|
|
<select id="selfonttlog"></select>
|
|
</div>
|
|
<div>
|
|
<label for="selmenustyle">Menu style:</label>
|
|
<select id="selmenustyle"></select>
|
|
</div>
|
|
<div>
|
|
<label for="txtchatopts">Custom chat keywords:</label>
|
|
<input type="text" id="txtchatopts">
|
|
</div>
|
|
<div>
|
|
<label class="checksetting"><input type="checkbox" id="chk_joystick">On-screen joystick:</label>
|
|
<select id="seljoystick"></select>
|
|
</div>
|
|
<div>
|
|
<label for="txtjoystickx">Joystick center X:</label>
|
|
<input type="number" id="txtjoystickx">
|
|
</div>
|
|
<div>
|
|
<label for="txtjoysticky">Joystick center Y:</label>
|
|
<input type="number" id="txtjoysticky">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="horizontalgroup dialogbuttons">
|
|
<button id="btn_config_reload" class="btnleft">Reload</button>
|
|
<button id="btn_config_close">Close</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="outfitdialog-template">
|
|
<div class="background">
|
|
<div class="horizontalgroup">
|
|
|
|
<!-- part selectors -->
|
|
<div class="verticalgroup">
|
|
<div class="horizontalgroup">
|
|
<button type="button" id="setoutfitprevhair"><</button>
|
|
<canvas id="setoutfithaircanvas" width="48" height="64"></canvas>
|
|
<button type="button" id="setoutfitnexthair">></button>
|
|
</div>
|
|
|
|
<div class="horizontalgroup">
|
|
<button type="button" id="setoutfitpreveyes"><</button>
|
|
<canvas id="setoutfiteyescanvas" width="48" height="64"></canvas>
|
|
<button type="button" id="setoutfitnexteyes">></button><br>
|
|
</div>
|
|
|
|
<div class="horizontalgroup">
|
|
<button type="button" id="setoutfitprevmouth"><</button>
|
|
<canvas id="setoutfitmouthcanvas" width="48" height="64"></canvas>
|
|
<button type="button" id="setoutfitnextmouth">></button><br>
|
|
</div>
|
|
|
|
<div class="horizontalgroup">
|
|
<button type="button" id="setoutfitprevhead"><</button>
|
|
<canvas id="setoutfitheadcanvas" width="48" height="64"></canvas>
|
|
<button type="button" id="setoutfitnexthead">></button><br>
|
|
</div>
|
|
|
|
<div class="horizontalgroup">
|
|
<button type="button" id="setoutfitprevbody"><</button>
|
|
<canvas id="setoutfitbodycanvas" width="48" height="64"></canvas>
|
|
<button type="button" id="setoutfitnextbody">></button><br>
|
|
</div>
|
|
|
|
<div class="horizontalgroup">
|
|
<button type="button" id="setoutfitprevdress"><</button>
|
|
<canvas id="setoutfitdresscanvas" width="48" height="64"></canvas>
|
|
<button type="button" id="setoutfitnextdress">></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- color selectors -->
|
|
<div class="verticalgroup">
|
|
<div class="verticalgroup">
|
|
<div class="horizontalgroup">
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<!-- hat & mask part selectors -->
|
|
<div class="verticalgroup">
|
|
|
|
<div class="horizontalgroup">
|
|
<button type="button" id="setoutfitprevhat"><</button>
|
|
<canvas id="setoutfithatcanvas" width="48" height="64"></canvas>
|
|
<button type="button" id="setoutfitnexthat">></button>
|
|
</div>
|
|
|
|
<div class="horizontalgroup">
|
|
<button type="button" id="setoutfitprevmask"><</button>
|
|
<canvas id="setoutfitmaskcanvas" width="48" height="64"></canvas>
|
|
<button type="button" id="setoutfitnextmask">></button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 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 -->
|
|
|
|
<template id="keywordmap-template">
|
|
<div class="shortcuts-dialog"></div>
|
|
</template>
|
|
|
|
<template id="emojimap-template">
|
|
<div class="shortcuts-dialog"></div>
|
|
</template>
|
|
|
|
<img id="held-object" class="hidden unselectable notarget" draggable="false">
|
|
|
|
<!-- place at end of document so drawn above all other elements -->
|
|
<img id="click-indicator" class="unclickable notarget">
|
|
|
|
<!-- hidden canvas for manipulating images before being displayed -->
|
|
<canvas id="drawing-stage" class="hidden"></canvas>
|
|
|
|
<script type="text/javascript" src="stendhal-compiled.js"></script>
|
|
</body>
|
|
|
|
</html>
|