From a813b820611290952cedbcfce4ddf6dae6bd85d1 Mon Sep 17 00:00:00 2001
From: Lucas Brakenridge <lbrakenridge@ku.edu>
Date: Sun, 13 Sep 2020 04:10:25 -0500
Subject: [PATCH] Whole front UI redesign: - Redesigned scoreboard table -
 Redesigned topLevel - Redesigned buttons with animations - Redesigned font,
 background, colors and naming conventions

---
 index.html                             |  18 ++-
 src/components/ScoreBoard.component.js |  19 ++-
 src/components/TopLevel.component.js   |  46 +++++-
 src/style/components.css               | 214 +++++++++++++++++++++++--
 4 files changed, 262 insertions(+), 35 deletions(-)
diff --git a/index.html b/index.html
index 39be12b..829c852 100644
--- a/index.html
+++ b/index.html
@@ -9,13 +9,25 @@
     <body>
         <!-- This is the container where the Vue.js application will render to. -->
         <div id="wrapper">
-            <div class="header">
-                <h1>Battleship - EECS 448 Project 1</h1>
-                <p>Created by Lucas Brakenridge, Javier Barea Lara, Garrett Mills, Evan Powell, and Alec Horlick-Mills</p>
+            <div>
+                <hr color="#ec8d2e">
+                <h1 class="header_title">battleship_eecs448</h1>
+                <hr color="#ec8d2e">
             </div>
 
             <!-- The top level component. This controls showing/hiding grids &c. -->
             <app-top-level></app-top-level>
+
+            <footer>
+<!--            <p><a target="_blank" href="https://github.com/EECS-448-Battleship">GitHub Repo</a></p>-->
+                <div class="btn_container">
+                    <p>Created by Lucas Brakenridge, Javier Barea Lara, Garrett Mills, Evan Powell, and Alec Horlick-Mills </p>
+                    <form>
+                    <button class="btn github" onClick="window.open('https://github.com/EECS-448-Battleship');">GitHub Repo</button>
+                </form>
+                    <hr color="#ec8d2e">
+                </div>
+            </footer>
         </div>
 
         <script>
diff --git a/src/components/ScoreBoard.component.js b/src/components/ScoreBoard.component.js
index 04deee7..8476b84 100644
--- a/src/components/ScoreBoard.component.js
+++ b/src/components/ScoreBoard.component.js
@@ -6,23 +6,22 @@ const template = `
 <div class="app-scoreboard-component">
     <table class="scoreboard_table" style="width:50%">
         <tr class="scoreboard_rows">
-            <th class="scoreboard_table_empty"></th>
-            <th class="scoreboard_table_header" colspan="3">scoreboard</th>
+            <th class="scoreboard_table_header" colspan="3">scoreboard</th>            
         </tr>
-        <tr class="scoreboard_header_scoreProgress">
-            <th class="scoreboard_table_empty"></th>
+        <tr class="scoreboard_header_playerScoreProgress">
+            <td class="scoreboard_data">player</td>
             <td class="scoreboard_data">score</td>
             <td class="scoreboard_data">progress</td>
         </tr>
         <tr class="scoreboard_rows_score&progress">
-            <td class="scoreboard_player">{{ current_player === Player.One ? '➜ ' : '' }}Player 1{{ winning_player === Player.One ? ' ★' : '' }}</td>
-            <td class="scoreboard_data">{{player_one_score}}</td>
-            <td class="scoreboard_data">{{player_one_progress * 100}}%</td>
+            <td class="scoreboard_player">{{ current_player === Player.One ? '➜ ' : '' }}player_1{{ winning_player === Player.One ? ' ★' : '' }}</td>
+            <td class="scoreboard_data_value">{{player_one_score}}</td>
+            <td class="scoreboard_data_value">{{player_one_progress * 100}}%</td>
         </tr>
         <tr class="scoreboard_lastRow">
-            <td class="scoreboard_player">{{ current_player === Player.Two ? '➜ ' : '' }}Player 2{{ winning_player === Player.Two ? ' ★' : '' }}</td>
-            <td class="scoreboard_data">{{player_two_score}}</td>
-            <td class="scoreboard_data">{{player_two_progress * 100}}%</td>
+            <td class="scoreboard_player">{{ current_player === Player.Two ? '➜ ' : '' }}player_2{{ winning_player === Player.Two ? ' ★' : '' }}</td>
+            <td class="scoreboard_data_value">{{player_two_score}}</td>
+            <td class="scoreboard_data_value">{{player_two_progress * 100}}%</td>
         </tr>
     </table>
 </div>
diff --git a/src/components/TopLevel.component.js b/src/components/TopLevel.component.js
index acffc7e..62befef 100644
--- a/src/components/TopLevel.component.js
+++ b/src/components/TopLevel.component.js
@@ -9,17 +9,47 @@ const template = `
     <div class="top-level-component">
         <div v-if="current_state === GameState.ChoosingNumberOfShips" class="game-choose-ships-container">
             <span v-if="instructions">{{ instructions }}</span>
-            <div style="margin-top: 30px;">
-                <button @click="ship(1)" class="shipBtn">1 ship</button>
-                <button @click="ship(2)" class="shipBtn">2 ships</button>
-                <button @click="ship(3)" class="shipBtn">3 ships</button>
-                <button @click="ship(4)" class="shipBtn">4 ships</button>
-                <button @click="ship(5)" class="shipBtn">5 ships</button>
+            <div class="btn_container">
+<!--                <button @click="ship(1)" class="btn btn1">1 ship</button>
+                <button @click="ship(2)" class="btn btn2">2 ships</button>
+                <button @click="ship(3)" class="btn btn3">3 ships</button>
+                <button @click="ship(4)" class="btn btn4">4 ships</button>
+                <button @click="ship(5)" class="buttonTest">5 ships</button>-->
+                <div class="buttonTest" id="buttonOption2">
+                    <button @click="ship(1)" id="dub-arrow"><img src="https://github.com/atloomer/atloomer.github.io/blob/master/img/iconmonstr-arrow-48-240.png?raw=true" alt="" />
+                    </button>
+                    <a href="#"> 1 ship</a>
+                </div>
+                <div class="buttonTest" id="buttonOption2">
+                    <button @click="ship(2)" id="dub-arrow"><img src="https://github.com/atloomer/atloomer.github.io/blob/master/img/iconmonstr-arrow-48-240.png?raw=true" alt="" />
+                    </button>
+                    <a href="#"> 2 ships</a>
+                </div>
+                <div class="buttonTest" id="buttonOption2">
+                    <button @click="ship(3)" id="dub-arrow"><img src="https://github.com/atloomer/atloomer.github.io/blob/master/img/iconmonstr-arrow-48-240.png?raw=true" alt="" />
+                    </button>
+                    <a href="#"> 3 ships</a>
+                </div>
+                <div class="buttonTest" id="buttonOption2">
+                    <button @click="ship(4)" id="dub-arrow"><img src="https://github.com/atloomer/atloomer.github.io/blob/master/img/iconmonstr-arrow-48-240.png?raw=true" alt="" />
+                    </button>
+                    <a href="#"> 4 ships</a>
+                </div>
+                <div class="buttonTest" id="buttonOption2">
+                    <button @click="ship(5)" id="dub-arrow"><img src="https://github.com/atloomer/atloomer.github.io/blob/master/img/iconmonstr-arrow-48-240.png?raw=true" alt="" />
+                    </button>
+                    <a href="#"> 5 ships</a>
+                </div>
             </div>
         </div>
         <div v-if="current_state === GameState.PromptPlayerChange" class="game-player-change-container">
-            It is now {{ current_player_display }}'s turn!
-            <button @click="confirm_player_change" class="playerBtn">Continue</button>
+            it is now {{ current_player_display }}'s turn!
+<!--            <button @click="confirm_player_change" class="playerBtn">continue</button>-->
+            <div class="buttonTest" id="buttonOption2">
+                    <button @click="confirm_player_change" id="dub-arrow"><img src="https://github.com/atloomer/atloomer.github.io/blob/master/img/iconmonstr-arrow-48-240.png?raw=true" alt="" />
+                    </button>
+                    <a href="#">continue</a>
+            </div>
         </div>
         <div
             v-if="current_state !== GameState.ChoosingNumberOfShips && current_state !== GameState.PromptPlayerChange && instructions"
diff --git a/src/style/components.css b/src/style/components.css
index 80c1fe5..31df85e 100644
--- a/src/style/components.css
+++ b/src/style/components.css
@@ -8,6 +8,16 @@
     overflow-y: scroll;
     display: flex;
     flex-direction: column;
+    background-color: #182025;
+    color: #ec8d2e;
+    font-family: 'Roboto Thin', sans-serif;
+    font-weight: bold;
+    letter-spacing: 0.08em;
+}
+
+.header_title {
+    text-align: center;
+    letter-spacing: 0.1em
 }
 
 .top-level-container {
@@ -34,7 +44,175 @@
     padding-top: 10px;
 }
 
-.shipBtn{
+.btn_container{
+    letter-spacing: 0.08em;
+    margin-top: 100px;
+    padding:0;
+    text-align: center;
+    font-family: 'Roboto Thin', sans-serif;
+    overflow: hidden;
+    border-radius: 15px 15px 15px 15px;
+    box-shadow: 0 0 20px rgba(5, 5, 5, 5);
+}
+
+.btn {
+    border: 1px solid #204a61;
+    background: none;
+    padding: 10px 20px;
+    font-size: 20px;
+    cursor: pointer;
+    margin: 10px;
+    transition: 0.8s;
+    position: relative;
+    overflow: hidden;
+}
+
+.btn::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 0%;
+    background: #204a61;
+    z-index: -1;
+    transition: 0.8s;
+}
+
+.btn1,.btn2 {
+    color: #204a61;
+}
+
+.btn3,.btn4 {
+    color: #fff;
+}
+
+.btn1:hover,.btn2:hover {
+    color: #fff;
+}
+
+.btn3:hover,.btn4:hover {
+    color: #204a61;
+}
+
+.btn1::before,.btn3::before {
+    top: 0;
+    border-radius: 0 0 50% 50%;
+}
+
+.btn2::before,.btn4::before {
+    bottom: 0;
+    border-radius: 50% 50% 0 0;
+}
+
+.btn3::before,.btn4::before {
+    height: 180%;
+}
+
+.btn1:hover::before,.btn2:hover::before {
+    height: 180%;
+}
+
+.btn3:hover::before,.btn4:hover::before {
+    height: 0%;
+}
+
+.github {
+    color: #204a61;
+}
+
+.github:hover {
+    color: #fff;
+}
+
+.github::before {
+    top: 0;
+    border-radius: 0 0 50% 50%;
+}
+
+.github:hover::before {
+    height: 180%;
+}
+
+.buttonTest {
+    display: inline-flex;
+    height: 40px;
+    width: 150px;
+    border: 2px solid #BFC0C0;
+    margin: 20px 20px 20px 20px;
+    color: #BFC0C0;
+    /*text-transform: uppercase;*/
+    text-decoration: none;
+    font-size: 1em;
+    letter-spacing: 0.1em;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    cursor: pointer;
+    border-radius: 15px 15px 15px 15px;
+    box-shadow: 0 0 20px rgba(5, 5, 5, 5);
+}
+
+a {
+    color: #BFC0C0;
+    text-decoration: none;
+    letter-spacing: 1px;
+    cursor: pointer;
+}
+
+#buttonOption2 {
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+#buttonOption2 a {
+    position: relative;
+    left: 0;
+    transition: all .35s ease-Out;
+    cursor: pointer;
+}
+
+#dub-arrow {
+    width: 100%;
+    height: 100%;
+    background: #BFC0C0;
+    left: -200px;
+    position: absolute;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all .35s ease-Out;
+    bottom: 0;
+    cursor: pointer;
+}
+
+#buttonOption2 img {
+    width: 20px;
+    height: auto;
+    cursor: pointer;
+}
+
+#buttonOption2:hover #dub-arrow {
+    left: 0;
+    cursor: pointer;
+}
+
+#buttonOption2:hover a {
+    left: 150px;
+    cursor: pointer;
+}
+
+@media screen and (min-width:1000px) {
+    h1 {
+        font-size: 2.2em;
+    }
+    #container {
+        width: 50%;
+    }
+}
+
+/*.shipBtn{
   background-color: #327da8;
   color: white;
   padding: 5px 12px;
@@ -42,12 +220,20 @@
   text-decoration: none;
   display: inline-block;
   font-size: 12px;
-}
+}*/
+
+/*.shipBtn1 {
+    border: 1px solid #3498db;
+    background: none;
+    padding: 10px 20px;
+    font-size: 20px;
+    cursor: pointer;
+    margin: 10px;
+}*/
 
 /* Styles for the various grid cell states. */
 
 .game-board-cell-component {
-
     width: 40px;
     height: 40px;
     border: 1px solid grey;
@@ -136,10 +322,9 @@ p {
     font-size: 0.9em;
     min-width: 400px;
     font-weight: bold;
-    font-family:'Roboto',sans-serif;
-    border-radius: 15px 15px 7px 7px;
+    border-radius: 15px 15px 15px 15px;
     overflow: hidden;
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.70);
+    box-shadow: 0 0 20px rgba(5, 5, 5, 5);
 }
 
 .scoreboard_table_header {
@@ -150,16 +335,13 @@ p {
     font-size: 17px;
 }
 
-.scoreboard_header_scoreProgress {
+.scoreboard_header_playerScoreProgress {
     border-collapse: collapse;
     padding: 15px;
     border-bottom: 1px solid #dddddd;
     background-color: #f3f3f3;
     color: #204a61;
 }
-.scoreboard_emptyCells {
-    background-color: #333333;
-}
 
 .scoreboard_scoreProgress {
     border-collapse: collapse;
@@ -170,19 +352,24 @@ p {
 .scoreboard_player {
     border-collapse: collapse;
     padding: 15px;
-    border-bottom: 1px solid #dddddd;
+    color: #ffffff;
 }
 
 .scoreboard_lastRow {
     border-collapse: collapse;
     padding: 15px;
-    border-bottom: 5px solid #204a61;
+    border-bottom: 10px solid #182025;
 }
 
 .scoreboard_data {
     border-collapse: collapse;
     padding: 15px;
-    border-bottom: 1px solid #dddddd;
+}
+
+.scoreboard_data_value {
+    border-collapse: collapse;
+    padding: 15px;
+    color: #ffffff;
 }
 
 /*******************************************
@@ -212,4 +399,3 @@ p {
     text-align: center;
     margin: 20px;
 }
-
