From ae56daf8997c32b99fbd04c3adb2a4a4cd0fd6e9 Mon Sep 17 00:00:00 2001
From: Ianick Noejovich <ianick.noejovich@mediamonks.com>
Date: Tue, 16 Apr 2024 12:54:46 -0300
Subject: [PATCH] make mobile ready and fix logic issues

---
 .idea/.gitignore            |  8 ----
 .idea/earcoach.iml          |  4 +-
 .idea/jsLibraryMappings.xml |  2 +-
 .idea/modules.xml           |  2 +-
 .idea/vcs.xml               |  2 +-
 .idea/workspace.xml         | 65 +++++++++++++++++++++++++++++++
 harmoniccontext/index.html  | 76 ++++++++++++++++++++++---------------
 harmoniccontext/index.js    |  2 +-
 index.html                  |  5 ++-
 9 files changed, 119 insertions(+), 47 deletions(-)
 delete mode 100644 .idea/.gitignore
 create mode 100644 .idea/workspace.xml

diff --git a/.idea/.gitignore b/.idea/.gitignore
deleted file mode 100644
index 13566b8..0000000
--- a/.idea/.gitignore
+++ /dev/null
@@ -1,8 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/
-# Datasource local storage ignored files
-/dataSources/
-/dataSources.local.xml
diff --git a/.idea/earcoach.iml b/.idea/earcoach.iml
index 8d6822b..2844a13 100644
--- a/.idea/earcoach.iml
+++ b/.idea/earcoach.iml
@@ -4,10 +4,8 @@
     <content url="file://$MODULE_DIR$" />
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
-    <orderEntry type="library" name="timbre" level="application" />
+    <orderEntry type="library" name="bootstrap" level="application" />
     <orderEntry type="library" name="WebAudioFontPlayer" level="application" />
-    <orderEntry type="library" name="0250_SoundBlasterOld_sf2" level="application" />
     <orderEntry type="library" name="0000_Aspirin_sf2_file" level="application" />
-    <orderEntry type="library" name="bootstrap" level="application" />
   </component>
 </module>
\ No newline at end of file
diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml
index c414bcb..bbf5627 100644
--- a/.idea/jsLibraryMappings.xml
+++ b/.idea/jsLibraryMappings.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="JavaScriptLibraryMappings">
-    <file url="PROJECT" libraries="{0000_Aspirin_sf2_file, 0250_SoundBlasterOld_sf2, WebAudioFontPlayer, bootstrap, timbre}" />
+    <file url="file://$PROJECT_DIR$/harmoniccontext/index.html" libraries="{0000_Aspirin_sf2_file, WebAudioFontPlayer, bootstrap}" />
   </component>
 </project>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
index 813fd62..ce27a4c 100644
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -2,7 +2,7 @@
 <project version="4">
   <component name="ProjectModuleManager">
     <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/harmoniccoach.iml" filepath="$PROJECT_DIR$/.idea/harmoniccoach.iml" />
+      <module fileurl="file://$PROJECT_DIR$/.idea/earcoach.iml" filepath="$PROJECT_DIR$/.idea/earcoach.iml" />
     </modules>
   </component>
 </project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
index 94a25f7..35eb1dd 100644
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+    <mapping directory="" vcs="Git" />
   </component>
 </project>
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
new file mode 100644
index 0000000..700a00d
--- /dev/null
+++ b/.idea/workspace.xml
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
+  <component name="ChangeListManager">
+    <list default="true" id="a8fa91e6-82c2-4c7b-ae38-37d6829ba2a8" name="Changes" comment="">
+      <change afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/.gitignore" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/earcoach.iml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/earcoach.iml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/jsLibraryMappings.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/jsLibraryMappings.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/modules.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/modules.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/vcs.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/vcs.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/harmoniccontext/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/harmoniccontext/index.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/harmoniccontext/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/harmoniccontext/index.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
+    </list>
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="ComposerSettings">
+    <execution />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="ProjectColorInfo"><![CDATA[{
+  "associatedIndex": 6
+}]]></component>
+  <component name="ProjectId" id="2fBhryGMkkn2n1yRUVqo7ePxN00" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "git-widget-placeholder": "main",
+    "last_opened_file_path": "/Users/ianicknoejovich/workspace/earcoach",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.tslint": "(autodetect)",
+    "nodejs_package_manager_path": "npm",
+    "vue.rearranger.settings.migration": "true"
+  }
+}]]></component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="a8fa91e6-82c2-4c7b-ae38-37d6829ba2a8" name="Changes" comment="" />
+      <created>1713280580846</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1713280580846</updated>
+      <workItem from="1713280581840" duration="2282000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/harmoniccontext/index.html b/harmoniccontext/index.html
index 72e9826..b935c78 100644
--- a/harmoniccontext/index.html
+++ b/harmoniccontext/index.html
@@ -1,6 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Contexto Armónico</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
           integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
@@ -10,14 +13,35 @@
     <script src="https://surikov.github.io/webaudiofontdata/sound/0000_Aspirin_sf2_file.js"></script>
     <script src="index.js"></script>
     <style>
-        .circle {
+        .ratio1 {
             display: inline-block;
             aspect-ratio: 1;
-            border-radius: 50%;
+        }
+
+        .btn {
+            &:hover {
+                background-color: var(--bs-btn-bg);
+                color: var(--bs-btn-color);
+            }
+
+            &:focus {
+                background-color: var(--bs-btn-bg);
+                color: var(--bs-btn-color);
+            }
+
+            &.active {
+                &:hover {
+                    background-color: var(--bs-btn-active-bg);
+                    color: var(--bs-btn-active-color);
+                }
+
+                &:focus {
+                    background-color: var(--bs-btn-active-bg);
+                    color: var(--bs-btn-active-color);
+                }
+            }
         }
     </style>
-    <meta charset="UTF-8">
-    <title>Contexto Armónico</title>
 </head>
 <body>
 <div class="container text-center mt-5">
@@ -40,37 +64,29 @@ <h5>by iakanoe</h5>
         </div>
     </div>
 </div>
-<div class="container-sm border rounded text-center mt-5" style="padding: 1rem; max-width: 40rem;">
-    <div class="row">
-        <div class="col">
-            <h3>Contexto Armónico</h3>
-            Puntaje: <span id="score">0</span> de <span id="played">0</span>
-        </div>
+<div class="container-sm border rounded mt-5 d-flex flex-column gap-5 align-items-center p-4">
+    <div class="text-center">
+        <h3>Contexto Armónico</h3>
+        Puntaje: <span id="score">0</span> de <span id="played">0</span>
     </div>
-    <div class="row align-items-center" style="margin-top: 1rem;">
-        <div class="col">
-            <div class="border text-bg-primary align-content-center circle" style="padding: 1rem;">
-                <h5>Tonalidad:</h5>
-                <h2 id="key">F</h2>
-            </div>
+    <div class="d-flex flex-row justify-content-evenly align-items-center gap-5">
+        <div class="border text-bg-primary text-center align-content-center rounded-circle ratio1 p-4">
+            <h5>Tonalidad:</h5>
+            <h2 id="key">F</h2>
         </div>
-        <div class="col">
+        <div class="text-center">
             <button type="button" class="btn btn-secondary" onclick="play()">Escuchar</button>
-            <div style="margin-top: 1rem;">Veces escuchado: <span id="times">0</span></div>
+            <div class="mt-3">Veces escuchado: <span id="times">0</span></div>
         </div>
     </div>
-    <div class="row mt-5">
-        <div class="col">
-            <div class="d-flex gap-4 justify-content-center">
-                <button id="btn-grade0" type="button" class="btn btn-outline-dark" onclick="guess(0)">Do</button>
-                <button id="btn-grade1" type="button" class="btn btn-outline-dark" onclick="guess(1)">Re</button>
-                <button id="btn-grade2" type="button" class="btn btn-outline-dark" onclick="guess(2)">Mi</button>
-                <button id="btn-grade3" type="button" class="btn btn-outline-dark" onclick="guess(3)">Fa</button>
-                <button id="btn-grade4" type="button" class="btn btn-outline-dark" onclick="guess(4)">Sol</button>
-                <button id="btn-grade5" type="button" class="btn btn-outline-dark" onclick="guess(5)">La</button>
-                <button id="btn-grade6" type="button" class="btn btn-outline-dark" onclick="guess(6)">Ti</button>
-            </div>
-        </div>
+    <div class="d-flex flex-row justify-content-evenly flex-wrap column-gap-3 row-gap-2">
+        <button id="btn-grade0" type="button" class="btn btn-outline-dark" onclick="guess(0)">Do</button>
+        <button id="btn-grade1" type="button" class="btn btn-outline-dark" onclick="guess(1)">Re</button>
+        <button id="btn-grade2" type="button" class="btn btn-outline-dark" onclick="guess(2)">Mi</button>
+        <button id="btn-grade3" type="button" class="btn btn-outline-dark" onclick="guess(3)">Fa</button>
+        <button id="btn-grade4" type="button" class="btn btn-outline-dark" onclick="guess(4)">Sol</button>
+        <button id="btn-grade5" type="button" class="btn btn-outline-dark" onclick="guess(5)">La</button>
+        <button id="btn-grade6" type="button" class="btn btn-outline-dark" onclick="guess(6)">Ti</button>
     </div>
 </div>
 </body>
diff --git a/harmoniccontext/index.js b/harmoniccontext/index.js
index a9a5843..43cc4b8 100644
--- a/harmoniccontext/index.js
+++ b/harmoniccontext/index.js
@@ -61,7 +61,7 @@ function resetChallenge() {
     key = random(C, B)
     grade = random(0, 6)
     exampleOctave = random(3, 4)
-    octave = random(Math.min(exampleOctave - 1, 3), exampleOctave + 1)
+    octave = random(Math.max(exampleOctave - 1, 3), Math.min(exampleOctave + 1, 5))
     timesPlayed = 0
 
     resetButtons()
diff --git a/index.html b/index.html
index 73b5ea2..3c885e4 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>INA2 Coach</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
           integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
             integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
             crossorigin="anonymous"></script>
-    <meta charset="UTF-8">
-    <title>INA2 Coach</title>
 </head>
 <body>
 <div class="container text-center" style="margin-top: 5rem;">