Skip to content

Commit

Permalink
modify mobile layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@s956142
s956142 committed Apr 24, 2024
1 parent 1914295 commit 26fe72e
Show file tree
Hide file tree
Showing 2 changed files with 164 additions and 111 deletions.
174 changes: 90 additions & 84 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,114 +2,120 @@
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<script src="./lib/js/jquery-1.10.2.min.js"></script>
<link rel="icon" href="./img/tetris.png" type="image/x-icon" />
</head>
<body class="flex-column">
<div class="container flex-column align-center flex">
<div class="flex-row content-center align-center w-100 flex">
<div class="flex-row main-view content-center flex h-80">
<div class="flex-column">
<body>
<div class="flex-row h-100">
<div class="container flex-column align-center content-s-b flex">
<div class="flex-column top-view content-center align-center flex">
<div class="flex-row main-view content-center">
<div class="p-relative canvas-wrapper">
<canvas id="canvas" width="300" height="600"></canvas>
<img id="game-over" src="./img/gameOver.png" />
</div>
<div class="fs-16 game-group-btn flex-row">
<div class="square-btn mr-5"><div id="pause">暫停</div></div>
<div class="square-btn mr-5">
<div id="restart">重新開始</div>
<div class="flex-column score-board fs-16 ta-l">
<div class="flex-row mt-10">
分數: <span id="score-number">0</span>
</div>
<div class="flex-row mt-10">
Combo: <span id="combo-number">0</span>
</div>
<div class="flex-row mt-10">Next</div>
<div class="flex-row preview ta-c">
<canvas
class="mt-10"
id="preview-canvas"
width="100"
height="100"
></canvas>
</div>
<div class="flex-row mt-10">Hold</div>
<div class="flex-row preview ta-c">
<canvas
class="mt-10"
id="hold-canvas"
width="100"
height="100"
></canvas>
</div>
</div>
</div>
<div class="flex-column score-board fs-16 ta-l">
<div class="mt-10">分數: <span id="score-number">0</span></div>
<div class="mt-10">Combo: <span id="combo-number">0</span></div>
<div class="mt-10">Next</div>
<div class="preview ta-c">
<canvas
class="mt-10"
id="preview-canvas"
width="100"
height="100"
></canvas>
</div>
<div class="mt-10">Hold</div>
<div class="preview ta-c">
<canvas
class="mt-10"
id="hold-canvas"
width="100"
height="100"
></canvas>
</div>

<div class="operation-intro mt-10">
<div class="flex-row align-center">
<span class="mr-2">旋轉:</span>
<div class="fs-20 flex-row">
<span class="mr-2">⭡</span>
<div class="operation-intro mt-10">
<div class="flex-row align-center">
<span class="mr-2">旋轉:</span>
<div class="fs-20 flex-row">
<span class="mr-2">⭡</span>
</div>
</div>
</div>
<div class="mt-10 flex-row align-center">
<span class="mr-2">移動:</span>
<div class="fs-20 flex-row">
<span class="mr-2">↓ </span>
<span class="mr-2">←</span>
<span class="mr-2">→</span>
<div class="mt-10 flex-row align-center">
<span class="mr-2">移動:</span>
<div class="fs-20 flex-row">
<span class="mr-2">↓ </span>
<span class="mr-2">←</span>
<span class="mr-2">→</span>
</div>
</div>
</div>
<div class="mt-10 flex-row align-center">
<span class="mr-2"> hold/pause:</span>
<div class="mt-10 flex-row align-center">
<span class="mr-2"> hold/pause:</span>

<div class="fs-20 flex-row">
<span class="mr-2">⇧</span>
<span class="mr-2">/</span>
<span class="mr-2">P</span>
<div class="fs-20 flex-row">
<span class="mr-2">⇧</span>
<span class="mr-2">/</span>
<span class="mr-2">P</span>
</div>
</div>
<div class="mt-10 flex-row align-center">
<span class="mr-2">速降:</span>
<span> space</span>
</div>
</div>
<div class="mt-10 flex-row align-center">
<span class="mr-2">速降:</span>
<span> space</span>
</div>
</div>
<input type="hidden" name="version" value="" />
</div>
<input type="hidden" name="version" value="" />
</div>
</div>
<div class="flex-column mobile-btns align-center">
<div class="flex-row w-100 content-s-b cube-control">
<div class="flex-row flex">
<div class="square-btn down-arrow">
<div>
<div>◀</div>
</div>
<div class="fs-16 game-group-btn flex-row mt-5">
<div class="square-btn mr-5"><div id="pause">暫停</div></div>
<div class="square-btn mr-5">
<div id="restart">重新開始</div>
</div>
</div>
<div class="flex-row">
<div class="square-btn hold-btn">
<div>Hold</div>
</div>
<div class="flex-column mobile-btns align-center mt-10">
<div class="flex-row w-100 content-s-b cube-control">
<div class="flex-row flex">
<div class="square-btn down-arrow">
<div>
<div>◀</div>
</div>
</div>
</div>
<div class="square-btn rotation">
<div>↻</div>
<div class="flex-row">
<div class="square-btn hold-btn">
<div>Hold</div>
</div>
<div class="square-btn rotation">
<div>↻</div>
</div>
</div>
</div>
</div>
<div class="arrow-btn flex-row content-s-b">
<div class="square-btn left-arrow">
<div>
<div>◀</div>
<div class="arrow-btn flex-row content-s-b mt-5">
<div class="square-btn left-arrow">
<div>
<div>◀</div>
</div>
</div>
</div>
<div class="square-btn right-arrow">
<div>
<div>◀</div>
<div class="square-btn right-arrow">
<div>
<div>◀</div>
</div>
</div>
</div>
</div>
<div class="space-wrapper flex-row flex">
<div class="space-btn flex-row flex">
<div class="shape-border space-left flex"></div>
<div class="shape-border space-right flex"></div>
<div class="space-wrapper flex-row flex">
<div class="space-btn flex-row flex">
<div class="shape-border space-left flex"></div>
<div class="shape-border space-right flex"></div>
</div>
</div>
</div>
</div>
Expand Down
101 changes: 74 additions & 27 deletions src/styles/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -48,7 +76,6 @@ body {
}
}
.mobile-btns {
margin-bottom: 20px;
width: 80%;
.cube-control {
.down-arrow > div > div {
Expand Down Expand Up @@ -129,7 +156,7 @@ body {
display: flex;
flex-direction: row;
align-items: end;
height: 40px;

> div {
display: flex;
width: 100%;
Expand All @@ -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;
}
}
}
}
Expand Down Expand Up @@ -176,7 +209,7 @@ body {
height: 100%;
}
.h-80 {
height: 100%;
height: 80%;
}
.w-100 {
width: 100%;
Expand All @@ -200,6 +233,9 @@ body {
.fs-20 {
font-size: 20px;
}
.mt-5 {
margin-top: 10px;
}
.mt-10 {
margin-top: 10px;
}
Expand Down Expand Up @@ -229,3 +265,14 @@ body {
height: 25px;
}
}

@keyframes clickSquareBtn-m {
from {
margin-top: 0px;
height: 21px;
}
to {
margin-top: 3px;
height: 18px;
}
}

0 comments on commit 26fe72e

Please sign in to comment.