Gfrktyl

// The available titles and their associated data.

var titles = ["Pong", "Tetris", "Pac-Man", "Snake", "Super Mario", "Pokemon", "Match 3", "Blossom Blast", "Driven", "Terrible Zombies"];

var data = [

  ["Pong is the equivalent of Hello World in the game development industry.", "Vectors, Rendering", "Directions", "Adding obstacles.", "Add effects."]

  ["Tetris is an iconic title. Though I am unable to provide the greatest theme music of all time, I hope you thoroughly enjoy the remake!", "Multi-Dimensional Arrays", "Arrays of Arrays", "Creating new pieces.", "Add effects."]

  ["Pac-Man is an iconic title providing a lot of fun and some great concepts.", "Collision Detection", "Building the walls.", "Object pooling.", "Add more ghosts and effects."]

  ["Dialing it back down, Snake is another iconic title with great concepts but simple implementation.", "Collision Detection", "None", "Linked Lists", "None"]

  ["Another iconic title, Super Mario is known around the world.", "Parallaxing Backgrounds", "None", "None", "None"]

  ["Pokemon is a favorite of multiple generations, this remake is simple and for demonstrations only.", "None", "None", "None", "None"]

  ["This is a simple demonstration of the match three game logic.", "None", "None", "None", "None"]

  ["The beautiful game Blossom Blast was my inspiration to go mobile.", "None", "None", "None", "None"]

  ["Driven is a basic 3D driving game.", "None", "None", "None", "None"]

  ["Terrible zombies is just as the name states, a terrible zombie game.", "None", "None", "None", "None"]

];



function swapGame(domElement, title) {

  // The tile collection.

  var tileCollection = document.getElementsByClassName('tiles');

  var tiles = tileCollection[0].getElementsByTagName('li');



  // The labels for display.

  var lblTitle = document.getElementById('dTitle');

  var lblDescription = document.getElementById('dDescription');

  var lblConcepts = document.getElementById('dConcepts');

  var lblChallenges = document.getElementById('dChallenges');

  var lblAdvanced = document.getElementById('dAdvanced');

  var lblHomework = document.getElementById('dHomework');

  for (var i = 0; i < tiles.length; i++)

    tiles[i].className = '';



  domElement.classList.toggle('active');



  lblTitle.innerHTML = title;



  var id = titles.indexOf(title);

  lblDescription.innerHTML = data[id][0];

  lblConcepts.innerHTML = 'Concepts: ' + data[id][1];

  lblChallenges.innerHTML = 'Challenges: ' + data[id][2];

  lblAdvanced.innerHTML = 'Advanced: ' + data[id][3];

  lblAdvanced.innerHTML = 'Homework: ' + data[id][4];

}

.tile-container {

  width: 100%;

  height: 100%;

  display: flex;

}



.view-panel {

  width: 30%;

  box-shadow: 0px 5px 15px #111;

  background-color: #fff;

  color: #333;

  padding: 5px;

}



.launch-button {

  background-color: #fc0;

  border-radius: 5px;

  height: 50px;

  width: 95%;

  margin: auto;

  cursor: wait;

  transition: 0.5s all;

}



.launch-button:hover {

  background-color: #da0;

}



.launch-button a {

  text-decoration: none;

  color: #333;

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.tiles {

  width: 70%;

  display: flex;

  align-items: flex-start;

  justify-content: flex-start;

}



.tile-view {

  list-style: none;

  width: 100%;

  display: flex;

  flex-wrap: wrap;

  align-items: flex-start;

  justify-content: center;

  padding: 0;

}



.tile-view li {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  will-change: all;

  width: 150px;

  height: 150px;

  cursor: pointer;

  transition: 0.5s background-color;

  margin-left: 5px;

  margin: 5px;

  background-color: #222;

  color: #eee;

  box-shadow: 2px 2px 5px #111;

}



.tile-view li>a {

  color: #eee;

  text-decoration: none;

}



.tile-view li:hover {

  background-color: #fc0;

  box-shadow: 5px 5px 15px #111;

}



.tile-view li.active {

  background-color: #fc0;

}



.tile-view li.active,

.tile-view li.active>a,

.tile-view li:hover,

.tile-view li:hover>a {

  color: #333;

}



@media screen and (max-width: 750px) {

  .view-panel {

    display: none;

  }

  .tiles {

    width: 100%;

  }

  .tile-view li {

    width: 300px;

  }

}

<div class="tile-container">

  <div class="view-panel">

    <h1 id="dTitle">Pong</h1>

    <p id="dDescription">Pong is the equivalent of Hello World in the game development industry.</p>

    <ul>

      <li><span id="dConcepts">Concepts: Vectors, Rendering</span></li>

      <li><span id="dChallenges">Challenges: Directions</span></li>

      <li><span id="dAdvanced">Advanced: Adding obstacles.</span></li>

      <li><span id="dHomework">Homework: Add effects.</span></li>

    </ul>

    <div class="launch-button"><a href="#">Launch</a></div>

  </div>

  <div class="tiles">

    <ul class="tile-view">

      <li onclick="swapGame(this, 'Pong')" class="active">

        <i class="fas fa-gamepad" aria-hidden="true"></i>

        <a href="#">Pong</a>

      </li>

      <li onclick="swapGame(this, 'Tetris')">

        <i class="fas fa-gamepad" aria-hidden="true"></i>

        <a href="#">Tetris</a>

      </li>

      <li onclick="swapGame(this, 'Pac-Man')">

        <i class="fas fa-gamepad" aria-hidden="true"></i>

        <a href="#">Pac-Man</a>

      </li>

      <li onclick="swapGame(this, 'Snake')">

        <i class="fas fa-gamepad" aria-hidden="true"></i>

        <a href="#">Snake</a>

      </li>

      <li onclick="swapGame(this, 'Super Mario')">

        <i class="fas fa-gamepad" aria-hidden="true"></i>

        <a href="#">Super Mario</a>

      </li>

      <li onclick="swapGame(this, 'Pokemon')">

        <i class="fas fa-gamepad" aria-hidden="true"></i>

        <a href="#">Pokemon</a>

      </li>

      <li onclick="swapGame(this, 'Match 3')">

        <i class="fas fa-gamepad" aria-hidden="true"></i>

        <a href="#">Match 3</a>

      </li>

      <li onclick="swapGame(this, 'Blossom Blast')">

        <i class="fas fa-gamepad" aria-hidden="true"></i>

        <a href="#">Blossom Blast</a>

      </li>

      <li onclick="swapGame(this, 'Driven')">

        <i class="fas fa-gamepad" aria-hidden="true"></i>

        <a href="#">Driven</a>

      </li>

      <li onclick="swapGame(this, 'Terrible Zombies')">

        <i class="fas fa-gamepad" aria-hidden="true"></i>

        <a href="#">Terrible Zombies</a>

      </li>

    </ul>

  </div>

</div>