garrettmills
/
eecs448-project-1
mirror of https://github.com/EECS-448-Battleship/project-1
1
0
Fork 0
Code Issues Releases Wiki Activity

Whole front UI redesign:

Browse Source 
- Redesigned scoreboard table
- Redesigned topLevel
- Redesigned buttons with animations
- Redesigned font, background, colors and naming conventions
master
Lucas Brakenridge 4 years ago
parent e495905e75
commit a813b82061
4 changed files with 262 additions and 35 deletions
Show Stats Download Patch File Download Diff File

18
index.html
Unescape View File

@ -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>

19
src/components/ScoreBoard.component.js
Unescape View File

@ -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>

46
src/components/TopLevel.component.js
Unescape View File

@ -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"

214
src/style/components.css
Unescape View File

@ -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;
}

Write Preview
Loading…
Cancel
Save