bridge-clock/clock.html at master · duaneg/bridge-clock · 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!doctype html>
<html lang="en">
  <!-- Copyright Duane Griffin
     * CSS
     * Blurb at top
     * Lint, validate, etc
     * Review instructions
     * Persist chosen defaults ("save" button?)
     * Update input fields after "escape"
  -->
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Duplicate Bridge Round Timer</title>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/buzz/1.1.10/buzz.min.js"></script>
    <script src="clock.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="main.css" title="main"/>
    <link rel="stylesheet" type="text/css" href="clock.css" title="clock" disabled="true"/>
    <script type="text/javascript">
      var clock;

      var inputs = {
        "round": "1",
        "rounds": "",
        "duration_mins": "13",
        "duration_secs": "0",
        "warning_mins" : "0",
        "warning_secs": "30"
      }

      function input_form(name) {
        return "#intro input[name='" + name + "']";
      }

      function reset_form() {
        for (var key in inputs) {
          $(input_form(key)).val(inputs[key])
        }
      }

      function create() {
        var clock_data = {}
        for (var key in inputs) {
          clock_data[key] = $(input_form(key)).val();
        }
        return create_clock(clock_data);
      }

      function handle_key_press(evt) {
        var input = $(evt.target).closest("input")[0];
        if (evt.which == 27 && input !== undefined) {

          // Escape pressed in text field: clear focus
          input.blur();
          evt.stopPropagation();
        } else if (evt.which == 32 && clock === undefined) {

          // Space pressed: start clock
          clock = create();
          $("#clock").empty();
          $("#clock").append(clock.dom);
          $("#intro").css("display", "none");
          $("link[title=main]")[0].disabled = false;
          $("link[title=clock]")[0].disabled = false;
          $(document).keydown(clock.keydownHandler);
          clock.start();
          evt.stopPropagation();
        } else if (evt.which == 82) {

          // "r" pressed: reset form and don't pass it through to text field
          reset_form();
          evt.preventDefault();
          evt.stopPropagation();
        } else if (evt.which == 27 && clock !== undefined) {

          // Escape pressed while clock started: stop clock
          clock.stop();
          $("#clock").empty();
          $("#intro").css("display", "block");
          $("link[title=main]")[0].disabled = false;
          $("link[title=clock]")[0].disabled = true;
          $(document).unbind("keydown", clock.keydownHandler);
          clock = undefined;
          evt.stopPropagation();
        }
      }

      window.onload = function() {
        $("link[title='clock']").disabled = true;
        $(document).keydown(handle_key_press)
        reset_form();
      };
    </script>
  </head>
  <body>
    <div id="intro" class="container">
      <div class="jumbotron">
        <h1>Duplicate Bridge Round Timer</h1>
        <p>An HTML/JavaScript round timer for duplicate bridge clubs.</p>
      </div>
      <div class="page-header">
        <h2>Timer Settings</h2>
        <form id="clock-settings">
          <div class="col-1">Round: </div><div class="col-2"><input type="text" name="round" size="2" maxlength="3"> of <input type="text" name="rounds" size="2" maxlength="3"></div>
          <div class="col-1">Duration: </div><div class="col-2"><input type="text" name="duration_mins" size="2" maxlength="2"> : <input type="text" name="duration_secs" size="2" maxlength="2"></div>
          <div class="col-1">Warning with: </div><div class="col-2"><input type="text" name="warning_mins" size="2" maxlength="2"> : <input type="text" name="warning_secs" size="2" maxlength="2"> remaining</div>
        </form>
      </div>
      <div class="page-header">
        <h2>Instructions</h2>
        <p>Press "r" to reset the form values to their defaults. Press space to start the clock.</p>
        <p>Once started press space to pause/restart the clock, "[" or "]" to reduce/increase the time in the round by 1 minute, "n" to skip to the next round, or escape to stop the clock and return to this page.</p>
      </div>
    </div>
    <div id="clock"></div>
  </body>
</html>