CT-39 Feature: Add highlightning around each unit on force.html #19

Merged
mitch merged 1 commits from CT-39 into master 2022-04-20 03:32:09 +00:00
2 changed files with 18 additions and 17 deletions

View File

@ -1,62 +1,62 @@
<div class="unit-list" *ngFor="let unitLocal of forceList"> <div class="unit-list" *ngFor="let unitLocal of forceList" xmlns="http://www.w3.org/1999/html">
<div class="unit"> <div class="unit" id="unit" style="border: 1px solid #AEAEAE;" >
<div class="col-md-6-mobile" style="width: 100%; justify-content: center">{{ unitLocal.unit.unitName }}</div> <div class="col-md-6-mobile" style="width: 100%; justify-content: center"><b>Unit Name: </b>{{ unitLocal.unit.unitName }}</div>
<br> <br>
<div class="powers" *ngIf="unitLocal.unit.warlordTraits"> <div class="powers" *ngIf="unitLocal.unit.warlordTraits">
<div class="col-md-6-mobile" style="width: 80%; justify-content: center">{{ unitLocal.unit.warlordTraits }}</div> <div class="col-md-6-mobile" style="width: 80%; justify-content: center"><b>Warlord Traits: </b>{{ unitLocal.unit.warlordTraits }}</div>
</div> </div>
<div class="powers" *ngIf="unitLocal.unit.psychicPowersTaken"> <div class="powers" *ngIf="unitLocal.unit.psychicPowersTaken">
<div class="col-md-6-mobile" style="width: 80%; justify-content: center">{{ unitLocal.unit.psychicPowersTaken }}</div> <div class="col-md-6-mobile" style="width: 80%; justify-content: center"><b>Psychic Powers </b>{{ unitLocal.unit.psychicPowersTaken }}</div>
</div> </div>
<div class="powers" *ngIf="unitLocal.unit.relics"> <div class="powers" *ngIf="unitLocal.unit.relics">
<div class="col-md-6-mobile" style="width: 80%; justify-content: center">{{ unitLocal.unit.relics }}</div> <div class="col-md-6-mobile" style="width: 80%; justify-content: center"><b>Relics: </b>{{ unitLocal.unit.relics }}</div>
</div> </div>
<div class="powers" *ngIf="unitLocal.unit.battleHonours"> <div class="powers" *ngIf="unitLocal.unit.battleHonours">
<div class="col-md-6-mobile" style="width: 80%; justify-content: center">{{ unitLocal.unit.battleHonours }}</div> <div class="col-md-6-mobile" style="width: 80%; justify-content: center"><b>Battle Honours: </b>{{ unitLocal.unit.battleHonours }}</div>
</div> </div>
<div class="powers" *ngIf="unitLocal.unit.battleScars"> <div class="powers" *ngIf="unitLocal.unit.battleScars">
<div class="col-md-6-mobile" style="width: 80%; justify-content: center">{{ unitLocal.unit.battleScars }}</div> <div class="col-md-6-mobile" style="width: 80%; justify-content: center"><b>Battle Scars: </b>{{ unitLocal.unit.battleScars }}</div>
</div> </div>
<div class="col-md-6-mobile" style="width: 80%; height: 45px"> <div class="col-md-6-mobile" style="width: 80%; height: 45px">
Units Destroyed: {{unitLocal.unitsDestroyed}} <b>Units Destroyed: </b>{{unitLocal.unitsDestroyed}}
<button style="text-align: right" type="#" (click)="adjustCounter(unitLocal, 1, 'unitsDestroyed')" <button style="text-align: right" type="#" (click)="adjustCounter(unitLocal, 1, 'unitsDestroyed')"
class="btn btn-primary float-right">+</button> class="btn btn-primary float-right">+</button>
<button type="#" (click)="adjustCounter(unitLocal, -1, 'unitsDestroyed')" <button type="#" (click)="adjustCounter(unitLocal, -1, 'unitsDestroyed')"
class="btn btn-primary float-right">-</button> class="btn btn-primary float-right">-</button>
</div> </div>
<div class="col-md-6-mobile" style="width: 80%; height: 45px"> <div class="col-md-6-mobile" style="width: 80%; height: 45px">
Agenda 1: {{unitLocal.agendaOneTally}} <b>Agenda 1: </b>{{unitLocal.agendaOneTally}}
<button style="text-align: right" type="#" (click)="adjustCounter(unitLocal, 1, 'agendaOneTally')" <button style="text-align: right" type="#" (click)="adjustCounter(unitLocal, 1, 'agendaOneTally')"
class="btn btn-primary float-right">+</button> class="btn btn-primary float-right">+</button>
<button type="#" (click)="adjustCounter(unitLocal, -1, 'agendaOneTally')" <button type="#" (click)="adjustCounter(unitLocal, -1, 'agendaOneTally')"
class="btn btn-primary float-right">-</button> class="btn btn-primary float-right">-</button>
</div> </div>
<div class="col-md-6-mobile" style="width: 80%; height: 45px"> <div class="col-md-6-mobile" style="width: 80%; height: 45px">
Agenda 2: {{unitLocal.agendaTwoTally}} <b>Agenda 2: </b>{{unitLocal.agendaTwoTally}}
<button style="text-align: right" type="#" (click)="adjustCounter(unitLocal, 1, 'agendaTwoTally')" <button style="text-align: right" type="#" (click)="adjustCounter(unitLocal, 1, 'agendaTwoTally')"
class="btn btn-primary float-right">+</button> class="btn btn-primary float-right">+</button>
<button type="#" (click)="adjustCounter(unitLocal, -1, 'agendaTwoTally')" <button type="#" (click)="adjustCounter(unitLocal, -1, 'agendaTwoTally')"
class="btn btn-primary float-right">-</button> class="btn btn-primary float-right">-</button>
</div> </div>
<div class="col-md-6-mobile" style="width: 80%; height: 45px"> <div class="col-md-6-mobile" style="width: 80%; height: 45px">
Agenda 3: {{unitLocal.agendaThreeTally}} <b>Agenda 3: </b>{{unitLocal.agendaThreeTally}}
<button style="text-align: right" type="#" (click)="adjustCounter(unitLocal, 1, 'agendaThreeTally')" <button style="text-align: right" type="#" (click)="adjustCounter(unitLocal, 1, 'agendaThreeTally')"
class="btn btn-primary float-right">+</button> class="btn btn-primary float-right">+</button>
<button type="#" (click)="adjustCounter(unitLocal, -1, 'agendaThreeTally')" <button type="#" (click)="adjustCounter(unitLocal, -1, 'agendaThreeTally')"
class="btn btn-primary float-right">-</button> class="btn btn-primary float-right">-</button>
</div> </div>
<div class="col-md-6-mobile" style="width: 80%; height: 45px"> <div class="col-md-6-mobile" style="width: 80%; height: 45px">
EXP: {{unitLocal.experience}} <b>EXP: </b>{{unitLocal.experience}}
<button style="text-align: right" type="#" (click)="adjustCounter(unitLocal, 1, 'experience')" <button style="text-align: right" type="#" (click)="adjustCounter(unitLocal, 1, 'experience')"
class="btn btn-primary float-right">+</button> class="btn btn-primary float-right">+</button>
<button type="#" (click)="adjustCounter(unitLocal, -1, 'experience')" <button type="#" (click)="adjustCounter(unitLocal, -1, 'experience')"
class="btn btn-primary float-right">-</button> class="btn btn-primary float-right">-</button>
</div> </div>
<div class="col-md-6-mobile" style="width: 80%; height: 45px">Is Dead: <div class="col-md-6-mobile" style="width: 80%; height: 45px"><b>Is Dead: </b>
<input [(ngModel)]="unitLocal.isDead" type="checkbox" name="isDead" class="float-right"> <input [(ngModel)]="unitLocal.isDead" type="checkbox" name="isDead" class="float-right">
<label>{{unitLocal.isDead}}</label> <label>{{unitLocal.isDead}}</label>
</div> </div>
<div class="col-md-6-mobile" style="width: 80%; height: 45px">Marked for Greatness: <div class="col-md-6-mobile" style="width: 80%; height: 45px"><b>Marked for Greatness: </b>
<input [(ngModel)]="unitLocal.isMarked" type="checkbox" name="isDead" class="float-right"> <input [(ngModel)]="unitLocal.isMarked" type="checkbox" name="isDead" class="float-right">
<label>{{unitLocal.isMarked}}</label> <label>{{unitLocal.isMarked}}</label>
</div> </div>
@ -75,10 +75,10 @@
class="btn btn-danger">Clear</button> class="btn btn-danger">Clear</button>
&nbsp; &nbsp;
<button type="submit" <button type="submit"
(click)="battleWon = false; saveList()" (click)="battleWon = false; saveList(); previousState()"
class="btn btn-danger float-right">DEFEAT</button> class="btn btn-danger float-right">DEFEAT</button>
&nbsp; &nbsp;
<button type="submit" <button type="submit"
(click)="battleWon = true; saveList()" (click)="battleWon = true; saveList(); previousState()"
class="btn btn-success float-right">VICTORY</button> class="btn btn-success float-right">VICTORY</button>
</div> </div>

View File

@ -206,6 +206,7 @@ entity detail page css
width: 60px; width: 60px;
background-color: whitesmoke; background-color: whitesmoke;
color: black; color: black;
font-weight: normal;
border: 1px solid black; border: 1px solid black;
} }