max/onlinetichu-counter
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

rework html interface. implement david protection (beta)

Browse source
This commit is contained in:
Maximilian Keßler 2022-09-17 22:02:02 +02:00
parent e15edb0046
commit 4c731d3984
Signed by: max
GPG key ID: BCC5A619923C0BA5
1 changed files with 147 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

179
onlinetichu-counter.js
View file

@ -16,18 +16,52 @@ function injectCounter() {
var myStyles = ` var myStyles = `
#playedHigh { #playedHigh {
position: absolute; position: absolute;
top: 620px; top: 45px;
width: 850px; left: 5px;
width: 935px;
height: 120px; height: 120px;
} }
#playedLow { #playedLow {
position: absolute; position: absolute;
top: 750px; top: 170px;
width: 850px; left: 5px;
width: 935px;
height: 120px; 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 { .playedCardsLayout {
position: absolute; position: absolute;
height: 125px; height: 125px;
@ -54,6 +88,46 @@ function injectCounter() {
console.log(styleSheet); console.log(styleSheet);
document.head.appendChild(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 // add an extra field where we will put down the played cards
var cardsField = document.createElement('div'); var cardsField = document.createElement('div');
cardsField.id = 'cardsField'; cardsField.id = 'cardsField';
@ -71,9 +145,11 @@ function injectCounter() {
playedLow.className = 'row'; playedLow.className = 'row';
playedLow.hidden = true; playedLow.hidden = true;
counterField.appendChild(playedHigh);
counterField.appendChild(playedLow);
tableIG = document.getElementById('gameField').parentNode; tableIG = document.getElementById('gameField').parentNode;
tableIG.appendChild(playedHigh); tableIG.appendChild(counterField);
tableIG.appendChild(playedLow);
var createCardPlace = function(value, shift, node) { var createCardPlace = function(value, shift, node) {
var playedCards = document.createElement('ul'); var playedCards = document.createElement('ul');
@ -83,7 +159,7 @@ function injectCounter() {
playedCards.className = 'playedCardsLayout list-unstyled'; playedCards.className = 'playedCardsLayout list-unstyled';
playedCards.style.width = '160px'; playedCards.style.width = '160px';
playedCards.style.marginLeft = '25px'; playedCards.style.marginLeft = '25px';
playedCards.style.left = shift*129 + 'px'; playedCards.style.left = shift*127 + 'px';
node.appendChild(playedCards); node.appendChild(playedCards);
} }
@ -102,23 +178,16 @@ function injectCounter() {
smartFoldButton.className = "btn btn-danger btn-xs"; smartFoldButton.className = "btn btn-danger btn-xs";
smartFoldButton.id = "smartFold"; smartFoldButton.id = "smartFold";
smartFoldButton.type = "button"; 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'); var showCardCounterButton = document.createElement('button');
showPlayedButton.className = "btn btn-primary btn-xs"; showCardCounterButton.className = "btn btn-primary btn-xs";
showPlayedButton.id = "showPlayed"; showCardCounterButton.id = "showCardCounter";
showPlayedButton.type = "button"; showCardCounterButton.type = "button";
showPlayedButton.innerHTML = 'Show counted cards: <span id="showPlayedValue" data-on="Yes" data-off="No">No</span>'; showCardCounterButton.innerHTML = 'Card Counter: <span id="showCardCounterValue" data-on="On" data-off="Off">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>';
buttons = document.getElementById('statusButtons'); buttons = document.getElementById('statusButtons');
buttons.insertBefore(showRemainingButton, document.getElementById('autoFold')); buttons.insertBefore(showCardCounterButton, document.getElementById('autoFold'));
buttons.insertBefore(showPlayedButton, document.getElementById('autoFold'));
buttons.insertBefore(smartFoldButton, document.getElementById('autoFold')); buttons.insertBefore(smartFoldButton, document.getElementById('autoFold'));
// playedCards. // playedCards.
@ -129,12 +198,17 @@ function injectCounter() {
$playedCards: {}, $playedCards: {},
$smartFold: $('#smartFold'), $smartFold: $('#smartFold'),
$smartFoldValue: $('#smartFoldValue'), $smartFoldValue: $('#smartFoldValue'),
$showPlayed: $('#showPlayed'), $showCardCounter: $('#showCardCounter'),
$showPlayedValue: $('#showPlayedValue'), $showCardCounterValue: $('#showCardCounterValue'),
$showRemaining: $('#showRemaining'), $showRemaining: $('#showRemaining'),
$showRemainingValue: $('#showRemainingValue'), $showRemainingValue: $('#showRemainingValue'),
$showCountedCards: $('#showCountedCards'),
$showCountedCardsValue: $('#showCountedCardsValue'),
$davidProtection: $('#davidProtection'),
$davidProtectionValue: $('#davidProtectionValue'),
$playedHigh: $('#playedHigh'), $playedHigh: $('#playedHigh'),
$playedLow: $('#playedLow'), $playedLow: $('#playedLow'),
$counterField: $('#counterField'),
allCards: {}, allCards: {},
playedCards: {}, playedCards: {},
@ -142,9 +216,12 @@ function injectCounter() {
exchangedTo: {}, exchangedTo: {},
exchangedFrom: {}, exchangedFrom: {},
smartFold: true, smartFold: true,
showPlayed: false, showCardCounter: false,
showRemaining: true, showRemaining: true,
showCountedCards: false,
bombAfterFold: null, bombAfterFold: null,
davidProtection: false,
davidProtectionTriggered: true,
util: { util: {
displayCardsHtmlString: function(cards) { displayCardsHtmlString: function(cards) {
@ -254,7 +331,7 @@ function injectCounter() {
window.otc = OnlineTichuCounter; window.otc = OnlineTichuCounter;
} }
otc.$showRemaining.hide(); otc.$counterField.hide();
// add functionality to smartFold button // add functionality to smartFold button
otc.$smartFold.click(function () { otc.$smartFold.click(function () {
@ -267,18 +344,36 @@ function injectCounter() {
}); });
// add functionality to show button // add functionality to show button
otc.$showPlayed.click(function () { otc.$showCardCounter.click(function () {
otc.showPlayed = !otc.showPlayed; otc.showCardCounter = !otc.showCardCounter;
if (otc.showPlayed) { if (otc.showCardCounter) {
otc.$showPlayedValue.text(otc.$showPlayedValue.data('on')); 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.$playedHigh.show();
otc.$playedLow.show(); otc.$playedLow.show();
otc.$showRemaining.show();
} else { } else {
otc.$showPlayedValue.text(otc.$showPlayedValue.data('off')); otc.$showCountedCardsValue.text(otc.$showCountedCardsValue.data('off'));
otc.$playedHigh.hide(); otc.$playedHigh.hide();
otc.$playedLow.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.action.resetPlayedCards();
otc.util.populateAllCards(); 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() { MyTableState = (function() {
var cachedFunction = ot.reaction.TableState; var cachedFunction = ot.reaction.TableState;