mines-weppeer/index.html at main · danik00111/mines-weppeer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./sty.css">
  <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://danik00111.github.io/mines-weppeer/" />
    <meta property="og:title" content="mines weppeer" />
    <meta property="og:description" content="a game where you wepp mine" />
  <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://danik00111.github.io/mines-weppeer/" />
    <meta property="twitter:title" content="mines weppeer" />
    <meta property="twitter:description" content="a game where you wepp mine" />
  <!-- Primary Meta Tags -->
    <meta name="title" content="mines weppeer" />
    <meta name="description" content="a game where you wepp mine" />
    <title>mines weppeer</title>
  <!-- Meta Tags Generated with https://metatags.io -->
</head>
<body>
  <h1 style="font-size:56px">the most average minesweppeer clone</h1>
  <p>(type ? for hotkeys)</p>
  <p>(written fully in html+js)</p>
  <h3 id="howtoplay"><a href="./how-to-play/">How to play?</a></h3>
  <p style="opacity:0.25">if you see a bug, open a git issue at <a id=togithub href="https://github.com/danik00111/mines-weppeer/issues">the github repo</a></p>
  <main>
    <div id="difficulty-select">
      <div><input type="radio" mien="10" name="difficulty" onchange="document.getElementById('minecount').innerHTML=10;makeboard(9, 9, 10)" id="beginner"><label for="beginner" title="9&times;9/10">Beginner</label></div>
      <div><input type="radio" mien="40" name="difficulty" onchange="document.getElementById('minecount').innerHTML=40;makeboard(16,16,40)" id="intermediate" checked><label for="intermediate" title="16&times;16/40">Intermediate</label></div>
      <div><input type="radio" mien="99" name="difficulty" onchange="document.getElementById('minecount').innerHTML=99;makeboard(30,16,99)" id="expert"><label for="expert" title="30&times;16/99">Expert</label></div>
      <div><input type="radio" name="difficulty"
        onchange="makeboard(document.getElementById('width').value,document.getElementById('height').value,document.getElementById('mines').value);document.getElementById('minecount').innerHTML=document.getElementById('mines').value"
        id="custom"><label for="custom">Custom...</label></div>
      <div id="custom-settings">
        <input         type="number" disabled style="width:2ch" class="setting" placeholder="Width"  name="width"  id="width"  min="3" max="99"  value="16"
          oninput="makeboard(document.getElementById('width').value,document.getElementById('height').value,document.getElementById('mines').value);
          document.getElementById('width').style.width = document.getElementById('width').value.length + 'ch';
          if(document.getElementById('width').style.width == '0ch') document.getElementById('width').style.width = '5ch';"
        >x<input type="number" disabled style="width:2ch" class="setting" placeholder="Height" name="height" id="height" min="3" max="99"  value="12"
          oninput="makeboard(document.getElementById('width').value,document.getElementById('height').value,document.getElementById('mines').value);
          document.getElementById('height').style.width = document.getElementById('height').value.length + 'ch';
          if(document.getElementById('height').style.width == '0ch') document.getElementById('height').style.width = '6ch'"
        >/<input       type="number" disabled style="width:2ch" class="setting" placeholder="Mines"  name="mines"  id="mines"  min="2" max="199" value="32"
          oninput="makeboard(document.getElementById('width').value,document.getElementById('height').value,document.getElementById('mines').value);
          document.getElementById('mines').style.width = document.getElementById('mines').value.length + 'ch';
          if(document.getElementById('mines').style.width == '0ch') document.getElementById('mines').style.width = '5ch'
          document.getElementById('minecount').innerHTML=document.getElementById('mines').value"
        >
      </div>
    </div>
    <board oncontextmenu="return false"></board>
    <div id="quickend" onclick="quickend=true;document.querySelectorAll('cell:not(.flag)').forEach(e=>{if(e.getAttribute('n')===null)e.click()});quickend=false">Open All Unflagged Cells</div>
    <div id="numbers" style="font-size:24px;margin:12px 0">
      <span id="minecount">40</span>
      <span>🚩 ⏰</span>
      <span id="timer">0</span><span id="decimal"></span>
    </div>
  </main>
  <div id="toggle-darkmode" onclick="document.body.classList.toggle('darkmode');sessionStorage.setItem('mines-weppeer-darkmode',document.body.classList.contains('darkmode'))" style="cursor:pointer;position:fixed;bottom:2em;right:4em;background:#80808080;border-radius:4px;padding:2px">Toggle Theme</div>
  <script>let rbmlock = false;</script><style>.glow{box-shadow:0 0 16px 0 greenyellow}</style>
  <div id="toggle-rbmlock" title="TL;DR Your LBM becomes RBM. If this is glowing, then it's on. With this on, you can only flag unopen cells, and chord open cells with enough flags nearby." onclick="rbmlock=!rbmlock;sessionStorage.setItem('mines-weppeer-rbmlock',rbmlock);if(rbmlock){document.getElementById('toggle-rbmlock').classList.add('glow')}else{document.getElementById('toggle-rbmlock').classList.remove('glow')}" style="cursor:pointer;position:fixed;bottom:2em;left:4em;background:#80808080;border-radius:4px;padding:2px">Toggle RBM-Lock</div>
  <input type="checkbox" name="tog-zg" id="tog-zg" style="display:none">
  <label for="tog-zg" id="toggle-zerg" title="With this on, numbers will show the amount of mines near, *minus* the amount of flags near. Their color will stay the same, though. Try not to get confused!" onclick="vinReEval();flagReEval()" style="cursor:pointer;position:fixed;bottom:4em;left:4em;background:#80808080;border-radius:4px;padding:2px">Zerg</label>
  <div id="hotkeys">
    <div id="hotkeys-inner">
      ? - open/close this popup<br>
      t - toggle darkmode<br>
      r,l - toggle rbmlock<br>
      z - toggle zerg<br>
      . - simulate a cell click<br>
      Enter - quickly end a game, if all flags are placed<br>
      b,i,x,c - choose board type
    </div>
  </div>
  <script>if(sessionStorage.getItem('mines-weppeer-rbmlock')=='true')document.getElementById('toggle-rbmlock').click();if(sessionStorage.getItem('mines-weppeer-darkmode')=='true'||window.matchMedia("(prefers-color-scheme: dark)").matches)document.getElementById('toggle-darkmode').click();</script>
  <script src="./scr.js"></script>
</body>
</html>