mirror/liberty-bikes
2
0
Fork 0
mirror of https://github.com/OpenLiberty/liberty-bikes.git synced 2025-01-18 10:23:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #53 from realModusOperandi/landscape-controls

Browse Source 
Landscape controls
This commit is contained in:
Liam Westby 2018-03-29 14:26:38 -05:00 committed by GitHub
commit bdba9ca086
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 103 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/prebuild/src/app/controls/controls.component.html
View File

@ -1,11 +1,14 @@
<div id="titlebar" class="navbar">
<h1>Liberty Bikes</h1>
</div>
<div id="game-buttons" class="navbar">
<button type="button" (click)="startGame()">Start Game</button>
<button type="button" (click)="requeue()">Requeue</button>
</div>
<div id="controller" [style.height.px]="windowHeight">
<canvas id="dpad-canvas" width="800" height="800"></canvas>
<div id="controls-container" [style.height.px]="windowHeight">
<div id="titlebar" class="navbar">
<h1>Liberty Bikes</h1>
</div>
<div id="game-buttons" class="navbar">
<button type="button" (click)="startGame()">Start Game</button>
<button type="button" (click)="requeue()">Requeue</button>
</div>
<div id="controller">
<canvas id="dpad-canvas" width="800" height="800"></canvas>
</div>
</div>

75
frontend/prebuild/src/app/controls/controls.component.scss
View File

@ -13,6 +13,17 @@ body {
height: 100%;
}
#controls-container {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
display: flex;
align-items: center;
}
.navbar {
background-color: rgba(0, 0, 0, 0.2);
@ -29,6 +40,8 @@ body {
top: 0;
width: 100%;
background: none;
justify-content: center;
}
@ -57,6 +70,8 @@ body {
width: 100%;
padding: 0px 5px;
border-top: 1px solid white;
}
#game-buttons button {
@ -79,9 +94,61 @@ body {
margin: 0 auto;
}
@media screen and (orientation: landscape) {
#controller {
grid-template: calc(100vmin - #{($titlebar) * 2}) / calc(100vmin - #{($titlebar) * 2});
@media screen and (max-height: 465px) {
#titlebar h1 {
font-size: 1em;
}
}
@media screen and (orientation: landscape) {
#controls-container {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: auto 1fr;
justify-content: center;
align-items: center;
padding: 0 20px;
}
#titlebar {
position: relative;
grid-area: 1 / 2;
background: none;
height: 100%;
font-size: 1.5em;
}
#game-buttons {
position: relative;
grid-area: 2 / 2;
height: 100%;
justify-content: space-around;
align-items: flex-start;
border-top: none;
background: none;
}
#game-buttons button {
width: 150px;
height: 100px;
letter-spacing: unset;
}
#controller {
grid-area: 1 / 1 / span 2 / span 1;
grid-template: calc(100vmin - #{($titlebar) * 2}) / calc(100vmin - #{($titlebar) * 2});
}
@media screen and (max-height: 320px), screen and (max-width: 569px) {
#game-buttons button {
height: 50px;
}
}
}

24
frontend/prebuild/src/app/controls/controls.component.ts
View File

@ -30,7 +30,12 @@ export class ControlsComponent implements OnInit, OnDestroy {
private preventScrolling = (evt: TouchEvent) => {
evt.preventDefault();
};
}
private pageWasResized = (evt: DeviceOrientationEvent) => {
this.windowHeight = window.innerHeight;
window.scrollTo(0, 0);
}
constructor(private gameService: GameService) {
gameService.messages.subscribe((msg) => {
@ -65,6 +70,11 @@ export class ControlsComponent implements OnInit, OnDestroy {
this.moveRight();
}
};
// Make sure the view is at the top of the page so touch event coordinates line up
window.scrollTo(0, 0);
window.addEventListener('orientationchange', this.pageWasResized);
window.addEventListener('resize', this.pageWasResized);
}
initCanvas() {
@ -132,7 +142,9 @@ export class ControlsComponent implements OnInit, OnDestroy {
}
draw() {
this.windowHeight = window.innerHeight;
if (window.scrollY != 0) {
window.scrollTo(0, 0);
}
const ctx = this.context;
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
ctx.strokeStyle = 'white';
@ -224,8 +236,6 @@ export class ControlsComponent implements OnInit, OnDestroy {
ctx.lineTo(rightArrow.point3.x, rightArrow.point3.y);
ctx.closePath();
ctx.stroke();
window.requestAnimationFrame(() => this.draw());
}
touchStarted(evt: TouchEvent) {
@ -290,6 +300,8 @@ export class ControlsComponent implements OnInit, OnDestroy {
} else {
this.rightPressed = false;
}
window.requestAnimationFrame(() => this.draw());
}
canvasReleased(x: number, y: number) {
@ -313,6 +325,8 @@ export class ControlsComponent implements OnInit, OnDestroy {
if (this.rightTriangle.containsPoint(location)) {
this.rightPressed = false;
}
window.requestAnimationFrame(() => this.draw());
}
// Game actions
@ -342,5 +356,7 @@ export class ControlsComponent implements OnInit, OnDestroy {
ngOnDestroy() {
window.removeEventListener('touchmove', this.preventScrolling);
window.removeEventListener('orientationchange', this.pageWasResized);
window.removeEventListener('resize', this.pageWasResized);
}
}