<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>TTT2 Role Overview</title>
      <meta name="description" content="All TTT2 Roles halfheartedly documented">
      <meta name="author" content="James">
      <meta property="og:title" content="TTT2 Role Overview">
      <meta property="og:type" content="website">
      <meta property="og:url" content="https://ttt.james-things.com">
      <meta property="og:description" content="All TTT2 Roles documented halfheartedly">
      <meta property="og:image" content="https://e7.pngegg.com/pngimages/710/403/png-clipart-the-embodiment-of-scarlet-devil-team-shanghai-alice-video-game-banjo-tooie-mario-luigi-partners-in-time-marisa-logo-computer-wallpaper.png">
      <link rel="icon" href="/favicon.ico">
      <link rel="icon" href="/favicon.svg" type="image/svg+xml">
      <link rel="apple-touch-icon" href="/apple-touch-icon.png">



      <!--MATERIALIZE-->
      <!--Import jQuery-->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

      <!--My Custom Stylesheet-->
      <link rel="stylesheet" href="css/styles.css">
   </head>

   <body>


       <ul id="slide-out" class="sidenav">

            <li>
              <div class="user-view">
                <div class="background">
                  <img src="https://external-preview.redd.it/7j49A5chcbjitz5C6QHYbZ80EW4QMKPO7dEZwJDu2PM.jpg?auto=webp&s=3d2518085b02a5e80dcb34c31479499d2e9a14d1">
                </div>
                <div class="blurry">
                <a href="https://steamcommunity.com/workshop/filedetails/?id=1737053146"><span class="center white-text name">TTT2 Role Overview</span></a>
                <a href="https://steamcommunity.com/id/truebaka/"><span class="center white-text email">Made by James</span></a>
                </div>
              </div>
            </li>
            <li><a href="https://discord.gg/Npcbb4W">Official TTT2 Discord</a></li>
            <li><div class="divider"></div></li>
            <li><a class="subheader">Roles</a></li>

         <?php
         $defaultlanguage = "en";

         # Get language from URL
         if(isset($_GET["lang"])) {
           $language = $_GET["lang"];
         } else {
           $language = $defaultlanguage;
         }

         #Check if Language folder exists
         if(file_exists("roles/".$language."/")) {
           $files = glob("roles/".$language."/*.php");
         } else {
           $language = $defaultlanguage;
           $files = glob("roles/".$language."/*.php");
         }
         #Get all files from the language folder
         sort($files);

         foreach ($files as $filename) {
             include $filename;

             $shortname = substr($filename,  9);
             $shortname = substr($shortname,  0, -4);

             echo '
               <div class="col s12">

                 <div class="card-panel '.$color.' '.$tcolor.'-text">
                   <li>
                   <a class="sidenav-close waves-effect '.$tcolor.'-text" href="#'.$shortname.'">
          <span class="card-title">'.$name.'</span>
              </a>
          </li>
                 </div>
               </div>
             ';
         };
         ?>

         </ul>
         <div class="fixed-action-btn">
         <a id="menu" href="#" data-target="slide-out" class="sidenav-trigger btn-floating btn-large waves-effect waves-dark brown"><i class="material-icons">menu</i></a>
          </div>

          <!-- Tap Target Structure -->
  <div class="tap-target indigo white-text" data-target="menu">
    <div class="tap-target-content">
      <h5 class="center">Menu</h5>
      <p>You can find an overview to all the Roles over here!</p>
      <p>Also is it just me or might this be a bit overkill? You know, this huge bubble which informs you about a Menu you probably have found yourself</p>
    </div>
  </div>
      <div class="container">

      <?php
      $defaultlanguage = "en";

      # Get language from URL
      if(isset($_GET["lang"])) {
        $language = $_GET["lang"];
      } else {
        $language = $defaultlanguage;
      }

      #Check if Language folder exists
      if(file_exists("roles/".$language."/")) {
        $files = glob("roles/".$language."/*.php");
      } else {
        $language = $defaultlanguage;
        $files = glob("roles/".$language."/*.php");
      }
      #Get all files from the language folder

      sort($files);
      $count = 1;

      foreach ($files as $filename) {
        include $filename;

        $shortname = substr($filename,  9);
        $shortname = substr($shortname,  0, -4);
/*
        if ($count%2 == 1)
        {
          echo "<div class='row'>";
        }
*/
        echo '
        <div class="col s12">
            <div class="blurry">
                <div class="card '.$color.' '.$tcolor.'-text">
                    <div class="card-content">
                        <span class="card-title" id="'.$shortname.'">'.$name.'</span>
                        <p>'.$description.'</p>
                    </div>

                      <ul class="collapsible black-text white">
                        <li class="active">
                          <div class="collapsible-header"><i class="material-icons">help_outline</i>How to Play</div>
                          <div class="collapsible-body"><pre>'.$howtoplay.'</pre></div>
                        </li>
                        <li>
                          <div class="collapsible-header"><i class="material-icons">check</i>Plays best with</div>
                          <div class="collapsible-body"><span>'.$playsbestwith.'</span></div>
                        </li>
                        <li>
                          <div class="collapsible-header"><i class="material-icons">code</i>Convars</div>
                          <div class="collapsible-body"><pre>'.$convars.'</pre></div>
                        </li>
                        <li>
                          <div class="collapsible-header"><i class="material-icons">whatshot</i>Credits</div>
                          <div class="collapsible-body"><span>Main Creator: <a href="'.$authorurl.'">'.$author.'</a><br><pre>'.$ctext.'</pre></span></div>
                        </li>
                        <li>
                          <div class="collapsible-header"><i class="material-icons">link</i>Links</div>
                          <div class="center collapsible-body">
                            <span>
                              <a href="'.$steam.' ">Steam Workshop</a>
                              <br>
                              <a href="'.$source.'">Github Source</a></div>
                            </span>
                        </li>
                      </ul>



                        </div>
            </div>
        </div>
        ';

/*
        if ($count%2 == 0)
        {
          echo "</div>";
        }
        $count++;
*/
      }
//      if ($count%2 != 1) echo "</div>";
      ?>
    </div>
    <footer class="page-footer indigo">
      <div class="container">
        <div class="row">
          <div class="col l6 s12">
            <h5 class="white-text">Thanks for using this list</h5>
            <p class="grey-text text-lighten-4">You might not think of it, but the fact that you are reading this is allready confirmation enough, that this project was worth the weight</p> <!-- Also bonus points for reading the source ;) -->
          </div>
        </div>
      </div>
      <div class="footer-copyright indigo darken-1">
        <div class="container">
        © <?php echo date("Y"); ?> Jesse James Isler
        </div>
      </div>
    </footer>


<!-- Start Tab init -->
    <script>
    $(document).ready(function(){
        $('.collapsible').collapsible();
//        $('.tabs').tabs();
        $('.sidenav').sidenav();
        $('.tap-target').tapTarget();
        $('.tap-target').tapTarget('open');
  });
    </script>
    <!-- End Tab init -->




      <!--JavaScript at end of body for optimized loading-->
      <script type="text/javascript" src="js/materialize.min.js"></script>
   </body>
</html>