Add more DOM functionality

src/css/base.scss

@@ -154,6 +154,7 @@ body {
 }
 
 .startpage__footer--button {
+  opacity: 0;
   background-color: #00000000;
   border-radius: 10px;
   border: 5px solid #BA38C4;
@@ -382,6 +383,7 @@ h3 {
   background-color: #00000000;
   font-size: 40px;
   color: white;
+  padding-top: 6px;
   font-family: 'Press Start 2P', cursive;
   text-align: center;
   box-shadow: 0 0 10px #f877ff;

src/index.html

@@ -16,12 +16,12 @@ <h1>COWBOYS <span>VS</span> ALIENS</h1>
     </header>
     <div class="startpage--players--container">
       <div>
-        <img src="images/cowboy-icon.png" class="startpage--character--icon">
+        <img src="images/cowboy-icon.png" id="cowboy-image" class="startpage--character--icon">
         <input placeholder="P1 NAME" style="text-transform:uppercase" class="startpage__input--player"
           id="cowboy-name-input">
       </div>
       <div>
-        <img src="images/alien-icon.png" class="startpage--character--icon">
+        <img src="images/alien-icon.png" id="alien-image" class="startpage--character--icon">
         <input placeholder="P2 NAME" style="text-transform:uppercase" class="startpage__input--player"
           id="alien-name-input">
       </div>

src/index.js

@@ -15,26 +15,58 @@ import './images/favicon-32x32.png';
 import './images/favicon-16x16.png';
 import './images/grainy-filter.jpg'
 import './images/grainy-filter-2.png'
-import Game from './Game';
-
-const game = new Game()
 
 const main = $('main');
 const startGameButton = $('#start-game-button');
 const exitButton = $('#exit-button');
 const cowboyInput = $('#cowboy-name-input');
 const alienInput = $('#alien-name-input');
+const guessInput = $('#guess-input');
+const guessButton = $('#guess-button');
+const cowboyImage = $('#cowboy-image');
+const alienImage = $('#alien-image');
 
 window.onbeforeunload = function () {
   window.scrollTo(0, 0);
 }
 
+cowboyInput.on('keyup', () => {
+  displayStartButton();
+}).on('focus', () => {
+  cowboyImage.css('z-index', '1').animate({ height: '210px', width: '210px', marginBottom: '12px' }, 300);
+}).on('focusout', () => {
+  cowboyImage.css('z-index', '0').animate({ height: '200px', width: '200px', marginBottom: '12px' }, 300);
+})
+
+alienInput.on('keyup', () => {
+  displayStartButton();
+}).on('focus', () => {
+  alienImage.css('z-index', '1').animate({ height: '210px', width: '210px', marginBottom: '12px' }, 300);
+}).on('focusout', () => {
+  alienImage.css('z-index', '0').animate({ height: '200px', width: '200px', marginBottom: '12px' }, 300);
+})
+
 startGameButton.on('click', () => {
-  $('#cowboy-name').text(cowboyInput.val());
-  $('#alien-name').text(alienInput.val());
+  $('#cowboy-name').text(cowboyInput.val().toUpperCase());
+  $('#alien-name').text(alienInput.val().toUpperCase());
   $("html").delay(250).animate({ scrollTop: main.offset().top }, 1000)
-})
+  setTimeout(function () {
+    cowboyInput.val('');
+    alienInput.val('');
+    startGameButton.css('opacity', '0');
+  }, 2000);
+});
 
 exitButton.on('click', () => {
   $("html").delay(250).animate({ scrollTop: 0 }, 1000);
-})
+});
+
+function displayStartButton() {
+  alienInput.val() === '' || cowboyInput.val() === ''
+    ? startGameButton.animate({ opacity: '0' }, 100)
+    : startGameButton.animate({ opacity: '1' }, 100)
+}
+
+guessButton.on('click', () => {
+  guessInput.val('');
+});