Files
gemp-lotr/gemp-lotr/gemp-lotr-web/src/main/webapp/game.html
2012-12-24 12:31:27 +00:00

387 lines
8.5 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Game of Gemp-LotR</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Expires" content="-1">
<style type="text/css">
body {
font-size: 12px;
}
.deckSize {
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: 200%;
font-weight: bolder;
width: 42px;
height: 42px;
background-image: url('images/deck-42.png');
}
.handSize {
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: 200%;
font-weight: bolder;
width: 42px;
height: 42px;
background-image: url('images/hand-42.png');
}
.threatsSize {
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: 200%;
font-weight: bolder;
width: 42px;
height: 42px;
background-image: url('images/threats-42.png');
}
.discardSize {
display: none;
text-align: center;
vertical-align: middle;
font-size: 200%;
font-weight: bolder;
width: 42px;
height: 42px;
background-image: url('images/discard-42.png');
}
.deadPileSize {
display: none;
text-align: center;
vertical-align: middle;
font-size: 200%;
font-weight: bolder;
width: 42px;
height: 42px;
background-image: url('images/deadPile-42.png');
}
.adventureDeckSize {
display: none;
text-align: center;
vertical-align: middle;
font-size: 200%;
font-weight: bolder;
width: 42px;
height: 42px;
background-image: url('images/adventureDeck-42.png');
}
.showStats {
display: table-cell;
}
.borderOverlay {
border: solid #000000;
}
.highlightBorderOverlay {
border: solid #ffffff;
}
.foilOverlay {
opacity: 0.2;
}
.cardHint {
display: inline;
color: #6f6fff;
cursor: pointer;
}
.cardStrength {
text-align: center;
font-weight: bolder;
color: #ffffff;
}
.cardVitality {
text-align: center;
font-weight: bolder;
color: #ffffff;
}
.cardSiteNumber {
text-align: center;
font-weight: bolder;
color: #ffffff;
}
.cardResistance {
text-align: center;
font-weight: bolder;
color: #ffffff;
}
.selectableCard > .borderOverlay {
border-color: #7faf7f;
cursor: pointer;
}
.actionableCard > .borderOverlay {
border-color: #7f7fff;
cursor: pointer;
}
.selectedCard > .borderOverlay {
border-color: #009f9f;
}
.stats {
text-align: center;
padding: 2px;
}
.fpArchery {
display: table-cell;
text-align: center;
vertical-align: middle;
background-image: url('images/fpArchery.png');
background-repeat: no-repeat;
color: #007777;
font-size: 200%;
font-weight: bolder;
width: 30px;
height: 30px;
}
.shadowArchery {
display: table-cell;
text-align: center;
vertical-align: middle;
background-image: url('images/shadowArchery.png');
background-repeat: no-repeat;
color: #007777;
font-size: 200%;
font-weight: bolder;
width: 30px;
height: 30px;
}
.move {
display: table-cell;
text-align: center;
vertical-align: middle;
background-image: url('images/move.png');
background-repeat: no-repeat;
color: #007777;
font-size: 200%;
font-weight: bolder;
width: 30px;
height: 30px;
}
.player {
color: #ffffff;
position: relative;
z-index: 50;
}
.player.current {
background-color: #ffffff;
color: #000000;
}
.playerStats {
color: #ffffff;
}
.playerStats .clickable {
color: #9f9fff;
cursor: pointer;
}
.phase {
color: #ffffff;
font-size: 120%;
}
.twilightPool {
float: right;
font-size: 30px;
width: 40px;
border-radius: 7px;
border: 1px solid #ffffff;
background-color: #000000;
color: #ffffff;
padding: 2px;
text-align: right;
}
.skirmish {
}
.fpDamageBonus, .shadowDamageBonus {
border-radius: 6px;
text-align: center;
vertical-align: middle;
background-color: #cccccc;
opacity: 0.7;
color: #000000;
font-size: 180%;
}
.fpStrength, .shadowStrength {
border-radius: 6px;
text-align: center;
vertical-align: middle;
background-color: #ffffff;
opacity: 0.7;
color: #000000;
font-size: 300%;
}
.fpStrength.overwhelmed {
border-radius: 6px;
text-align: center;
vertical-align: middle;
background-color: #ff3333;
opacity: 0.7;
color: #000000;
font-size: 300%;
}
#chatBox {
font-size: 90%;
}
.chatMessage {
color: #3fafff;
}
.systemMessage {
color: #5f5f5f;
font-size: 80%;
}
.gameMessage {
padding-top: 2px;
font-size: 80%;
}
.warningMessage {
color: #ff0000;
}
.ui-tabs-nav li {
font-size: 70%;
}
#settingsBox label {
font-size: 70%;
}
.clock {
float: right;
font-size: 100%;
}
.alertButtons .ui-button-text-only .ui-button-text {
font-size: 70%;
padding: .2em .5em;
}
.ui-button-text-only.slimButton .ui-button-text {
font-size: 70%;
padding: .2em .5em;
}
.ui-tabs .ui-tabs-panel.slimPanel {
padding: 4px;
}
.ui-tabs .ui-tabs-nav li a.slimTab {
padding-left: 3px;
padding-right: 3px;
padding-top: 2px;
padding-bottom: 2px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/dark-hive/jquery-ui-1.8.16.custom.css">
<link rel="stylesheet" type="text/css" href="css/jquery.contextMenu.css">
<link rel="stylesheet" type="text/css" href="js/jquery/styles/jquery.spinnercontrol.css">
<script type="text/javascript" src="js/jquery/jquery-1.6.2.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery/jquery.spinnercontrol.js"></script>
<script type="text/javascript" src="js/jquery/jquery.touchSwipe.js"></script>
<script type="text/javascript" src="js/gemp-013/inheritance.js"></script>
<script type="text/javascript" src="js/gemp-013/communication.js"></script>
<script type="text/javascript" src="js/gemp-013/common.js"></script>
<script type="text/javascript" src="js/gemp-013/chat.js"></script>
<script type="text/javascript" src="js/gemp-013/commonUi.js"></script>
<script type="text/javascript" src="js/gemp-013/gameUi.js"></script>
<script type="text/javascript" src="js/gemp-013/gameAnimations.js"></script>
<script type="text/javascript" src="js/gemp-013/jCardGroup.js"></script>
<script type="text/javascript" src="js/gemp-013/jCards.js"></script>
<script type="text/javascript" src="js/gemp-013/logging.js"></script>
<script type="text/javascript">
var ui;
var communication;
// TODO: delete - Only for debugging
function getUrlParam(param) {
var search = window.location.search.substring(1);
if (search.indexOf('&') > -1) {
var params = search.split('&');
for (var i = 0; i < params.length; i++) {
var key_value = params[i].split('=');
if (key_value[0] == param) return key_value[1];
}
} else {
var params = search.split('=');
if (params[0] == param) return params[1];
}
return null;
}
function getMapSize(map) {
var size = 0, key;
for (key in map)
if (map.hasOwnProperty(key)) size++;
return size;
}
$(document).ready(
function () {
var replay = getUrlParam("replayId");
ui = new GempLotrGameUI("/gemp-lotr-server", replay != null);
$(window).resize(function () {
ui.windowResized();
});
ui.layoutUI(true);
if (replay == null)
ui.startGameSession();
else
ui.startReplaySession(replay);
});
</script>
</head>
<body>
<div id="main"
style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000000; overflow: hidden">
</div>
</body>
</html>