Array.prototype.clone = function () {
return this.slice(0);
};
$(document).ready(function () {
$('#input').bind('keypress', function (event) {
var regex = new RegExp("^[a-zA-Z0-9]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
});
var BoxGenerator = (function () {
function BoxGenerator(inputDom, targetDom) {
this._inputDom = inputDom;
this._targetDom = targetDom;
this._letter = "";
this._gameStarted = false;
_this = this;
}
BoxGenerator.prototype.start = function () {
this._input = this._inputDom.val().replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '').toUpperCase();
this._inputQ = $("#inputQ").val();
this._point = 0;
this._help = 0;
this._countBoxHelp = 0;
$('#characterBox').css('pointer-events', 'auto');
this._boxArray = this._input.split("");
this._boxArray2 = _this._boxArray.clone();
clearInterval(this._interval);
this._count = 0;
}
BoxGenerator.prototype.countPoint = function () {
var bonus = $('#bonus').val();
var minus = $('#minus').val()
this._point = bonus * (_this._count - this._countBoxHelp) - (minus * this._help);
}
BoxGenerator.prototype.showPoint = function () {
$("#point").html(this._point);
}
BoxGenerator.prototype.getGameStarted = function () {
return this._gameStarted;
}
BoxGenerator.prototype.showQuestion = function () {
$("#question").html(this._inputQ);
}
BoxGenerator.prototype.showBox = function () {
_this._targetDom.empty();
$.each(_this._boxArray, function (index, value) {
_this._targetDom.append("<div class='box' id='" + index + "'><p class='character' id='char" + index + "'>" + value + "</p></div>");
});
}
BoxGenerator.prototype.hide = function (elementDom) {
this._elementDom = elementDom;
this._elementDom.css('display', 'none');
}
BoxGenerator.prototype.show = function (elementDom) {
this._elementDom = elementDom;
this._elementDom.css('display', 'block');
}
BoxGenerator.prototype.changeButton = function () {
!this._gameStarted ? $("#submit").html("Edit Game") : $("#submit").html("Create Game");
this._gameStarted = !this._gameStarted;
}
BoxGenerator.prototype.openCloseBox = function (number) {
if ($.isNumeric(number)) {
var id = "#char" + number + "";
$(id).css('z-index', '1');
$(id).css('position', 'absolute');
_this._boxArray2[number] = "+";
_this._help++;
} else {
var id = "#" + number + "";
$(id).css('z-index', '-1');
$(id).css('position', 'absolute');
_this._boxArray2[number] = _this._boxArray[number];
}
console.log(_this._boxArray);
console.log(_this._boxArray2);
}
BoxGenerator.prototype.recordValue = function () {
this._letter = $("#input-letter").val().toUpperCase();
$("#input-letter").val("");
}
BoxGenerator.prototype.openValue = function () {
var letter = this._letter;
_this._isExist = false;
_this._subCount = 0;
$.each(_this._boxArray, function (index, value) {
if (value == letter) {
var id = "#char" + index;
$(id).css('z-index', '1');
$(id).css('position', 'absolute');
_this._isExist = true;
if (_this._boxArray2[index] !== "*" && _this._boxArray2[index] !== "+") {
_this._boxArray2[index] = "*";
_this._subCount++;
}
}
});
_this._count = _this._count + _this._subCount;
if (letter !== "" && !_this._isExist) {
alert("No " + letter + " in this answer !")
} else {
console.log(_this._boxArray);
console.log(_this._boxArray2);
};
}
BoxGenerator.prototype.boxConcat = function () {
this._interval = setInterval(function () {
if (_this._hover) {
$('.box').css('margin-left', '1px');
$('.box').css('margin-bottom', '1px');
$('.box').css('background-color', '#2980b9');
$('#characterBox').css('pointer-events', 'none');
} else {
$('.box').css('margin-left', '1px');
$('.box').css('margin-bottom', '1px');
$('.box').css('background-color', '#3498db');
$('#characterBox').css('pointer-events', 'none');
}
_this._hover = !_this._hover;
}, 200);
}
BoxGenerator.prototype.congrats = function () {
var _isWin = false;
_this._count = 0;
_this._countBoxHelp = 0;
$.each(_this._boxArray2, function (i, v) {
if (v === "*") {
_this._count++;
} else if (v === "+") {
_this._countBoxHelp++;
_this._count++;
}
});
if (_this._count === _this._boxArray2.length) {
_isWin = true
};
if (_isWin) {
_this.show($('#win '));
$("#win").html("<strong>Congratulations! The answer is: " + this._input + "</strong>")
_this.hide($('#guess '));
_this.boxConcat();
}
}
BoxGenerator.prototype.constructor = BoxGenerator;
return BoxGenerator;
})();
$("#characterBox").click(function (e) {
var boxGenerator = window.boxGenerator;
if (e.target.id !== "characterBox") {
this.targetID = e.target.id;
boxGenerator.openCloseBox(this.targetID);
boxGenerator.countPoint();
boxGenerator.showPoint();
boxGenerator.congrats();}
})
$("#submit").click(function (e) {
e.preventDefault();
var boxGenerator = window.boxGenerator;
if (!boxGenerator.getGameStarted()) {
boxGenerator.start();
boxGenerator.showQuestion();
boxGenerator.showBox();
boxGenerator.show($('#result '));
boxGenerator.hide($('#container '));
boxGenerator.changeButton();
boxGenerator.show($('#guess '));
boxGenerator.hide($('#win '));
} else {
boxGenerator.start();
boxGenerator.show($('#container '));
boxGenerator.hide($('#result '));
boxGenerator.changeButton();
boxGenerator.hide($('#guess '));
boxGenerator.hide($('#win '));
}
boxGenerator.countPoint();
boxGenerator.showPoint();
})
$("#guess-button").click(function (e) {
e.preventDefault();
var boxGenerator = window.boxGenerator;
boxGenerator.recordValue();
boxGenerator.openValue();
boxGenerator.countPoint();
boxGenerator.congrats();
boxGenerator.showPoint();
})
var boxGenerator = new BoxGenerator($('#input '), $('#characterBox '));
window.boxGenerator = boxGenerator;
boxGenerator.hide($('#guess '));
boxGenerator.hide($('#result '));
boxGenerator.showPoint();
})
<body>
<h1>Guess the letter</h1>
<div id="result" class="row">
<div id="question"></div>
<div id="characterBox"></div>
</div>
<br>
<div id="container" class="row">
<div class="col-md-6">
<label>Write a question</label>
<input type="text" class="form-control" id="inputQ" value="What's your name?">
</div>
<div class="col-md-6">
<label>Write an answer</label>
<input type="text" class="form-control" id="input" value="takumi">
</div>
<div class="col-md-6">
<label>Point each right letter ?</label>
<input type="text" class="form-control" id="bonus" value="100">
</div>
<div class="col-md-6">
<label>Help fee ?</label>
<input type="text" class="form-control" id="minus" value="20">
</div>
</div>
<div class="row" id="submit-button">
<button class="btn btn-primary" id="submit">Create Game</button>
</div>
<div id="guess" class="row">
<div class="form-group">
<input type="text" class="form-control" id="input-letter" maxlength="1" required>
<button class="btn btn-info" id="guess-button">Guess</button>
</div>
</div>
<div class="form-group">
<div id="win" class="alert alert-success"></div>
</div>
</body>
<div id="footer" class="alert alert-info">
<p>Point:</p>
<p id="point">0</p>
</div>
body {
margin: 50px;
}
h1 {
text-align: center;
}
#question {
margin-top:20px;
text-align: center;
font-weight: bold;
color:green;
text-transform: capitalize;
}
#point {
display: block;
font-size: 20px;
font-weight:bold;
}
#input {
font-weight: bold;
text-transform: uppercase;
}
#win {
display:none;
}
#result {
text-align: center;
margin: 0 auto;
}
#characterBox {
text-align: center;
margin: 10px;
}
#input-letter {
font-weight:bold;
font-size: 20;
width:40px;
margin-right:10px;
float: left;
text-transform: uppercase;
}
#guess-button {
float: left;
height:40px margin-left: 10px;
}
.container {
padding-top: 30px;
}
.box {
display: inline-block;
background-color : #3498db;
color: #FFFFFF;
margin-left: 10px;
margin-bottom: 10px;
height:30px;
width:30px;
}
#footer {
margin-top: 30px;
}
.character {
position: absolute;
display:block;
line-height: 30px;
height:30px;
width:30px;
font-weight: bold;
z-index:-1;
}
.box:hover {
background-color: #2980b9;
}
#guess {
margin: 20px;
}
#submit-button {
margin:20px;
}
External resources loaded into this fiddle: