-
-
+
+
+
+
+
-
-
-
暫停
-
- 重新開始
+
+
-
+ 分數: 0
+
+
+ Combo: 0
+
+ Next
+
+
+
+ Hold
+
+
-
-
分數: 0
- Combo: 0
- Next
-
-
-
- Hold
-
-
-
-
-
- 旋轉:
-
-
- ⭡
+
-
+
-
+ 旋轉:
+
-
+ ⭡
+
- 移動:
-
-
-
- ↓
- ←
- →
+
-
+ 移動:
+
-
+ ↓
+ ←
+ →
+
- hold/pause:
+
+
+ hold/pause:
-
-
- ⇧
- /
- P
+
+
+ ⇧
+ /
+ P
+
+
+ 速降:
+ space
-
- 速降:
- space
-
-
-
-
-
+ ◀
-
+
+
- 暫停
+
重新開始
-
-
+ Hold
+
+
+
-
+
-
+
+
+ ◀
+
-
- ↻
+
+
+
+ Hold
+
+
↻
+
-
-
-
◀
+
+
-
+
-
+
◀
+
-
-
-
- ◀
+
+
+
◀
+
-
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 63e34ec..dcddb5f 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -8,37 +8,65 @@ body {
}
.container {
padding: 5px;
+ height: calc(100% - 10px);
position: relative;
background-color: #fffff4;
-
- .main-view {
- // height: 80%;
-
- .canvas-wrapper {
- margin-right: 10px;
- height: calc(100% - 40px);
- #canvas {
- height: 100%;
- text-align: center;
- background: #fffff4;
- }
- #game-over {
- position: absolute;
- top: 0px;
- left: 0px;
- display: none;
- height: 100%;
- width: 100%;
- }
+ @media screen and (max-width: 768px) {
+ padding: 10px 5px;
+ height: calc(100% - 20px);
+ }
+ .top-view {
+ @media screen and (max-width: 768px) {
+ // max-height: 50%;
}
+ .main-view {
+ .canvas-wrapper {
+ margin-right: 10px;
+ #canvas {
+ height: 100%;
+ text-align: center;
+ background: #fffff4;
+ @media screen and (max-width: 500px) {
+ height: 550px;
+ }
+ @media screen and (max-width: 420px) {
+ height: 460px;
+ }
+ @media screen and (max-width: 390px) {
+ height: 420px;
+ }
+ @media screen and (max-width: 330px) {
+ height: 340px;
+ }
+ }
+ #game-over {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ display: none;
+ height: 100%;
+ width: 100%;
+ }
+ }
- .game-group-btn {
- margin-top: 3px;
+ .game-group-btn {
+ margin-top: 3px;
+ }
}
}
-
.score-board {
- vertical-align: top;
+ .preview {
+ width: 100px;
+ @media screen and (max-width: 768px) {
+ width: 70%;
+ }
+ @media screen and (max-width: 500px) {
+ width: 50%;
+ }
+ canvas {
+ width: 100%;
+ }
+ }
.operation-intro {
display: flex;
flex-direction: column;
@@ -48,7 +76,6 @@ body {
}
}
.mobile-btns {
- margin-bottom: 20px;
width: 80%;
.cube-control {
.down-arrow > div > div {
@@ -129,7 +156,7 @@ body {
display: flex;
flex-direction: row;
align-items: end;
- height: 40px;
+
> div {
display: flex;
width: 100%;
@@ -142,8 +169,14 @@ body {
border: 1px solid #000;
border-radius: 5px;
font-size: 20px;
+ @media screen and (max-width: 768px) {
+ font-size: 14px;
+ }
&:hover {
animation: clickSquareBtn 0.1s ease-in-out forwards;
+ @media screen and (max-width: 768px) {
+ animation: clickSquareBtn-m 0.1s ease-in-out forwards;
+ }
}
}
}
@@ -176,7 +209,7 @@ body {
height: 100%;
}
.h-80 {
- height: 100%;
+ height: 80%;
}
.w-100 {
width: 100%;
@@ -200,6 +233,9 @@ body {
.fs-20 {
font-size: 20px;
}
+.mt-5 {
+ margin-top: 10px;
+}
.mt-10 {
margin-top: 10px;
}
@@ -229,3 +265,14 @@ body {
height: 25px;
}
}
+
+@keyframes clickSquareBtn-m {
+ from {
+ margin-top: 0px;
+ height: 21px;
+ }
+ to {
+ margin-top: 3px;
+ height: 18px;
+ }
+}
-
-
+
+
+
+
+