<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Materialize CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<div class="container">
<h3>Minesweeper Games </br>
<span style="font-size:80%; color:#999;">you have 5 click to win the game</span>
</h3>
<div id="buttons">
<h4>Total Clicks</h4>
<a class="btn-floating btn-large waves-effect waves-light red tooltipped" id="counter" data-position="bottom" data-delay="50" data-tooltip="Total Clicks">
<span class="count">5</span>
</a>
<h4>Source</h4>
<a class="btn-floating btn-large waves-effect waves-light green tooltipped" id="counter" data-position="bottom" data-delay="50" data-tooltip="Our Source">
<span id="inc">0</span>
</a>
</div>
<!-- the boxes -->
<div id="boxContainer"></div>
</div>
@import url("https://fonts.googleapis.com/css?family=Tangerine");
#boxContainer {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.box {
flex: 0 0 160px;
width: 160px;
height: 130px;
position: relative;
border-radius: 4px;
cursor: pointer;
}
p {
padding: 12px;
font-size: 50px;
color: #fff;
text-align: center;
margin-top: 14px;
margin-bottom: 0px;
}
span {
color: #fff;
}
#buttons {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.toast {
background: #000 !important;
}
#toast-container {
top: 60%;
right: 8%;
}
/* .box:after {
content: "";
display: block;
border-width: 10px 10px 0;
border-style: solid;
border-color: #3498db transparent transparent;
margin-left: -10px;
position: absolute;
bottom: -10px;
left: 50%;
} */
.box.arrow-bottom-left:after,
.box.arrow-bottom-right:after,
.box.arrow-top-left:after,
.box.arrow-top-right:after,
.box.arrow-left-top:after,
.box.arrow-left-bottom:after,
.box.arrow-right-top:after,
.box.arrow-right-bottom:after {
border-width: 5px;
margin: 0;
}
.box.arrow-bottom-left:after,
.box.arrow-bottom-right:after {
border-left-color: #3498db;
}
.box.arrow-bottom-left:after {
left: 0;
right: auto;
}
.box.arrow-bottom-right:after {
border-left-color: transparent;
border-right-color: #3498db;
left: auto;
right: 0;
}
.box.arrow-top-center:after,
.box.arrow-top-left:after,
.box.arrow-top-right:after {
border-top-color: transparent;
border-bottom-color: #3498db;
top: -10px;
bottom: auto;
}
.box.arrow-top-center:after {
border-top-width: 0;
border-bottom-width: 10px;
}
.box.arrow-top-left:after,
.box.arrow-top-right:after {
border-width: 5px;
border-left-color: #3498db;
}
.box.arrow-top-left:after {
left: 0;
right: auto;
}
.box.arrow-top-right:after {
border-left-color: transparent;
border-right-color: #3498db;
left: auto;
right: 0;
}
.box.arrow-left-center:after,
.box.arrow-left-top:after,
.box.arrow-left-bottom:after {
border-width: 10px;
border-left-color: transparent;
border-left-width: 0;
border-top-color: transparent;
border-right-color: #3498db;
margin: -10px 0 0;
left: -10px;
right: auto;
top: 50%;
bottom: auto;
}
.box.arrow-left-top:after,
.box.arrow-left-bottom:after {
border-width: 5px;
margin: 0;
}
.box.arrow-left-top:after {
border-top-color: #3498db;
top: 0;
}
.box.arrow-left-bottom:after {
border-bottom-color: #3498db;
top: auto;
bottom: 0;
}
.box.arrow-right-center:after,
.box.arrow-right-top:after,
.box.arrow-right-bottom:after {
border-width: 10px;
border-right-width: 0;
border-top-color: transparent;
border-left-color: #3498db;
margin: -10px 0 0;
left: auto;
right: -10px;
top: 50%;
bottom: auto;
}
.box.arrow-right-top:after,
.box.arrow-right-bottom:after {
border-width: 5px;
margin: 0;
}
.box.arrow-right-top:after {
border-top-color: #3498db;
top: 0;
}
.box.arrow-right-bottom:after {
border-bottom-color: #3498db;
top: auto;
bottom: 0;
}
.box.arrow-bottom-left,
.box.arrow-left-bottom {
border-bottom-left-radius: 0;
}
.box.arrow-bottom-right,
.box.arrow-right-bottom {
border-bottom-right-radius: 0;
}
.box.arrow-top-left,
.box.arrow-left-top {
border-top-left-radius: 0;
}
.box.arrow-top-right,
.box.arrow-right-top {
border-top-right-radius: 0;
}
html,
body {
background: #f5f5f5;
font-size: 100%;
font-family: 'Open Sans', sans-serif;
width: 100%;
}
h3 {
position: relative;
text-align: center;
text-transform: uppercase;
display: block;
margin: 20px auto;
}
h3:before,
h3:after {
content: "";
display: block;
height: 1px;
width: 50px;
background-color: #ddd;
position: absolute;
top: 50%;
left: -60px;
}
h3:after {
right: -60px;
left: auto;
}
.box {
margin: 20px 10px;
}
.box.blue {
background-color: #3498db;
}
.box.blue.arrow-bottom-center:after,
.box.blue.arrow-bottom-left:after,
.box.blue.arrow-bottom-right:after {
border-top-color: #3498db;
}
.box.blue.arrow-bottom-left:after {
border-left-color: #3498db;
}
.box.blue.arrow-bottom-right:after {
border-right-color: #3498db;
}
.box.blue.arrow-top-center:after,
.box.blue.arrow-top-left:after,
.box.blue.arrow-top-right:after {
border-bottom-color: #3498db;
}
.box.blue.arrow-top-left:after {
border-left-color: #3498db;
}
.box.blue.arrow-top-right:after {
border-right-color: #3498db;
}
.box.blue.arrow-left-center:after,
.box.blue.arrow-left-top:after,
.box.blue.arrow-left-bottom:after {
border-right-color: #3498db;
}
.box.blue.arrow-left-top:after {
border-top-color: #3498db;
}
.box.blue.arrow-left-bottom:after {
border-bottom-color: #3498db;
}
.box.blue.arrow-right-center:after,
.box.blue.arrow-right-top:after,
.box.blue.arrow-right-bottom:after {
border-left-color: #3498db;
}
.box.blue.arrow-right-top:after {
border-top-color: #3498db;
}
.box.blue.arrow-right-bottom:after {
border-bottom-color: #3498db;
}
.box.green {
background-color: #1abc9c;
}
.box.green.arrow-bottom-center:after,
.box.green.arrow-bottom-left:after,
.box.green.arrow-bottom-right:after {
border-top-color: #1abc9c;
}
.box.green.arrow-bottom-left:after {
border-left-color: #1abc9c;
}
.box.green.arrow-bottom-right:after {
border-right-color: #1abc9c;
}
.box.green.arrow-top-center:after,
.box.green.arrow-top-left:after,
.box.green.arrow-top-right:after {
border-bottom-color: #1abc9c;
}
.box.green.arrow-top-left:after {
border-left-color: #1abc9c;
}
.box.green.arrow-top-right:after {
border-right-color: #1abc9c;
}
.box.green.arrow-left-center:after,
.box.green.arrow-left-top:after,
.box.green.arrow-left-bottom:after {
border-right-color: #1abc9c;
}
.box.green.arrow-left-top:after {
border-top-color: #1abc9c;
}
.box.green.arrow-left-bottom:after {
border-bottom-color: #1abc9c;
}
.box.green.arrow-right-center:after,
.box.green.arrow-right-top:after,
.box.green.arrow-right-bottom:after {
border-left-color: #1abc9c;
}
.box.green.arrow-right-top:after {
border-top-color: #1abc9c;
}
.box.green.arrow-right-bottom:after {
border-bottom-color: #1abc9c;
}
.box.orange {
background-color: #e67e22;
}
.box.orange.arrow-bottom-center:after,
.box.orange.arrow-bottom-left:after,
.box.orange.arrow-bottom-right:after {
border-top-color: #e67e22;
}
.box.orange.arrow-bottom-left:after {
border-left-color: #e67e22;
}
.box.orange.arrow-bottom-right:after {
border-right-color: #e67e22;
}
.box.orange.arrow-top-center:after,
.box.orange.arrow-top-left:after,
.box.orange.arrow-top-right:after {
border-bottom-color: #e67e22;
}
.box.orange.arrow-top-left:after {
border-left-color: #e67e22;
}
.box.orange.arrow-top-right:after {
border-right-color: #e67e22;
}
.box.orange.arrow-left-center:after,
.box.orange.arrow-left-top:after,
.box.orange.arrow-left-bottom:after {
border-right-color: #e67e22;
}
.box.orange.arrow-left-top:after {
border-top-color: #e67e22;
}
.box.orange.arrow-left-bottom:after {
border-bottom-color: #e67e22;
}
.box.orange.arrow-right-center:after,
.box.orange.arrow-right-top:after,
.box.orange.arrow-right-bottom:after {
border-left-color: #e67e22;
}
.box.orange.arrow-right-top:after {
border-top-color: #e67e22;
}
.box.orange.arrow-right-bottom:after {
border-bottom-color: #e67e22;
}
.box.red {
background-color: #e74c3c;
}
.box.red.arrow-bottom-center:after,
.box.red.arrow-bottom-left:after,
.box.red.arrow-bottom-right:after {
border-top-color: #e74c3c;
}
.box.red.arrow-bottom-left:after {
border-left-color: #e74c3c;
}
.box.red.arrow-bottom-right:after {
border-right-color: #e74c3c;
}
.box.red.arrow-top-center:after,
.box.red.arrow-top-left:after,
.box.red.arrow-top-right:after {
border-bottom-color: #e74c3c;
}
.box.red.arrow-top-left:after {
border-left-color: #e74c3c;
}
.box.red.arrow-top-right:after {
border-right-color: #e74c3c;
}
.box.red.arrow-left-center:after,
.box.red.arrow-left-top:after,
.box.red.arrow-left-bottom:after {
border-right-color: #e74c3c;
}
.box.red.arrow-left-top:after {
border-top-color: #e74c3c;
}
.box.red.arrow-left-bottom:after {
border-bottom-color: #e74c3c;
}
.box.red.arrow-right-center:after,
.box.red.arrow-right-top:after,
.box.red.arrow-right-bottom:after {
border-left-color: #e74c3c;
}
.box.red.arrow-right-top:after {
border-top-color: #e74c3c;
}
.box.red.arrow-right-bottom:after {
border-bottom-color: #e74c3c;
}
jQuery(document).ready(function ($) {
var CLASS_NAME_LOOKUP = {
"bottom left": "first-box",
"bottom right": "second-box",
"top center": "third-box",
"top left": "fourth-box",
"top right": "five-box",
"left center": "six-box",
"left top": "seven-box",
"left bottom": "eight-box",
"right center": "nine-box",
"right top": "ten-box",
"right bottom": "eleven-box",
"bottom center": "twenty-box",
};
var BOX_TEXT_VAL = ["1", "2", "3", "x"];
var BOX_BG_CLASS = ["blue", "green", "orange", "red"];
(function () {
var targetNode = document.getElementById("boxContainer");
var boxesHTML = "";
var classNames = "";
var textclassNames = "";
var textVal = "";
var i = 0;
for (var pos in CLASS_NAME_LOOKUP) {
classNames = "box " + BOX_BG_CLASS[Math.floor(i / 3)];
classNames += " " + CLASS_NAME_LOOKUP[pos];
textVal = BOX_TEXT_VAL[Math.floor(i / 3)];
textclassNames = CLASS_NAME_LOOKUP[pos];
var Textdiv = "<p class='hide " + textclassNames + "'>" + textVal + "</p>";
var div = "<div class='" + classNames + "'>" + Textdiv + "</div>";
boxesHTML += div;
++i;
}
targetNode.innerHTML = boxesHTML;
})();
// var lastClasss = $(".box").attr("class").split(" ").pop();
// console.log(lastClasss);
var lessclicks = 5;
$(".box").click(function () {
var hasClass = $(this).find("p").hasClass("hide");
if (hasClass) {
$(this).find("p").removeClass("hide");
lessclicks -= 1;
if (lessclicks >= 0) {
$(".count").text(lessclicks);
Materialize.toast("You have clicked me!", 2000);
}
var textCount = $(this).find('p').text();
console.log(parseFloat(textCount) + parseFloat(textCount));
}
// var sum = 0;
// $("p").each(function () {
// var text = parseFloat($(this).text(), 10);
// sum += !isNaN(text) ? text : 0;
// });
// $("#inc").text(sum);
});
});
