first commit

2 files changed, 241 insertions, 0 deletions

diff --git a/apps/tools/static/tools/css/hangboard-timer.css b/apps/tools/static/tools/css/hangboard-timer.css
new file mode 100644
index 0000000..afee9bd
--- /dev/null
+++ b/apps/tools/static/tools/css/hangboard-timer.css
@@ -0,0 +1,115 @@
+:root {
+    --bg-action: #923737;
+    --bg-pause: #416e46;
+}
+
+body {
+    transition: background-color 0.3s ease;
+}
+
+main {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+    display: grid;
+    grid-template-rows: auto auto auto auto;
+    row-gap: 40px;
+    min-height: 100vh;
+    align-content: center;
+}
+
+h1 {
+    font-size: 2.5rem;
+    color: #e8e6e3;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+p {
+    font-size: 1.1rem;
+    color: #b0b0b0;
+}
+
+p a {
+    color: #4ecdc4;
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+p a:hover {
+    color: #ff6b6b;
+}
+
+.timer-container {
+    display: grid;
+    grid-template-rows: 14vh 12vh 12vh auto;
+    gap: 4vh;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 2rem;
+    border-radius: 15px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.timer-container #countdown {
+    height: 14vh;
+    font-size: 14vh;
+    font-weight: bold;
+    color: #e8e6e3;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+}
+
+.timer-container #exercise_state {
+    max-height: 12vh;
+    height: 12vh;
+    font-size: clamp(1rem, 6vw, 4.5rem);
+    color: #b0b0b0;
+    transition: color 0.3s ease;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+}
+
+.timer-container #exercise_name {
+    height: 12vh;
+    font-size: clamp(1rem, 6vw, 4.5rem);
+    line-height: 1;
+    white-space: nowrap;
+
+    color: #b0b0b0;
+    transition: color 0.3s ease;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+}
+
+.button-container {
+    display: flex;
+    justify-content: center;
+    gap: 2rem;
+}
+
+.button-container #btn-start, .button-container #btn-reset {
+    font-size: 1.3rem;
+    padding: 0.8rem 2rem;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    background-color: #4ecdc4;
+    color: #fff;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    transition: transform 0.2s ease, background-color 0.2s ease;
+}
+
+.button-container #btn-start:hover, .button-container #btn-reset:hover {
+    background-color: #45b7b0;
+    transform: translateY(-2px);
+}
+
+.button-container #btn-reset {
+    background-color: #ff6b6b;
+}
+
+.button-container #btn-reset:hover {
+    background-color: #e65b5b;
+}
+
diff --git a/apps/tools/static/tools/js/hangboard-timer.js b/apps/tools/static/tools/js/hangboard-timer.js
new file mode 100644
index 0000000..5949ab2
--- /dev/null
+++ b/apps/tools/static/tools/js/hangboard-timer.js
@@ -0,0 +1,126 @@
+let HangboardTimer = {
+    exercise_names: ["Half-Crimp", "3-Finger Drag", "Front 2-Finger Drag", "Middle 2-Finger Drag", "Front 2-Finger Crimp", "Middle 2-Finger Crimp"],
+    exercise_reps: [6, 6, 2, 2, 2, 2],
+    action_duration: 10,
+    pause_duration: 20,
+    start: function() {
+        this.el_body = document.body;
+        this.el_countdown = document.getElementById("countdown");
+        this.el_exercise_state = document.getElementById("exercise_state");
+        this.el_exercise_name = document.getElementById("exercise_name");
+        if (!this.el_body || !this.el_countdown || !this.el_exercise_state || !this.el_exercise_name || !this.exercise_names.length) {
+            console.error("Missing required elements or exercises");
+            return;
+        }
+        this.audioContext = this.audioContext || new (window.AudioContext || window.webkitAudioContext)();
+
+        this.reset();
+        this.show_state();
+
+        this.interval_id = setInterval(this.update.bind(this), 100);
+    },
+    reset: function() {
+        clearInterval(this.interval_id);
+        this.interval_id = 0;
+        this.exercise_index = 0;
+        this.exercise_rep = 1;
+        this.is_paused = true;
+        this.timer = this.pause_duration;
+        this.last_timestamp = performance.now();
+        this.el_body.style.backgroundColor = "var(--bg-default)";
+        this.el_countdown.textContent = "";
+        this.el_exercise_state.textContent = "";
+        this.el_exercise_name.textContent = "";
+    },
+    update: function() {
+        const current_timestamp = performance.now()
+        const elapsed = (current_timestamp - this.last_timestamp) / 1000;
+
+        this.last_timestamp = current_timestamp;
+        this.timer -= elapsed;
+
+        if (this.timer <= 3 && !this.beep_triggered) {
+            this.play_beeps();
+            this.beep_triggered = true;
+        }
+        if (this.timer <= 0) {
+            const phase_switched = this.switch_phase();
+            if (!phase_switched) {
+                this.finish();
+                return;
+            }
+        }
+
+        this.show_state();
+    },
+    switch_phase: function() {
+        if (this.is_paused) {
+            this.timer = this.action_duration;
+            this.is_paused = false;
+        }
+        else {
+            this.timer = this.pause_duration;
+            this.is_paused = true;
+            if (this.exercise_rep == this.exercise_reps[this.exercise_index]) {
+                this.exercise_index += 1;
+                this.exercise_rep = 1;
+                if (this.exercise_index >= this.exercise_names.length) {
+                    return false;
+                }
+            }
+            else {
+                this.exercise_rep += 1;
+            }
+        }
+        this.beep_triggered = false;
+        return true;
+    },
+    show_state: function() {
+        this.el_countdown.textContent = Math.ceil(this.timer);
+        if (this.is_paused) {
+            this.el_body.style.backgroundColor = "var(--bg-pause)";
+            this.el_exercise_state.textContent = "Upcoming:";
+        }
+        else {
+            this.el_body.style.backgroundColor = "var(--bg-action)";
+            this.el_exercise_state.textContent = "Currently:";
+        }
+        const name = this.exercise_names[this.exercise_index];
+        const rep = this.exercise_rep;
+        const reps = this.exercise_reps[this.exercise_index];
+        this.el_exercise_name.textContent = `${name} (${rep}/${reps})`;
+    },
+    play_beeps: function() {
+        const now = this.audioContext.currentTime;
+        const oscillator = this.audioContext.createOscillator();
+        const gain_node = this.audioContext.createGain();
+        oscillator.connect(gain_node);
+        gain_node.connect(this.audioContext.destination);
+
+        oscillator.type = 'sine';
+        oscillator.frequency.value = 400;
+        oscillator.frequency.setValueAtTime(500, now + 3.0);
+
+        oscillator.start(now);
+        gain_node.gain.setValueAtTime(0.5, now);
+        gain_node.gain.setValueAtTime(0, now + 0.5);
+        gain_node.gain.setValueAtTime(0.5, now + 1.0);
+        gain_node.gain.setValueAtTime(0, now + 1.5);
+        gain_node.gain.setValueAtTime(0.5, now + 2.0);
+        gain_node.gain.setValueAtTime(0, now + 2.5);
+        gain_node.gain.setValueAtTime(0.5, now + 3.0);
+        gain_node.gain.setValueAtTime(0, now + 3.5);
+        oscillator.stop(now + 3.5);
+    },
+    finish: function() {
+        this.el_exercise_state.textContent = "";
+        this.el_exercise_name.textContent = "";
+        this.el_countdown.textContent = "Done.";
+        this.el_body.style.backgroundColor = "var(--bg-default)";
+        clearInterval(this.interval_id);
+        this.interval_id = 0;
+    }
+}
+
+document.getElementById('btn-start').addEventListener('click', () => HangboardTimer.start());
+document.getElementById('btn-reset').addEventListener('click', () => HangboardTimer.reset());