First working version

samuelgfeller · Jul 13, 2023 · 783adde · 783adde
commit 783adde
Show file tree

Hide file tree

Showing 7 changed files with 262 additions and 0 deletions.
diff --git a/.github/workflows/deployment.yml b/.github/workflows/deployment.yml
@@ -0,0 +1,35 @@
+name: 🚀 Deployment
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    types: [ opened, synchronize, reopened ]
+
+jobs:
+  run:
+    runs-on: ubuntu-latest
+    name: Deploy PHP application
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: 8.1
+          # extensions: mbstring, pdo, pdo_mysql, intl, zip
+          coverage: none
+
+      - name: 📂 Sync files
+        uses: SamKirkland/[email protected]
+        with:
+          server: ${{ secrets.FTP_HOST }}
+          username: ${{ secrets.FTP_USERNAME }}
+          password: ${{ secrets.FTP_PASSWORD }}
+          server-dir: /
+          exclude: |
+            .git*/**
diff --git a/fonts/VarelaRound-Regular.ttf b/fonts/VarelaRound-Regular.ttf
diff --git a/img/guitar.ico b/img/guitar.ico
diff --git a/index.php b/index.php
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="icon" type="image/x-icon" href="img/guitar.ico">
+    <title>Guitar trainer</title>
+</head>
+<body>
+<header>
+    <!--<label for="bpm-input">Metronome BPM</label>-->
+    <span id="mute-metronome">🔊</span>
+    <input type="number" value="60" id="bpm-input">
+    <button id="submit-btn">Start</button>
+</header>
+<main>
+    <div>
+        <span class="visible-when-game-on">String</span>
+        <span class="note-value-span visible-when-game-on" id="string-span"></span>
+    </div>
+    <div>
+        <span class="visible-when-game-on">Note</span>
+        <span class="note-value-span visible-when-game-on" id="note-span"></span>
+    </div>
+</main>
+<script type="module" src="metronome.js?v=<?= mt_rand(1, 1000) ?>"></script>
+</body>
+</html>
+<?php
diff --git a/metronome.js b/metronome.js
@@ -0,0 +1,69 @@
+import {displayRandomNote} from "./note-game.js";
+
+let audioContext = null;
+const startButton = document.getElementById('submit-btn');
+const bpmInput = document.getElementById('bpm-input');
+let timerId = null;
+let playSound = true;
+
+let gameElements = document.querySelectorAll('.visible-when-game-on');
+
+startButton.addEventListener('click', startButtonClickHanlder);
+document.body.addEventListener('dblclick', startButtonClickHanlder);
+function startButtonClickHanlder(){
+    if (timerId === null) {
+        startMetronome();
+        startButton.innerText = 'Stop';
+        gameElements.forEach(element => {
+            element.style.display = 'block';
+        });
+    } else {
+        stopMetronome();
+        startButton.innerText = 'Start';
+        gameElements.forEach(element => {
+            element.style.display = 'none';
+        });
+    }
+}
+// Mute metronome
+const muteMetronomeSpan = document.querySelector('#mute-metronome');
+muteMetronomeSpan.addEventListener('click', () => {
+    if (muteMetronomeSpan.innerHTML === '🔊') {
+        muteMetronomeSpan.innerHTML = '🔇';
+        playSound = false;
+    } else {
+        muteMetronomeSpan.innerHTML = '🔊';
+        playSound = true;
+    }
+});
+
+function startMetronome() {
+    const bpm = parseInt(bpmInput.value);
+    const interval = 60000 / bpm; // Convert BPM to milliseconds
+    if (audioContext === null) {
+        audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    }
+    playClickSound(); // Play the initial click sound
+    timerId = setInterval(() => {
+        playClickSound();
+    }, interval); // Start the metronome
+    // startButton.disabled =  true;
+}
+
+function stopMetronome() {
+    clearInterval(timerId);
+    timerId = null;
+    startButton.disabled = false;
+}
+
+function playClickSound() {
+    // Game specific
+    displayRandomNote();
+    if (playSound === true) {
+        const oscillator = audioContext.createOscillator();
+        oscillator.connect(audioContext.destination);
+        oscillator.frequency.value = 200; // Adjust the pitch of the click sound if needed
+        oscillator.start();
+        oscillator.stop(audioContext.currentTime + 0.1); // Adjust the duration of the click sound if needed
+    }
+}
diff --git a/note-game.js b/note-game.js
@@ -0,0 +1,17 @@
+const notes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
+const strings = ['D', 'E', 'G', 'A', 'B'];
+
+function getRandomNote() {
+    const randomIndex = Math.floor(Math.random() * notes.length);
+    return notes[randomIndex];
+}
+function getRandomString() {
+    const randomIndex = Math.floor(Math.random() * strings.length);
+    return strings[randomIndex];
+}
+
+export function displayRandomNote() {
+    const noteSpan = document.getElementById('note-span');
+    noteSpan.innerHTML = getRandomNote();
+    document.getElementById('string-span').innerHTML = getRandomString();
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,110 @@
+@font-face {
+    font-family: VarelaRound;
+    src: url(fonts/VarelaRound-Regular.ttf);
+    font-weight: 400;
+}
+
+@media (min-width: 100px) {
+    * {
+        box-sizing: border-box;
+        font-family: VarelaRound, sans-serif, serif;
+        font-size: 20px;
+        color: whitesmoke;
+    }
+
+    body, html {
+        min-height: 100vh;
+        margin: 0;
+        padding: 0;
+    }
+
+    body {
+        background: #3d1f0b;
+    }
+
+    header {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 20px;
+        width: 100%;
+        justify-content: space-evenly;
+        align-items: center;
+        padding: 50px 0;
+    }
+
+    #bpm-input {
+        font-size: 20px;
+        text-align: center;
+        background: transparent;
+        color: whitesmoke;
+        border: none;
+        border-bottom: 2px dashed #8a8a8a;
+        padding: 5px 10px;
+        width: 90px;
+    }
+
+    #submit-btn {
+        padding: 8px 14px;
+        border: none;
+        background: transparent;
+        border-radius: 10px;
+        color: whitesmoke;
+        font-size: 17px;
+        box-sizing: border-box;
+        cursor: pointer;
+    }
+
+    #submit-btn:hover {
+        /*border-bottom: 2px dotted #8a8a8a;*/
+        background: rgba(255, 255, 255, .1);
+    }
+
+    #mute-metronome {
+        cursor: pointer;
+    }
+
+    main {
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+        /*flex-wrap: wrap;*/
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        margin-top: 50px;
+    }
+
+    main div {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 15px;
+    }
+
+    main div span {
+        width: 100%;
+    }
+
+    .note-value-span {
+        font-size: 100px;
+        font-weight: bold;
+        color: #919191;
+    }
+
+    .visible-when-game-on{
+        display: none;
+    }
+}
+
+@media (min-width: 641px) {
+    header {
+        justify-content: center;
+        column-gap: 60px;
+    }
+    main {
+        justify-content: center;
+        gap: 10vw;
+    }
+}
+
+@media (min-width: 961px) {
+}