diff options
Diffstat (limited to 'minesweeper/index.html')
| -rw-r--r-- | minesweeper/index.html | 211 |
1 files changed, 211 insertions, 0 deletions
diff --git a/minesweeper/index.html b/minesweeper/index.html new file mode 100644 index 0000000..fc18254 --- /dev/null +++ b/minesweeper/index.html @@ -0,0 +1,211 @@ +<!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> |