script.js

/*
const home = `
    <div class="container text-white clv-rg-font">
        <!-- Prima sezione del sito con presentazione del gruppo -->
        <img class="chop-img chop-right" id="love-chop" src="assets/img/chop/love.png">
        <div class="my-container d-grid justify-content-center">
        <div class="row mt-5">
            <h1 class="bbn-font"><u>Chi siamo</u></h1>
        </div>
        <div class="content row">
            Siamo un gruppo di giovani game<br>
            developers alle prime armi, insieme<br>
            stiamo creando un videogioco<br>
            chiamato "Tale of Balance", che ha<br>
            come protagonista Chop, la mascotte<br>
            del canale youtube di Gravier!
        </div>
        
        <div class="row yt-trailer mt-5">
            <iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/Avhef39AruU" 
            title="YouTube video player" frameborder="0" 
            allow="web-share">
            </iframe>
        </div>

        <!-- pulsante per entrare nel team -->
        <div class="row text-center mt-5">
            <u><a href="./open_postitions.html" class="bbn-font nav-link"><h1>Entra nel Team!</h1></a></u>
        </div>

        <!-- Sezione di presentazione del gioco -->
        <div class="row mt-5">
            <h1 class="bbn-font"><u>Il nostro gioco</u></h1>
        </div>
        <div class="content row">
            IL nostro gioco che stiamo creando è un<br>
            action adventure 2d in pixel-art,<br>
            ricco di combattimenti, minigames<br>
            e ambientazioni uniche! Nel gioco, si<br>
            controlla Chop e Piantina, un<br>
            uccello e un mostro che<br>
            combattono insieme per ristabilire<br>
            l'equilibrio...in tutti i sensi! Sarà<br>
            possibile infatti combinare gli<br>
            attacchi di Chop e quelli di Piantina<br>
            per creare nuove mosse. Lasciatevi<br>
            affascinare da un gameplay<br>
            originale e una storia piena di colpi<br>
            di scena e personaggi profondi. Per<br>
            saperne di più ed avere dei<br>
            contenuti in anteprima visita<br>
            i nostri social!<br>
        </div>
        </div>
        <img class="chop-img chop-left" id="sleep-chop" src="assets/img/chop/sleep.png">
    </div>
`
const unisciti = `
<!--container totale-->
<div class="container text-white mt-5 rounded-4 clv-rg-font">
  <!--container titolo principale-->
  <div class="my-container d-grid justify-content-center mt-5">
    <div class="row team-title text-center">
      <h1 class="bbn-font"><u>Come entrare nel team</u></h1>
    </div>

  <!--container requisiti-->
    <img class="chop-right" id="music-chop" src="assets/img/chop/music.png">
    <div class="row mt-5">
      <h1 class="bbn-font"><u>Requisiti</u></h1>
    </div>
    <div class="content row">
      - Età minima di 15 anni<br>
      - Un account Telegram<br>
      - Una buona conoscenza della lingua italiana
    </div>

  <!--container unisciti-->
    <img class="chop-img chop-left" id="cool-chop" src="assets/img/chop/cool.png">
    <div class="row mt-5">
      <h1 class="bbn-font"><u>Unisciti</u></h1>
    </div>
    <div class="content row">
      Per proporti come sviluppatore<br> 
      scrivi una mail a <br>
      uniscitiaguidingfeatherteam@gmail.com<br>
       includendo: <br>
      - Presentazione<br>
      - Gruppo di cui vuoi fare parte<br>
      - (Programmaizone e Creativo attualmente chiusi)<br>
      - Eventuali esperienze formative <br>utili al tuo ruolo nel gruppo<br>
      - Dei tuoi lavori in allegato<br>
    </div>
  </div>
</div>
`
const team = `
<!--container totale-->
<div class="container text-white mt-5 rounded-4 clv-rg-font">
  <!--container titolo principale-->
  <div class="my-container d-grid justify-content-center mt-5">
    <div class="row team-title text-center">
      <h1 class="bbn-font"><u>Gruppi del Team</u></h1>
    </div>

  <!--container gruppo creativo-->
    <img class="chop-img chop-right" id="rich-chop" src="assets/img/chop/rich.png">
    <div class="row text-white-50 mt-5">
      <h1 class="bbn-font"><u>Creativo</u></h1>
    </div>
    <div class="content row text-white-50">
      In questo gruppo viene ideato il gioco in tutti<br>
      i suoi aspetti: personaggi, ambientazioni e<br>
      meccaniche di gioco.<br>
      Questo gruppo fa per te se hai una fervida<br>
      immaginazione o una passione per la scrittura!<br>
      POSIZIONI CHIUSE
    </div>

  <!--container gruppo concept art-->
    <div class="row mt-5">
      <h1 class="bbn-font"><u>Concept Art</u></h1>
    </div>
    <div class="content row">
      Nel gruppo concept art si dà una prima forma<br>
      ai personaggi e alle ambientazioni ideate dal<br>
      gruppo creativo, in modo da spianare la strada <br>
      al gruppo pixelart, che trasforma i disegni in <br>
      sprite di gioco. Se hai la passione per il <br>
      disegno saresti perfetto per questo gruppo!<br>
      Sottogruppi:<br>
      - Character design<br>
      - World building<br>
    </div>
  
  <!--container pixel-art-->
    <img class="chop-img chop-left" id="mammaMia-chop" src="assets/img/chop/mammaMia.png">
    <div class="row mt-5">
      <h1 class="bbn-font"><u>Pixel-Art</u></h1>
    </div>
    <div class="content row">
      Nel gruppo pixel-art vengono realizzati gli <br>
      sprite, animati e non, che faranno parte del <br>
      gioco finale; tutto creato nel software "Aseprite"<br>
      Sottogruppi:<br>
      - Animazioni<br>
      - Ambientazioni<br>
      - Icone e props semplici<br>
    </div>
  
  <!--container gruppo suono-->
    <div class="row">
      <h1 class="bbn-font mt-5"><u>Suono</u></h1>
    </div>
    <div class="content row">
      In questo gruppo vengono prodotti sia la <br>
      musica che gli effetti sonori del gioco, senza <br>
      sarebbe molto silenzioso!<br>
      Sottogruppi:<br>
      - Musica<br>
      - Effetti sonori<br>
    </div>

  <!--container programmazione-->
    <img class="chop-img chop-right" id="classic-chop" src="assets/img/chop/classic.png">
    <div class="row text-white-50 mt-5">
      <h1 class="bbn-font"><u>Programmazione</u></h1>
    </div>
    <div class="content row text-white-50">
      Qui si riuniscono gli sforzi di tutto il team per <br>
      dare vita al gioco, tramite l'uso del software di <br>
      programmazione gratuito Unity!<br>
      POSIZIONI CHIUSE
    </div>
  </div>
</div>
`
const routes = {
    '/': home,
    '/unisciti': unisciti,
    '/team': team,
}

const rootDiv = document.getElementById('root')

const onNavigate = (pathname) => {
    window.history.pushState(
        {},
        pathname,
        window.location.origin + pathname
    )
    rootDiv.innerHTML = routes[pathname]
}

window.onpopstate = () => {
    rootDiv.innerHTML = routes[window.location.pathname]
}*/

let prevScrollPos = window.scrollY

window.onscroll = () => {
    let currentScrollPos = window.scrollY
    if (prevScrollPos > currentScrollPos) {
        document.getElementsByTagName("nav")[0].style.top = "0"
    } else {
        document.getElementsByTagName("nav")[0].style.top = "-5rem"
    }
    prevScrollPos = currentScrollPos
}