Add pitch content, fix navigation cursors

credits

@@ -1,9 +0,0 @@
-Icons:
- - pause by Nawicon from <a href="https://thenounproject.com/browse/icons/term/pause/" target="_blank" title="pause Icons">Noun Project</a>
- - Mute by Nawicon from <a href="https://thenounproject.com/browse/icons/term/mute/" target="_blank" title="Mute Icons">Noun Project</a>
- - volume up by Nawicon from <a href="https://thenounproject.com/browse/icons/term/volume-up/" target="_blank" title="volume up Icons">Noun Project</a>
- - menu by Nawicon from <a href="https://thenounproject.com/browse/icons/term/menu/" target="_blank" title="menu Icons">Noun Project</a>
- - square by Nawicon from <a href="https://thenounproject.com/browse/icons/term/square/" target="_blank" title="square Icons">Noun Project</a>
- - triangle by Nawicon from <a href="https://thenounproject.com/browse/icons/term/triangle/" target="_blank" title="triangle Icons">Noun Project</a
- - headphones by Maxim Kulikov from <a href="https://thenounproject.com/browse/icons/term/headphones/" target="_blank" title="Headphones Icons">Noun Project</a>
- - arrow by iconcheese from <a href="https://thenounproject.com/browse/icons/term/arrow/" target="_blank" title="Arrow Icons">Noun Project</a>

index.html

@@ -16,11 +16,70 @@
                 <br />
                 <p class="headphonesOff">Headphones recommended</p>
             </section>
+            <div id="overview">
+                <h1>Overview</h1>
+                <p><em>The Myrtle Tree</em>is a narrative game about a young Australian woman reconnecting with the sounds in her life through her memories. The character you play is a young musician named Clara. She has experienced a significant loss of hearing, which has greatly impacted her life. Waiting for her cochlear implants, she relives some of her memories and the sounds that she can still remember, and forms new memories once she has partially restored her hearing.</p>
+                <br />
+                <p><em>The Myrtle Tree</em> focuses on listening to sounds in different contexts, and noticing intricate details within those soundscapes to piece together the world around them. The player is taken through a series of environments, including real-world and abstract environments, and are tasked with observing the world around them through sound only. The primary goal is to relive memories and create new ones, using sound as the mode of exploration, as well as learning to cherish their ability to hear and experience the world around them.</p>
+            </div>
+            <div id="objectives">
+                <h1>Objectives</h1>
+                <p>The objective of the game is to progress through each stage by completing the quests in each area. These stages can be completed in any order, and are mostly optional, though the player is encouraged to explore all the stages. The quests in each stage are simple and easy, and range from identifying small details hidden in a soundscape, to building your own soundscapes. The objective is for players to gain insight into the character’s memories and to rebuild the environments in these memories through sound only. For some of these stages, the world is created around them as they pick up on all the sounds.</p>
+                <br />
+                <p>Once the bionic ears have been made available, the player unlocks new scenarios to explore. The focus of these stages is to demonstrate the unique benefits and challenges of bionic ears, such as needing to replace batteries in an important situation, or being unable to hear people due to distortion or malfunctioning hardware. The loss of hearing is devastating, and the player is challenged with trying to explore and participate in the world whilst only being able to hear a fraction of it.</p>
+            </div>
+            <div id="howtoplay">
+                <h1>How the game is played</h1>
+                <p>Using current technology, a VR headset and high-quality headphones would be recommended in order to produce the best user experience. These would not be required, but the ideal experience would fully engage the senses of the player. If more advanced technology were developed and used instead, a full haptic suit would completely immerse the player, similar to the V-Suit described in Cixin Liu’s <em>The Three-Body Problem</em>, or the OASIS from <em>Ready Player One</em>. Whilst the technology <a href="https://www.digitaltrends.com/gaming/ces-2021-haptic-feedback-vest-vr-virtual-reality-bhaptics/">does exist</a> today, it is only in its infancy, and isn't able to fully cover the body. Being able to fully isolate the player from the outside world would greatly enhance the degree to which the player is able to tune themselves into the soundscapes and environments.</p>
+                <br />
+                <p>Additional senses could also be explored through full-body immersion, such as smell. Odour-evoked memories have been studied extensively, and these odours can be used to <a href="https://www.tandfonline.com/doi/abs/10.1080/09658211.2013.876048">evoke nostalgia</a>, and <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5039451/">and improve psychological and physiological health</a>. A possible extension to this game using that advanced technology could be to explore the how the character’s memories are linked to smells, as well as allowing the player to explore their own memories in the game through smell and sound.</p>
+            </div>
+            <div id="audiovisualstyles">
+                <h1>Visual and audial styles</h1>
+                <p>The style of the game will vary depending on the stages selected. When focusing on complex soundscapes to pick out particular sounds, the display would initially be barren and empty – a white room similar to what is seen in <em>The Unfinished Swan</em>. Generally, a low poly art style would be used throughout the game in order to shift the focus away from the graphics and towards the audio, though some areas would require a bit more detail.</p>
+                <br />
+                <p>A few different level types would be explored. Some are as above, a blank canvas that fills in as the player picks up on new sounds. During the levels that involve memories that are a bit hazy, visual distortions should accompany the audial distortions. Objects should appear out of proportion, discoloured, or misplaced. Some levels would focus on music that Clara has played. During these levels, rather than creating the world around the player, the player is taken through a journey of abstract shapes and objects, following the music as Clara would see it in her mind. These would require little to no interaction from the player, just observation.</p>
+                <br />
+                <p>During the second half of the game, when the player has the bionic ears, the level selection area becomes much more immersive. Sounds play as players hover over the stages when selecting a new stage to explore when they previously didn’t, and soft ambient music begins to play in the background. This transforms the space into almost a meditative area, where players are free to sit and be still as they become absorbed into the ambiance.</p>
+                <br />
+                <p>Finally, after completing any stage, a new entry in the ‘Memories’ book is written, with the character’s thoughts and reflections of those memories written as journal entries.</p>
+            </div>
+            <div id="nameinspiration">
+                <h1>Why is it called <em>The Myrtle Tree</em>?</h1>
+                <p>Lemon myrtle trees (<em>Backhousia citriodora</em>) are native to Queensland, but do grow in Victoria. The flowers of these trees are beautiful, and a house near a school I went to grew them. I always loved the smell when I walked home from school, and I have fond memories of picking some and giving them to my mother. Whilst the smell is what I remember most, I also loved the rich colour of the leaves.</p>
+                <br />
+                <p>Reflecting on memories is at the very core of this game, but I wanted to use sound to explore these memories due to how sound is sometimes lost in memories. Reconnecting with our memories through sound is important as we often remember what things looked like or smelled like. It also provides a more flexible and immersive experience than focusing on sight alone, but sight is used to guide and aid the player throughout the game.</p>
+            </div>
+            <div id="references">
+                <h1>References</h1>
+                <h3>Icons</h3>
+                <ul>
+                    <li>Pause by Nawicon from <a href="https://thenounproject.com/browse/icons/term/pause/" target="_blank" title="pause Icons">Noun Project</a></li>
+                    <li>Mute by Nawicon from <a href="https://thenounproject.com/browse/icons/term/mute/" target="_blank" title="Mute Icons">Noun Project</a></li>
+                    <li>Volume up by Nawicon from <a href="https://thenounproject.com/browse/icons/term/volume-up/" target="_blank" title="volume up Icons">Noun Project</a></li>
+                    <li>Menu by Nawicon from <a href="https://thenounproject.com/browse/icons/term/menu/" target="_blank" title="menu Icons">Noun Project</a></li>
+                    <li>Square by Nawicon from <a href="https://thenounproject.com/browse/icons/term/square/" target="_blank" title="square Icons">Noun Project</a></li>
+                    <li>Triangle by Nawicon from <a href="https://thenounproject.com/browse/icons/term/triangle/" target="_blank" title="triangle Icons">Noun Project</a></li>
+                    <li>Headphones by Maxim Kulikov from <a href="https://thenounproject.com/browse/icons/term/headphones/" target="_blank" title="Headphones Icons">Noun Project</a></li>
+                    <li>Arrow by iconcheese from <a href="https://thenounproject.com/browse/icons/term/arrow/" target="_blank" title="Arrow Icons">Noun Project</a></li>
+                </ul>
+                <br />
+                <h3>Articles</h3>
+                <ul>
+                    <li>Reid, C. A., Green, J., Wildschut, T., & Sedikides, C. (2015). Scent-evoked nostalgia. <em>Memory, 23</em>(2), 157–166. <a href="https://doi.org/10.1080/09658211.2013.876048">https://doi.org/10.1080/09658211.2013.876048</a></li>
+                    <li>Herz, R. S. (2016). The Role of Odor-Evoked Memory in Psychological and Physiological Health. <em>Brain Sciences, 6</em>(3), 22. <a href="https://doi.org/10.3390/brainsci6030022">https://doi.org/10.3390/brainsci6030022</a></li>
+                </ul>
+                <br />
+                <h3>Music</h3>
+                <ul>
+                    <li>Red Means Recording. (2018, April 2). <em>ROLI - Across the Equator</em> [Video]. YouTube. https://www.youtube.com/watch?v=lx3QfNQhAkQ</li>
+                </ul>
+            </div>
             <section class="navigationOff">
                 <button class="arrowButton" id="arrowLeft" onclick="previousPage()">
                     <img class="arrowImage" src="public/images/arrow.svg" style="transform: rotate(180deg);">
                 </button>
-                <button class="arrowButton" if="arrowRight" onclick="nextPage()">
+                <button class="arrowButton" id="arrowRight" onclick="nextPage()">
                     <img class="arrowImage" src="public/images/arrow.svg">
                 </button>
             </section>

main.js

@@ -2,7 +2,11 @@ const backgroundAudio = document.getElementById("backgroundAudio");
 const playPauseButton = document.getElementById("playPause");
 let audioPlaying = false;
 let currentPage = 0;
-document.getElementById('arrowLeft').style.opacity = 0;
+const pages = ["overview", "objectives", "howtoplay", "audiovisualstyles", "nameinspiration", "references"]
+const arrowLeft = document.querySelector('#arrowLeft')
+const arrowRight = document.querySelector('#arrowRight')
+arrowLeft.style.opacity = 0;
+arrowLeft.style.cursor = 'auto';
 
 const playPauseAudio = () => {
   if (audioPlaying === true) {
@@ -50,20 +54,37 @@ const begin = () => {
     }
     document.querySelector('#beginOff').style.display = 'none';
     document.querySelector('.navigationOff').className = 'navigationOn';
+    document.querySelector(`#${pages[currentPage]}`).style.display = 'block';
     playPauseAudio()
   }, 6500);
 };
 
 const previousPage = () => {
-  currentPage -= 1;
   if (currentPage === 0) {
-    document.getElementById('arrowLeft').style.opacity = 0;
+    return;
+  } else if (currentPage === 1) {
+    arrowLeft.style.cursor = 'auto';
+    arrowLeft.style.opacity = 0;
+  } else if (currentPage <= 5) {
+    arrowRight.style.opacity = 1;
+    arrowRight.style.cursor = 'pointer';
   }
+  document.querySelector(`#${pages[currentPage]}`).style.display = 'none';
+  currentPage -= 1;
+  document.querySelector(`#${pages[currentPage]}`).style.display = 'block';
 }
 
 const nextPage = () => {
+  if (currentPage === 5) {
+    return;
+  } else if (currentPage === 4) {
+    arrowRight.style.opacity = 0;
+    arrowRight.style.cursor = 'auto';
+  } else if (currentPage >= 0) {
+    arrowLeft.style.opacity = 1;
+    arrowLeft.style.cursor = 'pointer';
+  }
+  document.querySelector(`#${pages[currentPage]}`).style.display = 'none';
   currentPage += 1;
-  if (currentPage === 1) {
+  document.querySelector(`#${pages[currentPage]}`).style.display = 'block';
-    document.getElementById('arrowLeft').style.opacity = 1;
-  }
 }

styles.css

@@ -33,6 +33,7 @@ main {
   display: flex;
   flex-direction: column;
   align-items: center;
+  max-width: 70%;
 }
 
 .centre #begin {
@@ -42,6 +43,7 @@ main {
   padding: 1rem 1.2rem;
   transition: background 200ms, border 200ms;
   width: 75%;
+  cursor: pointer;
 }
 
 .centre #beginOff {
@@ -161,6 +163,10 @@ footer section {
   bottom: 12.5dvh;
 }
 
+#overview, #objectives, #howtoplay, #audiovisualstyles, #nameinspiration, #references {
+  display: none;
+}
+
 /* Enable hover only on non-touch devices */
 @media (hover: hover) and (pointer: fine) {
   .centre #button:hover {