Skip to content

Commit

Permalink
pitchPlayers have card look/players have roles
Browse files Browse the repository at this point in the history
  • Loading branch information
@maxkarnold
maxkarnold committed Oct 9, 2021
1 parent 7837039 commit c94559d
Show file tree
Hide file tree
Showing 11 changed files with 529 additions and 222 deletions.
18 changes: 0 additions & 18 deletions .firebase/hosting.ZGlzdA.cache
View file

This file was deleted.

16 changes: 0 additions & 16 deletions .firebase/hosting.ZGlzdC90ZWFtLWdlbi1uZw.cache
View file

This file was deleted.

1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ yarn-error.log
testem.log
/typings
*.log
*.cache

# System Files
.DS_Store
Expand Down
90 changes: 30 additions & 60 deletions src/app/components/home/home.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,10 @@
</ng-template>
</div>


<div class="tactics-container" cdkDropListGroup>
<div class="pitch-container">
<div class="starters-total-rating" *ngIf="this.pitchPlayers.length > 0">Avg Rating {{startersTotalRating}}</div>
<div class="squad-total-rating" *ngIf="checkSquadRules()">Squad Rating {{squadTotalRating}}</div>
<button mat-raised-button color="primary" type="button" (click)="resetStarters()" class="reset-button">Reset XI</button>
<div class="pitch-borders">
<div class="goal-box-top pitch-divs"></div>
Expand All @@ -90,11 +91,19 @@
<div class="pitch-grid">
<div *ngFor="let box of positionBoxes" [class]="getPositionBoxes(box)" cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="pitchPlayers">
<div [class]="getPlayerClass(box)" cdkDrag [cdkDragData]="box" (cdkDragStarted)="getPositionOutline($event)" (cdkDragReleased)="removeOutlineRelease($event)" (cdkDragDropped)="removeOutlineDrop($event)">
<div *ngIf="box.pitchPlayer !== undefined">
<img [src]="box.pitchPlayer.playerFace" alt="" class="player-face">
<span *ngIf="box.pitchPlayer !== undefined" class="pitch-player-info">{{box.pitchPlayer.pitchRating}}</span>
<span *ngIf="box.pitchPlayer !== undefined" class="pitch-player-info">{{box.pitchPlayer.pitchPosition}}</span>
<img *ngIf="box.pitchPlayer !== undefined" class="pitch-player-img" [src]="box.pitchPlayer.nationalityLogo">
<img *ngIf="box.pitchPlayer !== undefined" class="pitch-player-img" [src]="box.pitchPlayer.clubLogo">
<span *ngIf="box.pitchPlayer !== undefined" class="player-name">{{box.pitchPlayer.displayName}}</span>
</div>

<!-- <div *cdkDragPreview>
<img class="shirtIcon-img" [src]="shirtIcon" [alt]="">
<div class="player-preview">{{pitchPlayers[23].lastName}} {{pitchPlayers[23].position}} {{pitchPlayers[23].rating}}</div>
</div> -->
{{box.html}}
</div> -->
</div>
<div [class]="getPosBoxClass(box)">
<!-- {{box.class}} -->
Expand Down Expand Up @@ -127,82 +136,38 @@ <h2>Roster</h2>
<li>Sub 5</li>
<li>Sub 6</li>
<li>Sub 7</li>
<li>Sub 8</li>
<li>Sub 9</li>
<li>Sub 10</li>
<li>Sub 11</li>
<li>Sub 12</li>
</ul>
<ul class="reserves">
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
<li>46</li>
<li>47</li>
<li>48</li>
<li>49</li>
<li>50</li>
<li>51</li>
<li>52</li>
<li>53</li>
<li>54</li>
<li>55</li>
<li>56</li>
<li>57</li>
<li>58</li>
<li>59</li>
<li>60</li>
<li>60</li>
<li>61</li>
<li>62</li>
<li>63</li>
<li>64</li>
<li>65</li>
<li>66</li>
<li>67</li>
<li>68</li>
<li>69</li>
<li>70</li>
<li *ngFor="let player of players.slice(12); let i = index">{{i + 24}}</li>
</ul>
</div>
<div class="players-container">
<mat-accordion multi>
<div class="starters-container">
<mat-expansion-panel *ngFor="let player of pitchPlayers">
<mat-expansion-panel *ngFor="let player of sortedPitchPlayers">
<mat-expansion-panel-header>
<ul class="player-row">
<li class="name-cell">{{player.firstInitial}}. {{player.lastName}}</li>
<li>{{player.position}}</li>
<li>{{player.age}}</li>
<li>{{player.rating}}</li>
<li *cdkDragPreview>
<!-- <li *cdkDragPreview>
<img class="shirtIcon-img" [src]="shirtIcon" [alt]="">
<div class="player-preview">{{player.lastName}} {{player.position}} {{player.rating}}</div>
</li>
</li> -->
</ul>
</mat-expansion-panel-header>
<p class="expanded-info">
<span>Full Name:</span><span>{{player.firstName}} {{player.lastName}}</span>
</p>
<p class="expanded-info">
<span>Preferred Role/Duty:</span><span>{{player.preferredRole}} - {{player.preferredDuty}}</span>
</p>
<p class="expanded-info">
<span>Other Positions:</span><span *ngFor="let pos of player.altPositions">{{pos}}</span>
</p>
Expand Down Expand Up @@ -236,14 +201,17 @@ <h2>Roster</h2>
<li>{{player.age}}</li>
<li>{{player.rating}}</li>
<li *cdkDragPreview>
<img class="shirtIcon-img" [src]="shirtIcon" [alt]="">
<!-- <img class="shirtIcon-img" [src]="shirtIcon" [alt]=""> -->
<div class="player-preview">{{player.lastName}} {{player.position}} {{player.rating}}</div>
</li>
</ul>
</mat-expansion-panel-header>
<p class="expanded-info">
<span>Full Name:</span><span>{{player.firstName}} {{player.lastName}}</span>
</p>
<p class="expanded-info">
<span>Preferred Role/Duty:</span><span>{{player.preferredRole}} - {{player.preferredDuty}}</span>
</p>
<p class="expanded-info">
<span>Other Positions:</span><span *ngFor="let pos of player.altPositions">{{pos}}</span>
</p>
Expand Down Expand Up @@ -288,6 +256,7 @@ <h3>Player Table</h3>
<th mat-sort-header="name">Name</th>
<th mat-sort-header="club">Club</th>
<th mat-sort-header="nationality" class="desktop">Nationality</th>
<th mat-sort-header="roleDuty" class="desktop">Preferred Role/Duty</th>
<th mat-sort-header="pos">Position</th>
<th mat-sort-header="altPositions" class="desktop">Other Positions</th>
<th mat-sort-header="foot" class="desktop">Preferred Foot</th>
Expand All @@ -309,6 +278,7 @@ <h3>Player Table</h3>
<span>{{player.nationality}}</span>
</div>
</td>
<td class="desktop">{{player.preferredRole}} - {{player.preferredDuty}}</td>
<td>{{player.position}}</td>
<td class="alt-positions desktop">
<div>
Expand Down
106 changes: 96 additions & 10 deletions src/app/components/home/home.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,11 +282,36 @@ h3 {
padding: 10px;
}
}
.starters-total-rating,
.squad-total-rating {
color: white;
background-color: #424242;
padding: 6px;
border-radius: 5px;
position: absolute;
z-index: 4;
font-size: 0.75rem;
@media screen and (min-width: 800px) {
font-size: 0.9rem;
padding: 10px;
}
}
.starters-total-rating {
top: 5%;
left: 5%;
transform: translate(10%, -10%);
}
.squad-total-rating {
top: 12%;
left: 5%;
transform: translate(8.5%, -10%);
}
.pitch-borders {
position: relative;
height: 95%;
width: 95%;
height: 98%;
width: 98%;
margin: 0.5rem auto;
// padding: 10px;
border: 1px solid white;
z-index: 2;
display: flex;
Expand Down Expand Up @@ -350,12 +375,13 @@ h3 {
.pitch-grid{
z-index: 3;
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: grid;
grid-template-rows: repeat(6, 1fr);
grid-template-columns: repeat(7, 1fr);
gap: 0.4rem;
gap: 1px 5px;
justify-items: center;
align-items: center;
padding: 0 0.5rem 0;
Expand All @@ -382,19 +408,79 @@ h3 {
.inactive {
display: none;
}
.active.player-box {
width: clamp(2.5rem, 8vw, 10rem);
height: 9vh;
.active.player-box {
width: clamp(2.5rem, 7.25vw, 11.5rem);
height: 16.5vh;
padding: 10px 3.5px;
max-width: 100%;
max-height: 10.5rem;
background: #a3a1a1;
border: 1px solid white;
color: white;
border-radius: 5px;
color: #353535;
// border-radius: 5px;
// border: 1px solid black;
// background: white cover;
// background-size: cover;
border-radius: 50% / 10%;
justify-content: center;
align-items: center;
text-align: center;
cursor: grab;
&.diamond {
background: linear-gradient(45deg, #f3f4ff, #68aeff);
}
&.platinum {
background: linear-gradient(45deg, #ffffff, #bcc8fd);
}
&.gold {
background: linear-gradient(45deg, #fff2a8, #e7d52c);
// background: gold;
}
&.silver {
background: linear-gradient(45deg, #bbbbbb, #838383);
background: silver;
}
&.bronze {
background: linear-gradient(45deg, #e06513, #884c31);
}
&.brown {
background: #693e29;
}
& > div {
width: 100%;
display: grid;
grid-template-columns: 1fr fit-content(50%);
gap: 3.5px 1.5px;
align-items: center;
justify-items: center;
.pitch-player-info {
grid-column: 1;
font-size: 0.75rem;
line-height: normal;
&:first-of-type {
font-size: 1.25rem;
}
}
.pitch-player-img {
width: clamp(15px, 1.7vw, 30px);
grid-column: 1;
}
.player-name {
// font-size: 0.6rem;
grid-column: 2;
grid-row: 3 / 5;

}
.player-face {
grid-column: 2;
grid-row: 1 / 3;
width: 70%;
// width: 100%;
}
}

}
.player-face,
.pitch-player-img {
width: 25%;
}
.active.pos-box {
width: clamp(2.5rem, 7.5vw, 10rem);
Expand Down
Loading

0 comments on commit c94559d

Please sign in to comment.