Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions cardshifter.html
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
<!DOCTYPE html>
<html ng-app="CardshifterApp">
<head>
<title>Cardshifter</title>
<head>
<title>Cardshifter</title>

<!-- Boostrap -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Boostrap -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>

<!-- The main CSS file -->
<link href="cardshifter.css" rel="stylesheet"/>
<!-- The main CSS file -->
<link href="cardshifter.css" rel="stylesheet"/>

<!-- AngularJS libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<!-- AngularJS libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>

<!-- The API for communicating with the server -->
<script src="server_interface/server_interface.js"></script>
<!-- The API for communicating with the server -->
<script src="server_interface/server_interface.js"></script>

<!-- Controllers -->
<script src="cardshifter.js"></script>
<script src="login/login_controller.js"></script>
<script src="lobby/lobby_controller.js"></script>
</head>
<body>
<!-- Application pages will be injected here -->
<div ng-view></div>
</body>
<!-- Controllers -->
<script src="cardshifter.js"></script>
<script src="login/login_controller.js"></script>
<script src="lobby/lobby_controller.js"></script>
</head>
<body>
<!-- Application pages will be injected here -->
<div ng-view></div>
</body>
</html>
18 changes: 9 additions & 9 deletions cardshifter.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
var CardshifterApp = angular.module("CardshifterApp", ["ngRoute"]);

CardshifterApp.config(function($routeProvider) {
$routeProvider
.when("/", { // default page is Login
controller: "LoginController",
templateUrl: "login/login.html",
})
.when("/lobby", {
controller: "LobbyController",
templateUrl: "lobby/lobby.html",
})
$routeProvider
.when("/", { // default page is Login
controller: "LoginController",
templateUrl: "login/login.html",
})
.when("/lobby", {
controller: "LobbyController",
templateUrl: "lobby/lobby.html",
})
});
76 changes: 38 additions & 38 deletions lobby/lobby_controller.js
Original file line number Diff line number Diff line change
@@ -1,50 +1,50 @@
CardshifterApp.controller("LobbyController", function($scope, $interval, $timeout) {
var CHAT_FEED_LIMIT = 10;
var POLL_FREQ = 2000;
var MESSAGE_DELAY = 3000;
var CHAT_FEED_LIMIT = 10;
var POLL_FREQ = 2000;
var MESSAGE_DELAY = 3000;

$scope.users = [];
$scope.chatMessages = [];
$scope.users = [];
$scope.chatMessages = [];

var getUsersMessage = new CardshifterServerAPI.messageTypes.ServerQueryMessage("USERS", "");
CardshifterServerAPI.sendMessage(getUsersMessage);
var getUsersMessage = new CardshifterServerAPI.messageTypes.ServerQueryMessage("USERS", "");
CardshifterServerAPI.sendMessage(getUsersMessage);

$interval(function() { // update chat and users
while(message = CardshifterServerAPI.getMessage()) {
switch(message.command) {
case "userstatus":
$interval(function() { // update chat and users
while(message = CardshifterServerAPI.getMessage()) {
switch(message.command) {
case "userstatus":
// do conditional checking if user is offline
if(message.status === "OFFLINE") {
for(var i = 0, length = $scope.users.length; i < length; i++) {
// if the user described in the message is the user in this iteration
if($scope.users[i].name === message.name) {
$scope.users.splice(i, 1); // remove that user from the array
}
}
for(var i = 0, length = $scope.users.length; i < length; i++) {
// if the user described in the message is the user in this iteration
if($scope.users[i].name === message.name) {
$scope.users.splice(i, 1); // remove that user from the array
}
}
} else {
$scope.users.push(message);
$scope.users.push(message);
}

break;
case "chat":
if($scope.chatMessages.length === CHAT_FEED_LIMIT) {
// remove the latest (opposite of earliest) chat message
$scope.chatMessages.shift();
}
$scope.chatMessages.push(message);
break;
}
}
}, POLL_FREQ);
break;
case "chat":
if($scope.chatMessages.length === CHAT_FEED_LIMIT) {
// remove the latest (opposite of earliest) chat message
$scope.chatMessages.shift();
}
$scope.chatMessages.push(message);
break;
}
}
}, POLL_FREQ);

$scope.sendMessage = function() {
$scope.sending = true;
var chatMessage = new CardshifterServerAPI.messageTypes.ChatMessage($scope.user_chat_message);
CardshifterServerAPI.sendMessage(chatMessage);
$scope.sendMessage = function() {
$scope.sending = true;
var chatMessage = new CardshifterServerAPI.messageTypes.ChatMessage($scope.user_chat_message);
CardshifterServerAPI.sendMessage(chatMessage);

$scope.user_chat_message = ""; // clear the input box
$timeout(function() { // allow another message to be sent in 3 seconds
$scope.sending = false;
}, MESSAGE_DELAY);
}
$scope.user_chat_message = ""; // clear the input box
$timeout(function() { // allow another message to be sent in 3 seconds
$scope.sending = false;
}, MESSAGE_DELAY);
}
});
72 changes: 36 additions & 36 deletions login/login.html
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@
<div class="col-sm-9 col-md-10 main csh-body">
<h1>Cardshifter login</h1>
<form name="login_information" id="login_information" class="login-form">
<div class="form-group">
<label for="server" aria-label="Server">Server:</label>
<select ng-model="server" name="server" id="server" class="form-control">
<option value="ws://127.0.0.1:4243">Local host</option>
<option value="ws://dwarftowers.com:4243">dwarftowers.com</option>
<option value="ws://echo.websocket.org/">WebSocket.org echo test</option>
<option value="other">Other...</option>
</select>
</div>
<div class="form-group">
<div ng-show="server=='other'" id="server_other">
<label for="server_other_input">Other Server:</label>
<input ng-model="other_server" name="server_other_input" id="server_other_input" type="text" class="form-control" />
<br/>
<!-- Could localhost be secure too? (SirPython)-->
<label for="secure">Is secure server:</label>
<input ng-model="is_secure" name="secure" id="secure" type="checkbox" value="secure" />
<br/>
</div>
</div>
<div class="form-group">
<label for="username">Username:</label>
<input ng-model="username" name="username" id="username" type="text" class="form-control" placeholder="Enter name..." />
</div>
<div class="form-group">
<label for="test_message">Test message to server:</label>
<input name="test_message" id="test_message" type="text" size="100" class="form-control" placeholder="Optional... Leave blank unless using for testing." />
</div>
<div class="form-group">
<input ng-click="login()" ng-disabled="loggedIn" name="submit" id="submit" type="button" value="Log in" class="btn btn-success" />
<input name="test_websocket" id="test_websocket" type="button" value="Test WebSocket" class="btn btn-primary" />
<input name="disconnect_websocket" id="disconnect_websocket" type="button" value="Disconnect WebSocket" class="btn btn-danger" />
</div>
</form>
<h1>Cardshifter login</h1>
<form name="login_information" id="login_information" class="login-form">
<div class="form-group">
<label for="server" aria-label="Server">Server:</label>
<select ng-model="server" name="server" id="server" class="form-control">
<option value="ws://127.0.0.1:4243">Local host</option>
<option value="ws://dwarftowers.com:4243">dwarftowers.com</option>
<option value="ws://echo.websocket.org/">WebSocket.org echo test</option>
<option value="other">Other...</option>
</select>
</div>
<div class="form-group">
<div ng-show="server=='other'" id="server_other">
<label for="server_other_input">Other Server:</label>
<input ng-model="other_server" name="server_other_input" id="server_other_input" type="text" class="form-control" />
<br/>
<!-- Could localhost be secure too? (SirPython)-->
<label for="secure">Is secure server:</label>
<input ng-model="is_secure" name="secure" id="secure" type="checkbox" value="secure" />
<br/>
</div>
</div>
<div class="form-group">
<label for="username">Username:</label>
<input ng-model="username" name="username" id="username" type="text" class="form-control" placeholder="Enter name..." />
</div>
<div class="form-group">
<label for="test_message">Test message to server:</label>
<input name="test_message" id="test_message" type="text" size="100" class="form-control" placeholder="Optional... Leave blank unless using for testing." />
</div>
<div class="form-group">
<input ng-click="login()" ng-disabled="loggedIn" name="submit" id="submit" type="button" value="Log in" class="btn btn-success" />
<input name="test_websocket" id="test_websocket" type="button" value="Test WebSocket" class="btn btn-primary" />
<input name="disconnect_websocket" id="disconnect_websocket" type="button" value="Disconnect WebSocket" class="btn btn-danger" />
</div>
</form>
</div>
80 changes: 40 additions & 40 deletions login/login_alt.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
<html>

<head>
<title>Cardshifter Login</title>
<title>Cardshifter Login</title>

<!-- Link external libraries for page design via CDN -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet" /> -->

<link rel="stylesheet" type="text/css" href="login.css">
<link rel="stylesheet" type="text/css" href="login.css">

<!-- load angular and angular route via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
Expand All @@ -31,77 +31,77 @@
<!-- USER NAME -->
<div class="form-group">
<label for="username" style="color: #FFFFFF;" aria-label="Username">Username:</label>
<input name="username" id="username" type="text" class="form-control" placeholder="User name" />
<input name="username" id="username" type="text" class="form-control" placeholder="User name" />
</div>

<!-- SERVER -->
<div class="form-group">
<label for="server" style="color: #FFFFFF;" aria-label="Server">Server:</label>
<select name="server" id="server" class="form-control">
<option value="ws://127.0.0.1:4243">Local host</option>
<option value="ws://dwarftowers.com:4243">dwarftowers.com</option>
<option value="ws://echo.websocket.org/">WebSocket.org echo test</option>
<option value="other">Other...</option>
</select>
<label for="server" style="color: #FFFFFF;" aria-label="Server">Server:</label>
<select name="server" id="server" class="form-control">
<option value="ws://127.0.0.1:4243">Local host</option>
<option value="ws://dwarftowers.com:4243">dwarftowers.com</option>
<option value="ws://echo.websocket.org/">WebSocket.org echo test</option>
<option value="other">Other...</option>
</select>
</div>
<div class="form-group">
<div id="server_other">
<label for="server_other_input">Other Server:</label>
<input name="server_other_input" id="server_other_input" type="text" class="form-control" />
</div>
<div id="server_other">
<label for="server_other_input">Other Server:</label>
<input name="server_other_input" id="server_other_input" type="text" class="form-control" />
</div>
</div>
<!-- BUTTONS -->
<div class="form-group">
<input name="submit" id="submit" type="button" value="Log in" class="btn btn-success btn-sm" />
<input name="disconnect_websocket" id="disconnect_websocket" type="button" value="Log Out" class="btn btn-danger btn-sm" />
<input name="test_websocket" id="test_websocket" type="button" value="Test Msg" class="btn btn-primary btn-sm" />
<input name="submit" id="submit" type="button" value="Log in" class="btn btn-success btn-sm" />
<input name="disconnect_websocket" id="disconnect_websocket" type="button" value="Log Out" class="btn btn-danger btn-sm" />
<input name="test_websocket" id="test_websocket" type="button" value="Test Msg" class="btn btn-primary btn-sm" />
</div>

</form>
</div>
</nav>

<div class="col-sm-9 col-md-10 main csh-body" data-th-fragment="content">
<noscript>To play CardShifter, please either enable JavaScript or use a JavaScript-enabled browser.</noscript>
<noscript>To play CardShifter, please either enable JavaScript or use a JavaScript-enabled browser.</noscript>

<!-- <h1>Cardshifter login</h1> -->
<form name="login_information" id="login_information" class="login-form">
<!-- <h1>Cardshifter login</h1> -->
<form name="login_information" id="login_information" class="login-form">
<div class="form-group">
<label for="server" aria-label="Server">Server:</label>
<select name="server" id="server" class="form-control">
<option value="ws://127.0.0.1:4243">Local host</option>
<option value="ws://dwarftowers.com:4243">dwarftowers.com</option>
<option value="ws://echo.websocket.org/">WebSocket.org echo test</option>
<option value="other">Other...</option>
</select>
<label for="server" aria-label="Server">Server:</label>
<select name="server" id="server" class="form-control">
<option value="ws://127.0.0.1:4243">Local host</option>
<option value="ws://dwarftowers.com:4243">dwarftowers.com</option>
<option value="ws://echo.websocket.org/">WebSocket.org echo test</option>
<option value="other">Other...</option>
</select>
</div>
<div class="form-group">
<div id="server_other">
<label for="server_other_input">Other Server:</label>
<input name="server_other_input" id="server_other_input" type="text" class="form-control" />
</div>
<div id="server_other">
<label for="server_other_input">Other Server:</label>
<input name="server_other_input" id="server_other_input" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="username">Username:</label>
<input name="username" id="username" type="text" class="form-control" placeholder="Enter name..." />
<label for="username">Username:</label>
<input name="username" id="username" type="text" class="form-control" placeholder="Enter name..." />
</div>
<!-- TODO: Remove `test_message` section once login works correctly -->
<div class="form-group">
<label for="test_message">Test message to server:</label>
<input name="test_message" id="test_message" type="text" size="100" class="form-control" placeholder="Optional... Leave
<label for="test_message">Test message to server:</label>
<input name="test_message" id="test_message" type="text" size="100" class="form-control" placeholder="Optional... Leave

blank unless using for testing." />
</div>
<!-- END `test_messate` section -->
<div class="form-group">
<input name="submit" id="submit" type="button" value="Log in" class="btn btn-success" />
<input name="test_websocket" id="test_websocket" type="button" value="Test WebSocket" class="btn btn-primary" />
<input name="disconnect_websocket" id="disconnect_websocket" type="button" value="Disconnect WebSocket" class="btn btn-
<input name="submit" id="submit" type="button" value="Log in" class="btn btn-success" />
<input name="test_websocket" id="test_websocket" type="button" value="Test WebSocket" class="btn btn-primary" />
<input name="disconnect_websocket" id="disconnect_websocket" type="button" value="Disconnect WebSocket" class="btn btn-

danger" />
</div>
</form>
<script src="login.js"></script>
</form>
<script src="login.js"></script>
</div>
</body>

Expand Down
Loading