Skip to content

Instantly share code, notes, and snippets.

@A-J-C

A-J-C/dabblet.css

Last active August 29, 2015 14:16
Show Gist options
  • Save A-J-C/ccd39a5e6a6f1f5eabf5 to your computer and use it in GitHub Desktop.
Save A-J-C/ccd39a5e6a6f1f5eabf5 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
<html lang="en"><head>
<meta charset="utf-8">
<title>SANBOG.COM</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/assets/css/base.css">
<link rel="stylesheet" href="/assets/css/layout_ss.css">
<!--[if lt IE 9]>
<script src="/assets/js/respond.min.js"></script>
<![endif]-->
<script src="/assets/js/dhtml.js"></script><style type="text/css"></style>
<script type="text/javascript" src="chrome-extension://bfbmjmiodbnnpllbbbfblcplfjjepjdn/js/injected.js"></script></head>
<body style="zoom: 1;">
<div class="container">
<div class="row">
<div class="col w-4col m-2col">
<img class="img-left" src="/assets/img/dummy.png" alt="dummy">
<div class="header-col">
<span>SANBOG CONTRACTING LTD.</span>
</div>
</div>
</div>
<!--
<div class="row">
<div class="col w-1col m-1col">
<img class="img-left" src="assets/img/dummy.png" alt="dummy"> Licensed in Alberta
</div>
<div class="col w-3col m-1col">
<div class="img-resp img0">w-3col m-1col</div>
</div>
</div>
-->
<div class="row">
<div class="col w-2col m-1col">
<div class="inner-col">
<p>Hot Shot Services</p>
<p>Based in Alberta</p>
<p><a href="mailto:info@sanbog.com" id="info" title="Contact Sanbog Contracting Ltd.">info@sanbog.com</a></p>
</div>
</div>
<div class="col w-2col m-1col">
<div class="img-resp img1"></div>
</div>
</div>
<div class="row">
<div class="col w-4col m-2col">
<div class="inner-col">
<h2>We rent trailers</h2>
<h3>Call 780-842-7227</h3>
</div>
</div>
</div>
<div class="row">
<div class="col w-2col m-1col">
<div class="img-resp img2"></div>
</div>
<div class="col w-2col m-1col">
<div class="inner-col">
<p>Dump trailer</p>
</div>
</div>
</div>
<div class="row">
<div class="col w-2col m-1col">
<div class="inner-col">
<p>30’ deck w/ pindle hitch</p>
</div>
</div>
<div class="col w-2col m-1col">
<div class="img-resp img3"></div>
</div>
</div>
<div class="row">
<div class="col w-4col m-2col">
<div class="inner-col">
<h3>Light Duty Picker</h3>
</div>
</div>
</div>
<div class="row">
<div class="col w-2col m-1col">
<div class="img-resp img4"></div>
</div>
<div class="col w-2col m-1col">
<div class="inner-col">
<p>1800 kg. Knuckle Picker</p>
</div>
</div>
</div>
<div class="row">
<div class="col w-4col m-2col">
<div class="inner-col">
<h3>Oilfield Services</h3>
</div>
</div>
</div>
<div class="row">
<div class="col w-1col m-1col">
<div class="mini-col">
<p>Light hauling</p>
</div>
</div>
<div class="col w-1col m-1col">
<div class="mini-col">
<p>Setting rafters</p>
</div>
</div>
<div class="col w-1col m-1col">
<div class="mini-col">
<p>Light towers</p>
</div>
</div>
<div class="col w-1col m-1col">
<div class="mini-col">
<p>Small tanks</p>
</div>
</div>
</div>
</div>
<script>
window.onload = function(){
mailTo('info',1);
}
</script>
</body></html>
Raw
dabblet.html
<!DOCTYPE>
<html>
<head>
<title>AQA Chess Ripoff</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="header">
<div id="quit"> Quit </div>
<a id="info" target="_blank" href="http://computing.konsole.uk/pages/viewpage.action;jsessionid=9734E8B8D0281640E166DFF2F93DB50E?pageId=753711&preview=/753711/753718/AQA-COMP1-PM-Jun15.pdf">i</a>
</div>
<div id="start"> Start Game </div>
<div id ="subMenu">
<div class="option" id="new"> New Game </div>
<div class="option" id="sample"> Sample Game </div>
</div>
<div id="game">
<div class="row row1">
<div class="sqr col1 white"></div>
<div class="sqr col2 black"></div>
<div class="sqr col3 white"></div>
<div class="sqr col4 black"></div>
<div class="sqr col5 white"></div>
<div class="sqr col6 black"></div>
<div class="sqr col7 white"></div>
<div class="sqr col8 black"></div>
</div>
<div class="row row2">
<div class="sqr col1 black"></div>
<div class="sqr col2 white"></div>
<div class="sqr col3 black"></div>
<div class="sqr col4 white"></div>
<div class="sqr col5 black"></div>
<div class="sqr col6 white"></div>
<div class="sqr col7 black"></div>
<div class="sqr col8 white"></div>
</div>
<div class="row row3">
<div class="sqr col1 white"></div>
<div class="sqr col2 black"></div>
<div class="sqr col3 white"></div>
<div class="sqr col4 black"></div>
<div class="sqr col5 white"></div>
<div class="sqr col6 black"></div>
<div class="sqr col7 white"></div>
<div class="sqr col8 black"></div>
</div>
<div class="row row4">
<div class="sqr col1 black"></div>
<div class="sqr col2 white"></div>
<div class="sqr col3 black"></div>
<div class="sqr col4 white"></div>
<div class="sqr col5 black"></div>
<div class="sqr col6 white"></div>
<div class="sqr col7 black"></div>
<div class="sqr col8 white"></div>
</div>
<div class="row row5">
<div class="sqr col1 white"></div>
<div class="sqr col2 black"></div>
<div class="sqr col3 white"></div>
<div class="sqr col4 black"></div>
<div class="sqr col5 white"></div>
<div class="sqr col6 black"></div>
<div class="sqr col7 white"></div>
<div class="sqr col8 black"></div>
</div>
<div class="row row6">
<div class="sqr col1 black"></div>
<div class="sqr col2 white"></div>
<div class="sqr col3 black"></div>
<div class="sqr col4 white"></div>
<div class="sqr col5 black"></div>
<div class="sqr col6 white"></div>
<div class="sqr col7 black"></div>
<div class="sqr col8 white"></div>
</div>
<div class="row row7">
<div class="sqr col1 white"></div>
<div class="sqr col2 black"></div>
<div class="sqr col3 white"></div>
<div class="sqr col4 black"></div>
<div class="sqr col5 white"></div>
<div class="sqr col6 black"></div>
<div class="sqr col7 white"></div>
<div class="sqr col8 black"></div>
</div>
<div class="row row8">
<div class="sqr col1 black"></div>
<div class="sqr col2 white"></div>
<div class="sqr col3 black"></div>
<div class="sqr col4 white"></div>
<div class="sqr col5 black"></div>
<div class="sqr col6 white"></div>
<div class="sqr col7 black"></div>
<div class="sqr col8 white"></div>
</div>
</body>
</html>
<style>
body {
background: #303333;
}
#header {
height: 25px;
margin-top: 25px;
width: 100%;
}
#quit, #info {
border: 2px solid white;
border-radius: 360px;
color: white;
display: inline;
float: right;
font-family: Comic Sans MS;
height: 20px;
line-height: 20px;
margin-right: 25px;
text-align: center;
text-decoration: none;
width: 20px;
}
#quit {
border: none;
font-family: Century Gothic;
margin-right: 75px;
}
#start, #subMenu {
border: white 5px solid;
color: white;
font-family: Century Gothic;
font-size: 50px;
height: 200px;
left: 50%;
line-height: 200px;
margin: -100px 0 0 -200px;
position: absolute;
text-align: center;
top: 50%;
width: 400px;
z-index: 15;
}
#start:hover, #quit:hover, #info:hover, .option:hover {
border-color: #39D1B4;
color: #39D1B4;
cursor: pointer;
}
#subMenu {
display: none;
}
.option {
height: 100px;
line-height: 100px;
}
#quit:hover {
color: #f65a5b;
}
#info:hover {
border-color: #59A1C7;
color: #dcf3ff;
}
#game {
border: white 5px solid;
display: none;
height: 809px;
left: 50%;
margin: -404px 0 0 -404px;
position: absolute;
top: 50%;
width: 809px;
}
.row {
height: 100px;
width: 809px;
}
.sqr {
display: block;
float: left;
font-family: Rockwell;
font-size: 50px;
font-weight: bold;
height: 100px;
line-height: 100px;
text-align: center;
text-shadow: #000 0 0 1px, #000 0 0 1px, #000 0 0 1px,
#000 0 0 1px, #000 0 0 1px, #000 0 0 1px, #000 0 0 1px, #000 0 0 1px, #000 0 0 1px,
#000 0 0 1px, #000 0 0 1px, #000 0 0 1px;
width: 100px;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
.sqr:before {
content: "";
}
.row1 .sqr {
border-top: 1px solid black;
}
.sqr.col1{
border-left: 1px solid black;
}
.white {
background: #D0EEEF;
}
.black {
background: #515959;
}
.redumB:before, .redumW:before {
content: "R";
}
.redumW, .gisW, .nabuW, .marazW, .etluW, .sarW {
color: white;
}
.gisB:before, .gisW:before {
content: "G";
}
.nabuB:before, .nabuW:before {
content: "N";
}
.marazB:before, .marazW:before {
content: "M";
}
.sarB:before, .sarW:before {
content: "S";
}
.etluB:before, .etluW:before {
content: "E";
}
.legal {
background: #BB8D8B;
}
.clicked {
background: #8BBB8D;
}
</style>
<script type="text/javascript">
var redumCheck = function(startRow, startCol, finishRow, finishCol, colour, val, redumB, redumW) {
var legal = false;
if (colour == 'W') {
if (finishRow == startRow - 1) {
if ((finishCol == startCol) && (val.length == 2)) {
legal = true;
} else if ((Math.abs(finishCol - startCol) == 1) && redumB) {
legal = true;
}
}
}
if (colour == 'B') {
if (finishRow == parseInt(startRow) + 1) {
if ((finishCol == startCol) && (val.length == 2)) {
legal = true;
} else if ((Math.abs(finishCol - startCol) == 1) && redumW) {
legal = true;
}
}
}
return legal;
};
var gisCheck = function(startRow, startCol, finishRow, finishCol) {
var legal = false;
var count = 0;
var rankDifference = finishRow - startRow;
var fileDifference = finishCol - startCol;
if (rankDifference === 0) {
if (fileDifference >= 1) {
legal = true;
for (count = 1; count <= fileDifference - 1; count++) {
console.log('.row' + startRow + ' .col' + (parseInt(startCol) + count));
if (document.defaultView.getComputedStyle(document.querySelector('.row' + startRow + ' .col' + (parseInt(startCol) + count)), ':before').getPropertyValue('content') != " ") {
legal = false;
}
console.log("hello1");
}
} else {
if (fileDifference <= -1) {
legal = true;
for (count = -1; count >= fileDifference + 1; count--) {
console.log('.row' + startRow + ' .col' + (parseInt(startCol) + count));
if (document.defaultView.getComputedStyle(document.querySelector('.row' + startRow + ' .col' + (parseInt(startCol) + count)), ':before').getPropertyValue('content') != " ") {
legal = false;
}
console.log("hello2");
}
}
}
} else {
if (fileDifference === 0) {
if (rankDifference >= 1) {
legal = true;
for (count = 1; count <= rankDifference - 1; count++) {
console.log('.row' + startRow + ' .col' + (parseInt(startCol) + count));
if (document.defaultView.getComputedStyle(document.querySelector('.row' + (parseInt(startRow) + count) + ' .col' + startCol), ':before').getPropertyValue('content') != " ") {
legal = false;
}
console.log("hello3");
}
} else {
if (rankDifference <= -1) {
legal = true;
for (count = -1; count >= rankDifference + 1; count--) {
console.log('.row' + startRow + ' .col' + (parseInt(startCol) + count));
if (document.defaultView.getComputedStyle(document.querySelector('.row' + (parseInt(startRow) + count) + ' .col' + startCol), ':before').getPropertyValue('content') != " ") {
legal = false;
}
console.log("hello4");
}
}
}
}
}
return legal;
};
var sarCheck = function(startRow, startCol, finishRow, finishCol) {
return ((Math.abs(finishCol - startCol) <= 1) && (Math.abs(finishRow - startRow) <= 1)) ? true : false;
};
var nabuCheck = function(startRow, startCol, finishRow, finishCol) {
return ((Math.abs(finishCol - startCol) == 1) && (Math.abs(finishRow - startRow) == 1)) ? true : false;
};
var marazCheck = function(startRow, startCol, finishRow, finishCol) {
return ((Math.abs(finishCol - startCol) == 1 && Math.abs(finishRow - startRow) === 0) || (Math.abs(finishCol - startCol) === 0 && (Math.abs(finishRow - startRow)) == 1)) ? true : false;
};
var etluCheck = function(startRow, startCol, finishRow, finishCol) {
return ((Math.abs(finishCol - startCol) == 2 && Math.abs(finishRow - startRow) === 0) || (Math.abs(finishCol - startCol) === 0 && Math.abs(finishRow - startRow) == 2)) ? true : false;
};
var newGame = function() {
$(".sqr").each(function() {
$(this).removeClass("redumB redumW gisB gisW nabuB nabuW marazB marazW sarB sarW etluB etluW active clicked legal notLegal");
});
$(".row1 .col1 , .row1 .col8").addClass("gisB active");
$(".row1 .col2 , .row1 .col7").addClass("etluB active");
$(".row1 .col3 , .row1 .col6").addClass("nabuB active");
$(".row1 .col4").addClass("marazB active");
$(".row1 .col5").addClass("sarB active");
$(".row2 .sqr").addClass("redumB active");
$(".row8 .col1 , .row8 .col8").addClass("gisW active");
$(".row8 .col2 , .row8 .col7").addClass("etluW active");
$(".row8 .col3 , .row8 .col6").addClass("nabuW active");
$(".row8 .col4").addClass("marazW active");
$(".row8 .col5").addClass("sarW active");
$(".row7 .sqr").addClass("redumW active");
};
var sampleGame = function() {
$(".sqr").each(function() {
$(this).removeClass("redumB redumW gisB gisW nabuB nabuW marazB marazW sarB sarW etluB etluW active clicked legal notLegal");
});
$(".row1 .col2").addClass("gisB active");
$(".row3 .col8, .row3 .col2").addClass("etluB active");
$(".row6 .col8").addClass("redumB active");
$(".row1 .col8").addClass("gisW active");
$(".row3 .col1").addClass("sarW active");
$(".row2 .col1").addClass("redumW active");
};
$(document).ready(function() {
$("#start").click(function() {
newGame();
$(this).fadeOut("slow", function() {
$("#subMenu").fadeIn("slow", function() {});
});
});
$("#new").click(function() {
newGame();
$("#subMenu").fadeOut("slow", function() {
$("#game").fadeIn("slow", function() {});
});
});
$("#sample").click(function() {
sampleGame();
$("#subMenu").fadeOut("slow", function() {
$("#game").fadeIn("slow", function() {});
});
});
$("#quit").click(function() {
$("#game").fadeOut("slow", function() {
$("#subMenu").css("display","none");
$("#start").fadeIn("slow", function() {});
});
});
$(".sqr").click(function() {
if ($(this).hasClass("active") && $(this).hasClass("sqr")) {
$(".sqr").each(function() {
$(this).removeClass("notLegal clicked legal");
});
$(this).addClass("clicked");
var el = (' ' + $(this).attr('class')).split(' ').join('.');
var cont = document.defaultView.getComputedStyle(document.querySelector(el), ':before').getPropertyValue('content');
var startRow = ((' ' + $(this).parent().attr('class')).split(' ')[2]).slice(-1);
var startCol = ((' ' + $(this).attr('class')).split(' ')[2]).slice(-1);
var colour = ((' ' + $(this).attr('class')).split(' ')[4]).slice(-1);
var sqrLegal = false;
$(".sqr").each(function() {
var finishRow = ((' ' + $(this).parent().attr('class')).split(' ')[2]).slice(-1);
var finishCol = ((' ' + $(this).attr('class')).split(' ')[2]).slice(-1);
var val = document.defaultView.getComputedStyle(document.querySelector('.row' + finishRow + ' .col' + finishCol), ':before').getPropertyValue('content');
var legal = true;
switch (cont) {
case 'R':
legal = redumCheck(startRow, startCol, finishRow, finishCol, colour, val, $(this).hasClass("redumB"), $(this).hasClass("redumW"));
break;
case 'S':
legal = sarCheck(startRow, startCol, finishRow, finishCol);
break;
case 'M':
legal = marazCheck(startRow, startCol, finishRow, finishCol);
break;
case 'G':
legal = gisCheck(startRow, startCol, finishRow, finishCol);
break;
case 'N':
legal = nabuCheck(startRow, startCol, finishRow, finishCol);
break;
case 'E':
legal = etluCheck(startRow, startCol, finishRow, finishCol);
break;
default:
legal = false;
break;
}
if (legal && !$(this).hasClass("active")) {
legal = true;
sqrLegal = true;
} else if (legal && (((' ' + $(this).attr('class')).split(' ')[4]).slice(-1) != colour)) {
legal = true;
sqrLegal = true;
} else {
legal = false;
}
$(this).addClass((legal) ? "legal" : "notLegal");
});
if(!sqrLegal) {
$(".sqr").each(function() {
$(this).removeClass("notLegal clicked legal");
});
}
}
$("div.sqr.legal").click(function() {
if ($(this).hasClass("legal")) {
var type = '' + $(".clicked").attr('class').split(' ').splice(3, 1);
$(".clicked").removeClass(type).removeClass("active");
$(this).addClass(type).addClass("active");
$(".sqr").each(function() {
$(this).removeClass("notLegal legal clicked");
});
}
});
$(".notLegal").click(function() {
if ($(this).hasClass("notlegal")) {
$(".sqr").each(function() {
$(this).removeClass("notLegal clicked legal");
});
}
});
});
});
</script><!DOCTYPE>
<html>
<head>
<title>AQA Chess Ripoff</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="header">
<div id="quit"> Quit </div>
<a id="info" target="_blank" href="http://computing.konsole.uk/pages/viewpage.action;jsessionid=9734E8B8D0281640E166DFF2F93DB50E?pageId=753711&preview=/753711/753718/AQA-COMP1-PM-Jun15.pdf">i</a>
</div>
<div id="start"> Start Game </div>
<div id ="subMenu">
<div class="option" id="new"> New Game </div>
<div class="option" id="sample"> Sample Game </div>
</div>
<div id="game">
<div class="row row1">
<div class="sqr col1 white"></div>
<div class="sqr col2 black"></div>
<div class="sqr col3 white"></div>
<div class="sqr col4 black"></div>
<div class="sqr col5 white"></div>
<div class="sqr col6 black"></div>
<div class="sqr col7 white"></div>
<div class="sqr col8 black"></div>
</div>
<div class="row row2">
<div class="sqr col1 black"></div>
<div class="sqr col2 white"></div>
<div class="sqr col3 black"></div>
<div class="sqr col4 white"></div>
<div class="sqr col5 black"></div>
<div class="sqr col6 white"></div>
<div class="sqr col7 black"></div>
<div class="sqr col8 white"></div>
</div>
<div class="row row3">
<div class="sqr col1 white"></div>
<div class="sqr col2 black"></div>
<div class="sqr col3 white"></div>
<div class="sqr col4 black"></div>
<div class="sqr col5 white"></div>
<div class="sqr col6 black"></div>
<div class="sqr col7 white"></div>
<div class="sqr col8 black"></div>
</div>
<div class="row row4">
<div class="sqr col1 black"></div>
<div class="sqr col2 white"></div>
<div class="sqr col3 black"></div>
<div class="sqr col4 white"></div>
<div class="sqr col5 black"></div>
<div class="sqr col6 white"></div>
<div class="sqr col7 black"></div>
<div class="sqr col8 white"></div>
</div>
<div class="row row5">
<div class="sqr col1 white"></div>
<div class="sqr col2 black"></div>
<div class="sqr col3 white"></div>
<div class="sqr col4 black"></div>
<div class="sqr col5 white"></div>
<div class="sqr col6 black"></div>
<div class="sqr col7 white"></div>
<div class="sqr col8 black"></div>
</div>
<div class="row row6">
<div class="sqr col1 black"></div>
<div class="sqr col2 white"></div>
<div class="sqr col3 black"></div>
<div class="sqr col4 white"></div>
<div class="sqr col5 black"></div>
<div class="sqr col6 white"></div>
<div class="sqr col7 black"></div>
<div class="sqr col8 white"></div>
</div>
<div class="row row7">
<div class="sqr col1 white"></div>
<div class="sqr col2 black"></div>
<div class="sqr col3 white"></div>
<div class="sqr col4 black"></div>
<div class="sqr col5 white"></div>
<div class="sqr col6 black"></div>
<div class="sqr col7 white"></div>
<div class="sqr col8 black"></div>
</div>
<div class="row row8">
<div class="sqr col1 black"></div>
<div class="sqr col2 white"></div>
<div class="sqr col3 black"></div>
<div class="sqr col4 white"></div>
<div class="sqr col5 black"></div>
<div class="sqr col6 white"></div>
<div class="sqr col7 black"></div>
<div class="sqr col8 white"></div>
</div>
</body>
</html>
<style>
body {
background: #303333;
}
#header {
height: 25px;
margin-top: 25px;
width: 100%;
}
#quit, #info {
border: 2px solid white;
border-radius: 360px;
color: white;
display: inline;
float: right;
font-family: Comic Sans MS;
height: 20px;
line-height: 20px;
margin-right: 25px;
text-align: center;
text-decoration: none;
width: 20px;
}
#quit {
border: none;
font-family: Century Gothic;
margin-right: 75px;
}
#start, #subMenu {
border: white 5px solid;
color: white;
font-family: Century Gothic;
font-size: 50px;
height: 200px;
left: 50%;
line-height: 200px;
margin: -100px 0 0 -200px;
position: absolute;
text-align: center;
top: 50%;
width: 400px;
z-index: 15;
}
#start:hover, #quit:hover, #info:hover, .option:hover {
border-color: #39D1B4;
color: #39D1B4;
cursor: pointer;
}
#subMenu {
display: none;
}
.option {
height: 100px;
line-height: 100px;
}
#quit:hover {
color: #f65a5b;
}
#info:hover {
border-color: #59A1C7;
color: #dcf3ff;
}
#game {
border: white 5px solid;
display: none;
height: 809px;
left: 50%;
margin: -404px 0 0 -404px;
position: absolute;
top: 50%;
width: 809px;
}
.row {
height: 100px;
width: 809px;
}
.sqr {
display: block;
float: left;
font-family: Rockwell;
font-size: 50px;
font-weight: bold;
height: 100px;
line-height: 100px;
text-align: center;
text-shadow: #000 0 0 1px, #000 0 0 1px, #000 0 0 1px,
#000 0 0 1px, #000 0 0 1px, #000 0 0 1px, #000 0 0 1px, #000 0 0 1px, #000 0 0 1px,
#000 0 0 1px, #000 0 0 1px, #000 0 0 1px;
width: 100px;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
.sqr:before {
content: "";
}
.row1 .sqr {
border-top: 1px solid black;
}
.sqr.col1{
border-left: 1px solid black;
}
.white {
background: #D0EEEF;
}
.black {
background: #515959;
}
.redumB:before, .redumW:before {
content: "R";
}
.redumW, .gisW, .nabuW, .marazW, .etluW, .sarW {
color: white;
}
.gisB:before, .gisW:before {
content: "G";
}
.nabuB:before, .nabuW:before {
content: "N";
}
.marazB:before, .marazW:before {
content: "M";
}
.sarB:before, .sarW:before {
content: "S";
}
.etluB:before, .etluW:before {
content: "E";
}
.legal {
background: #BB8D8B;
}
.clicked {
background: #8BBB8D;
}
</style>
<script type="text/javascript">
var redumCheck = function(startRow, startCol, finishRow, finishCol, colour, val, redumB, redumW) {
var legal = false;
if (colour == 'W') {
if (finishRow == startRow - 1) {
if ((finishCol == startCol) && (val.length == 2)) {
legal = true;
} else if ((Math.abs(finishCol - startCol) == 1) && redumB) {
legal = true;
}
}
}
if (colour == 'B') {
if (finishRow == parseInt(startRow) + 1) {
if ((finishCol == startCol) && (val.length == 2)) {
legal = true;
} else if ((Math.abs(finishCol - startCol) == 1) && redumW) {
legal = true;
}
}
}
return legal;
};
var gisCheck = function(startRow, startCol, finishRow, finishCol) {
var legal = false;
var count = 0;
var rankDifference = finishRow - startRow;
var fileDifference = finishCol - startCol;
if (rankDifference === 0) {
if (fileDifference >= 1) {
legal = true;
for (count = 1; count <= fileDifference - 1; count++) {
console.log('.row' + startRow + ' .col' + (parseInt(startCol) + count));
if (document.defaultView.getComputedStyle(document.querySelector('.row' + startRow + ' .col' + (parseInt(startCol) + count)), ':before').getPropertyValue('content') != " ") {
legal = false;
}
console.log("hello1");
}
} else {
if (fileDifference <= -1) {
legal = true;
for (count = -1; count >= fileDifference + 1; count--) {
console.log('.row' + startRow + ' .col' + (parseInt(startCol) + count));
if (document.defaultView.getComputedStyle(document.querySelector('.row' + startRow + ' .col' + (parseInt(startCol) + count)), ':before').getPropertyValue('content') != " ") {
legal = false;
}
console.log("hello2");
}
}
}
} else {
if (fileDifference === 0) {
if (rankDifference >= 1) {
legal = true;
for (count = 1; count <= rankDifference - 1; count++) {
console.log('.row' + startRow + ' .col' + (parseInt(startCol) + count));
if (document.defaultView.getComputedStyle(document.querySelector('.row' + (parseInt(startRow) + count) + ' .col' + startCol), ':before').getPropertyValue('content') != " ") {
legal = false;
}
console.log("hello3");
}
} else {
if (rankDifference <= -1) {
legal = true;
for (count = -1; count >= rankDifference + 1; count--) {
console.log('.row' + startRow + ' .col' + (parseInt(startCol) + count));
if (document.defaultView.getComputedStyle(document.querySelector('.row' + (parseInt(startRow) + count) + ' .col' + startCol), ':before').getPropertyValue('content') != " ") {
legal = false;
}
console.log("hello4");
}
}
}
}
}
return legal;
};
var sarCheck = function(startRow, startCol, finishRow, finishCol) {
return ((Math.abs(finishCol - startCol) <= 1) && (Math.abs(finishRow - startRow) <= 1)) ? true : false;
};
var nabuCheck = function(startRow, startCol, finishRow, finishCol) {
return ((Math.abs(finishCol - startCol) == 1) && (Math.abs(finishRow - startRow) == 1)) ? true : false;
};
var marazCheck = function(startRow, startCol, finishRow, finishCol) {
return ((Math.abs(finishCol - startCol) == 1 && Math.abs(finishRow - startRow) === 0) || (Math.abs(finishCol - startCol) === 0 && (Math.abs(finishRow - startRow)) == 1)) ? true : false;
};
var etluCheck = function(startRow, startCol, finishRow, finishCol) {
return ((Math.abs(finishCol - startCol) == 2 && Math.abs(finishRow - startRow) === 0) || (Math.abs(finishCol - startCol) === 0 && Math.abs(finishRow - startRow) == 2)) ? true : false;
};
var newGame = function() {
$(".sqr").each(function() {
$(this).removeClass("redumB redumW gisB gisW nabuB nabuW marazB marazW sarB sarW etluB etluW active clicked legal notLegal");
});
$(".row1 .col1 , .row1 .col8").addClass("gisB active");
$(".row1 .col2 , .row1 .col7").addClass("etluB active");
$(".row1 .col3 , .row1 .col6").addClass("nabuB active");
$(".row1 .col4").addClass("marazB active");
$(".row1 .col5").addClass("sarB active");
$(".row2 .sqr").addClass("redumB active");
$(".row8 .col1 , .row8 .col8").addClass("gisW active");
$(".row8 .col2 , .row8 .col7").addClass("etluW active");
$(".row8 .col3 , .row8 .col6").addClass("nabuW active");
$(".row8 .col4").addClass("marazW active");
$(".row8 .col5").addClass("sarW active");
$(".row7 .sqr").addClass("redumW active");
};
var sampleGame = function() {
$(".sqr").each(function() {
$(this).removeClass("redumB redumW gisB gisW nabuB nabuW marazB marazW sarB sarW etluB etluW active clicked legal notLegal");
});
$(".row1 .col2").addClass("gisB active");
$(".row3 .col8, .row3 .col2").addClass("etluB active");
$(".row6 .col8").addClass("redumB active");
$(".row1 .col8").addClass("gisW active");
$(".row3 .col1").addClass("sarW active");
$(".row2 .col1").addClass("redumW active");
};
$(document).ready(function() {
$("#start").click(function() {
newGame();
$(this).fadeOut("slow", function() {
$("#subMenu").fadeIn("slow", function() {});
});
});
$("#new").click(function() {
newGame();
$("#subMenu").fadeOut("slow", function() {
$("#game").fadeIn("slow", function() {});
});
});
$("#sample").click(function() {
sampleGame();
$("#subMenu").fadeOut("slow", function() {
$("#game").fadeIn("slow", function() {});
});
});
$("#quit").click(function() {
$("#game").fadeOut("slow", function() {
$("#subMenu").css("display","none");
$("#start").fadeIn("slow", function() {});
});
});
$(".sqr").click(function() {
if ($(this).hasClass("active") && $(this).hasClass("sqr")) {
$(".sqr").each(function() {
$(this).removeClass("notLegal clicked legal");
});
$(this).addClass("clicked");
var el = (' ' + $(this).attr('class')).split(' ').join('.');
var cont = document.defaultView.getComputedStyle(document.querySelector(el), ':before').getPropertyValue('content');
var startRow = ((' ' + $(this).parent().attr('class')).split(' ')[2]).slice(-1);
var startCol = ((' ' + $(this).attr('class')).split(' ')[2]).slice(-1);
var colour = ((' ' + $(this).attr('class')).split(' ')[4]).slice(-1);
var sqrLegal = false;
$(".sqr").each(function() {
var finishRow = ((' ' + $(this).parent().attr('class')).split(' ')[2]).slice(-1);
var finishCol = ((' ' + $(this).attr('class')).split(' ')[2]).slice(-1);
var val = document.defaultView.getComputedStyle(document.querySelector('.row' + finishRow + ' .col' + finishCol), ':before').getPropertyValue('content');
var legal = true;
switch (cont) {
case 'R':
legal = redumCheck(startRow, startCol, finishRow, finishCol, colour, val, $(this).hasClass("redumB"), $(this).hasClass("redumW"));
break;
case 'S':
legal = sarCheck(startRow, startCol, finishRow, finishCol);
break;
case 'M':
legal = marazCheck(startRow, startCol, finishRow, finishCol);
break;
case 'G':
legal = gisCheck(startRow, startCol, finishRow, finishCol);
break;
case 'N':
legal = nabuCheck(startRow, startCol, finishRow, finishCol);
break;
case 'E':
legal = etluCheck(startRow, startCol, finishRow, finishCol);
break;
default:
legal = false;
break;
}
if (legal && !$(this).hasClass("active")) {
legal = true;
sqrLegal = true;
} else if (legal && (((' ' + $(this).attr('class')).split(' ')[4]).slice(-1) != colour)) {
legal = true;
sqrLegal = true;
} else {
legal = false;
}
$(this).addClass((legal) ? "legal" : "notLegal");
});
if(!sqrLegal) {
$(".sqr").each(function() {
$(this).removeClass("notLegal clicked legal");
});
}
}
$("div.sqr.legal").click(function() {
if ($(this).hasClass("legal")) {
var type = '' + $(".clicked").attr('class').split(' ').splice(3, 1);
$(".clicked").removeClass(type).removeClass("active");
$(this).addClass(type).addClass("active");
$(".sqr").each(function() {
$(this).removeClass("notLegal legal clicked");
});
}
});
$(".notLegal").click(function() {
if ($(this).hasClass("notlegal")) {
$(".sqr").each(function() {
$(this).removeClass("notLegal clicked legal");
});
}
});
});
});
</script>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment