103 lines
6.4 KiB
HTML
103 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title> Trivabble </title>
|
|
<link rel="stylesheet" href="trivabble.css" />
|
|
<link rel="stylesheet" href="alert.css" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="format-detection" content="telephone=no" />
|
|
<script src="config.js"></script>
|
|
<script src="l10n.js"></script>
|
|
<script src="alert.js"></script>
|
|
<script src="touch2click.js"></script>
|
|
<script src="trivabble.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="menu">
|
|
<button data-l10n="text-content" id="join-game">Join adversaries</button>
|
|
<p id="p-name"> <span data-l10n="text-content">You are:</span> <span id="name" data-l10n="text-content">(name to give)</span><br /><button class="minibutton" id="change-name" data-l10n="text-content">Change</button></p>
|
|
<button id="clear-game" data-l10n="text-content">Put back all the tiles in the bag</button>
|
|
<p id="p-name"><span data-l10n="text-content">Number of your game:</span><br /><span id="number" data-l10n="text-content">(pending)</span></p>
|
|
<div id="chat-messages"></div>
|
|
<textarea id="chat-ta" placeholder="Write a message to your adversaries here" data-l10n="placeholder"></textarea>
|
|
<button id="chat-btn" class="minibutton" data-l10n="text-content">Send message</button>
|
|
<div id="lang-selection">
|
|
<label>
|
|
<span data-l10n="text-content">Interface language: </span>
|
|
<select id="select-lang">
|
|
<option value="en">English</option>
|
|
<option value="fr">Français</option>
|
|
<option value="br">Brezhoneg</option>
|
|
<option value="ro">Română</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div id="board-lang-selection" style="display:none">
|
|
<label>
|
|
<span data-l10n="text-content">Board language: </span>
|
|
<select id="board-lang">
|
|
<option value="fr">French</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal" id="modal-settings-dialog">
|
|
<div class="modal-content">
|
|
<h2>
|
|
<span data-l10n="text-content">Settings</span>
|
|
<span class="modal-button" id="btn-settings-close">×</span>
|
|
</h2>
|
|
<div id="prefs">
|
|
<p><label><input type="checkbox" id="tiles-sound" checked="checked" /><span data-l10n="text-content">Sound of the tiles</span></label></p>
|
|
<p><label><input type="checkbox" id="msg-sound" checked="checked" /><span data-l10n="text-content">Sound of messages</span></label></p>
|
|
<p id="enable-spell-checker-outer" style="display:none"><label><input type="checkbox" id="enable-spell-checker" /> <span data-l10n="text-content">Enable spell checker</span></label></p>
|
|
<p><label><span data-l10n="text-content">(fast)</span><input type="range" min="0" max="0" id="double-tap-duration"/><span data-l10n="text-content">(slow)</span><br/><span data-l10n="text-content">Double tap duration</span></label></p>
|
|
<p><label><span data-l10n="text-content">(fast)</span><input type="range" min="0" max="0" id="flash-light-duration"/><span data-l10n="text-content">(slow)</span><br/><span data-l10n="text-content">Flash light duration</span></label></p>
|
|
<p><label><input type="text" size="6" id="flash-light-color"/> <span data-l10n="text-content">Flash light color</span></label></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="content">
|
|
<table id="board">
|
|
<tr><td class="corner"></td></tr>
|
|
</table>
|
|
<div id="rack-outer">
|
|
<div id="rack"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="panel">
|
|
<button id="btn-settings" data-l10n="text-content">Settings</button>
|
|
<div id="bag"></div>
|
|
<p><span data-l10n="text-content">Number of tiles in the bag:</span><br /><span id="remaining-letters">102</span></p>
|
|
<table id="participants">
|
|
<tr><th data-l10n="text-content">Participant</th><th data-l10n="text-content">Rack</th><th data-l10n="text-content">Score</th><th data-l10n="text-content">Turn</th></tr>
|
|
<tr id="participants-placeholder"><td colspan="4" data-l10n="text-content">Waiting for other participants…</td></tr>
|
|
</table>
|
|
<div id="panel-buttons">
|
|
<button id="clear-rack" class="minibutton" data-l10n="text-content">Put back all the tiles of your rack in the bag</button>
|
|
<button id="show-rack" class="minibutton" data-l10n="text-content">Show my rack to other players</button>
|
|
<button id="check-spelling" class="minibutton" data-l10n="text-content" style="display:none">Check spelling for new words</button>
|
|
</div>
|
|
<div id="help-box">
|
|
<p id="help-box-title" data-l10n="text-content">Tip!</p>
|
|
<div id="help-box-inner">
|
|
<div id="help-messages">
|
|
<p data-l10n="text-content" style="display:none">Click on the bag to take one tile.</p>
|
|
<p data-l10n="text-content" style="display:none">Click on someone's score to change it.</p>
|
|
<p data-l10n="text-content" style="display:none">Who's turn? Click on the Turn button!</p>
|
|
<p data-l10n="text-content" style="display:none">Click on (+) to increase someone's score.</p>
|
|
<p data-l10n="text-content" style="display:none">Show a cell to everyone by double-clicking on it.</p>
|
|
</div>
|
|
<button id="next-help-msg" class="minibutton" data-l10n="title" title="Next tip">→</button>
|
|
</div>
|
|
</div>
|
|
<p id="info-spell-checking" style="display:none;"><span data-l10n="text-content">Spell checking is based on:</span> <a rel="noopener noreferrer" target="_blank" href="http://aspell.net">Aspell</a></p>
|
|
</div>
|
|
</body>
|
|
</html>
|