Skip to content
This repository was archived by the owner on Feb 4, 2026. It is now read-only.

Commit 9ea3e8f

Browse files
cadnzacadnza
authored
Merge pull request #1 from cadnza/responsive
Write logic for polite forwarding when visiting on mobile
2 parents 44cfa3b + 3d4c4b4 commit 9ea3e8f

4 files changed

Lines changed: 88 additions & 5 deletions

File tree

‎public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
56
<title>Minesheeper</title>
67
<link rel="stylesheet" href="%PUBLIC_URL%/style.css" />
78
<link

‎public/style.css‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ body,
1717
body {
1818
background-color: darkgrey;
1919
}
20+
.pMobile {
21+
font-size: 18px;
22+
}
2023
#bgForColor {
2124
min-height: calc(100% - 15px);
2225
width: 100%;
@@ -31,14 +34,20 @@ body {
3134
text-shadow: -1px 1px 0px black, 1px 1px 0px black, 1px -1px 0px black,
3235
-1px -1px 0px black;
3336
}
34-
#displayTitle {
37+
.displayTitle {
3538
font-family: fontTitle;
36-
font-size: 24pt;
37-
margin-bottom: 15px;
3839
color: white;
3940
text-shadow: -1px 1px 1px black, 1px 1px 1px black, 1px -1px 1px black,
4041
-1px -1px 1px black;
4142
}
43+
#displayTitleDesktop {
44+
font-size: 24pt;
45+
margin-bottom: 15px;
46+
}
47+
#displayTitleMobile {
48+
font-size: 32px;
49+
padding-top: 15px;
50+
}
4251
* {
4352
vertical-align: middle;
4453
font-family: arial;
@@ -68,6 +77,19 @@ button > div,
6877
left: 0;
6978
position: absolute;
7079
}
80+
.buttonMobile {
81+
font-size: 30px;
82+
border: none;
83+
}
84+
.buttonMobile:active {
85+
font-size: 24px;
86+
}
87+
.buttonMobile,
88+
.buttonMobile:active {
89+
background-color: transparent;
90+
-webkit-tap-highlight-color: transparent;
91+
outline: none;
92+
}
7193
.back {
7294
opacity: 75%;
7395
}

‎src/Minefield.js‎

Lines changed: 60 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,8 @@ class Minefield extends React.Component {
5757
return true;
5858
}
5959
render() {
60-
const final = this.buildUI();
60+
const isMobile = /Android|webOS|iPhone|iPad|Mac|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
61+
const final = isMobile ? this.buildMobileBanner() : this.buildUI();
6162
return final;
6263
}
6364
componentDidUpdate() {
@@ -108,7 +109,7 @@ class Minefield extends React.Component {
108109
width: (this.props.size[1] * this.props.buttonWidth) + this.props.buttonWidthUnit
109110
}}
110111
>
111-
<div id="displayTitle">Minesheeper</div>
112+
<div className="displayTitle" id="displayTitleDesktop">Minesheeper</div>
112113
<div
113114
id="gameHeader"
114115
style={{
@@ -228,6 +229,63 @@ class Minefield extends React.Component {
228229
// Return
229230
return final;
230231
};
232+
buildMobileBanner = () => {
233+
const final = <div>
234+
<div
235+
className="displayTitle"
236+
id="displayTitleMobile"
237+
style={{
238+
backgroundColor: this.state.cBg,
239+
position: "absolute",
240+
height: "calc(100% - 15px)",
241+
width: "100%"
242+
}}
243+
>
244+
Minesheeper
245+
</div>
246+
<div
247+
style={{
248+
position: "absolute",
249+
top: "50px",
250+
margin: "30px"
251+
}}
252+
>
253+
<p className="pMobile">Come back on a desktop or laptop computer to herd some sheep.</p>
254+
<br />
255+
<button
256+
className="buttonMobile"
257+
>
258+
🐑
259+
</button>
260+
</div>
261+
<div
262+
style={{
263+
position: "absolute",
264+
width: "100%",
265+
bottom: "5vh"
266+
}}
267+
>
268+
<a
269+
href="https://github.com/cadnza/mineSheeper"
270+
target="_blank"
271+
rel="noreferrer"
272+
style={{
273+
color: this.state.cFg,
274+
textAlign: "center"
275+
}}
276+
>
277+
<p
278+
id="copyright"
279+
style={{
280+
color: "inherit",
281+
textAlign: "inherit"
282+
}}
283+
/>
284+
</a>
285+
</div>
286+
</div>;
287+
return final;
288+
};
231289
resetGameProperties = () => {
232290
// Reset game state parameters
233291
this.setState({

‎src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,6 @@ import ReactDOM from "react-dom";
33

44
import Controller from "./Controller.js";
55

6+
document.addEventListener("touchstart",() => true); // To enable active button styling on mobile
7+
68
ReactDOM.render(<Controller />,document.getElementById("game"));

0 commit comments

Comments
 (0)