-
Notifications
You must be signed in to change notification settings - Fork 0
/
Board.svelte
149 lines (129 loc) · 3.7 KB
/
Board.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<script lang="ts">
import cssVars from 'svelte-css-vars';
import Cell from './Cell.svelte';
import { newBoard, checkStatus, stepInto, toggleFlag } from '../lib/game';
export let width: number = 15;
export let height: number = 12;
export let bombsCount = Math.floor(width * height * 0.05)
let styleVars = { width, height }
let status = 'running'
let cells = newBoard(width, height, bombsCount)
let showModal = false;
$: styleVars = { ...styleVars, color: getBoardColor(status) }
$: status = checkStatus(cells)
$: if (status === 'win') showModal = true;
function getBoardColor(status) {
if (status === 'lost') return 'red'
if (status === 'win') return '#06799F'
return '#FFFFFF'
}
function handleRestart() {
status = 'running'
cells = newBoard(width, height, bombsCount)
}
function handleCellClick(event) {
cells = stepInto(event.detail.id, { width, height, bombsCount, cells })
}
function handleToggleFlag(event) {
cells = toggleFlag(event.detail.id, { width, height, bombsCount, cells })
}
const doNothing = () => {}
</script>
<div
class="board"
use:cssVars={styleVars}
on:contextmenu={e => e.preventDefault()}
>
{#each cells as cell (cell.id)}
<Cell
{...cell}
on:stepInto={status === 'running' ? handleCellClick : doNothing}
on:toggleFlag={status === 'running' ? handleToggleFlag : doNothing}
/>
{/each}
</div>
<div style="text-align: center;">
<button
on:click={ handleRestart }
disabled={ status === 'running' }
class="restart-button"
>
Restart
</button>
</div>
{#if showModal}
<div class="modal">
<div class="modal-content">
<h2>Congratulations!</h2>
<p>You have won the game!</p>
<button on:click={() => showModal = false}>Close</button>
</div>
</div>
{/if}
<style>
.board {
margin: 1em 0;
display: grid;
grid-template-columns: repeat(var(--width), 1.5em);
grid-template-rows: repeat(var(--height), 1.5em);
background-color: var(--color);
width: min-content;
border-radius: 1em;
padding: 0.5em;
transition: background-color 0.3s ease;
}
.restart-button {
background-color: #FF2E63;
border: 2px solid #FFC0CB;
color: #FFFFFF;
padding: 10px 20px;
font-family: 'Arial', sans-serif;
font-size: 1.1em;
text-transform: uppercase;
letter-spacing: 2px;
box-shadow: 0 0 10px #FF2E63, 0 0 20px #FF2E63, 0 0 30px #FF2E63; /* 霓虹灯发光效果 */
transition: all 0.3s ease;
cursor: pointer;
outline: none;
}
.restart-button:hover {
background-color: #FF6088;
box-shadow: 0 0 15px #FF6088, 0 0 25px #FF6088, 0 0 35px #FF6088; /* 增强的霓虹灯发光效果 */
}
.restart-button[disabled] {
opacity: 0.6;
cursor: not-allowed;
box-shadow: none;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
text-align: center;
}
.modal-content button {
margin-top: 20px;
padding: 10px 20px;
border: none;
background-color: #06799F;
color: #fff;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.modal-content button:hover {
background-color: #055a7a;
}
</style>