Commit 211e7c3d authored by Manish Kumar's avatar Manish Kumar
Browse files

start of battle interface

parent bed8c44e
......@@ -7,6 +7,7 @@ import { FriendsMenuComponent } from './friends-menu/friends-menu.component';
import { AccountMenuComponent } from './account-menu/account-menu.component';
import { ProfilComponent } from './profil/profil.component';
import { HomeComponent } from './home/home.component'
import { BattleComponent } from "./battle/battle.component";
const routes: Routes = [
......@@ -19,7 +20,7 @@ const routes: Routes = [
component: TeamMenuComponent
},
{
path: 'battle',
path: 'battle-menu',
component: BattleMenuComponent
},
{
......@@ -34,6 +35,10 @@ const routes: Routes = [
path: 'profil',
component: ProfilComponent
},
{
path: 'battle',
component: BattleComponent
},
{
path: '',
component: HomeComponent
......
......@@ -21,6 +21,7 @@ import { ProfilComponent } from './profil/profil.component';
import { HomeComponent } from './home/home.component';
import { OnlinePlayersComponent } from './sub-components/online-players/online-players.component';
import { NotifierModule } from "angular-notifier";
import { BattleComponent } from './battle/battle.component';
@NgModule({
......@@ -35,7 +36,8 @@ import { NotifierModule } from "angular-notifier";
ClickOutsideDirective,
ProfilComponent,
HomeComponent,
OnlinePlayersComponent
OnlinePlayersComponent,
BattleComponent
],
imports: [
BrowserModule,
......
......@@ -11,7 +11,7 @@
</div>
</div>
<div class="col-md-4">
<a class="btn btn-primary" id="remove">Continue</a>
<a class="btn btn-primary" id="remove" routerLink='/battle'>Continue</a>
</div>
</div>
</div>
......
.main-container{
display: flex;
flex-direction: column;
height: 100vh;
}
.game {
position: relative;
background-image: url('http://bit.ly/pokemonbg');
background-size: 100% 100%;
background-repeat: no-repeat;
border: 3px solid black;
border-radius: 8px 8px 0 0;
height: 70%;
}
.opponent {
position: relative;
height: 300px;
}
.opponent .stats {
position: absolute;
top: 96px;
left: 40px;
width: 320px;
}
.opponent .pokemon {
position: absolute;
bottom: 0;
right: 140px;
width: 100px;
}
.player {
position: relative;
height: 192px;
}
.player .stats {
position: absolute;
top: 48px;
right: 40px;
width: 320px;
}
.player .pokemon {
position: absolute;
left: 100px;
bottom: 10px;
width: 160px;
}
.box {
padding: 8px;
background: #333;
border: 3px solid black;
border-top: none;
border-radius: 0 0 8px 8px;
color: #fff;
height: 30%;
/*width: 784px;*/
}
.box .message {
position: relative;
float: left;
font-size: 24px;
width: 50%;
}
.box .continue {
position: absolute;
margin-top: 30px;
float: left;
width: 25%;
height: 100%;
}
.box .continue button {
position: relative;
float: left;
background: #666;
border: 3px solid #888;
border-radius: 4px;
color: #fff;
font-family: monospace;
font-size: 20px;
line-height: 14px;
margin: 4px;
padding: 16px;
outline: none !important;
}
.box .continue button:hover {
background: #777;
border-color: #999;
}
.box .continue button:active {
background: #555;
border-color: #666;
}
.box .actions {
position: relative;
float: left;
width: 50%;
height: 100%;
}
.box .actions button {
position: relative;
float: left;
background: #666;
border: 3px solid #888;
border-radius: 4px;
color: #fff;
font-family: monospace;
font-size: 20px;
line-height: 14px;
margin: 4px;
padding: 16px;
width: calc(50% - 8px);
height: calc(50% - 8px);
outline: none !important;
}
.box .actions button:hover {
background: #777;
border-color: #999;
}
.box .actions button:active {
background: #555;
border-color: #666;
}
.stats {
background: #111;
border: 2px solid black;
border-radius: 8px;
color: white;
padding: 12px;
}
.stats .pokeballs {
position: relative;
display: inline-block;
vertical-align: middle;
}
.stats .pokeballs .pokeball {
position: relative;
float: left;
background-image: url('http://bit.ly/pokeballimg');
background-size: 100% 100%;
width: 25px;
height: 25px;
}
.stats .hp-count:before {
content: 'HP: '
}
.stats .hp-count {
float: right;
}
.stats .name {
font-weight: bold;
}
.stats .level:before {
content: "LVL"
}
\ No newline at end of file
<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>
<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" />
</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>
<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 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
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { BattleComponent } from './battle.component';
describe('BattleComponent', () => {
let component: BattleComponent;
let fixture: ComponentFixture<BattleComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ BattleComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(BattleComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-battle',
templateUrl: './battle.component.html',
styleUrls: ['./battle.component.css']
})
export class BattleComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
......@@ -101,17 +101,17 @@ export class ChatService {
}
}
public challengeAccepted(guest){
if(this.pseudo == undefined){
this.notifier.notify("warning", "You must login to battle !");
return false;
} else{
this.socket.emit('battle me', this.pseudo, guest); // nouvel événement .....
this.notifier.notify("success", "Challenge sent !");
console.log("challenge sent");
return true;
}
}
// public challengeAccepted(guest){
// if(this.pseudo == undefined){
// this.notifier.notify("warning", "You must login to battle !");
// return false;
// } else{
// this.socket.emit('challenge accepted', this.pseudo, guest); // nouvel événement .....
// this.notifier.notify("success", "Challenge sent !");
// console.log("challenge sent");
// return true;
// }
// }
public recevoirChallenge(){
let observable = new Observable(observer => {
......
......@@ -19,7 +19,7 @@
<a class="nav-link" routerLink='/friends'>Friends</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink='/battle'>Battle</a>
<a class="nav-link" routerLink='/battle-menu'>Battle</a>
</li>
</ul>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" routerLink={{chemin}}>{{titre}}</button>
......
import { TestBed } from '@angular/core/testing';
import { BattleSocketService } from './battle-socket.service';
describe('BattleSocketService', () => {
let service: BattleSocketService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(BattleSocketService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class BattleSocketService {
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