<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>Chrisoft::Minesweeper</title>
<link rel="icon" href="../favicon.png">
<link rel="stylesheet" type="text/css" href="../common.css">
<link rel="stylesheet" type="text/css" href="../panel.css">
<link rel="stylesheet" type="text/css" href="/theme0a.css" id="theme0a">
<link rel="stylesheet" type="text/css" href="/theme0b.css" id="theme0b">
<link rel="stylesheet" type="text/css" href="/theme1a.css" id="theme1a">
<link rel="stylesheet" type="text/css" href="/theme1b.css" id="theme1b">
<link rel="stylesheet" type="text/css" href="/theme2a.css" id="theme2a">
<link rel="stylesheet" type="text/css" href="/theme2b.css" id="theme2b">
<link rel="stylesheet" type="text/css" href="/theme3a.css" id="theme3a">
<link rel="stylesheet" type="text/css" href="/theme3b.css" id="theme3b">
<script type="text/javascript" src="../panel.js"></script>
<script type="text/javascript" src="minesweeper.js"></script>
<style>
div#OptionsContainer
{
text-align:center;
margin:auto;
}
select
{
background-color:#CCC;
border:1px #999 solid;
padding:0.5em 0.2em;
}
button
{
border:none;
color:white;
padding:0.5em 2em;
text-align:center;
background-color:#4A4;
transition-duration: 0.2s;
}
button:hover
{
background-color:#6C6;
}
button.off
{
background-color:#A44;
}
button.off:hover
{
background-color:#C66;
}
button.disabled:hover, button.disabled
{
background-color:#888;
}
div#containerDiv
{
margin:auto;
position:relative;
}
div.clickable
{
position:absolute;
text-align:center;
border:1px black solid;
}
div.overlay
{
pointer-events:none;
display:table;
position:absolute;
text-align:center;
}
div.trans
{
transition:100ms;
}
div.modal
{
background-color:rgba(0,0,0,0.6);
color:#FFF;
width:60%;
min-height:40%;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
transition:100ms;
font-size:1.4em;
padding:1em;
}
@media(max-width:768px)
{
div.modal{width:90%;min-height:60%;font-size:1.2em;}
}
@media all
{
#panel{left:-15em;}
}
div{
-webkit-user-select:none !important;
-webkit-touch-callout:none !important;
}
div#progress{
position:fixed;
top:0;
left:0;
width:0%;
height:2px;
background-color:#47c;
transition:width 1s;
z-index:9999;
}
div.mine{background-color:rgba(255,192,0,0.6);}
div.detonated{background-color:rgba(255,0,0,0.6);}
div.flag{background-color:rgba(0,255,0,0.6);}
div.flagw{background-color:rgba(255,0,255,0.6);}
div.dug{background-color:rgba(160,160,192,0.8);}
div.normal{background-color:rgba(128,128,160,0.6);}
.one{color:#00f;}
.two{color:#008000;}
.three{color:#f00;}
.four{color:#000080;}
.five{color:#800000;}
.six{color:#008080;}
.seven{color:#000;}
.eight{color:#7e7e7e;}
</style>
<script>
function loadTheme(){
var thm=document.cookie.replace(new RegExp("(?:(?:^|.*;\\s*)thm\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1");
if(thm.length<2||'0123z'.indexOf(thm[0])==-1||'abz'.indexOf(thm[1])==-1)thm='zz';
var ent="";
var d=new Date();
if(thm[0]=='z')
{
var m=d.getMonth()+1;
if(m>=3&&m<6)thm='0'+thm[1];
else if(m>=6&&m<9)thm='1'+thm[1];
else if(m>=9&&m<12)thm='2'+thm[1];
else thm='3'+thm[1];
}
if(thm[1]=='z')
{if(d.getHours()>=18||d.getHours()<6)thm=thm[0]+'b';else thm=thm[0]+'a';}
ent=`theme${thm}`;
var R=new RegExp('theme[0-4][ab]');
for(var i=0;i<document.styleSheets.length;++i)
{
if(R.exec(document.styleSheets[i].ownerNode.id)!==null&&document.styleSheets[i].ownerNode.id!=ent)
document.styleSheets[i].disabled=true;
else document.styleSheets[i].disabled=false;
}
}
loadTheme();
</script>
</head>
<body onload="init();">
<div id="progress"></div>
<div id="panel" class="TText">
<ul id="panellist">
<li><a href="/"><h1>Chrisoft</h1></a></li>
<li><span><h3>Minesweeper</h3></span></li>
<li><span>
Difficulty:
<select id="bsize" class="TText">
<option value="1">Easy</option>
<option value="2">Normal</option>
<option value="3">Hard</option>
</select>
</li>
<li><span>Multimine:
<button id="multim" onclick="multiminetoggle();" class="off TText">Off</button></span>
</li>
<li><span>Effects:
<button id="efx" class="TText" onclick="efxtoggle();">On</button></span>
</li>
<li><span>Sounds:
<button id="sfx" class="TText" onclick="sfxtoggle();">On</button></span>
</li>
<!--<li><span>I can't count:
<button id="remm" class="TText" onclick="remmtoggle();">No thx</button></span>
</li>-->
<li><a href="javascript:void(0);" onclick="document.getElementById('help').style.opacity='1';document.getElementById('help').style.zIndex='1000';">Help</a></li>
<li><span>version: 0.8.8+b1</span></li>
</div>
<div id="OptionsContainer" class="TText">
<button class="TText" id="start" onclick="gameInit();">New Game</button>
<button class="TText" id="st" onclick="systemtest();" style="display:none;" class="disabled">I'm ready, dismantle the mines!</button>
<br>Mines:<span id="mines"></span>
</div>
<div id="containerDiv">
</div>
<div class="modal TText" style="opacity:0;text-align:center;z-index:-999;" id="result" onclick="this.style.opacity='0';this.style.zIndex='-999';">
</div>
<div class="modal TText" style="opacity:0;z-index:-999;" id="help" onclick="this.style.opacity='0';this.style.zIndex='-999';">
<p>
<b>Mobile devices from Apple are not supported...</b><br>
Left click / tap and hold on untouched cell = reveal cell<br>
Right click / tap on untouched cell = toggle flag in cell<br>
Right click / tap on revealed cell = reveal surrounding cells if feasible<br>
</p>
<p>
In multimine mode, there might be multiple (6 max) mines in a single cell.
Use right click or short tap to increase flag count, left click or long tap
to decrease flag count. To finish a multimine game, you have to flag all cells
with mines correctly and click the "I'm ready, dismantle the mines!" button.
</p>
</div>
</body>
</html>
