hyperHTML/test/cars-wired.html at master · WebReflection/hyperHTML · 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
<!doctype html>
<html>
<head>
<title>Recycling benchmark (uber-inspired)</title>
<script>

  var cars = []; setupCars();
  function setupCars() {
    for(var i = 4000; i--;) {
      cars[i] = {
        x: Math.random() * 300 - 100,
        y: Math.random() * 300 - 100
      }
    }
  }
  function updateCars() {
    for(var i = cars.length; i--;) {
      cars[i].x += Math.random() * 10 - 5;
      cars[i].y += Math.random() * 10 - 5;
    }
  }
  function getVisibleCars() {
    function between(x,min,max) {
      return min <= x && x <= max;
    }
    return cars.filter(c => between(c.x, -5, +105) && between(c.y, -5, +105));
  }

</script>

</head>
<body>

  <script src="../min.js"></script>
  <script>

    var update = function update(bodyContent, cars) {
      bodyContent`
      <section
        aria-label="map"
        style="width: 100vmin; height: 100vmin; position: absolute; top: 0; left: 0; overflow: hidden;"
      >${
        getVisibleCars().map(car => hyperHTML.wire(car)`
          <input
              type="button"
              value="car"
              style="${`
                position: absolute;
                top:0;
                left:0;
                transform: translate(${car.x}vmin, ${car.y}vmin);
              `}"
          >`
        )}</section>
      `;
    };

    update = update.bind(
        window,
        hyperHTML.bind(document.body),
        cars
    );

    var continuousUpdate = () => {
      requestAnimationFrame(continuousUpdate);
      updateCars();
      update();
    };
    continuousUpdate();

  </script>

</body>