summaryrefslogtreecommitdiff
path: root/assets/index.html
blob: f86287e847fcfb202d5f5912f09568fadbdeb328 (plain)
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
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>websweeper</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" type="text/css" href="./s.css">
  </head>
  <body>
    <div class="cent">
      <div id="rlist"></div>
      <span id="rspace"></span>
    </div>
    <script>
      let rlist = document.getElementById('rlist');
      fetch('rlist').then(r => r.json()).then(info => {
        let rooms = info[0];
        let pcounts = info[1];
        Object.keys(rooms).forEach(x => {
          let roominfo = JSON.parse(rooms[x]);
          let pc = Number(pcounts[x][0]);
          let pcap = Number(pcounts[x][1]);
          let bc = roominfo.board_conf;
          let h1 = document.createElement('h1');
          let full = pc == pcap;
          let ptxt = `${pc}/${pcap} players` + ((full)? " (full)" : "");
          h1.appendChild(document.createTextNode(`> ${roominfo.name}${ptxt}`));
          let h4 = document.createElement('h4');
          h4.appendChild(document.createTextNode(`${bc.w} by ${bc.h} with ${bc.mine_ratio[0]} in every ${bc.mine_ratio[1]} tiles mined`));
          let entry = (full)? document.createElement('span') : document.createElement('a');
          entry.append(h1);
          entry.append(h4);
          entry.href = 'room/' + x;
          rlist.append(entry);
          rlist.append(document.createElement('br'));
        });
      });
      fetch("rspace").then(resp => resp.text()).then(roomspace => {
          let roomspacenum = Number(roomspace);
          let e = document.getElementById('rspace');
          if (roomspacenum == 0) {
            e.appendChild(document.createTextNode("all room slots filled, when a room empties it can be replaced by a new one"));
            document.getElementById("createbtn").disabled = "disabled";
          }
          if (roomspacenum == 1) {
            e.appendChild(document.createTextNode(`there is 1 available room slot`));
          } else if (roomspacenum > 1) {
                  e.appendChild(document.createTextNode(`there are ${roomspacenum} available room slots`));
          }
      })
    </script>
    <form method="post" action="r" class="cent">
      <fieldset>
        <legend>-={ Create a new room }=-</legend>
        <label>room name&nbsp;<input name="rname" type="text" autofocus></label><br>
        <label>
          board dimensions
          <input name="rwidth" type="number" value="30" required>
          x
          <input name="rheight" type="number" value="20" required><br>
          where <input name="rration" type="number" value="1" required>
          in every <input name="rratiod" type="number" value="8" required>
          tiles are mines
        </label><br>
        <label>public, ie. shown in the lobby <input name="raccess" type="checkbox" checked></label><br>
        <label>safe first move (if possible) <input name="ralwayssafe1move" type="checkbox" checked></label><br>
        <label>player limit <input name="rlimit" type="number" value="32"></label><br>
        <button id="createbtn">create</button>
      </fieldset>
    </form>
    <div class="statusline cent">
      <p id="ident-name"></p>
      <a id="ident-clr" href="javascript:clear_ident();">clear identity</a>
    </div>
    <script>
      function clear_ident() {
        localStorage.removeItem("identity");
        document.location.reload();
      }
      let ident = JSON.parse(localStorage.getItem("identity"));
      let ident_elem = document.getElementById("ident-name");
      if (ident == null) {
        ident_elem.innerHTML = "no identity yet";
        document.getElementById("ident-clr").style.display = "none";
      } else {
        ident_elem.innerHTML = `you are <span style="color: ${ident.clr}">${ident.name}</span>`;
      }
    </script>
  </body>
</html>