Skip to content

Commit e832c17

Browse files
trungvosetrungvose
committed
Responsive WIP
1 parent e247901 commit e832c17

File tree

5 files changed

+87
-58
lines changed

5 files changed

+87
-58
lines changed

‎src/app/components/screen-decoration/screen-decoration.component.html‎

Lines changed: 48 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -12,98 +12,98 @@
1212
</div>
1313
<h1>{{title}}</h1>
1414
<div class="view">
15-
<b class="filled"></b>
15+
<t-tile [tile]="filled"></t-tile>
1616
<div class="clear"></div>
17-
<b class="filled"></b>
18-
<b class="filled"></b>
17+
<t-tile [tile]="filled"></t-tile>
18+
<t-tile [tile]="filled"></t-tile>
1919
<div class="clear"></div>
2020
<em></em>
21-
<b class="filled"></b>
21+
<t-tile [tile]="filled"></t-tile>
2222
<p></p>
2323
<em></em>
24-
<b class="filled"></b>
24+
<t-tile [tile]="filled"></t-tile>
2525
<div class="clear"></div>
26-
<b class="filled"></b>
27-
<b class="filled"></b>
26+
<t-tile [tile]="filled"></t-tile>
27+
<t-tile [tile]="filled"></t-tile>
2828
<div class="clear"></div>
2929
<em></em>
30-
<b class="filled"></b>
30+
<t-tile [tile]="filled"></t-tile>
3131
<p></p>
32-
<b class="filled"></b>
33-
<b class="filled"></b>
34-
<b class="filled"></b>
35-
<b class="filled"></b>
32+
<t-tile [tile]="filled"></t-tile>
33+
<t-tile [tile]="filled"></t-tile>
34+
<t-tile [tile]="filled"></t-tile>
35+
<t-tile [tile]="filled"></t-tile>
3636
<p></p>
37-
<b class="filled"></b>
37+
<t-tile [tile]="filled"></t-tile>
3838
<div class="clear"></div>
39-
<b class="filled"></b>
40-
<b class="filled"></b>
39+
<t-tile [tile]="filled"></t-tile>
40+
<t-tile [tile]="filled"></t-tile>
4141
<div class="clear"></div>
42-
<b class="filled"></b>
42+
<t-tile [tile]="filled"></t-tile>
4343
<p></p>
44-
<b class="filled"></b>
45-
<b class="filled"></b>
44+
<t-tile [tile]="filled"></t-tile>
45+
<t-tile [tile]="filled"></t-tile>
4646
<div class="clear"></div>
47-
<b class="filled"></b>
47+
<t-tile [tile]="filled"></t-tile>
4848
<div class="clear"></div>
49-
<b class="filled"></b>
49+
<t-tile [tile]="filled"></t-tile>
5050
<p></p>
5151
<em></em>
52-
<b class="filled"></b>
52+
<t-tile [tile]="filled"></t-tile>
5353
<div class="clear"></div>
5454
<em></em>
55-
<b class="filled"></b>
55+
<t-tile [tile]="filled"></t-tile>
5656
<div class="clear"></div>
5757
<em></em>
58-
<b class="filled"></b>
58+
<t-tile [tile]="filled"></t-tile>
5959
<div class="clear"></div>
6060
<em></em>
61-
<b class="filled"></b>
61+
<t-tile [tile]="filled"></t-tile>
6262
</div>
6363
<div class="view l">
6464
<em></em>
65-
<b class="filled"></b>
65+
<t-tile [tile]="filled"></t-tile>
6666
<div class="clear"></div>
67-
<b class="filled"></b>
68-
<b class="filled"></b>
67+
<t-tile [tile]="filled"></t-tile>
68+
<t-tile [tile]="filled"></t-tile>
6969
<div class="clear"></div>
70-
<b class="filled"></b>
70+
<t-tile [tile]="filled"></t-tile>
7171
<p></p>
72-
<b class="filled"></b>
72+
<t-tile [tile]="filled"></t-tile>
7373
<div class="clear"></div>
74-
<b class="filled"></b>
75-
<b class="filled"></b>
74+
<t-tile [tile]="filled"></t-tile>
75+
<t-tile [tile]="filled"></t-tile>
7676
<div class="clear"></div>
77-
<b class="filled"></b>
77+
<t-tile [tile]="filled"></t-tile>
7878
<p></p>
79-
<b class="filled"></b>
80-
<b class="filled"></b>
81-
<b class="filled"></b>
82-
<b class="filled"></b>
79+
<t-tile [tile]="filled"></t-tile>
80+
<t-tile [tile]="filled"></t-tile>
81+
<t-tile [tile]="filled"></t-tile>
82+
<t-tile [tile]="filled"></t-tile>
8383
<p></p>
8484
<em></em>
85-
<b class="filled"></b>
85+
<t-tile [tile]="filled"></t-tile>
8686
<div class="clear"></div>
87-
<b class="filled"></b>
88-
<b class="filled"></b>
87+
<t-tile [tile]="filled"></t-tile>
88+
<t-tile [tile]="filled"></t-tile>
8989
<div class="clear"></div>
9090
<em></em>
91-
<b class="filled"></b>
91+
<t-tile [tile]="filled"></t-tile>
9292
<p></p>
93-
<b class="filled"></b>
94-
<b class="filled"></b>
93+
<t-tile [tile]="filled"></t-tile>
94+
<t-tile [tile]="filled"></t-tile>
9595
<div class="clear"></div>
9696
<em></em>
97-
<b class="filled"></b>
97+
<t-tile [tile]="filled"></t-tile>
9898
<div class="clear"></div>
9999
<em></em>
100-
<b class="filled"></b>
100+
<t-tile [tile]="filled"></t-tile>
101101
<p></p>
102-
<b class="filled"></b>
102+
<t-tile [tile]="filled"></t-tile>
103103
<div class="clear"></div>
104-
<b class="filled"></b>
104+
<t-tile [tile]="filled"></t-tile>
105105
<div class="clear"></div>
106-
<b class="filled"></b>
106+
<t-tile [tile]="filled"></t-tile>
107107
<div class="clear"></div>
108-
<b class="filled"></b>
108+
<t-tile [tile]="filled"></t-tile>
109109
</div>

‎src/app/components/screen-decoration/screen-decoration.component.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { Component, OnInit } from '@angular/core';
2+
import { FilledTile } from '@trungk18/interface/tile/filled-tile';
23

34
@Component({
45
selector: 't-screen-decoration',
56
templateUrl: './screen-decoration.component.html',
6-
styleUrls: ['./screen-decoration.component.scss'],
7+
styleUrls: ['./screen-decoration.component.scss']
78
})
89
export class ScreenDecorationComponent implements OnInit {
910
title = 'Angular Tetris';
10-
11+
filled = new FilledTile();
1112
constructor() {}
1213

1314
ngOnInit(): void {}

‎src/app/containers/angular-tetris/angular-tetris.component.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ $black: #000;
33

44
:host {
55
width: 640px;
6-
padding-top: 42px;
6+
padding-top: 40px;
77
box-shadow: 0 0 10px #fff inset;
88
border-radius: 20px;
99
position: absolute;
1010
top: 50%;
1111
left: 50%;
12-
margin: -465px 0 0 -320px;
12+
margin: -480px 0 0 -320px;
1313
background: $yellow;
1414
}
1515

@@ -42,4 +42,4 @@ $black: #000;
4242
padding: 8px;
4343
border: 2px solid #494536;
4444
}
45-
}
45+
}

‎src/app/containers/angular-tetris/angular-tetris.component.ts‎

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, HostListener, OnInit } from '@angular/core';
1+
import { Component, HostListener, OnInit, ElementRef, Renderer2 } from '@angular/core';
22
import { TetrisKeyboard } from '@trungk18/interface/keyboard';
33
import { SoundManagerService } from '@trungk18/services/sound-manager.service';
44
import { KeyboardQuery } from '@trungk18/state/keyboard/keyboard.query';
@@ -16,7 +16,6 @@ const KeyDown = 'document:keydown';
1616
export class AngularTetrisComponent implements OnInit {
1717
drop$: Observable<boolean>;
1818
isShowLogo$: Observable<boolean>;
19-
2019
get hasCurrent() {
2120
return !!this._tetrisQuery.current;
2221
}
@@ -26,12 +25,42 @@ export class AngularTetrisComponent implements OnInit {
2625
private _tetrisQuery: TetrisQuery,
2726
private _keyboardService: KeyboardService,
2827
private _keyboardQuery: KeyboardQuery,
29-
private _soundManager: SoundManagerService
28+
private _soundManager: SoundManagerService,
29+
private _el: ElementRef,
30+
private _render: Renderer2
3031
) {}
3132

3233
ngOnInit(): void {
3334
this.drop$ = this._keyboardQuery.drop$;
3435
this.isShowLogo$ = this._tetrisQuery.isShowLogo$;
36+
setTimeout(() => {
37+
this.resize();
38+
});
39+
}
40+
41+
@HostListener('window:resize', ['$event'])
42+
resize() {
43+
let width = document.documentElement.clientWidth;
44+
let height = document.documentElement.clientHeight;
45+
let ratio = height / width;
46+
let scale = 1;
47+
if (ratio < 1.5) {
48+
scale = height / 960;
49+
} else {
50+
scale = width / 640;
51+
let filling = (height - 960 * scale) / scale / 3;
52+
let paddingTop = Math.floor(filling) + 42;
53+
let paddingBottom = Math.floor(filling);
54+
let marginTop = Math.floor(-480 - filling * 1.5);
55+
this.setPaddingMargin(paddingTop, paddingBottom, marginTop);
56+
}
57+
this._render.setStyle(this._el.nativeElement, 'transform', `scale(${scale})`);
58+
}
59+
60+
private setPaddingMargin(paddingTop: number, paddingBottom: number, marginTop: number) {
61+
this._render.setStyle(this._el.nativeElement, 'padding-top', `${paddingTop}px`);
62+
this._render.setStyle(this._el.nativeElement, 'padding-bottom', `${paddingBottom}px`);
63+
this._render.setStyle(this._el.nativeElement, 'margin-top', `${marginTop}px`);
3564
}
3665

3766
keyboardMouseDown(key: string) {

‎src/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
<meta charset="utf-8">
66
<title>Angular Tetris built with Akita</title>
77
<base href="/">
8-
<meta name="viewport"
9-
content="width=device-width, initial-scale=1">
8+
<script>(function () { var w = parseInt(window.screen.width), s = w / 640, u = navigator.userAgent.toLowerCase(), m = '<meta name="viewport" content="width=640,'; if (/android (\d+\.\d+)/.test(u)) { if (parseFloat(RegExp.$1) > 2.3) m += 'minimum-scale=' + s + ',maximum-scale=' + s + ','; } else { m += 'user-scalable=no,'; } m += 'target-densitydpi=device-dpi">'; document.write(m); }());</script>
109
<link rel="icon"
1110
type="image/x-icon"
1211
href="favicon.ico">

0 commit comments

Comments
 (0)