unimelb-projects/ccdp10003-project01
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fade intro out, fade controls in

Browse source
This commit is contained in:
Rory Healy 2023-04-18 19:17:40 +10:00
parent 287c588ec6
commit 4a3a4a4dd1
Signed by: roryhealy
GPG key ID: 610ED1098B8F435B
3 changed files with 69 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
index.html
View file

@ -8,25 +8,24 @@
</head> </head>
<body> <body>
<main class="wrapper"> <main>
<section class="centre"> <section class="centre">
<button id="button" onclick="begin()">Click to begin</button> <button id="begin" onclick="begin()">Click to begin</button>
</section> </section>
<footer>
<p id="title">The Myrtle Tree - A game about sound and reliving memories.</p>
<section class="controls">
<button id="playPause" class="controlButton" onclick="playPauseAudio()">
<img class="controlImage" src="public/images/play.svg" alt="play"></img>
</button>
<button id="stop" class="controlButton" onclick="stopAudio()">
<img class="controlImage" src="public/images/stop.svg" alt="stop"></img>
</button>
<audio id="backgroundAudio" src="public/audio/roli.weba" type="audio/weba">
</section>
<p id="credits">By Rory Healy.</p>
</footer>
</main> </main>
<script src="main.js"></script> <footer>
<p class="credits" id="title">The Myrtle Tree - A pitch for a game about sound and reliving memories.</p>
<section class="controls">
<button id="playPause" class="controlButtonOff" onclick="playPauseAudio()">
<img class="controlImage" src="public/images/play.svg" alt="play"></img>
</button>
<button id="stop" class="controlButtonOff" onclick="stopAudio()">
<img class="controlImage" src="public/images/stop.svg" alt="stop"></img>
</button>
<audio id="backgroundAudio" src="public/audio/roli.weba" type="audio/weba">
</section>
<p class="credits" id="credits">By Rory Healy.</p>
</footer> <script src="main.js"></script>
</body> </body>
</html> </html>

24
main.js
View file

@ -1,6 +1,6 @@
const backgroundAudio = document.getElementById("backgroundAudio"); const backgroundAudio = document.getElementById("backgroundAudio");
const playPauseButton = document.getElementById("playPause") const playPauseButton = document.getElementById("playPause");
let audioPlaying = false let audioPlaying = false;
const playPauseAudio = () => { const playPauseAudio = () => {
if (audioPlaying === true) { if (audioPlaying === true) {
@ -21,10 +21,18 @@ const stopAudio = () => {
}; };
const begin = () => { const begin = () => {
// First pause the audio // Switch credits to media controls
playPauseAudio(); document.querySelector('#begin').id = 'beginOff';
for (let element of document.querySelectorAll('.credits')) {
// Then fade everything out element.id = 'creditsOff';
}
// Finally, load in the new content setTimeout(() => {
for (let element of document.querySelectorAll('.credits')) {
element.style.display = 'none';
}
for (let element of document.querySelectorAll('.controlButtonOff')) {
element.className = 'controlButtonOn';
}
}, 1000);
playPauseAudio()
}; };

47
styles.css
View file

@ -12,24 +12,27 @@
--card-border-rgb: 131, 134, 135; --card-border-rgb: 131, 134, 135;
} }
* {
margin: 0;
padding: 0;
}
body { body {
color: rgb(var(--foreground-rgb)); color: rgb(var(--foreground-rgb));
background: rgb(var(--background-rgb)); background: rgb(var(--background-rgb));
} }
.wrapper { main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around;
align-items: center; align-items: center;
margin: 10dvh 10dvw;
} }
.centre { .centre {
margin: 25vh 0; margin: 40vh 0;
} }
.centre #button { .centre #begin {
background: rgb(var(--card-rgb)); background: rgb(var(--card-rgb));
border: 1px solid rgb(var(--card-border-rgb)); border: 1px solid rgb(var(--card-border-rgb));
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -37,10 +40,22 @@ body {
transition: background 200ms, border 200ms; transition: background 200ms, border 200ms;
} }
.centre #beginOff {
visibility: none;
opacity: 0;
transition: visibility 0.3s, opacity 0.3s linear;
background: rgb(var(--card-rgb));
border: 1px solid rgb(var(--card-border-rgb));
border-radius: var(--border-radius);
padding: 1rem 1.2rem;
}
footer { footer {
display: grid; position: fixed;
width: 100%; width: 100%;
grid-template-columns: repeat(3, 1fr); bottom: 5dvh;
display: flex;
justify-content: space-evenly;
align-items: center; align-items: center;
} }
@ -48,11 +63,25 @@ footer section {
justify-self: center; justify-self: center;
} }
footer #credits { #credits {
text-align: right; text-align: right;
} }
.controlButton { #creditsOff {
visibility: none;
opacity: 0;
transition: visibility 0.3s, opacity 0.3s linear;
}
.controlButtonOff {
visibility: none;
opacity: 0;
}
.controlButtonOn {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
border-radius: var(--border-radius); border-radius: var(--border-radius);
background: none; background: none;
border: none; border: none;