|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<script src="https://cdn.socket.io/4.4.1/socket.io.min.js" type="text/javascript"></script>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js" type="text/javascript"></script>
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.4.min.js" type="text/javascript"></script>
|
|
|
|
|
<script src="data/scripts/init.js" type="text/javascript"></script>
|
|
|
|
|
<script src="data/scripts/events.js" type="text/javascript"></script>
|
|
|
|
|
<script src="data/scripts/online.js" type="text/javascript"></script>
|
|
|
|
|
<script src="data/scripts/game.js" type="text/javascript"></script>
|
|
|
|
|
<script src="data/scripts/leaderboard.js" type="text/javascript"></script>
|
|
|
|
|
<link href="styles.css" rel="stylesheet">
|
|
|
|
|
<link href="data/styles/color_picker.css" rel="stylesheet">
|
|
|
|
|
<link href="data/styles/range_input.css" rel="stylesheet">
|
|
|
|
|
<link href="data/styles/checkbox.css" rel="stylesheet">
|
|
|
|
|
<link href="data/images/favicon.ico" rel="icon" type="image/x-icon">
|
|
|
|
|
<title>ChainReact</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="content">
|
|
|
|
|
<div id="interface">
|
|
|
|
|
<div id="main" style="display: none;">
|
|
|
|
|
<h1>Enter your Nickname!</h1>
|
|
|
|
|
<input oninput="nameTyped(this)" type="text">
|
|
|
|
|
<button class="tooltip" onclick="socketConnect(localSettings.project);">
|
|
|
|
|
Connect & Play!
|
|
|
|
|
<span class="tooltiptext">Enter a name (max. 20 characters)!</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="lobby" style="display: none;">
|
|
|
|
|
<h1>Welcome, Benjo</h1>
|
|
|
|
|
<button class="tooltip" id="create_room" onclick="createRoom(this);">
|
|
|
|
|
Create room
|
|
|
|
|
<span class="tooltiptext">Enter a room name (Max. 30 characters)!</span>
|
|
|
|
|
</button>
|
|
|
|
|
<input oninput="roomTyped(this);" type="text">
|
|
|
|
|
<fieldset class="fieldset_container" id="room_list">
|
|
|
|
|
<legend>Available rooms</legend>
|
|
|
|
|
<div id="room_listings"></div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<button onclick="socket.disconnect()">Disconnect</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="room" style="display: none;">
|
|
|
|
|
<h1></h1>
|
|
|
|
|
<button class="tooltip" id="start_button" onclick="serverStartGame(this);">
|
|
|
|
|
Start
|
|
|
|
|
<span class="tooltiptext">Leader can start when all players (2-4) are ready!</span>
|
|
|
|
|
</button>
|
|
|
|
|
<fieldset class="fieldset_container" id="settings_list">
|
|
|
|
|
<legend>Settings</legend>
|
|
|
|
|
<table id="settings" onchange="readGameSettings()">
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Turn time:</td>
|
|
|
|
|
<td><select class="setting" id="turntime_select">
|
|
|
|
|
<option value="5">5s</option>
|
|
|
|
|
<option value="10">10s</option>
|
|
|
|
|
<option value="15">15s</option>
|
|
|
|
|
<option value="20">20s</option>
|
|
|
|
|
<option value="25">25s</option>
|
|
|
|
|
<option value="30">30s</option>
|
|
|
|
|
<option value="35">35s</option>
|
|
|
|
|
<option value="50">40s</option>
|
|
|
|
|
<option value="45">45s</option>
|
|
|
|
|
<option value="50">50s</option>
|
|
|
|
|
<option value="55">55s</option>
|
|
|
|
|
<option value="60">60s</option>
|
|
|
|
|
</select></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Field size:</td>
|
|
|
|
|
<td><select class="setting" id="fieldsize_select">
|
|
|
|
|
<option value="4">4x4</option>
|
|
|
|
|
<option value="5">5x5</option>
|
|
|
|
|
<option value="6">6x6</option>
|
|
|
|
|
<option value="7">7x7</option>
|
|
|
|
|
<option value="8">8x8</option>
|
|
|
|
|
<option value="9">9x9</option>
|
|
|
|
|
</select></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Walls:</td>
|
|
|
|
|
<td><input class="setting" id="mixed_check" type="checkbox"/></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Silent:</td>
|
|
|
|
|
<td><input class="setting" id="silent_check" type="checkbox"></td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<fieldset class="spectator_list fieldset_container">
|
|
|
|
|
<legend>Spectators</legend>
|
|
|
|
|
<button class="join_type" onclick="socket.emit('join-spectators');">Join</button>
|
|
|
|
|
<div class="spectator_listings"></div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<fieldset class="fieldset_container" id="player_list">
|
|
|
|
|
<legend>Players</legend>
|
|
|
|
|
<button class="join_type" onclick="socket.emit('join-players');">Join</button>
|
|
|
|
|
<div id="player_listings"></div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<button onclick="leaveRoom(this);">Leave</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="game_room" style="display: none;">
|
|
|
|
|
<fieldset class="spectator_list fieldset_container">
|
|
|
|
|
<legend>Spectators</legend>
|
|
|
|
|
<div class="spectator_listings"></div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<fieldset class="fieldset_container" id="game_players_holder">
|
|
|
|
|
<legend>Players</legend>
|
|
|
|
|
<div id="game_players"></div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<button id="play_again" onclick="sendPlayAgain(this)">Play again!</button>
|
|
|
|
|
<button id="leave_room" onclick="leaveRoom(this);">Leave</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="project_info">
|
|
|
|
|
<span id="version"></span>
|
|
|
|
|
<a href="./changelog.txt" target="_blank">Changelog</a>
|
|
|
|
|
<button class="tooltip" id="start_feedback" onclick="$('#user_feedback').show();givingFeedback = true;">
|
|
|
|
|
Feedback
|
|
|
|
|
<span class="tooltiptext">Connect to send feedback!</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="user_feedback" style="display: none;">
|
|
|
|
|
<span>Write me feedback about bugs/features!</span>
|
|
|
|
|
<textarea cols="50" rows="10"></textarea>
|
|
|
|
|
<button class="tooltip" id="give_feedback" onclick="$.post('/php/post_feedback.php', {content: $('#user_feedback > textarea').val(), projectName: localSettings.project.name});$('#user_feedback').hide();givingFeedback = false;">
|
|
|
|
|
Submit
|
|
|
|
|
<span class="tooltiptext">Connect to send feedback!</span>
|
|
|
|
|
</button>
|
|
|
|
|
<button onclick="$('#user_feedback').hide();givingFeedback = false;">Cancel</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="canvas-holder"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
