css improvements
This commit is contained in:
Lurkars
+148
-134
@@ -1,204 +1,218 @@
|
||||
function Interface() {
|
||||
|
||||
var self = this;
|
||||
var self = this;
|
||||
|
||||
self.events = {};
|
||||
self.events = {};
|
||||
|
||||
self.restartButton = document.querySelector('#restart-button');
|
||||
self.restartButton = document.querySelector('#restart-button');
|
||||
|
||||
self.playerScoreContainer = document.querySelector('#player-score-container');
|
||||
self.playerScore = document.querySelector('#player-score');
|
||||
self.playerZilch = document.querySelector('#player-zilch');
|
||||
self.playerScoreContainer = document.querySelector('#player-score-container');
|
||||
self.playerScore = document.querySelector('#player-score');
|
||||
self.playerZilch = document.querySelector('#player-zilch');
|
||||
|
||||
self.cpuScoreContainer = document.querySelector('#cpu-score-container');
|
||||
self.cpuScore = document.querySelector('#cpu-score');
|
||||
self.cpuZilch = document.querySelector('#cpu-zilch');
|
||||
self.cpuScoreContainer = document.querySelector('#cpu-score-container');
|
||||
self.cpuScore = document.querySelector('#cpu-score');
|
||||
self.cpuZilch = document.querySelector('#cpu-zilch');
|
||||
|
||||
self.points = document.querySelector('#points');
|
||||
self.pointsButton = document.querySelector('#points-button');
|
||||
self.dicesButton = document.querySelector('#dices-button');
|
||||
self.diceContainer = document.querySelector('#dices');
|
||||
self.dices = self.diceContainer.children;
|
||||
self.points = document.querySelector('#points');
|
||||
self.pointsButton = document.querySelector('#points-button');
|
||||
self.dicesButton = document.querySelector('#dices-button');
|
||||
self.diceContainer = document.querySelector('#dices');
|
||||
self.dices = self.diceContainer.children;
|
||||
|
||||
self.message = document.querySelector('#message');
|
||||
self.message = document.querySelector('#message');
|
||||
|
||||
self.dicesButton.disabled = true;
|
||||
self.pointsButton.disabled = true;
|
||||
self.dicesButton.classList.add("disabled");
|
||||
self.pointsButton.classList.add("disabled");
|
||||
|
||||
self.restartButton.addEventListener("click", function() {
|
||||
self.fireEvent("restart");
|
||||
});
|
||||
|
||||
self.pointsButton.addEventListener("click", function() {
|
||||
if (self.playing) {
|
||||
self.fireEvent("takePoints");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
self.dicesButton.addEventListener("click", function() {
|
||||
if (self.playing) {
|
||||
self.fireEvent("addPoints");
|
||||
self.fireEvent("rollDices");
|
||||
}
|
||||
});
|
||||
|
||||
for (var diceIndex = 0; diceIndex < 6; diceIndex++) {
|
||||
var diceContainer = self.dices[diceIndex];
|
||||
diceContainer.diceIndex = diceIndex;
|
||||
diceContainer.addEventListener("click", function() {
|
||||
if (self.playing) {
|
||||
self.fireEvent("toggleDice", this.diceIndex);
|
||||
}
|
||||
});
|
||||
self.restartButton.addEventListener("click", function() {
|
||||
if (!this.classList.contains('disabled')) {
|
||||
self.fireEvent("restart");
|
||||
}
|
||||
});
|
||||
|
||||
this.setup();
|
||||
self.pointsButton.addEventListener("click", function() {
|
||||
if (self.playing && !this.classList.contains('disabled')) {
|
||||
self.fireEvent("takePoints");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
self.dicesButton.addEventListener("click", function() {
|
||||
if (self.playing && !this.classList.contains('disabled')) {
|
||||
self.fireEvent("addPoints");
|
||||
self.fireEvent("rollDices");
|
||||
}
|
||||
});
|
||||
|
||||
for (var diceIndex = 0; diceIndex < 6; diceIndex++) {
|
||||
var diceContainer = self.dices[diceIndex];
|
||||
diceContainer.diceIndex = diceIndex;
|
||||
diceContainer.addEventListener("click", function() {
|
||||
if (self.playing && !this.classList.contains('disabled')) {
|
||||
self.fireEvent("toggleDice", this.diceIndex);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.setup();
|
||||
};
|
||||
|
||||
Interface.prototype.setup = function() {
|
||||
this.dicesButton.disabled = true;
|
||||
this.pointsButton.disabled = true;
|
||||
this.message.classList.remove('visible');
|
||||
this.dicesButton.classList.add("disabled");
|
||||
this.pointsButton.classList.add("disabled");
|
||||
this.message.classList.remove('visible');
|
||||
|
||||
};
|
||||
|
||||
Interface.prototype.on = function(event, callback) {
|
||||
if (!this.events[event]) {
|
||||
this.events[event] = [];
|
||||
}
|
||||
this.events[event].push(callback);
|
||||
if (!this.events[event]) {
|
||||
this.events[event] = [];
|
||||
}
|
||||
this.events[event].push(callback);
|
||||
};
|
||||
|
||||
Interface.prototype.fireEvent = function(event, data) {
|
||||
var callbacks = this.events[event];
|
||||
if (callbacks) {
|
||||
callbacks.forEach(function(callback) {
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
var callbacks = this.events[event];
|
||||
if (callbacks) {
|
||||
callbacks.forEach(function(callback) {
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Interface.prototype.setDices = function(dices) {
|
||||
var self = this;
|
||||
var self = this;
|
||||
|
||||
for (var diceIndex = 0; diceIndex < 6; diceIndex++) {
|
||||
var dice = dices[diceIndex];
|
||||
var diceContainer = self.dices[diceIndex];
|
||||
diceContainer.innerHTML = dice.value + 1;
|
||||
for (var diceIndex = 0; diceIndex < 6; diceIndex++) {
|
||||
var dice = dices[diceIndex];
|
||||
var diceContainer = self.dices[diceIndex];
|
||||
diceContainer.innerHTML = dice.value + 1;
|
||||
|
||||
if (dice.disabled) {
|
||||
diceContainer.disabled = true;
|
||||
} else {
|
||||
diceContainer.disabled = false;
|
||||
}
|
||||
|
||||
if (dice.selected) {
|
||||
diceContainer.classList.add('selected');
|
||||
} else {
|
||||
diceContainer.classList.remove('selected');
|
||||
}
|
||||
|
||||
if (dice.invalid) {
|
||||
diceContainer.classList.add('invalid');
|
||||
diceContainer.classList.remove('selected');
|
||||
} else {
|
||||
diceContainer.classList.remove('invalid');
|
||||
}
|
||||
if (dice.disabled) {
|
||||
diceContainer.classList.add('disabled');
|
||||
} else {
|
||||
diceContainer.classList.remove('disabled');
|
||||
}
|
||||
|
||||
if (dice.selected) {
|
||||
diceContainer.classList.add('selected');
|
||||
} else {
|
||||
diceContainer.classList.remove('selected');
|
||||
}
|
||||
|
||||
if (dice.invalid) {
|
||||
diceContainer.classList.add('invalid');
|
||||
diceContainer.classList.remove('selected');
|
||||
} else {
|
||||
diceContainer.classList.remove('invalid');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
};
|
||||
|
||||
Interface.prototype.animateDices = function(dices, timeout, callback) {
|
||||
var self = this;
|
||||
for (var diceIndex = 0; diceIndex < 6; diceIndex++) {
|
||||
var dice = dices[diceIndex];
|
||||
if (!dice.disabled && !dice.selected) {
|
||||
self.dices[diceIndex].classList.add("animate");
|
||||
self.dices[diceIndex].classList.add("duration" + diceIndex);
|
||||
}
|
||||
var self = this;
|
||||
for (var diceIndex = 0; diceIndex < 6; diceIndex++) {
|
||||
var dice = dices[diceIndex];
|
||||
if (!dice.disabled && !dice.selected) {
|
||||
self.dices[diceIndex].classList.add("animate");
|
||||
self.dices[diceIndex].classList.add("duration" + diceIndex);
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(function() {
|
||||
for (var diceIndex = 0; diceIndex < 6; diceIndex++) {
|
||||
self.dices[diceIndex].classList.remove("animate");
|
||||
}
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
}, timeout ? timeout : 0);
|
||||
setTimeout(function() {
|
||||
for (var diceIndex = 0; diceIndex < 6; diceIndex++) {
|
||||
self.dices[diceIndex].classList.remove("animate");
|
||||
}
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
}, timeout ? timeout : 0);
|
||||
};
|
||||
|
||||
Interface.prototype.disableRestart = function(disabled) {
|
||||
this.restartButton.disabled = disabled;
|
||||
if (disabled) {
|
||||
this.restartButton.classList.add("disabled")
|
||||
} else {
|
||||
this.restartButton.classList.remove("disabled")
|
||||
}
|
||||
};
|
||||
|
||||
Interface.prototype.disableTakePoints = function(disabled) {
|
||||
this.pointsButton.disabled = disabled;
|
||||
if (disabled) {
|
||||
this.pointsButton.classList.add("disabled")
|
||||
} else {
|
||||
this.pointsButton.classList.remove("disabled")
|
||||
}
|
||||
};
|
||||
|
||||
Interface.prototype.disableRollDices = function(disabled) {
|
||||
this.dicesButton.disabled = disabled;
|
||||
if (disabled) {
|
||||
this.dicesButton.classList.add("disabled")
|
||||
} else {
|
||||
this.dicesButton.classList.remove("disabled")
|
||||
}
|
||||
};
|
||||
|
||||
Interface.prototype.setPoints = function(points) {
|
||||
this.points.innerHTML = points;
|
||||
this.points.innerHTML = points;
|
||||
};
|
||||
|
||||
Interface.prototype.setPlaying = function(playing) {
|
||||
if (playing) {
|
||||
this.playing = true;
|
||||
this.playerScoreContainer.classList.add('active');
|
||||
this.cpuScoreContainer.classList.remove('active');
|
||||
} else {
|
||||
this.playing = false;
|
||||
this.playerScoreContainer.classList.remove('active');
|
||||
this.cpuScoreContainer.classList.add('active');
|
||||
}
|
||||
if (playing) {
|
||||
this.playing = true;
|
||||
this.playerScoreContainer.classList.add('active');
|
||||
this.cpuScoreContainer.classList.remove('active');
|
||||
} else {
|
||||
this.playing = false;
|
||||
this.playerScoreContainer.classList.remove('active');
|
||||
this.cpuScoreContainer.classList.add('active');
|
||||
}
|
||||
};
|
||||
|
||||
Interface.prototype.setPlayer = function(player) {
|
||||
this.playerScore.innerHTML = player.score;
|
||||
var zilchs = '';
|
||||
for (var i = 0; i < player.zilch; i++) {
|
||||
zilchs += '<div class="point"></div>';
|
||||
}
|
||||
this.playerZilch.innerHTML = zilchs;
|
||||
this.playerScore.innerHTML = player.score;
|
||||
var zilchs = '';
|
||||
for (var i = 0; i < player.zilch; i++) {
|
||||
zilchs += '<div class="point"></div>';
|
||||
}
|
||||
this.playerZilch.innerHTML = zilchs;
|
||||
|
||||
};
|
||||
|
||||
Interface.prototype.setCpu = function(cpu) {
|
||||
this.cpuScore.innerHTML = cpu.score;
|
||||
var zilchs = '';
|
||||
for (var i = 0; i < cpu.zilch; i++) {
|
||||
zilchs += '<div class="point"></div>';
|
||||
}
|
||||
this.cpuScore.innerHTML = cpu.score;
|
||||
var zilchs = '';
|
||||
for (var i = 0; i < cpu.zilch; i++) {
|
||||
zilchs += '<div class="point"></div>';
|
||||
}
|
||||
|
||||
this.cpuZilch.innerHTML = zilchs;
|
||||
this.cpuZilch.innerHTML = zilchs;
|
||||
};
|
||||
|
||||
Interface.prototype.showMessage = function(message, timeout, callback) {
|
||||
var self = this;
|
||||
var self = this;
|
||||
|
||||
self.message.innerHTML = '<p>' + message + '</p>';
|
||||
self.message.innerHTML = '<p>' + message + '</p>';
|
||||
|
||||
self.message.classList.add('visible');
|
||||
self.message.classList.add('visible');
|
||||
|
||||
if (timeout) {
|
||||
setTimeout(function() {
|
||||
self.clearMessage(callback);
|
||||
}, timeout);
|
||||
} else if (callback) {
|
||||
callback();
|
||||
}
|
||||
if (timeout) {
|
||||
setTimeout(function() {
|
||||
self.clearMessage(callback);
|
||||
}, timeout);
|
||||
} else if (callback) {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
Interface.prototype.clearMessage = function(callback) {
|
||||
this.message.classList.remove('visible');
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
this.message.classList.remove('visible');
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user