Skip to content

Commit

Permalink
removed dependancy on images for design. Now uses CSS grid?
Browse files Browse the repository at this point in the history
  • Loading branch information
@gawainhewitt
gawainhewitt committed Sep 20, 2022
1 parent 714350a commit 7775109
Show file tree
Hide file tree
Showing 7 changed files with 86 additions and 181 deletions.
3 changes: 2 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
# Local Netlify folder
.netlify
.netlify
dist
81 changes: 25 additions & 56 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,102 +107,71 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
float: right;
}

#notesDiv {
display: none;
grid-template-columns: 33% 33% 33%;
}

#image0 {
margin: 0px;
padding: 0px;
height: auto;
width: 32.6%;
float: left;
text-align: center;
height: 30vh;
background-color: rgb(255, 255, 0);
visibility: hidden;

}
#image1 {
margin: 0px;
padding: 0px;
height: auto;
width: 32.6%;
float: left;
text-align: center;
height: 30vh;
background-color: rgb(0,0,255);
visibility: hidden;

}

#image2 {
margin: 0px;
padding: 0px;
height: auto;
width: 32.6%;
float: left;
text-align: center;
height: 30vh;
background-color: rgb(255, 255, 0);
visibility: hidden;

}

#image3 {
margin: 0px;
padding: 0px;
height: auto;
width: 32.6%;
float: left;
text-align: center;
height: 30vh;
background-color: rgb(0,0,255);
visibility: hidden;

}

#image4 {
margin: 10;
padding: 0px;
height: auto;
width: 32.6%;
float: left;
text-align: center;
background-color: rgb(255, 255, 0);
visibility: hidden;
text-align: center;
height: 30vh;
background-color: rgb(255, 255, 0);

}

#image5 {
margin: 0px;
padding: 0px;
height: auto;
width: 32.6%;
float: left;
text-align: center;
height: 30vh;
background-color: rgb(0,0,255);
visibility: hidden;

}

#image6 {
margin: 0px;
padding: 0px;
height: auto;
width: 32.6%;
float: left;
text-align: center;
height: 30vh;
background-color: rgb(255, 255, 0);
visibility: hidden;

}

#image7 {
margin: 0px;
padding: 0px;
height: auto;
width: 32.6%;
float: left;
text-align: center;
height: 30vh;
background-color: rgb(0,0,255);
visibility: hidden;

}

#image8 {
margin: 0px;
padding: 0px;
height: auto;
width: 32.6%;
float: left;
text-align: center;
height: 30vh;
background-color: rgb(255, 255, 0);
visibility: hidden;

}

div.img img {
Expand Down
81 changes: 25 additions & 56 deletions dist/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,102 +107,71 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
float: right;
}

#notesDiv {
display: none;
grid-template-columns: 33% 33% 33%;
}

#image0 {
margin: 0px;
padding: 0px;
height: auto;
width: 32.6%;
float: left;
text-align: center;
height: 30vh;
background-color: rgb(255, 255, 0);
visibility: hidden;

}
#image1 {
margin: 0px;
padding: 0px;
height: auto;
width: 32.6%;
float: left;
text-align: center;
height: 30vh;
background-color: rgb(0,0,255);
visibility: hidden;

}

#image2 {
margin: 0px;
padding: 0px;
height: auto;
width: 32.6%;
float: left;
text-align: center;
height: 30vh;
background-color: rgb(255, 255, 0);
visibility: hidden;

}

#image3 {
margin: 0px;
padding: 0px;
height: auto;
width: 32.6%;
float: left;
text-align: center;
height: 30vh;
background-color: rgb(0,0,255);
visibility: hidden;

}

#image4 {
margin: 10;
padding: 0px;
height: auto;
width: 32.6%;
float: left;
text-align: center;
background-color: rgb(255, 255, 0);
visibility: hidden;
text-align: center;
height: 30vh;
background-color: rgb(255, 255, 0);

}

#image5 {
margin: 0px;
padding: 0px;
height: auto;
width: 32.6%;
float: left;
text-align: center;
height: 30vh;
background-color: rgb(0,0,255);
visibility: hidden;

}

#image6 {
margin: 0px;
padding: 0px;
height: auto;
width: 32.6%;
float: left;
text-align: center;
height: 30vh;
background-color: rgb(255, 255, 0);
visibility: hidden;

}

#image7 {
margin: 0px;
padding: 0px;
height: auto;
width: 32.6%;
float: left;
text-align: center;
height: 30vh;
background-color: rgb(0,0,255);
visibility: hidden;

}

#image8 {
margin: 0px;
padding: 0px;
height: auto;
width: 32.6%;
float: left;
text-align: center;
height: 30vh;
background-color: rgb(255, 255, 0);
visibility: hidden;

}

div.img img {
Expand Down
42 changes: 13 additions & 29 deletions dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,35 +94,19 @@ <h1>loading...<br>loading...<br>loading...<br>loading...<br>loading...<br>loadin
<br>
<br>
</div>

<div id="image0">
<img src="images/image0.png" alt="One" width="1250" height="1250" id="i0">
</div>
<div id="image1">
<img src="images/image1.png" alt="One" width="1250" height="1250" id="i1">
</div>
<div id="image2">
<img src="images/image2.png" alt="One" width="1250" height="1250" id="i2">
</div>
<div id="image3">
<img src="images/image3.png" alt="One" width="1250" height="1250" id="i3">
</div>
<div id="image4">
<img src="images/image4.png" alt="One" width="1250" height="1250" id="i4">
</div>
<div id="image5">
<img src="images/image5.png" alt="One" width="1250" height="1250" id="i5">
</div>
<div id="image6">
<img src="images/image6.png" alt="One" width="1250" height="1250" id="i6">
</div>
<div id="image7">
<img src="images/image7.png" alt="One" width="1250" height="1250" id="i7">
</div>
<div id="image8">
<img src="images/image8.png" alt="One" width="1250" height="1250" id="i8">
</div>
<span class="clear"></span> <!-- this keeps the above elements within the parent div-->
<div id="notesDiv">
<div id="image0">C</div>
<div id="image1">D</div>
<div id="image2">E</div>
<div id="image3">F</div>
<div id="image4">G</div>
<div id="image5">A</div>
<div id="image6">B</div>
<div id="image7">C</div>
<div id="image8">D</div>
</div>

<!-- <span class="clear"></span> this keeps the above elements within the parent div -->
</div>

<script src="sketch.js"></script>
Expand Down
9 changes: 4 additions & 5 deletions dist/sketch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,7 @@ function startHorn() {
var welcome = document.getElementById('welcomescreen');
welcome.style.visibility="hidden";
welcome.innerHTML = "";
for(let i = 0; i<9; i++){
document.getElementById(`image${i}`).style.visibility="visible";
}
document.getElementById("notesDiv").style.display = "grid";
if(info === true) { // is the info screen on?
Tone.start(); // we need this to allow audio to start. probably best to put it on a different button soon though
info = false;
Expand Down Expand Up @@ -214,6 +212,7 @@ function handleMouseDown(evt) {
if(elem === "image"+i){ // this looks confusing because the id name also contains "i" - see that HTML
playSynth(i); // call the playSynth function
whichClicked[i] = 1; //store the click in an array as a boolean true
console.log(`whichClicked ${whichClicked}`)
}
}

Expand Down Expand Up @@ -494,12 +493,12 @@ synth.set( // setup the synth - this is audio stuff really

function playSynth(i) {
sampler.triggerAttack(notes[i], Tone.now());
document.getElementById(`i${i}`).style.backgroundColor="magenta";
document.getElementById(`image${i}`).style.backgroundColor="magenta";
}

var col = ["rgb(255, 255, 0)", "rgb(0,0,255)", "rgb(255, 255, 0)", "rgb(0,0,255)", "rgb(255, 255, 0)", "rgb(0,0,255)", "rgb(255, 255, 0)", "rgb(0,0,255)", "rgb(255, 255, 0)"]; //colour of button

function stopSynth(i) {
sampler.triggerRelease(notes[i], Tone.now());
document.getElementById(`i${i}`).style.backgroundColor=col[i];
document.getElementById(`image${i}`).style.backgroundColor=col[i];
}
42 changes: 13 additions & 29 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,35 +94,19 @@ <h1>loading...<br>loading...<br>loading...<br>loading...<br>loading...<br>loadin
<br>
<br>
</div>

<div id="image0">
<img src="images/image0.png" alt="One" width="1250" height="1250" id="i0">
</div>
<div id="image1">
<img src="images/image1.png" alt="One" width="1250" height="1250" id="i1">
</div>
<div id="image2">
<img src="images/image2.png" alt="One" width="1250" height="1250" id="i2">
</div>
<div id="image3">
<img src="images/image3.png" alt="One" width="1250" height="1250" id="i3">
</div>
<div id="image4">
<img src="images/image4.png" alt="One" width="1250" height="1250" id="i4">
</div>
<div id="image5">
<img src="images/image5.png" alt="One" width="1250" height="1250" id="i5">
</div>
<div id="image6">
<img src="images/image6.png" alt="One" width="1250" height="1250" id="i6">
</div>
<div id="image7">
<img src="images/image7.png" alt="One" width="1250" height="1250" id="i7">
</div>
<div id="image8">
<img src="images/image8.png" alt="One" width="1250" height="1250" id="i8">
</div>
<span class="clear"></span> <!-- this keeps the above elements within the parent div-->
<div id="notesDiv">
<div id="image0">C</div>
<div id="image1">D</div>
<div id="image2">E</div>
<div id="image3">F</div>
<div id="image4">G</div>
<div id="image5">A</div>
<div id="image6">B</div>
<div id="image7">C</div>
<div id="image8">D</div>
</div>

<!-- <span class="clear"></span> this keeps the above elements within the parent div -->
</div>

<script src="sketch.js"></script>
Expand Down
Loading

0 comments on commit 7775109

Please sign in to comment.