Commit d4977a61 authored by Manish Kumar's avatar Manish Kumar
Browse files

battle interface without game logic

parent 211e7c3d
......@@ -23,7 +23,6 @@ import { OnlinePlayersComponent } from './sub-components/online-players/online-p
import { NotifierModule } from "angular-notifier";
import { BattleComponent } from './battle/battle.component';
@NgModule({
declarations: [
AppComponent,
......
......@@ -14,48 +14,74 @@
border: 3px solid black;
border-radius: 8px 8px 0 0;
height: 70%;
display: flex;
flex-direction: column;
}
.opponent {
position: relative;
height: 300px;
height: 50%;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.opponent .stats {
display: flex;
flex-direction: column;
width: 40%;
}
.opponent .stats .row1{
display: flex;
justify-content: space-between;
}
.health-box {
background-color: #ccc;
position: relative;;
height: 1.5rem;
width: 90%;
margin: 0 auto;
border: solid 1px #aaa;
}
.health-bar {
transition: width .5s ease;
background-color: #007f00;
position: absolute;
top: 96px;
left: 40px;
width: 320px;
height: 100%;
width: 100%;
}
.opponent .pokemon {
.health-bar-red {
transition: width 2s ease;
position: absolute;
bottom: 0;
right: 140px;
width: 100px;
height: 100%;
width: 100%;
background-color: #cc0000;
}
.player {
position: relative;
height: 192px;
.health-bar-blue {
transition: width .5s ease;
position: absolute;
height: 100%;
width: 100%;
background-color: #3bd3df;
}
.player .stats {
position: absolute;
top: 48px;
right: 40px;
width: 320px;
.health-bar-text {
position: relative;
bottom: 80px;
}
.player .pokemon {
position: absolute;
left: 100px;
bottom: 10px;
width: 160px;
.opponent .pokemon {
width: 20%;
}
.box {
padding: 8px;
padding: 2%;
background: #333;
border: 3px solid black;
border-top: none;
......
<div class="main-container">
<div class="game">
<div class="opponent">
<div class="stats">
<div class="top">
<div class="pokeballs">
<div class="pokeball"></div>
<div class="pokeball"></div>
<div class="pokeball"></div>
<div class="pokeball"></div>
<div class="pokeball"></div>
<div class="stats">
<div class="row1">
<div>
<span class="name">
Charizard
</span>
<span class="level">
86
</span>
</div>
</div>
<div class="health-box">
<div class="health-bar-red" [style.width.%]="curHealthOpp"></div>
<div class="health-bar" [style.width.%]="curHealthOpp"></div>
<div class="health-bar-text"></div>
</div>
<div class="top">
<div class="pokeballs">
<div class="pokeball"></div>
<div class="pokeball"></div>
<div class="pokeball"></div>
<div class="pokeball"></div>
<div class="pokeball"></div>
</div>
</div>
</div>
<div id = "apHP" class="hp-count">100</div>
</div>
<span class="name">
Charizard
</span>
<span class="level">
86
</span>
</div>
<img class="pokemon" src="https://projectpokemon.org/images/normal-sprite/charizard.gif" alt ="A sprite of charizard" />
<img class="pokemon" src="https://projectpokemon.org/images/normal-sprite/charizard.gif" alt ="A sprite of charizard" />
</div>
<div class="player">
<div class="stats">
<div class="top">
<div class="pokeballs">
<div class="pokeball"></div>
<div class="pokeball"></div>
<div class="pokeball"></div>
<div class="pokeball"></div>
<div class="pokeball"></div>
</div>
<div id = "myHP" class="hp-count">100</div>
<div class="opponent">
<img class="pokemon" src="https://projectpokemon.org/images/sprites-models/normal-back/blastoise.gif" alt ="A sprite of charizard" />
<div class="stats">
<div class="row1">
<div>
<span class="name">
Blastoise
</span>
<span class="level">
86
</span>
</div>
<div id = "apHP" class="hp-count">{{curHealthSelf}}</div>
</div>
<div class="health-box">
<div class="health-bar-red" [style.width.%]="curHealthSelf"></div>
<div class="health-bar" [style.width.%]="curHealthSelf"></div>
<div class="health-bar-text"></div>
</div>
<div class="top">
<div class="pokeballs">
<div class="pokeball"></div>
<div class="pokeball"></div>
<div class="pokeball"></div>
<div class="pokeball"></div>
<div class="pokeball"></div>
</div>
</div>
</div>
<span class="name">
Blastoise
</span>
<span class="level">
86
</span>
</div>
<img class="pokemon" src="https://projectpokemon.org/images/sprites-models/normal-back/blastoise.gif" alt="A gif from blastoises back sprite" />
</div>
</div>
<div class="box">
<div id = "message" class="message">
What should Blastoise do?
</div>
<div class="actions">
<button onclick = "waterCannon()">Water Cannon</button>
<button (click) = "toggle()">Water Cannon</button>
<button onclick = "waterPulse()">Water Pulse</button>
<button onclick = "surf()">Surf</button>
<button onclick = "tackle()">Tackle</button>
</div>
<div class = "continue">
<button onclick = "compPokemon()">Continue</button>
</div>
</div>
</div>
\ No newline at end of file
......@@ -6,6 +6,17 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./battle.component.css']
})
export class BattleComponent implements OnInit {
isOpen = true;
maxHealth = 100;
curHealthSelf = 100;
curHealthOpp = 100;
damage = 0;
toggle() {
this.curHealthOpp -= 2;
console.log(this.curHealthOpp);
this.isOpen = !this.isOpen;
}
constructor() { }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment