Skip to content

Commit e17f8ad

Browse files
Stan-BKStan-BK
authored
Merge pull request #139 from our-mini-games/dev
fix(mine-sweeper): add resposive support #35
2 parents 3cf0796 + f7d1261 commit e17f8ad

File tree

24 files changed

+786
-464
lines changed

24 files changed

+786
-464
lines changed

‎packages/mine-sweeper/components.d.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,39 @@ export {}
77

88
declare module '@vue/runtime-core' {
99
export interface GlobalComponents {
10+
AButton: typeof import('ant-design-vue/es')['Button']
11+
ADropdown: typeof import('ant-design-vue/es')['Dropdown']
12+
AForm: typeof import('ant-design-vue/es')['Form']
13+
AFormItem: typeof import('ant-design-vue/es')['FormItem']
14+
AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
15+
AMenu: typeof import('ant-design-vue/es')['Menu']
16+
AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
17+
AModal: typeof import('ant-design-vue/es')['Modal']
18+
ARadio: typeof import('ant-design-vue/es')['Radio']
19+
ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
20+
ArrowLeftOutlined: typeof import('@ant-design/icons-vue')['ArrowLeftOutlined']
21+
ASpace: typeof import('ant-design-vue/es')['Space']
22+
ASwitch: typeof import('ant-design-vue/es')['Switch']
23+
ATooltip: typeof import('ant-design-vue/es')['Tooltip']
24+
BarChartOutlined: typeof import('@ant-design/icons-vue')['BarChartOutlined']
25+
Bg: typeof import('./src/components/Bg.vue')['default']
1026
ClockCircleOutlined: typeof import('@ant-design/icons-vue')['ClockCircleOutlined']
27+
EllipsisOutlined: typeof import('@ant-design/icons-vue')['EllipsisOutlined']
1128
Enhancements: typeof import('./src/components/enhancements/index.vue')['default']
1229
Finished: typeof import('./src/components/modal/Finished.vue')['default']
1330
GameControl: typeof import('./src/components/header/GameControl.vue')['default']
1431
GameSetting: typeof import('./src/components/modal/GameSetting.vue')['default']
1532
Header: typeof import('./src/components/header/index.vue')['default']
33+
Home: typeof import('./src/components/Home.vue')['default']
1634
LevelSetting: typeof import('./src/components/modal/LevelSetting.vue')['default']
1735
MineSweeper: typeof import('./src/components/MineSweeper.vue')['default']
1836
MinusOutlined: typeof import('@ant-design/icons-vue')['MinusOutlined']
37+
MoreMenu: typeof import('./src/components/header/MoreMenu.vue')['default']
38+
PlayCircleFilled: typeof import('@ant-design/icons-vue')['PlayCircleFilled']
1939
PlusOutlined: typeof import('@ant-design/icons-vue')['PlusOutlined']
40+
Setting: typeof import('./src/components/header/Setting.vue')['default']
41+
SettingOutlined: typeof import('@ant-design/icons-vue')['SettingOutlined']
42+
SmileTwoTone: typeof import('@ant-design/icons-vue')['SmileTwoTone']
2043
Statistics: typeof import('./src/components/modal/Statistics.vue')['default']
2144
}
2245
}

‎packages/mine-sweeper/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="zh-CN">
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/mini-games/mine-sweeper.svg" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no" />
77
<title>扫雷</title>
88
</head>
99
<body>

‎packages/mine-sweeper/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
},
1111
"dependencies": {
1212
"@ant-design/icons-vue": "^6.1.0",
13+
"@panzoom/panzoom": "^4.6.0",
1314
"ant-design-vue": "^3.2.15",
1415
"vue": "^3.2.41"
1516
},

‎packages/mine-sweeper/src/App.vue‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
2+
<Bg />
23
<div class="mine-sweeper">
3-
<PageHeader />
4-
5-
<MineSweeper />
4+
<Home v-if="gameStatus === 'finished'" />
5+
<MineSweeper v-else />
66

77
<FinishedModal />
88
</div>
@@ -13,9 +13,10 @@ import { ref, computed, provide, watch } from 'vue'
1313
import { levels } from './config'
1414
import { createStatistics, getBoxes } from './lib/utils'
1515
import { MINE_SWEEPER_SETTING } from './config/constants'
16-
import type { Box, CustomSetting, GameStatus, LeftButtonBehavious, LevelInfo } from './types'
16+
import type { Box, CustomSetting, GameStatus, LeftButtonBehaviors, LevelInfo } from './types'
1717
18-
import PageHeader from './components/header/index.vue'
18+
import Bg from './components/Bg.vue'
19+
import Home from './components/Home.vue'
1920
import MineSweeper from './components/MineSweeper.vue'
2021
import FinishedModal from './components/modal/Finished.vue'
2122
@@ -39,13 +40,13 @@ const customSetting = ref<CustomSetting>(defaultSetting.customSetting || {
3940
4041
const boxes = ref<Box[]>([])
4142
// 游戏运行状态
42-
const gameStatus = ref<GameStatus>('playing')
43+
const gameStatus = ref<GameStatus>('finished')
4344
// 游戏时长
4445
const gameTime = ref(0)
4546
// 剩余旗子数
4647
const remainingFlags = ref(0)
4748
// 左键行为
48-
const leftButtonBehavious = ref<LeftButtonBehavious>('open')
49+
const leftButtonBehaviors = ref<LeftButtonBehaviors>('open')
4950
5051
let startTime = 0
5152
let requestId = 0
@@ -127,11 +128,5 @@ provide('customSetting', customSetting)
127128
128129
provide('gameTime', gameTime)
129130
provide('remainingFlags', remainingFlags)
130-
provide('leftButtonBehavious', leftButtonBehavious)
131+
provide('leftButtonBehaviors', leftButtonBehaviors)
131132
</script>
132-
133-
<style lang="scss" scoped>
134-
.mine-sweeper {
135-
height: 100%;
136-
}
137-
</style>

‎packages/mine-sweeper/src/assets/img/doubtful-1.png‎

26.1 KB
Loading

‎packages/mine-sweeper/src/assets/img/flag-1.png‎

40.4 KB
Loading

‎packages/mine-sweeper/src/assets/img/mine-1.png‎

40.8 KB
Loading

‎packages/mine-sweeper/src/assets/img/revealed-1.png‎

40.5 KB
Loading

‎packages/mine-sweeper/src/assets/reset.scss‎

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,55 @@ body,
88
#app {
99
width: 100%;
1010
height: 100%;
11+
overflow: hidden;
12+
}
13+
14+
html {
15+
font-size: 16px;
16+
17+
@media (max-width: 768px) {
18+
font-size: 4vw;
19+
}
20+
21+
--primary-color: #00ffff;
22+
--primary-text-color: #333;
23+
--secondary-text-color: #666;
24+
--tertiary-text-color: #999;
25+
26+
--bg-color-1: rgba(0, 78, 146, 0.8);
27+
--bg-color-2: rgba(0, 4, 40, 0.9);
28+
29+
--bg-cell-color: rgba(0, 255, 255, 0.6);
30+
--bg-cell-color-hover: rgba(0, 255, 255, 0.8);
31+
--bg-cell-color-revealed: rgba(0, 255, 255, 0.1);
32+
--bg-cell-color-flag: rgba(0, 255, 255, 0.2);
33+
--bg-cell-color-doubtful: rgba(0, 255, 255, 0.3);
34+
--bg-cell-color-mine: rgba(255, 0, 0, 0.2);
35+
--bg-cell-color-number: rgba(0, 255, 255, 0.2);
36+
37+
--border-color: #00ffff;
38+
39+
--white: #fff;
40+
--black: #000;
41+
--red: #f40;
42+
43+
--number-color-1: #ffffff;
44+
--number-color-2: #0fff07;
45+
--number-color-3: #f40;
46+
--number-color-4: #0511f1;
47+
--number-color-5: #972727;
48+
--number-color-6: #00fac8;
49+
--number-color-7: #ff00f2;
50+
--number-color-8: #eaff04;
51+
1152
}
1253

1354
body {
14-
font-size: 16px !important;
55+
font-size: 1rem !important;
1556
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
1657
}
58+
59+
.mine-sweeper {
60+
width: 100%;
61+
height: 100%;
62+
}

‎packages/mine-sweeper/src/components/Bg.vue‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<template>
2+
<!-- 背景动画 -->
3+
<div class="background"></div>
4+
5+
<!-- 粒子效果 -->
6+
<div class="particles" ref="particlesRef"></div>
7+
</template>
8+
9+
<script setup lang="ts">
10+
import { onMounted, ref } from 'vue'
11+
12+
const particlesRef = ref<HTMLDivElement>()
13+
14+
onMounted(() => {
15+
const particlesContainer = particlesRef.value!
16+
for (let i = 0; i < 20; i++) {
17+
const particle = document.createElement('div')
18+
particle.classList.add('particle')
19+
particle.style.left = `${Math.random() * 100}vw`
20+
particle.style.top = `${Math.random() * 100}vh`
21+
particle.style.animationDuration = `${Math.random() * 5 + 5}s`
22+
particlesContainer.appendChild(particle)
23+
}
24+
})
25+
</script>
26+
27+
<style lang="scss" scoped>
28+
/* 背景动画 */
29+
.background {
30+
position: absolute;
31+
top: 0;
32+
left: 0;
33+
width: 100%;
34+
height: 100%;
35+
background: radial-gradient(circle, var(--bg-color-1), var(--bg-color-2));
36+
z-index: -1;
37+
animation: pulse 5s infinite alternate;
38+
}
39+
40+
/* 粒子效果 */
41+
.particles {
42+
position: absolute;
43+
top: 0;
44+
left: 0;
45+
width: 100%;
46+
height: 100%;
47+
z-index: 0;
48+
overflow: hidden;
49+
50+
:deep(.particle) {
51+
position: absolute;
52+
width: 2px;
53+
height: 2px;
54+
background: var(--white);
55+
border-radius: 50%;
56+
opacity: 0.8;
57+
animation: float linear infinite;
58+
}
59+
}
60+
61+
@keyframes pulse {
62+
0% {
63+
transform: scale(1);
64+
opacity: 0.8;
65+
}
66+
100% {
67+
transform: scale(1.2);
68+
opacity: 1;
69+
}
70+
}
71+
72+
@keyframes float {
73+
0% {
74+
transform: translateY(0) translateX(0);
75+
}
76+
100% {
77+
transform: translateY(-100vh) translateX(calc(-50vw + 100%));
78+
}
79+
}
80+
</style>

0 commit comments

Comments
 (0)