mirror of
https://github.com/OpenLiberty/liberty-bikes.git
synced 2024-11-27 01:20:01 +08:00
Clean up img files and duplicate static resources
This commit is contained in:
Andrew Guibert
parent
34d0458af7
commit
20c8630a43
@ -1,5 +1,5 @@
|
||||
#gameroot {
|
||||
background-image: url('/assets/images/tron_grid.jpg');
|
||||
background-image: url('/assets/images/game_grid.jpg');
|
||||
}
|
||||
|
||||
#gameroot div {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="col-md-6" style="display:inline-block">
|
||||
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000; background:url('assets/images/tron_floor.jpg')"></canvas>
|
||||
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000; background:url('assets/images/game_floor.jpg')"></canvas>
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
Before Width: | Height: | Size: 141 KiB After Width: | Height: | Size: 141 KiB |
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 90 KiB |
@ -1,33 +0,0 @@
|
||||
<%@page contentType="text/html" pageEncoding="UTF-8"%>
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>Liberty Bikes</title>
|
||||
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
|
||||
</head>
|
||||
<body style="background-image:url('images/tron_grid.jpg')">
|
||||
<br><br><br>
|
||||
<div class="col-md-offset-2 col-md-7">
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading"><h1>Liberty Bikes</h1></div>
|
||||
<div class="panel-body">
|
||||
<div class="col-md-8" style="display:inline-block">
|
||||
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000; background:url('images/tron_floor.jpg')"></canvas><br><br>
|
||||
</div>
|
||||
<ul id="playerList" class='list-group col-md-4 ' style="display:inline-block">
|
||||
</ul>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<button type="button" class="btn btn-success" onclick="startGame()">Start Game</button>
|
||||
<button type="button" class="btn btn-danger" onclick="pauseGame()">Pause Game</button>
|
||||
<button type="button" class="btn btn-warning" onclick="requeue()">Requeue</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="output"></div>
|
||||
<script type="text/javascript" src="websocket.js"></script>
|
||||
<script type="text/javascript" src="whiteboard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 141 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 90 KiB |
@ -1,34 +0,0 @@
|
||||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
||||
<title>Liberty Bikes</title>
|
||||
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Liberty Bikes</h1>
|
||||
<div class="col-md-offset-1">
|
||||
Enter Username:
|
||||
<input type="text" id="username" name="username"></input>
|
||||
Enter Round ID:
|
||||
<input type="text" id="roundId" name="roundId"></input>
|
||||
<input type="submit" class="btn btn-success" value="Login" onclick="joinRound()">
|
||||
<input type="submit" class="btn btn-success" value="Create Round" onclick="createRound()">
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript">
|
||||
function createRound(){
|
||||
$.post("round/create", function(data) {
|
||||
alert("Response is: " + data);
|
||||
})
|
||||
}
|
||||
function joinRound(){
|
||||
localStorage.setItem("username", $("#username").val());
|
||||
localStorage.setItem("roundId", $("#roundId").val());
|
||||
location.href = "game.jsp";
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
@ -1,54 +0,0 @@
|
||||
var roundId = localStorage.getItem("roundId");
|
||||
var baseUri = "ws://" + document.location.hostname + ":" + document.location.port + "/round/ws/";
|
||||
var wsUri = baseUri + roundId;
|
||||
var websocket = new WebSocket(wsUri);
|
||||
websocket.binaryType = "arraybuffer";
|
||||
var output = document.getElementById("output");
|
||||
websocket.onmessage = function(evt) { onMessage(evt); };
|
||||
websocket.onerror = function(evt) { onError(evt); };
|
||||
websocket.onopen = function(evt) { onConnect(evt); };
|
||||
|
||||
function sendText(json) {
|
||||
console.log("sending text: " + json);
|
||||
websocket.send(json);
|
||||
}
|
||||
|
||||
function sendBinary(bytes) {
|
||||
console.log("sending binary: " + Object.prototype.toString.call(bytes));
|
||||
websocket.send(bytes);
|
||||
}
|
||||
|
||||
function onMessage(evt) {
|
||||
console.log("received: " + evt.data);
|
||||
if (typeof evt.data == "string") {
|
||||
var json = JSON.parse(evt.data);
|
||||
if(json.playerlist){
|
||||
updatePlayerList(json);
|
||||
}else if(json.requeue) {
|
||||
roundId = json.requeue;
|
||||
localStorage.setItem("roundId", roundId)
|
||||
location.reload();
|
||||
}else {
|
||||
drawImageText(evt.data);
|
||||
}
|
||||
} else {
|
||||
drawImageBinary(evt.data);
|
||||
}
|
||||
}
|
||||
|
||||
function onError(evt) {
|
||||
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
|
||||
}
|
||||
|
||||
function onConnect(evt){
|
||||
var name = localStorage.getItem("username");
|
||||
sendText(JSON.stringify({"playerjoined":name}));
|
||||
console.log("Joined round: " + roundId);
|
||||
}
|
||||
|
||||
function writeToScreen(message) {
|
||||
var pre = document.createElement("p");
|
||||
pre.style.wordWrap = "break-word";
|
||||
pre.innerHTML = message;
|
||||
output.appendChild(pre);
|
||||
}
|
||||
@ -1,126 +0,0 @@
|
||||
var canvas = document.getElementById("myCanvas");
|
||||
var context = canvas.getContext("2d");
|
||||
|
||||
function getCurrentPos(evt) {
|
||||
var rect = canvas.getBoundingClientRect();
|
||||
return {
|
||||
x: evt.clientX - rect.left,
|
||||
y: evt.clientY - rect.top
|
||||
};
|
||||
}
|
||||
|
||||
function defineImage(evt) {
|
||||
var currentPos = getCurrentPos(evt);
|
||||
defineImageAtCoords(currentPos.x, currentPos.y);
|
||||
}
|
||||
|
||||
function defineImageAtCoords(x, y){
|
||||
for (i = 0; i <document.inputForm.color.length; i++) {
|
||||
if (document.inputForm.color[i].checked) {
|
||||
var color = document.inputForm.color[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
for (i = 0; i < document.inputForm.shape.length; i++) {
|
||||
if (document.inputForm.shape[i].checked) {
|
||||
var shape = document.inputForm.shape[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
var json = JSON.stringify({
|
||||
"shape": shape.value,
|
||||
"color": color.value,
|
||||
"coords": {
|
||||
"x": x,
|
||||
"y": y
|
||||
}
|
||||
});
|
||||
drawImageText(json);
|
||||
if (document.getElementById("instant").checked) {
|
||||
sendText(json);
|
||||
}
|
||||
}
|
||||
|
||||
function defineImageBinary() {
|
||||
var image = context.getImageData(0, 0, canvas.width, canvas.height);
|
||||
var buffer = new ArrayBuffer(image.data.length);
|
||||
var bytes = new Uint8Array(buffer);
|
||||
for (var i=0; i<bytes.length; i++) {
|
||||
bytes[i] = image.data[i];
|
||||
}
|
||||
sendBinary(buffer);
|
||||
}
|
||||
|
||||
function drawImageText(image) {
|
||||
var json = JSON.parse(image);
|
||||
context.fillStyle = json.color;
|
||||
switch (json.shape) {
|
||||
case "circle":
|
||||
context.beginPath();
|
||||
context.arc(json.coords.x, json.coords.y, 5, 0, 2 * Math.PI, false);
|
||||
context.fill();
|
||||
break;
|
||||
case "square":
|
||||
default:
|
||||
context.fillRect(json.coords.x, json.coords.y, 5, 5);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function drawImageBinary(blob) {
|
||||
var bytes = new Uint8Array(blob);
|
||||
|
||||
var imageData = context.createImageData(canvas.width, canvas.height);
|
||||
|
||||
for (var i=8; i<imageData.data.length; i++) {
|
||||
imageData.data[i] = bytes[i];
|
||||
}
|
||||
context.putImageData(imageData, 0, 0);
|
||||
}
|
||||
|
||||
function updatePlayerList(json){
|
||||
var list = "<li class='list-group-item active'>Players</li>";
|
||||
for(i in json.playerlist){
|
||||
var player = json.playerlist[i];
|
||||
list += "<li class='list-group-item'><font color='" + player.color + "' size='5'>" + player.name + "</font> : " + getStatus(player.status) + "</li>";
|
||||
}
|
||||
$("#playerList").html(list);
|
||||
}
|
||||
|
||||
function getStatus(status){
|
||||
if(status === "Connected")
|
||||
return "<span class='label label-primary'>Connected</span>";
|
||||
if(status === "Alive" || status === "Winner")
|
||||
return "<span class='label label-success'>"+status+"</span>";
|
||||
if(status === "Dead")
|
||||
return "<span class='label label-danger'>Dead</span>";
|
||||
if(status === "Disconnected")
|
||||
return "<span class='label label-default'>Disconnected</span>";
|
||||
}
|
||||
|
||||
function startGame(){
|
||||
sendText(JSON.stringify({"message":"GAME_START"}));
|
||||
}
|
||||
|
||||
function pauseGame(){
|
||||
sendText(JSON.stringify({"message":"GAME_PAUSE"}));
|
||||
}
|
||||
|
||||
function requeue(){
|
||||
sendText(JSON.stringify({"message":"GAME_REQUEUE"}));
|
||||
}
|
||||
|
||||
window.onkeydown = function(e) {
|
||||
var key = e.keyCode ? e.keyCode : e.which;
|
||||
|
||||
if(key == 38)
|
||||
sendText(JSON.stringify({"direction":"UP"}));
|
||||
else if(key == 40)
|
||||
sendText(JSON.stringify({"direction":"DOWN"}));
|
||||
else if(key == 37)
|
||||
sendText(JSON.stringify({"direction":"LEFT"}));
|
||||
else if(key == 39)
|
||||
sendText(JSON.stringify({"direction":"RIGHT"}));
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user