rework html interface. implement david protection (beta)
This commit is contained in:
parent
e15edb0046
commit
4c731d3984
GPG key ID:
BCC5A619923C0BA5
1 changed files with 147 additions and 32 deletions
|
|
@ -16,18 +16,52 @@ function injectCounter() {
|
|||
var myStyles = `
|
||||
#playedHigh {
|
||||
position: absolute;
|
||||
top: 620px;
|
||||
width: 850px;
|
||||
top: 45px;
|
||||
left: 5px;
|
||||
width: 935px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
#playedLow {
|
||||
position: absolute;
|
||||
top: 750px;
|
||||
width: 850px;
|
||||
top: 170px;
|
||||
left: 5px;
|
||||
width: 935px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
#counterField {
|
||||
position: absolute;
|
||||
width: 945px;
|
||||
height: 300px;
|
||||
top: 635px;
|
||||
border: 1px solid black;
|
||||
box-shadow: 1px 1px 1px #555;
|
||||
background: #88CC00;
|
||||
}
|
||||
|
||||
#controlBar {
|
||||
position: absolute;
|
||||
min-height: 32px;
|
||||
width: 925px;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
border-radius: 20px;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
#controlButtonsLeft {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
#controlButtonsRight {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.playedCardsLayout {
|
||||
position: absolute;
|
||||
height: 125px;
|
||||
|
|
@ -54,6 +88,46 @@ function injectCounter() {
|
|||
console.log(styleSheet);
|
||||
document.head.appendChild(styleSheet);
|
||||
|
||||
var controlBar = document.createElement('div');
|
||||
controlBar.id = 'controlBar';
|
||||
|
||||
var controlButtonsLeft = document.createElement('div');
|
||||
controlButtonsLeft.className = 'btn-group';
|
||||
controlButtonsLeft.id = 'controlButtonsLeft';
|
||||
|
||||
var controlButtonsRight = document.createElement('div');
|
||||
controlButtonsRight.className = 'btn-group';
|
||||
controlButtonsRight.id = 'controlButtonsRight';
|
||||
|
||||
var davidProtectionButton = document.createElement('button');
|
||||
davidProtectionButton.className = "btn btn-success btn-xs";
|
||||
davidProtectionButton.id = "davidProtection";
|
||||
davidProtectionButton.type = "button";
|
||||
davidProtectionButton.innerHTML = 'David protection: <span id="davidProtectionValue" data-on="On" data-off="Off">Yes</span>';
|
||||
|
||||
var showRemainingButton = document.createElement('button');
|
||||
showRemainingButton.className = "btn btn-info btn-xs";
|
||||
showRemainingButton.id = "showRemaining";
|
||||
showRemainingButton.type = "button";
|
||||
showRemainingButton.innerHTML = 'Show: <span id="showRemainingValue" data-on="Remaining" data-off="Played">Remaining</span>';
|
||||
|
||||
var showCountedCardsButton = document.createElement('button');
|
||||
showCountedCardsButton.className = "btn btn-success btn-xs";
|
||||
showCountedCardsButton.id = "showCountedCards";
|
||||
showCountedCardsButton.type = "button";
|
||||
showCountedCardsButton.innerHTML = 'Show cards: <span id="showCountedCardsValue" data-on="Yes" data-off="No">No</span>';
|
||||
|
||||
controlButtonsRight.appendChild(showRemainingButton);
|
||||
controlButtonsRight.appendChild(showCountedCardsButton);
|
||||
controlButtonsLeft.appendChild(davidProtectionButton);
|
||||
|
||||
controlBar.appendChild(controlButtonsLeft);
|
||||
controlBar.appendChild(controlButtonsRight);
|
||||
|
||||
var counterField = document.createElement("div");
|
||||
counterField.id = 'counterField';
|
||||
counterField.appendChild(controlBar);
|
||||
|
||||
// add an extra field where we will put down the played cards
|
||||
var cardsField = document.createElement('div');
|
||||
cardsField.id = 'cardsField';
|
||||
|
|
@ -71,9 +145,11 @@ function injectCounter() {
|
|||
playedLow.className = 'row';
|
||||
playedLow.hidden = true;
|
||||
|
||||
counterField.appendChild(playedHigh);
|
||||
counterField.appendChild(playedLow);
|
||||
|
||||
tableIG = document.getElementById('gameField').parentNode;
|
||||
tableIG.appendChild(playedHigh);
|
||||
tableIG.appendChild(playedLow);
|
||||
tableIG.appendChild(counterField);
|
||||
|
||||
var createCardPlace = function(value, shift, node) {
|
||||
var playedCards = document.createElement('ul');
|
||||
|
|
@ -83,7 +159,7 @@ function injectCounter() {
|
|||
playedCards.className = 'playedCardsLayout list-unstyled';
|
||||
playedCards.style.width = '160px';
|
||||
playedCards.style.marginLeft = '25px';
|
||||
playedCards.style.left = shift*129 + 'px';
|
||||
playedCards.style.left = shift*127 + 'px';
|
||||
|
||||
node.appendChild(playedCards);
|
||||
}
|
||||
|
|
@ -102,23 +178,16 @@ function injectCounter() {
|
|||
smartFoldButton.className = "btn btn-danger btn-xs";
|
||||
smartFoldButton.id = "smartFold";
|
||||
smartFoldButton.type = "button";
|
||||
smartFoldButton.innerHTML = 'Smart fold: <span id="smartFoldValue" data-on="Yes" data-off="No">Yes</span>';
|
||||
smartFoldButton.innerHTML = 'Smart fold: <span id="smartFoldValue" data-on="On" data-off="Off">Yes</span>';
|
||||
|
||||
var showPlayedButton = document.createElement('button');
|
||||
showPlayedButton.className = "btn btn-primary btn-xs";
|
||||
showPlayedButton.id = "showPlayed";
|
||||
showPlayedButton.type = "button";
|
||||
showPlayedButton.innerHTML = 'Show counted cards: <span id="showPlayedValue" data-on="Yes" data-off="No">No</span>';
|
||||
|
||||
var showRemainingButton = document.createElement('button');
|
||||
showRemainingButton.className = "btn btn-info btn-xs";
|
||||
showRemainingButton.id = "showRemaining";
|
||||
showRemainingButton.type = "button";
|
||||
showRemainingButton.innerHTML = 'Show: <span id="showRemainingValue" data-on="Remaining" data-off="Played">Remaining</span>';
|
||||
var showCardCounterButton = document.createElement('button');
|
||||
showCardCounterButton.className = "btn btn-primary btn-xs";
|
||||
showCardCounterButton.id = "showCardCounter";
|
||||
showCardCounterButton.type = "button";
|
||||
showCardCounterButton.innerHTML = 'Card Counter: <span id="showCardCounterValue" data-on="On" data-off="Off">No</span>';
|
||||
|
||||
buttons = document.getElementById('statusButtons');
|
||||
buttons.insertBefore(showRemainingButton, document.getElementById('autoFold'));
|
||||
buttons.insertBefore(showPlayedButton, document.getElementById('autoFold'));
|
||||
buttons.insertBefore(showCardCounterButton, document.getElementById('autoFold'));
|
||||
buttons.insertBefore(smartFoldButton, document.getElementById('autoFold'));
|
||||
|
||||
// playedCards.
|
||||
|
|
@ -129,12 +198,17 @@ function injectCounter() {
|
|||
$playedCards: {},
|
||||
$smartFold: $('#smartFold'),
|
||||
$smartFoldValue: $('#smartFoldValue'),
|
||||
$showPlayed: $('#showPlayed'),
|
||||
$showPlayedValue: $('#showPlayedValue'),
|
||||
$showCardCounter: $('#showCardCounter'),
|
||||
$showCardCounterValue: $('#showCardCounterValue'),
|
||||
$showRemaining: $('#showRemaining'),
|
||||
$showRemainingValue: $('#showRemainingValue'),
|
||||
$showCountedCards: $('#showCountedCards'),
|
||||
$showCountedCardsValue: $('#showCountedCardsValue'),
|
||||
$davidProtection: $('#davidProtection'),
|
||||
$davidProtectionValue: $('#davidProtectionValue'),
|
||||
$playedHigh: $('#playedHigh'),
|
||||
$playedLow: $('#playedLow'),
|
||||
$counterField: $('#counterField'),
|
||||
|
||||
allCards: {},
|
||||
playedCards: {},
|
||||
|
|
@ -142,9 +216,12 @@ function injectCounter() {
|
|||
exchangedTo: {},
|
||||
exchangedFrom: {},
|
||||
smartFold: true,
|
||||
showPlayed: false,
|
||||
showCardCounter: false,
|
||||
showRemaining: true,
|
||||
showCountedCards: false,
|
||||
bombAfterFold: null,
|
||||
davidProtection: false,
|
||||
davidProtectionTriggered: true,
|
||||
|
||||
util: {
|
||||
displayCardsHtmlString: function(cards) {
|
||||
|
|
@ -254,7 +331,7 @@ function injectCounter() {
|
|||
window.otc = OnlineTichuCounter;
|
||||
}
|
||||
|
||||
otc.$showRemaining.hide();
|
||||
otc.$counterField.hide();
|
||||
|
||||
// add functionality to smartFold button
|
||||
otc.$smartFold.click(function () {
|
||||
|
|
@ -267,18 +344,36 @@ function injectCounter() {
|
|||
});
|
||||
|
||||
// add functionality to show button
|
||||
otc.$showPlayed.click(function () {
|
||||
otc.showPlayed = !otc.showPlayed;
|
||||
if (otc.showPlayed) {
|
||||
otc.$showPlayedValue.text(otc.$showPlayedValue.data('on'));
|
||||
otc.$showCardCounter.click(function () {
|
||||
otc.showCardCounter = !otc.showCardCounter;
|
||||
if (otc.showCardCounter) {
|
||||
otc.$showCardCounterValue.text(otc.$showCardCounterValue.data('on'));
|
||||
otc.$counterField.show();
|
||||
} else {
|
||||
otc.$showCardCounterValue.text(otc.$showCardCounterValue.data('off'));
|
||||
otc.$counterField.hide();
|
||||
}
|
||||
});
|
||||
|
||||
otc.$showCountedCards.click(function () {
|
||||
otc.showCountedCards = !otc.showCountedCards;
|
||||
if (otc.showCountedCards) {
|
||||
otc.$showCountedCardsValue.text(otc.$showCountedCardsValue.data('on'));
|
||||
otc.$playedHigh.show();
|
||||
otc.$playedLow.show();
|
||||
otc.$showRemaining.show();
|
||||
} else {
|
||||
otc.$showPlayedValue.text(otc.$showPlayedValue.data('off'));
|
||||
otc.$showCountedCardsValue.text(otc.$showCountedCardsValue.data('off'));
|
||||
otc.$playedHigh.hide();
|
||||
otc.$playedLow.hide();
|
||||
otc.$showRemaining.hide();
|
||||
}
|
||||
});
|
||||
|
||||
otc.$davidProtection.click(function () {
|
||||
otc.davidProtection = !otc.davidProtection;
|
||||
if (otc.davidProtection) {
|
||||
otc.$davidProtectionValue.text(otc.$davidProtectionValue.data('on'));
|
||||
} else {
|
||||
otc.$davidProtectionValue.text(otc.$davidProtectionValue.data('off'));
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -299,6 +394,26 @@ function injectCounter() {
|
|||
otc.action.resetPlayedCards();
|
||||
otc.util.populateAllCards();
|
||||
|
||||
// overwrite functionality of fold button
|
||||
ot.$fold.unbind();
|
||||
ot.$fold.click()(function () {
|
||||
if (otc.davidProtection) {
|
||||
if(ot.$passCards.length != 0 && !otc.davidProtectionTriggered) {
|
||||
ot.$gameMessage.text("You have selected cards to play but folded. Are you sure? Press fold again to fold");
|
||||
otc.davidProtectionTriggered = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
ot.action.fold();
|
||||
otc.davidProtectionTriggered = false;
|
||||
$(this).hide();
|
||||
});
|
||||
|
||||
ot.$fold.hide().click(function () {
|
||||
ot.action.Fold();
|
||||
$(this).hide();
|
||||
});
|
||||
|
||||
MyTableState = (function() {
|
||||
var cachedFunction = ot.reaction.TableState;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue