clopen/unity.html at main · atorresen/clopen · 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="images/icon.ico">

    <title>unit(y)</title>
  </head>
  <body style="background-color: #ff1133">

    <div class="graphic">
      <svg id="inverseGraphic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 5"
        style="background-color: #fff">
        <rect x="0" y="0" height="5" width="0.2" fill="#ff113355" />
      </svg>
    </div>

    <div class="buttons">
      <h1 id="addButton" onclick="addRect()">add</h1>
    </div>

    <div class="backButton"><a href="index.html">back</a></div>

    <script>
      var unitWidth = 0.2;
      var unitHeight = 5;
      var numRects = 1;
      var newX = unitWidth;
      var currentWidth = unitWidth;

      const inverseGraphic = document.querySelector("svg");

      // add an overlapping rectangle
      function addRect() {
        if (newX < 8) {
          currentWidth = numRects * unitWidth;
          newX = currentWidth + unitWidth/(Math.random());
        } else {
          currentWidth = unitWidth;
          numRects = 2;
          newX = 0.1;
        };
        numRects = numRects + 1;

        console.log(newX);

        let newRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        newRect.setAttribute("x", newX);
        newRect.setAttribute("y", 0);
        newRect.setAttribute("height", unitHeight);
        newRect.setAttribute("width", unitWidth);
        newRect.setAttribute("fill", "#ff113355");
        inverseGraphic.append(newRect)
      };
    </script>

  </body>
</html>