views/index.ejs
<!DOCTYPE html>
<html ng-app="openparty">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%= __conf.name || __("OpenParty") %></title>
<link rel="stylesheet" href="css/bootstrap.default.min.css" id="stylesheet">
<link rel="stylesheet" href="css/main.css">
<% __customCss.forEach(function(f) { %>
<link rel="stylesheet" href="<%= f %>">
<% }) %>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png" />
</head>
<body ng-controller="controller" class="ng-cloak">
<div class="container-fluid ng-cloak" style="margin-top:20px" ng-show="emergencyMessage">
<div class="alert alert-warning" role="alert">
<span class="glyphicon glyphicon-flag"></span>
<strong ng-bind-html="emergencyMessage"></strong>
</div>
</div>
<div class="container-fluid ng-cloak" style="margin-top:20px" ng-show="status == 0">
<div class="jumbotron">
<h2><%= __("Welcome on %s!", __conf.name || __("OpenParty")) %></h2>
<p><%- __conf.welcomeMsg || __("Please provide some credentials to access the lobby.") %></p>
<div class="alert alert-danger" role="alert" ng-show="loginErrorMessage">
<strong>{{ loginErrorMessage }}</strong>
</div>
<form role="form" ng-submit="loginSubmit()">
<div class="form-group">
<label for="usernameInput"><%= __("Username") %></label>
<input type="text" class="form-control" id="usernameInput" placeholder="" ng-model="username">
</div>
<div class="form-group {{ loginError }}" ng-show="<%= passwordRequired %>">
<label for="passwordInput"><%= __("Server password") %></label>
<input type="password" class="form-control" id="passwordInput" placeholder="" ng-model="password">
</div>
<button type="submit" class="btn btn-primary btn-lg"><%= __("Enter!") %></button>
<a class="btn btn-link" href="/about"><%= __("About") %></a>
</form>
</div>
</div>
<div class="container-fluid ng-cloak" style="margin-top:20px" ng-show="status == -1">
<div class="alert alert-danger" role="alert">
<h4><strong><span class="glyphicon glyphicon-remove"></span> <%= __("Something went wrong...") %></strong></h4>
<p><%= __("Connection with server has been interrupted. Don't panic ! We (probably) are trying to solve the problem.") %></p>
<p><%= __("Please check that you are correctly linked to internet and that the server is running.") %></p>
</div>
</div>
<div class="container-fluid ng-cloak" ng-show="status == 1">
<h1>
<%= __("Lobby") %>
<small>
<%= __("Welcome") %> {{ username }}
<button type="button" class="btn btn-link" ng-click="register()" ng-disabled="registering" ng-show="!registered && !authUsername">
<span class="glyphicon glyphicon-check"></span> <%= __("Register") %>
</button>
<button type="button" class="btn btn-link" ng-click="overlay='import'" ng-show="!registered && !authUsername && !registering">
<span class="glyphicon glyphicon-import"></span> <%= __("Import identity") %>
</button>
<a class="btn btn-link" href="/" ng-show="registered">
<%= __("Registration done! Reload the page by clicking this link to proceed.") %>
</a>
<button type="button" class="btn btn-link" ng-show="authUsername" title="<%= __("Logged as") %> {{authUsername}}" ng-click="printIdentity()">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button type="button" class="btn btn-xs btn-danger" ng-click="logout()" style="float: right">
<span class="glyphicon glyphicon-log-out"></span>
</button>
</small>
</h1>
<% if(__conf.motd) { %>
<div class="panel panel-default">
<div class="panel-body">
<%- __conf.motd %>
</div>
</div>
<% } %>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default" ng-show="joinedRoom == null">
<div class="panel-heading">
<%= __("Open new room") %>
<%- include("parts/theme_button") %>
</div>
<div class="panel-body">
<form role="form" ng-submit="createRoom()">
<div class="form-group">
<label for="roomNameInput"><%= __("Name") %></label>
<input type="text" class="form-control" id="roomNameInput" placeholder="" ng-model="roomName"/>
</div>
<div class="form-group">
<label for="roomPasswordInput"><%= __("Password") %></label>
<input type="text" class="form-control" id="roomPasswordInput" placeholder="<%= __("(no password)") %>" ng-model="roomPassword"/>
</div>
<div class="form-group">
<label for="roomTypeInput"><%= __("Type") %></label>
<select id="roomTypeInput" ng-options="key as type.name for (key,type) in gametypes" class="form-control" ng-model="roomType">
</select>
</div>
<button type="submit" class="btn btn-primary"><%= __("Create") %></button>
<span style="font-size:10px">
<span class="glyphicon glyphicon-flash"></span> <%= __("Ping") %> : {{ping}}
<span class="glyphicon glyphicon-user"></span>
<ng-pluralize count="users.lobby" when="{'0': '<%= __("Nobody waiting") %>', 'one': '<%= __("One") %> <%= __n("person waiting", "people waiting", 1) %>', 'other': '{} <%= __n("person waiting", "people waiting", 2) %>'}"></ng-pluralize>
<%= __("and") %>
<ng-pluralize count="users.playing" when="{'0': '<%= __("nobody playing") %>', 'one': '<%= __("one") %> <%= __n("person playing", "people playing", 1) %>', 'other': '{} <%= __n("person playing", "people playing", 2) %>'}"></ng-pluralize>
</span>
</form>
</div>
</div>
<div class="panel panel-default" ng-show="joinedRoom != null">
<div class="panel-heading">
<%= __("Room parameters") %>
<button class="btn btn-xs btn-link" ng-click="showMasterParams = !showMasterParams;">
<%= __("Hide") %>/<%= __("Show") %>
</button>
<%- include("parts/theme_button") %>
</div>
<div class="panel-body" ng-show="showMasterParams">
<div class="alert alert-info" role="alert" ng-if="roomHelpMessage">
{{ roomHelpMessage }}
</div>
<form class="form-horizontal">
<div class="form-group parameters-group">
<label class="col-sm-7 control-label"> <%= __("Seats") %></label>
<div class="col-sm-5">
{{ joinedRoom.size }} / {{ joinedRoom.gameplay.maxPlayers }}
<button class="btn btn-default btn-xs input-sm" ng-click="incSize(-1)" ng-disabled="!isMaster">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
<button class="btn btn-default btn-xs input-sm" ng-click="incSize(1)" ng-disabled="!isMaster">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
<div class="form-group parameters-group" ng-repeat="parameter in joinedRoom.gameplay.parameters">
<label class="col-sm-7 control-label">
{{ parameter.name }}
<span ng-if="parameter.help" class="glyphicon glyphicon glyphicon-info-sign link" ng-click="printHelp(parameter.help)"></span>
</label>
<div class="col-sm-5">
<input type="text" class="form-control input-sm" ng-model="localParams[$index]" ng-change="changeParameter(joinedRoom.gameplay.parameters[$index].name, localParams[$index]);" ng-disabled="!isMaster" ng-hide="parameter.isBoolean"/>
<input type="checkbox" class="form-control input-sm" ng-model="localParams[$index]" ng-change="changeParameter(joinedRoom.gameplay.parameters[$index].name, localParams[$index]);" ng-disabled="!isMaster" ng-show="parameter.isBoolean"/>
</div>
</div>
</form>
<br />
<button class="btn btn-success" ng-if="isMaster" ng-click="startRoom()" ng-disabled="joinedRoom.players.length < joinedRoom.size"><b><%= __("Start!") %></b></button>
<span class="glyphicon glyphicon glyphicon-info-sign link" ng-if="isMaster" ng-click='printHelp("<%= __("You have to fill the room with several players before starting it.") %>")'></span>
</div>
</div>
</div>
<div class="col-md-8">
<div class="alert alert-info" role="alert" ng-show="rooms.length == 0">
<%= __("No room is currently available :(") %>
</div>
<div class="list-group">
<a class="list-group-item" ng-repeat="room in rooms" ng-click="changeSelectedRoom(room.id)" ng-dblclick="joinRoom(room.id)">
<div class="row">
<div class="col-xs-4">
<span class="glyphicon glyphicon-lock" ng-show="room.password"></span>
<b>{{ room.name }}</b>
</div>
<div class="col-xs-2"><i><%= __("By") %> {{ room.players[0].username }}</i></div>
<div class="col-xs-5">{{ room.gameplay.name }}</div>
<div class="col-xs-1"><span class="badge">{{ room.players.length }}/{{ room.size }}</span></div>
</div>
<div class="row" ng-show="room.id == selectedRoom">
<div class="col-xs-4">
<form class="form-inline" ng-show="joinedRoom == null">
<div class="form-group" ng-class="{'has-error': invalidRoomPassword}">
<input class="form-control input-sm" type="text" ng-model="password" ng-show="room.password" placeholder="<%= __("Password") %>"/>
<button class="btn btn-primary btn-xs" ng-click="joinRoom(room.id, password)"><%= __("Join!") %></button>
</div>
</form>
</div>
<div class="col-xs-8">
<i><%= __n("Player", "Players", 2) %> : <span ng-repeat="player in room.players">{{ player.username }} </span></i><br />
{{ room.gameplay.description }}
</div>
</div>
</a>
</div>
</div>
</div>
<div class="row" ng-show="joinedRoom != null">
<div class="col-sm-5 col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<%= __n("Player", "Players", 2) %>
<button class="btn btn-xs btn-danger" ng-click="leaveRoom()" style="float: right">
<%= __("Leave") %>
</button>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li ng-repeat="player in joinedRoom.players" class="row">
<div class="col-xs-2">
<button class="btn btn-xs btn-danger pull-right" ng-if="isMaster && player.username !== username" ng-click="kickPlayer(player.username)">
<span class="glyphicon glyphicon-log-out"></span>
</button>
</div>
<div class="col-xs-10">
<strong ng-bind-html="player.username"></strong>
<button class="btn btn-xs btn-danger" ng-if="checkAuth(player) === 'ko'" ng-click="askFriend(player)">
<%= __("Mismatch") %>
</button>
<button class="btn btn-xs btn-link" ng-if="checkAuth(player) === 'ok'" ng-click="askFriend(player, true)">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button class="btn btn-xs btn-link" ng-if="checkAuth(player) === 'unknown'" ng-click="askFriend(player)">
<span class="glyphicon glyphicon-question-sign"></span>
</button>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-7 col-md-9">
<pre ng-bind-html="preChat | parseUrlFilter:'_blank'" scroll-glue class="resizable preChat"></pre>
<input type="text" class="form-control" placeholder="<%= __("Type a message here...") %>" ng-model="chatMessage" ng-keydown="keyChat($event, true)"/>
</div>
</div>
<div class="row" ng-show="joinedRoom == null">
<div class="col-md-4">
<pre ng-bind-html="preChat | parseUrlFilter:'_blank'" scroll-glue class="resizable preChat"></pre>
<input type="text" class="form-control" placeholder="<%= __("Type a message here...") %>" ng-model="chatMessage" ng-keydown="keyChat($event, true)"/>
</div>
</div>
</div>
<div class="container-fluid ng-cloak" style="margin-top:20px; height: 90vh;" ng-show="status == 2">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<button class="btn btn-default btn-xs" style="float: right" ng-click="toggleMute()">
<span class="glyphicon glyphicon-volume-up" ng-show="mute !== 'on'"></span>
<span class="glyphicon glyphicon-volume-off" ng-show="mute === 'on'"></span>
</button>
<%- include("parts/theme_button") %>
<button class="btn btn-xs btn-danger" ng-click="leaveRoom()">
<%= __("Leave") %>
</button>
{{ joinedRoom.name }}
</h3>
</div>
<div class="panel-body" ng-bind-html="gameInfo"></div>
<div class="container-fluid text-center">
<h4>{{ remainingTime.min }} : {{ remainingTime.sec }}</h4>
<div ng-repeat="(name, action) in actions" ng-switch="action.type">
<div ng-switch-when="button" style="margin-bottom:10px;">
<button class="btn btn-primary btn-sm" ng-click="executeAction(name)">{{ action.options.submit }}</button>
</div>
<div ng-switch-when="select" style="margin-bottom:10px;">
<form class="form-inline" ng-submit="executeAction(name)">
<select ng-options="value for value in action.options.safeChoices" class="form-control input-sm" ng-model="actionsValues[name]"></select>
<input type="submit" class="btn btn-primary btn-sm" value="{{ action.options.submit }}"/>
</form>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<div class="container-fluid">
<div class="row" ng-repeat="player in joinedRoom.players" ng-bind-html="getPlayerInfos(player)"></div>
</div>
</div>
</div>
</div>
<div class="col-md-9" style="height:100%">
<div class="well well-sm" style="height:80%; overflow:auto;" ng-bind-html="gameChat" scroll-glue></div>
<div class="container-fluid" ng-show="selectedChannel">
<div class="col-md-9 col-lg-10">
<input type="text" class="form-control" placeholder="<%= __("Type a message here...") %>" ng-model="chatMessage" ng-keydown="keyChat($event)"/>
</div>
<div class="col-md-3 col-lg-2">
<select ng-model="selectedChannel" class="form-control" ng-options="v.id as v.n for v in channels" ng-change="manualChannelChange = true"></select>
</div>
</div>
</div>
</div>
<div id="overlay" ng-show="overlay">
<div class="container-fluid">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-heading">
<%= __("Important note") %>
<button type="button" class="btn btn-danger pull-right btn-xs" ng-click="overlay=false">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
<div class="panel-body" ng-show="overlay === 'registrationInfo'">
<p><%= __("You are currently authenticated. Others can check safely your identity.") %></p>
<p><%= __("Save the following text IN A SECURE PLACE to use your identity on other computers:") %></p>
<pre class="preChat">{{ exportData }}</pre>
<p><strong><%= __("Beware, removing your identification is definitive, and will take effect from the next connection.") %></strong></p>
<button type="button" class="btn btn-danger" ng-click="unregister()"><%= __("Remove identification") %></button>
</div>
<div class="panel-body" ng-show="overlay === 'addFriend'">
<p><%= __("You are going to add to add the following player in your trust list:") %> <strong>{{ friend.username }}</strong></p>
<p><%= __("Doing this, you will be able to check its identity in future rooms.") %></p>
<p><%= __("Please check the player's identity yourself before performing this action.") %></p>
<button type="button" class="btn btn-primary" ng-click="setFriend(false)"><%= __("Confirm") %></button>
</div>
<div class="panel-body" ng-show="overlay === 'rmFriend'">
<p><%= __("This player is correctly identified because you are trusting him, and its authentication is correct.") %></p>
<p><%= __("Click the following button to remove the identification of this player.") %></p>
<button type="button" class="btn btn-danger" ng-click="setFriend(true)"><%= __("Remove identification") %></button>
</div>
<div class="panel-body" ng-show="overlay === 'import'">
<p><%= __("Please paste the backup chain here to import your identification") %></p>
<textarea class="form-control" rows="3" ng-model="importData"></textarea>
<button type="button" class="btn btn-primary" ng-click="import(importData);"><%= __("Import") %></button>
</div>
</div>
</div>
</div>
</div>
<script src="js/angular.min.js"></script>
<script src="js/angular-sanitize.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="js/socket.min.js"></script>
<script src="js/glue.js"></script>
<script src="js/audio.js"></script>
<script src="js/openpgp.min.js"></script>
<script src="js/controller.js"></script>
<script src="js/crypto.js"></script>
</body>
</html>