CSS code for animating the color of a text link on hover:

      
        a {
          position: relative;
          display: inline-block;
          font-weight: 800;
          color: royalblue;
          overflow: hidden;
        }

        a {
          background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
        }

        a {
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-size: 200% 100%;
          background-position: 100%;
        }

        a {
          transition: background-position 275ms ease;
        }

        a:hover {
          background-position: 0 100%;
        }
      
    

CDN Script Tags at head of HTML Code

      
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
      
    

iframe setup in Javascript files

      
        const gameView = () => {
          renderLeaderboard()
          return html`
            <iframe id="game-iframe" src="sketch.html"></iframe>
          `;
        }
      
    

CSS Navigation bar styles

      
        nav {
          color: #333;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 60px;
          position: relative;
        }

        .logo {
          font-size: 1.5em;
          font-weight: bold;
          text-transform: uppercase;
          padding: 10px;
          color: gray;
        }
      
    

CSS Hamburger menu styles

      
        .menu-btn {
          display: none;
        }

        .menu-icon {
          cursor: pointer;
          display: none;
          height: 100%;
          padding: 10px;
          position: absolute;
          right: 0;
          top: 0;
          width: 50px;
        }

        .menu-icon .navicon {
          background-color: #333;
          display: block;
          height: 2px;
          position: relative;
          transition: background-color 0.2s ease-out;
          width: 18px;
        }

        .menu-icon .navicon:before,
        .menu-icon .navicon:after {
          background-color: #333;
          content: '';
          display: block;
          height: 100%;
          position: absolute;
          transition: all 0.2s ease-out;
          width: 100%;
        }

        .menu-icon .navicon:before {
          top: 5px;
        }

        .menu-icon .navicon:after {
          top: -5px;
        }
      
    

CSS Navigation menu styles

      
        .menu {
          display: flex;
          justify-content: center;
          align-items: center;
          list-style: none;
          margin: 0;
          padding: 0;
        }

        .menu li {
          margin: 0 10px;
        }

        .menu a {
          color: #333;
          text-decoration: none;
        }
      
    

CSS Media queries to make website responsive to screen size

      
        @media screen and (max-width: 768px) {
          .menu-icon {
            display: block;
          }
          .menu {
            display: none;
            flex-direction: column;
            position: absolute;
            top: 60px;
            left: 0;
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
          }
          .menu li {
            margin: 10px 0;
          }
          .menu a {
            padding: 10px 0;
            border-bottom: 1px solid #333;
          }
          .menu-btn:checked + .menu {
            display: flex;
          }
        }
      
    

Getting scores from Firebase database

      
        async function getAllScores() {
          const querySnapshot = await getDocs(
            query(messagesRef, orderBy("score", "desc"))
          );
          querySnapshot.forEach((doc) => {
            let scoreData = doc.data();
            scores.push(scoreData);
          });
          render(gameView(), pageContainer);
        }
      
    

Pushing user's score to Firebase database

      
        window.addEventListener('message', event => {
          if (event.data.type === 'scoreSubmitted') {
            let name;
            if (firebase.auth().currentUser) {
              name = firebase.auth().currentUser.displayName;
              console.log(name);
            }
            if (name == null) {
              name = "Anonymous";
            }
            const scoreData = {
              name: name,
              score: Math.round(event.data.score)
            };
            db.collection('scores').add(scoreData);
            renderLeaderboard();
          }
        });