curlingio-scoring/dev.html at master · pairshaped/curlingio-scoring · 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
82
83
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Curling I/O - Scoring</title>
  <script src="dev.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="icon" href="data:;base64,iVBORwOKGO=" />
  <style>
    .btn:focus, .btn:active {
      outline: none !important;
      box-shadow: none !important;
      -webkit-box-shadow: none !important;
    }
    .btn {
      min-width: 80px;
    }
    .btn-group .btn {
      min-width: 60px;
      border-radius: 0;
    }
    .scoring-result-button-group .btn {
      min-width: 60px;
    }
    .color-btn {
      width: 25px;
      height: 25px;
      border: 1px solid white;
      cursor: pointer;
      opacity: 0.7;
    }
    .color-btn.active {
      height: 40px;
      width: 40px;
      border: 2px solid white;
    }
    .bg-hammer {
      background-color: #eee;
    }
    .shot-curler {
      width: 240px;
      padding: 2px;
      height: auto;
    }
    .shot-turn, .shot-throw, .shot-rating {
      width: 40px;
      padding: 0;
      height: auto;
    }
    .border-3 {
      border-width: 3px !important;
    }
  </style>
</head>
<body>
  <div class="container pt-2">
    <div id="scoring"></div>
  </div>
  <script>
    var scoring = Elm.Scoring.init(
      {
        node: document.getElementById("scoring"),
        flags: { baseUrl: "http://canada.curling.test:3000/en/admin/events/22097" }
        // flags: { baseUrl: "http://demo.curling.test:3000/en/admin/events/3743" }
      }
    )

    scoring.ports.sendMessage.subscribe(function(msg) {
      if (msg == "focusNext" && document.activeElement) {
        let i = document.activeElement.tabIndex
        if (i >= 0) {
          let iNext = document.querySelectorAll("[tabindex='"+(i+1)+"']")
          if (iNext.length > 0) {
            let elNext = iNext[0].getAttribute('id')
            document.getElementById(elNext).focus()
          }
        }
      }
    })
  </script>
</body>
</html>