Skip to content

Commit

Permalink
make mobile ready and fix logic issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@inoejovichmm
inoejovichmm committed Apr 16, 2024
1 parent e472275 commit ae56daf
Show file tree
Hide file tree
Showing 9 changed files with 119 additions and 47 deletions.
8 changes: 0 additions & 8 deletions .idea/.gitignore
View file

This file was deleted.

4 changes: 1 addition & 3 deletions .idea/earcoach.iml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion .idea/jsLibraryMappings.xml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion .idea/modules.xml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion .idea/vcs.xml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

65 changes: 65 additions & 0 deletions .idea/workspace.xml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

76 changes: 46 additions & 30 deletions harmoniccontext/index.html
View file
Original file line number Diff line number Diff line change
@@ -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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
Expand All @@ -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">
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion harmoniccontext/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
5 changes: 3 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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;">
Expand Down

0 comments on commit ae56daf

Please sign in to comment.