-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (130 loc) · 6.67 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link id="websweepStyle" rel="stylesheet" type="text/css" href="./css/web.css">
<script>
function handleLayout() {
var styleSheet = document.getElementById("websweepStyle");
if (window.innerWidth <= 500 ) {
// largest phone screen currently is maybe 500px
styleSheet.setAttribute("href", "./css/webmobile.css");
console.log('loaded mobile css');
} else if ( window.innerWidth >= 501 ) {
// iPad Pro is 1024px*
styleSheet.setAttribute("href", "./css/web.css");
console.log('loaded web css');
}
}
// runs before any markup is written to DOM...
window.onresize = handleLayout;
handleLayout();
</script>
<title>Websweeper</title>
<h1 class="siteHeader" title="Websweeper.js"><a onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'" href='/websweeper/'>Websweeper.js</a></h1>
<h5 class="siteEdition">No Flags (NF) Local Edition</h5>
</head>
<body id="browserBody" style="zoom: 100%;">
<div id="Game">
<script>
function testPlayerValue() {
// only allow -, _, alpha, and numeric values for player name
// search globally and case insensitive
if (!/^[a-z0-9\_\-]*$/gi.test(playerName.value)) {
alert(`\n${playerName.value} is an invalid player name.\nPlease adjust before starting game.`);
alert('\nAllowed:\nAll alpha and numeric characters.\n\nNot Allowed:\nspaces. The only special characters that are allowed are - _\n\n')
playerName.focus();
playerName.value = '';
return false;
}
}
</script>
<div id="board">
<form id="playerForm" onmouseleave="testPlayerValue();">
<text id="playerFormTitle"><strong>Player Name:</strong></text><br>
<input id="playerName" type="text" name="playerName" onKeyPress="return stopEnterKeyFromSubmittingPlayerName(event)" onfocus="this.value=''" onmouseover="changeColor('mouseOver','#playerName');" onmouseout="changeColor('mouseOut','#playerName');">
</form>
<script type="text/javascript">
function stopEnterKeyFromSubmittingPlayerName(e){
var key;
// support IE
if(window.event){
// store the key code (Key number) of the pressed key
key = window.event.keyCode;
} else {
// support FF / Safari / Chrome
key = e.which;
}
// 13 = enter key
if ( key == 13 ) {
console.log('enter key disabled to help mobile devices.');
return false;
} else {
//continue as normal (allow the key press for keys other than "enter")
return true;
}
}
</script>
<div id="sizeSelection">
<script src="./components/WebSweeper.js" type="module"></script>
<h3 class="sizeSelectionText">Select Your Board Size:</h3>
<form id="htmlform" onsubmit="return false;">
<input id="small" type="radio" name="size" value="Small" checked>
<span class="form-items">
<text class="selectTxtSmall">Small - (New players or speed games)</text>
</span><br>
<input id="med" type="radio" name="size" value="Medium">
<span class="form-items">
<text class="selectTxtMed">Medium - (Intermediate)</text>
</span><br>
<input id="lrg" type="radio" name="size" value="Large">
<span class="form-items">
<text class="selectTxtLrg">Large - (Expert)</text>
</span>
<br><br>
<input id="submitSize" onmouseover="changeColor('mouseOver','#submitSize');" onmouseout="changeColor('mouseOut','#submitSize');" type="submit" value="Start game">
<script>
function changeColor(motion, qSelector) {
if ( motion === 'mouseOut') {
document.querySelector(qSelector).style.borderColor = "#dcdcdc";
} else if ( motion === 'mouseOver' ) {
if ( qSelector === '#gameTimer' ) {
document.querySelector(qSelector).style.borderColor = "#009688";
document.querySelector(qSelector).style.borderWidth = "2px";
} else {
document.querySelector(qSelector).style.borderColor = "#2c549ad4";
document.querySelector(qSelector).style.borderWidth = "2px";
}
}
};
</script>
</form>
</div>
<div id="gameTimer" class="timerElements" onmouseover="changeColor('mouseOver','#gameTimer');" onmouseout="changeColor('mouseOut','#gameTimer');"><h1 id="timerText"></h1></div>
<script>
// need to move to js files eventually
document.getElementsByClassName("timerElements")[0].style.display = 'none';
</script>
<div id="legalSquaresLeft" onmouseover="changeColor('mouseOver','#legalSquaresLeft');" onmouseout="changeColor('mouseOut','#legalSquaresLeft');"></div>
<div id="gamestatus"></div>
</div>
<div id="leaderBoard" title="After 'Victory!' please click reset to refresh leaderBoard :)" onmouseover="changeColor('mouseOver','#leaderBoard');" onmouseout="changeColor('mouseOut','#leaderBoard');">
<div class="leaderHeader"><h1><text class="leaderHeaderText">Leaderboard</text></h1></div>
<div class="leaderRow" id="game0"></div>
<div class="leaderRow" id="game1"></div>
<div class="leaderRow" id="game2"></div>
<div class="leaderRow" id="game3"></div>
<div class="leaderRow" id="game4"></div>
<div class="leaderRow" id="game5"></div>
<div class="leaderRow" id="game6"></div>
<div class="leaderRow" id="game7" class="lastLeaderRow"></div>
</div>
</div>
</body>
<div id="datFooter" onmouseover="changeColor('mouseOver','#datFooter');" onmouseout="changeColor('mouseOut','#datFooter');">
<h5 id="siteCreator">created by: benjamin g. west</h5>
<p id="siteNote">Want to see this developed further and or collaborate? <br />Please msg me <a id="footerLinks" href='https://twitter.com/bengeast'>@bengeast</a> or jump in <a id="footerLinks" href='https://github.com/bgwest/minesweeper'>@github</a></p>
</div>
</html>