Skip to content

Commit

Permalink
Initial mobile horizontal layout started
Browse files Browse the repository at this point in the history
  • Loading branch information
ZainGS committed Apr 12, 2024
1 parent c49dea1 commit ddadf60
Showing 1 changed file with 219 additions and 8 deletions.
227 changes: 219 additions & 8 deletions ClientApp/src/app/home/home.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,8 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
</div>
-->

<!-- Base Div (Container) -->
<div>
<!-- DESKTOP: Base Div (Container) -->
<div class="desktop-container">
<div style="color: white; position: absolute; top: 0%; left: 0%; width:100%;">
<div>
<div class="flex-container">
Expand Down Expand Up @@ -225,27 +225,27 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
<div class="controller-container floating-anim">

<!-- Base Unit -->
<img class="noselect nodrag" width="175%"
<img class="noselect nodrag controller-size-desktop"
src="assets/candycon_controller.png" alt="CandyConLab">

<!-- Faceplate -->
<img *ngIf="selectedFaceplate != null" class="floating-anim noselect nodrag faceplate-overlay"
<img *ngIf="selectedFaceplate != null" class="noselect nodrag faceplate-overlay"
[src]="faceplateUrl" alt="CandyConLab" [ngStyle]="{'opacity' : faceplateOpacity}">

<!-- Right Thumbstick -->
<img *ngIf="selectedRightThumbstick != null" class="floating-anim noselect nodrag thumbstick-1-overlay cropped-thumbstick"
<img *ngIf="selectedRightThumbstick != null" class="noselect nodrag thumbstick-1-overlay cropped-thumbstick"
[src]="thumbstickRightUrl" alt="CandyConLab">

<!-- Left Thumbstick -->
<img *ngIf="selectedLeftThumbstick != null" class="floating-anim noselect nodrag thumbstick-2-overlay cropped-thumbstick"
<img *ngIf="selectedLeftThumbstick != null" class="noselect nodrag thumbstick-2-overlay cropped-thumbstick"
[src]="thumbstickLeftUrl" alt="CandyConLab">

<!-- DPad Classic -->
<img *ngIf="selectedDPad != null && dPadToggle == true" class="floating-anim noselect nodrag dpad-overlay cropped-dpad-classic"
<img *ngIf="selectedDPad != null && dPadToggle == true" class="noselect nodrag dpad-overlay cropped-dpad-classic"
[src]="dpadUrl" alt="CandyConLab">

<!-- DPad Modern -->
<img *ngIf="selectedDPad != null && dPadToggle == false" class="floating-anim noselect nodrag dpad-overlay cropped-dpad-modern"
<img *ngIf="selectedDPad != null && dPadToggle == false" class="noselect nodrag dpad-overlay cropped-dpad-modern"
[src]="dpadUrl" alt="CandyConLab">

</div>
Expand Down Expand Up @@ -315,5 +315,216 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
</div>
</div>

<!-- MOBILE: Base Div (Container) -->
<div class="mobile-container">
<div style="color: white; position: absolute; top: 0%; left: 0%; width:100%;">
<div>
<div class="flex-container-mobile">
<!-- Row 0 -->
<!-- TITLE CELL -->
<div class="flex-item-mobile special-overflow" style="border-bottom: double 20px rgba(1,1,1,.1); margin-top: -10px; margin-left: -10px;">
<div class="noselect nodrag title-container-mobile">
<span class="glow" style="color: #FF0095; font-weight:500; white-space:nowrap;">CANDY CON LAB</span>
</div>
<div class="noselect nodrag sub-title-container-mobile">
<span class="shadow-text glow-anim sub-title-text" style="margin-left: 7vw;">BUILD YOUR CONTROLLER</span>

</div>
<span class="faded-repeat-text" style="margin-left: 7vw; position: absolute; opacity: .2; font-size: 30px; margin-top: -48px;">CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT.</span>
</div>

<!-- SELECTED ITEMS CELL -->
<div class="flex-item-mobile">
<div class="selection-container-mobile">

<!-- FACEPLATE -->
<div style="display: flex; align-items: start; gap: 20px;">
<div class="selection-box-mobile faceplate-selection-position-mobile"
[ngStyle]="
{'box-shadow' : selectedFaceplate == null ?
'0 0 50px #fff, -10px 0 20px #f0f, 10px 0 200px #0ff' :
'0 0 50px ' + colorMapping[selectedFaceplate?.partColor] + ', -10px 0 20px #f0f, 10px 0 20px #0ff',
'border' : selectedFaceplate == null ?
'7px double rgba(255,255,255,.05)' :
'7px double rgba(' + hexToRgb(colorMapping[selectedFaceplate?.partColor]).join(',') + ',.1)'}">
<img *ngIf="selectedFaceplate == null" class="default-selection-img" width="100%" src="assets/faceplate.svg" alt="Faceplate icon" style="transform:scale(.7);">
<img *ngIf="selectedFaceplate != null" class="selection-img" width="100%" [src]="selectedFaceplate.imageUrls[0]" alt="Faceplate icon">
</div>

<!-- FACEPLATE Visibility Slider -->
<div class="selection-box-setting" style="margin-top: -3vh; margin-left: 9vw;">
<div>
<!-- Slider Top Eye Icon -->
<div>
<img *ngIf="faceplateOpacity != 0" src="assets/eye.svg" alt="visibility icon" style="opacity: .55; margin-bottom: 34px !important;" width="24px" />
<img *ngIf="faceplateOpacity == 0" src="assets/eye_off.svg" alt="visibility icon" style="opacity: .55; margin-bottom: 34px !important;" width="24px" />
</div>
<!-- Visibility Slider -->
<div>
<mat-slider color="accent" disableRipple min="0" max="1" step=".1" style="transform: rotate(-90deg); min-width: 70px; width: 5vw; ">
<input matSliderThumb [(value)]="faceplateOpacity" (input)="setFaceplateOpacity($event)">
</mat-slider>
</div>
</div>
</div>
</div>

<!-- THUMBSTICK -->
<div class="selection-box-mobile thumbstick-selection-position-mobile" style="backdrop-filter: blur(10px);"
[ngStyle]="
{'box-shadow' : selectedRightThumbstick == null ?
'0 0 50px #fff, -10px 0 20px #f0f, 10px 0 20px #0ff' :
'0 0 50px ' + colorMapping[selectedRightThumbstick?.partColor] + ', -10px 0 20px #f0f, 10px 0 20px #0ff',
'border' : selectedRightThumbstick == null ?
'7px double rgba(255,255,255,.05)' :
'7px double rgba(' + hexToRgb(colorMapping[selectedRightThumbstick?.partColor]).join(',') + ',.1)'}">
<img *ngIf="selectedRightThumbstick == null && selectedLeftThumbstick == null" class="default-selection-img" width="100%" src="assets/joystick.svg" alt="Right Thumbstick icon" style="transform: scale(.7)">
<img *ngIf="selectedLeftThumbstick != null" class="selection-img cropped-selection-thumbstick" width="100%" [src]="selectedLeftThumbstick.imageUrls[0]" alt="Left Thumbstick icon" style="margin-top: -40px;">
<img *ngIf="selectedRightThumbstick != null" class="selection-img cropped-selection-thumbstick" width="100%" [src]="selectedRightThumbstick.imageUrls[0]" alt="Right Thumbstick icon" style="margin-top: 20px;">

<!-- THUMBSTICK Swapper Button -->
<button *ngIf="selectedLeftThumbstick != null && selectedRightThumbstick != null" (click)="swapThumbsticks()" style="position: absolute; max-width: 80px; max-height: 80px; width: 66px; height: 66px; margin-left: 22px; margin-top: -5px; transform: scale(.6); background-color: transparent; border: 5px solid rgba(255,255,255,.01); border-radius: 20px;">
<img [@rotate]="rotateState" src="assets/cycle.svg" alt="visibility icon" style="transform: scale(1); transform-origin:center; opacity: .5" />
</button>
</div>


<!-- DPAD -->
<div class="dpad-selection-position-mobile" style="display: flex; flex-direction: row; align-items: start; gap: 20px; ">
<!-- DPAD Selection Box -->
<div class="selection-box-mobile" style="backdrop-filter: blur(10px);"
[ngStyle]="{'box-shadow': selectedDPad == null ? '0 0 50px #fff, -10px 0 80px #f0f, 10px 0 80px #0ff' : '0 0 50px ' + colorMapping[selectedDPad?.partColor] + ', -10px 0 80px #f0f, 10px 0 80px #0ff',
'border': selectedDPad == null ? '7px double rgba(255,255,255,.05)' : '7px double rgba(' + hexToRgb(colorMapping[selectedDPad?.partColor]).join(',') + ',.1)'}">
<img *ngIf="selectedDPad== null" class="default-selection-img" width="100%" src="assets/dpad.svg" alt="DPad icon" style="transform: scale(.7)">
<img *ngIf="selectedDPad!= null" class="selection-img" width="100%" [src]="selectedDPad.imageUrls[0]" alt="DPadicon">
</div>
<!-- DPAD Switcher -->
<div class="selection-box-setting">
<div>
<!-- Top Toggle: Classic DPad -->
<div>
<img src="assets/classic_dpad.svg" alt="visibility icon" style="margin-bottom: 12px; margin-left: 2px; opacity: .4;" width="24px" />
</div>
<!-- Toggler -->
<div>
<mat-slide-toggle [(ngModel)]="dPadToggle" color="accent" style="transform: rotate(-90deg) scale(1); opacity: .4;">
</mat-slide-toggle>
</div>
<!-- Bottom Toggle: Modern DPad -->
<div>
<img src="assets/modern_dpad.svg" alt="visibility icon" style="margin-top: 14px; margin-left: 2px; opacity: .4;" width="24px" />
</div>
</div>
</div>
</div>
</div>

<!-- Tools -->
<div style="margin-top: 6vh;">
<div class="randomizer-container">
<!-- Randomizer -->
<button class="mat-elevation-z1" (click)="randomize()" style="z-index: 100; max-width: 80px; max-height: 80px; width: 60px; height: 60px; transform: scale(.95); background-color: transparent; border: 5px solid rgba(255,255,255,.05); border-radius: 10px; backdrop-filter: blur(10px); ">
<img [@rotate-jump]="rotateJumpState" src="assets/dice.svg" alt="randomize icon" style="opacity: .6; margin-left: -6px; transform-origin: center;" width="50" />
</button>
<!-- Clear Parts -->
<button class="mat-elevation-z1" (click)="clearParts()" style="z-index: 100; max-width: 80px; max-height: 80px; width: 60px; height: 60px; transform: scale(.95); background-color: transparent; border: 5px solid rgba(255,255,255,.05); border-radius: 10px; backdrop-filter: blur(10px); margin-left: 30px;">
<img [@trash-shake]="trashShakeState" src="assets/delete_controller.svg" alt="reset icon" style="opacity: .6; margin-left: -6px; transform-origin: center;" width="50" />
</button>
</div>
</div>

</div>

<!-- CONTROLLER AND BRANDING-->
<div class="flex-item-mobile" style="align-content: center; margin-top: 8vh;">
<div class="controller-container-mobile">
<div class="floating-anim">

<!-- Base Unit -->
<img class="noselect nodrag controller-size-mobile"
src="assets/candycon_controller.png" alt="CandyConLab">

<!-- Faceplate -->
<img *ngIf="selectedFaceplate != null" class="noselect nodrag faceplate-overlay-mobile"
[src]="faceplateUrl" alt="CandyConLab" [ngStyle]="{'opacity' : faceplateOpacity}">

<!-- Right Thumbstick -->
<img *ngIf="selectedRightThumbstick != null" class="noselect nodrag thumbstick-1-overlay-mobile cropped-thumbstick-mobile"
[src]="thumbstickRightUrl" alt="CandyConLab">

<!-- Left Thumbstick -->
<img *ngIf="selectedLeftThumbstick != null" class="noselect nodrag thumbstick-2-overlay-mobile cropped-thumbstick-mobile"
[src]="thumbstickLeftUrl" alt="CandyConLab">

<!-- DPad Classic -->
<img *ngIf="selectedDPad != null && dPadToggle == true" class="noselect nodrag dpad-overlay-mobile cropped-dpad-classic-mobile"
[src]="dpadUrl" alt="CandyConLab">

<!-- DPad Modern -->
<img *ngIf="selectedDPad != null && dPadToggle == false" class="noselect nodrag dpad-overlay-mobile cropped-dpad-modern-mobile"
[src]="dpadUrl" alt="CandyConLab">

</div>
</div>

<!-- CANDY CON Branding: Logo + Slogan -->
<div class="submit-box-mobile">
<button (click)="lockedIn()" class="lockin-button-text"
[ngStyle]="{'color' : selectedCount === 4 ? 'deeppink' : 'white',
'opacity' : selectedCount=== 4 ? '1' : '.5'}">
LOCK IN
</button>
</div>
<div class="candycon-logo-container-mobile">

<img class="noselect nodrag candycon-logo" src="assets/candycon_logo_light.png" alt="CandyConLab">
</div>
<div class="candycon-slogan">
<span class="noselect nodrag shadow-text ms-1">CREATE. PLAY. REPEAT.</span>
</div>
</div>

<!-- SUBMIT -->
<!--
<div class="flex-item-mobile">
<div class="submit-box-mobile">
<div class="submit-button">
<button (click)="lockedIn()" class="lockin-button-text"
[ngStyle]="{'color' : selectedCount === 4 ? 'deeppink' : 'white',
'opacity' : selectedCount=== 4 ? '1' : '.5'}">
LOCK IN
</button>
</div>
</div>
</div>
-->

</div>
</div>

<!-- Open/Close Sidenav -->
<button class="sidenav-expansion-button" (click)="toggleSidenav()"></button>

<!-- Version Information -->
<span class="noselect nodrag" style="font-size: 20px; position: relative; top: 0%; min-width: max-content; text-align-last: center;">
<div class="versioning">
<span style="position: fixed; bottom: 0; right: 0; font-size: 12px; margin-right: 10px;">
<span class="text-jump-anim ms-3">
<span style="color:yellow">&nbsp;●&nbsp;</span>
<span style="color:tomato">●&nbsp;</span>
<span style="color:cyan">●&nbsp;</span>
<span style="color:mediumorchid">●&nbsp;</span>
<span style="color:orange">●&nbsp;</span>
<span style="color:pink">●&nbsp;</span>
<span style="color:teal">●&nbsp;</span>
<span style="color:limegreen">●&nbsp;</span>
</span>
Beta v0.2
</span>
</div>
</span>
</div>
</div>

</mat-sidenav-content>
</mat-sidenav-container>

0 comments on commit ddadf60

Please sign in to comment.