Skip to content

Instantly share code, notes, and snippets.

@daviddamilola

daviddamilola/checkers.markdown

Last active March 26, 2021 20:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save daviddamilola/3a9ea93c844c8754814401a2a70c0327 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save daviddamilola/3a9ea93c844c8754814401a2a70c0327 to your computer and use it in GitHub Desktop.
Download ZIP
Checkers
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Chess queen atack</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav>
<div class="logo">
Queen Attack
</div>
</nav>
</header>
<div class="container">
<div class="chessBoardContainer col-12">
<div class="chessBoard">
<div class="row1">
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
</div>
<div class="row2">
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
</div>
<div class="row3">
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
</div>
<div class="row4">
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
</div>
<div class="row5">
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
</div>
<div class="row6">
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
</div>
<div class="row7">
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
</div>
<div class="row8">
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
</div>
</div>
</div>
</div>
<div id="tip"> <h5>Select 2 positions on the board</h5></div>
<div class="checkContainer">
<button id="check">check if queen can attack</button>
</div>
<script src="/js/main.js"></script>
</body>
</html>
Raw
script.js
const btns = Array.from(document.querySelectorAll(".btn"));
const check = document.querySelector('#check');
const tip = document.querySelector('#tip');
const calculate2dIndex = (index) => {
let result = [];
const row = index < 8 ? 0 : parseInt(String(index / 8).split('.')[0]);
const col = index < 8 ? index : index % 8;
result.push(row, col);
return result;
}
const clearState = () => {
setTimeout(() => {
maxSelect = [];
feedback('select 2 positions on the board')
Array.from(document.querySelectorAll('.btn[data-select=true]')).forEach(x => {
x.removeAttribute('data-select')
x.classList.remove('red', 'green', 'blue')
})
}, 1000)
}
const feedback = (message) => {
tip.innerHTML = `<h5> ${message} </h5>`
}
let maxSelect = [];
const handlePositionSelect = ({ target }) => {
if (maxSelect.length < 1) {
Array.from(document.querySelectorAll('.btn[data-select=true]')).forEach(x => x.removeAttribute('data-select'))
}
if (maxSelect.length < 2) {
target.setAttribute('data-select', 'true');
Array.from(document.querySelectorAll('.btn[data-select=true]')).forEach(x => x.classList.add('blue'))
maxSelect.push(calculate2dIndex(btns.indexOf(target)));
} else {
feedback('You can select maximum of two positions')
}
}
const handleCheck = () => {
if (maxSelect.length < 2) {
feedback('you need to select two positions')
clearState()
} else if (maxSelect[0][0] === maxSelect[1][0] && maxSelect[0][1] === maxSelect[1][1]) {
feedback('queen cannot occupy the same position')
clearState()
} else if (maxSelect[0][0] === maxSelect[1][0]
|| (maxSelect[0][1] === maxSelect[1][1])
|| maxSelect[0][0] + maxSelect[0][1] === maxSelect[1][0] + maxSelect[1][1]
|| maxSelect[0][0] - maxSelect[0][1] === maxSelect[1][0] - maxSelect[1][1]
) {
Array.from(document.querySelectorAll('.btn[data-select=true]')).forEach(x => x.classList.add('green'))
feedback('queen can attack')
clearState()
} else {
Array.from(document.querySelectorAll('.btn[data-select=true]')).forEach(x => x.classList.add('red'))
feedback('queen cannot attack')
clearState()
}
}
btns.forEach(btn => btn.addEventListener('click', handlePositionSelect, false));
check.addEventListener('click', handleCheck, false);
Raw
style.css
body{
margin: 0;
padding: 0;
}
.container{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 80%;
margin: 0 auto;
}
header{
background: #333;
width: 100%;
padding: 1rem;
color: #fff;
margin-bottom: 3rem;
}
.col-12{
width:100%;
}
#tip{
display: flex;
align-items: center;
justify-content: center;
}
.btn{
min-width: 2rem;
min-height: 2rem;
padding: 0;
border: none;
}
.chessBoardContainer{
margin: 0 auto;
max-width: 300px;
padding: 1rem;
background: rgba(134, 51, 3, 0.856);
box-shadow: 1px 2px 8px black;
}
.row1,.row2,.row3, .row4, .row5, .row6, .row7, .row8{
width: 95%;
margin: 0 auto;
}
#check{
width:100%;
padding:0.5rem 1rem;
margin-top:0.5rem;
}
.row1>.btn:nth-child(odd){
background: black;
}
.row1>.btn:nth-child(even){
background: #fff;
}
.row2>.btn:nth-child(even){
background: black;
}
.row2>.btn:nth-child(odd){
background: #fff;
}
.row3>.btn:nth-child(odd){
background: black;
}
.row3>.btn:nth-child(even){
background: #fff;
}
.row4>.btn:nth-child(even){
background: black;
}
.row4>.btn:nth-child(odd){
background: #fff;
}
.row5>.btn:nth-child(odd){
background: black;
}
.row5>.btn:nth-child(even){
background: #fff;
}
.row6>.btn:nth-child(even){
background: black;
}
.row6>.btn:nth-child(odd){
background: #fff;
}
.row7>.btn:nth-child(odd){
background: black;
}
.row7>.btn:nth-child(even){
background: #fff;
}
.row8>.btn:nth-child(even){
background: black;
}
.row8>.btn:nth-child(odd){
background: #fff;
}
.chessBoard .blue{
background: blue !important;
}
.chessBoard .green{
background: green !important;
}
.chessBoard .red{
background: red !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment