mines.min.js

"use strict";function cacheResources(flag,mine){var imgElOne=document.createElement("img");imgElOne.src=flag;var imgElTwo=document.createElement("img");imgElTwo.src=mine}
function Minesweeper(paramObj){var size=paramObj.size||8;var minesCount=paramObj.minesCount||10;var elementId;var flagIcon=paramObj.flagIcon||"https://boring-minesweeper.surge.sh/Minesweeper/images/flag.png";var mineIcon=paramObj.mineIcon||"https://boring-minesweeper.surge.sh/Minesweeper/images/mine.png";cacheResources(flagIcon,mineIcon);if(!(paramObj.elementId)){console.error("Invalid DOM Element ID.");return}
else{elementId=paramObj.elementId}
var mineMatrixCreatorInstance=mineMatrixCreator(size,minesCount);var mineMatrix=mineMatrixCreatorInstance.buildMineMatrix();var UIInstance=UIRenderer(elementId,minesCount,mineMatrix,flagIcon,mineIcon);UIInstance.renderUI()}
function mineMatrixCreator(size,minesCount){var publicAPI;function buildMineMatrix(){var mineMatrix=[],minesSet=0,row,col;if(minesCount>size*size){alert("Number of mines is greater than the size.");return}
initMineMatrix();setMines();setValuesInElements();function initMineMatrix(){for(let i=0;i<size;i++){let temp=[];for(let j=0;j<size;j++){temp.push(0)}
mineMatrix.push(temp)}}
function setMines(){for(let i=0;i<minesCount;){row=Math.floor(Math.random()*(size));col=Math.floor(Math.random()*(size));if(mineMatrix[row][col]!=='M'){mineMatrix[row][col]='M';i++}}}
function setValuesInElements(){for(let i=0;i<size;i++){for(let j=0;j<size;j++){if(mineMatrix[i][j]!=='M'){mineMatrix[i][j]=getNeighboringMinesCount(i,j)}}}
function getNeighboringMinesCount(row,col){var count=0;for(let i=row-1;i<=row+1;i++){if(i>-1&&i<size){for(let j=col-1;j<=col+1;j++){if((j>-1&&j<size)&&mineMatrix[i][j]=='M'){count++}}}}
return count}}
return mineMatrix}
publicAPI={buildMineMatrix:buildMineMatrix}
return publicAPI}
function UIRenderer(elementId,minesCount,mineMatrix,flagIcon,mineIcon){var publicAPI,mineClickTopic=elementId+"mineClicked";var size=mineMatrix.length;var countElementsLeft;countElementsLeft=size*size-minesCount;function renderUI(){var parentSize=$("#"+elementId).css("width"),el=document.getElementById(elementId),el1;parentSize=parseInt(parentSize);size=parseInt(size);el.style.display="flex";el.style.flexDirection="column";el.style.justifyContent="space-around";el.style.height=parentSize+"px";var margin=2,d=Math.floor((parentSize-(size+1)*margin)/size);for(let i=0;i<size;i++){el1=document.createElement("div");el1.className="row";el1.setAttribute("data-row-id",i);setRowStyles(el1);renderChildElements(el1,i);el.appendChild(el1)}
function setRowStyles(el){el.style.display="flex";el.style.justifyContent="space-between";el.style.width="100%";el.style.height=d+"px"}
function renderChildElements(el,i){var el2,textNode;for(let j=0;j<size;j++){el2=document.createElement("div");el2.setAttribute("id","r"+i+"-"+"c"+j);el2.className="element closed";el2.setAttribute("data-element-id",j);el2.setAttribute("data-row",i);el2.setAttribute("data-col",j);setElementStyles(el2);textNode=document.createTextNode(mineMatrix[i][j]);el.appendChild(el2);el2.addEventListener("click",openElement);el2.addEventListener("contextmenu",flagElement.bind(el2,i,j));if(mineMatrix[i][j]==='M'){let tempEl=el2;$.subscribe(mineClickTopic,function(){tempEl.style.background="url("+mineIcon+") #ccc";tempEl.style.backgroundSize="contain"})}}
function setElementStyles(el){el.style.position="relative";el.style.width=d+"px";el.style.height=d+"px";el.style.textAlign="center";el.style.background="#ccc";el.style.borderRadius="2px";var el2=document.createElement("div");styleTextNode(el2);el.appendChild(el2)}
function styleTextNode(el2){el2.style.position="absolute";el2.style.top="50%";el2.style.left="50%";el2.style.transform="translate(-50%, -50%)";el2.style.fontSize=d/2+"px";el2.style.fontFamily="sans-serif";el2.style.color="#555";el2.style.lineHeight=d/2+"px"}
function flagElement(i,j,ev){ev.preventDefault();if(this.className.indexOf("flagged")>-1){this.style.background="#ccc";$(this).removeClass("flagged")}
else if(mineMatrix[i][j]!==-1){this.style.background="url("+flagIcon+") #ccc";this.style.backgroundSize="contain";$(this).addClass("flagged")}}
$.subscribe(mineClickTopic,function(){var el=document.getElementsByClassName("closed");for(let i=0;i<el.length;i++){el[i].removeEventListener("click",openElement)}
for(let i=0;i<size;i++){for(let j=0;j<size;j++){mineMatrix[i][j]=-1}}});function openElement(){if(this.className.indexOf("flagged")>-1){return}
var row=parseInt(this.getAttribute("data-row"));var col=parseInt(this.getAttribute("data-col"));if(mineMatrix[row][col]!==0&&mineMatrix[row][col]!==-1&&mineMatrix[row][col]!=='M'){openCurrentElement(row,col)}
else if(mineMatrix[row][col]!==-1&&mineMatrix[row][col]!=='M'){openNeighbourZeros(row,col)}
else if(mineMatrix[row][col]==='M'){$.publish(mineClickTopic,null)}}
function openCurrentElement(row,col){var elChild=document.querySelector("#"+elementId+" #r"+row+"-c"+col);var value=mineMatrix[row][col];if(value!==0){$(elChild).find("div").text(value)}
if(elChild.className.indexOf("flagged")>-1){$(elChild).removeClass("flagged")}
mineMatrix[row][col]=-1;elChild.style.background="#ddd";elChild.removeEventListener("click",openElement);$(elChild).removeClass("closed");$(elChild).removeClass("opened");countElementsLeft--;if(countElementsLeft===0){alert("You won!");var closedEls=document.querySelectorAll("#"+elementId+" .closed");for(let i=0;i<closedEls.length;i++){closedEls[i].style.pointerEvents="none"}}}
function openNeighbourZeros(row,col){openCurrentElement(row,col);var rowBefore,rowAfter,colBefore,colAfter;rowBefore=row-1;rowAfter=row+1;colBefore=col-1;colAfter=col+1;if(rowBefore>-1&&colBefore>-1){checkCurrentElement(rowBefore,colBefore)}
if(rowBefore>-1){checkCurrentElement(rowBefore,col)}
if(rowBefore>-1&&colAfter<size){checkCurrentElement(rowBefore,colAfter)}
if(colBefore>-1){checkCurrentElement(row,colBefore)}
if(colAfter<size){checkCurrentElement(row,colAfter)}
if(rowAfter<size&&colBefore>-1){checkCurrentElement(rowAfter,colBefore)}
if(rowAfter<size){checkCurrentElement(rowAfter,col)}
if(rowAfter<size&&colAfter<size){checkCurrentElement(rowAfter,colAfter)}}
function checkCurrentElement(row,col){if(mineMatrix[row][col]!==-1&&mineMatrix[row][col]!==0){openCurrentElement(row,col);return}
if(mineMatrix[row][col]===0){openNeighbourZeros(row,col)}}}}
$.subscribe(mineClickTopic,function(){setTimeout(function(){alert("You've lost the game! :(")},100)});publicAPI={renderUI:renderUI};return publicAPI}