Minor ui improvements
Wanja
BIN
assets/www/css/black.png
Normal file
|
After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 176 B After Width: | Height: | Size: 176 B |
|
Before Width: | Height: | Size: 203 B After Width: | Height: | Size: 203 B |
|
Before Width: | Height: | Size: 176 B After Width: | Height: | Size: 176 B |
|
Before Width: | Height: | Size: 486 B After Width: | Height: | Size: 486 B |
|
Before Width: | Height: | Size: 365 B After Width: | Height: | Size: 365 B |
|
Before Width: | Height: | Size: 601 B After Width: | Height: | Size: 601 B |
|
Before Width: | Height: | Size: 772 B After Width: | Height: | Size: 772 B |
|
Before Width: | Height: | Size: 567 B After Width: | Height: | Size: 567 B |
|
Before Width: | Height: | Size: 382 B After Width: | Height: | Size: 382 B |
|
Before Width: | Height: | Size: 270 B After Width: | Height: | Size: 270 B |
|
Before Width: | Height: | Size: 762 B After Width: | Height: | Size: 762 B |
|
Before Width: | Height: | Size: 480 B After Width: | Height: | Size: 480 B |
|
Before Width: | Height: | Size: 784 B After Width: | Height: | Size: 784 B |
|
Before Width: | Height: | Size: 779 B After Width: | Height: | Size: 779 B |
|
Before Width: | Height: | Size: 478 B After Width: | Height: | Size: 478 B |
BIN
assets/www/css/king.png
Normal file
|
After Width: | Height: | Size: 4 KiB |
52
assets/www/css/ui.css
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
|
||||
/* Tafl board */
|
||||
|
||||
jotaflboard {
|
||||
display: block;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
jocard {
|
||||
margin: auto;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
jotaflboard {
|
||||
border-collapse: collapse;
|
||||
|
||||
margin-left: 6px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
jotaflboard td {
|
||||
padding: 0px;
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
|
||||
border: 1px solid grey;
|
||||
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: center center !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
|
||||
jotaflboard td.W {
|
||||
background-image: url(white.png);
|
||||
}
|
||||
|
||||
jotaflboard td.B {
|
||||
background-image: url(black.png);
|
||||
}
|
||||
|
||||
jotaflboard td.K {
|
||||
background-image: url(king.png);
|
||||
}
|
||||
|
||||
jotaflboard td.throne {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
jotaflboard td.selected {
|
||||
background-color: yellow;
|
||||
}
|
||||
BIN
assets/www/css/white.png
Normal file
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -3,12 +3,14 @@
|
|||
<head>
|
||||
<title>PhoneGap</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/jo.css" />
|
||||
<meta name="viewport" content="width=320, initial-scale=1">
|
||||
|
||||
<!-- Libraries -->
|
||||
<link rel="stylesheet" type="text/css" href="css/jo/jo.css" />
|
||||
<script type="text/javascript" charset="utf-8" src="js/cordova-1.5.0.js"></script>
|
||||
|
||||
<!-- Application Code -->
|
||||
<link rel="stylesheet" type="text/css" href="css/ui.css" />
|
||||
<script type="text/javascript" charset="utf-8" src="js/tafl.js"></script>
|
||||
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -30,24 +30,48 @@ function updateBoard(board) {
|
|||
}
|
||||
}
|
||||
|
||||
function drawBoard(table, board) {
|
||||
for (var i = 0; i < board.length; ++i) {
|
||||
for (var j = 0; j < board[i].length; ++j) {
|
||||
table.setCell
|
||||
/* Subclass of joTable */
|
||||
joTaflBoard = function(data) {
|
||||
joTable.apply(this, arguments);
|
||||
};
|
||||
joTaflBoard.extend(joTable, {
|
||||
tagName: "jotaflboard",
|
||||
|
||||
// default row formatter
|
||||
formatItem: function(row, index) {
|
||||
var tr = document.createElement("tr");
|
||||
|
||||
for (var i = 0, l = row.length; i < l; i++) {
|
||||
var o = document.createElement("td");
|
||||
//o.innerHTML = row[i];
|
||||
o.innerHTML = " ";
|
||||
|
||||
// this is a little brittle, but plays nicely with joList's select event
|
||||
o.setAttribute("index", index * l + i);
|
||||
o.setAttribute("type", row[i]);
|
||||
var classes;
|
||||
switch (row[i]) {
|
||||
case "k": classes="K throne"; break;
|
||||
case ",": classes="throne"; break;
|
||||
case ".": classes="empty"; break;
|
||||
default: classes=row[i];
|
||||
}
|
||||
o.setAttribute("class", classes);
|
||||
|
||||
tr.appendChild(o);
|
||||
}
|
||||
|
||||
return tr;
|
||||
},
|
||||
|
||||
setCell: function(i, j) {
|
||||
this.setValue(i*this.data.length + j);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
var uiBoardData = prepareBoard(tafl_game.board);
|
||||
var uiBoard = new joTable(uiBoardData);
|
||||
|
||||
// Add jo function that is not implemented, yet
|
||||
if (! uiBoard.setCell) {
|
||||
uiBoard.setCell = function(i,j) {
|
||||
uiBoard.setValue(i*N + j);
|
||||
}
|
||||
}
|
||||
var uiBoard = new joTaflBoard(uiBoardData);
|
||||
|
||||
// Build board widget and connect events
|
||||
|
||||
|
|
@ -82,6 +106,7 @@ uiBoard.selectEvent.subscribe(function(index, table){
|
|||
makeMove([moveFrom, [i, j]]);
|
||||
|
||||
moveFrom = null;
|
||||
table.deselect();
|
||||
} catch(e) {
|
||||
if (e === "IllegalMove") {
|
||||
table.deselect();
|
||||
|
|
@ -122,7 +147,7 @@ function makeMove(move) {
|
|||
|
||||
// Build page
|
||||
var uiCard = new joCard([
|
||||
new joTitle("Andotafl"),
|
||||
new joTitle("Androtafl"),
|
||||
uiBoard
|
||||
]);
|
||||
|
||||
|
|
|
|||