-
Notifications
You must be signed in to change notification settings - Fork 0
/
games.html
167 lines (155 loc) · 5.9 KB
/
games.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<head>
<title>
Mary Kate & Sean 2021
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=yes">
<meta name="robots" content="noindex">
<link rel="stylesheet" media="all" href="stylesheets/fonts.css">
<link rel="stylesheet" media="all" href="stylesheets/style.css">
<link rel="stylesheet" media="all" href="stylesheets/desktop_menu.css">
<link rel="stylesheet" media="all" href="stylesheets/mobile_menu.css">
<link rel="stylesheet" media="all" href="stylesheets/media.css">
</head>
<body>
<nav role="navigation">
<div id="title">Mary Kate & Sean 2021</div>
<div id="desktopMenu">
<hr />
<ul>
<a href="index.html"><li>Home</li></a>
<a href="travel.html"><li>Travel</li></a>
<a href="schedule.html"><li>Details</li></a>
<a href="registry.html"><li>Registry</li></a>
<a href="wedding_party.html"><li>Wedding Party</li></a>
<a href="photos.html"><li>Photos</li></a>
<a href="activities.html"><li>Chico Guide</li></a>
<a href="" class="current-page"><li>Solitaire</li></a>
</ul>
</div>
<div id="mobileMenu">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="mobileLinks">
<a href="index.html"><li>Home</li></a>
<a href="travel.html"><li>Travel</li></a>
<a href="schedule.html"><li>Details</li></a>
<a href="registry.html"><li>Registry</li></a>
<a href="wedding_party.html"><li>Wedding Party</li></a>
<a href="photos.html"><li>Photos</li></a>
<a href="activities.html"><li>Chico Guide</li></a>
<a href=""><li>Solitaire</li></a>
</ul>
</div>
</nav>
<div class="content">
<iframe
id="ifrm"
src="solitaire/index.html"
title="Solitaire"
width="100%"
scrolling="no"
referrerpolicy="no-referrer"
loading="eager"
style="border: 4px groove #f2d273;"
onload="setIframeHeight(this.id)">
</iframe>
<div class="contentSection">
<h2>High Scores</h2>
<p>The guest with the highest score will receive special recognition at the wedding! The board is updated every 30s.</p>
<p>NOTE: Only the top score per individual player is shown.</p>
<table id="highScores" border="1" cellpadding="5">
<thead>
<tr>
<th align="left">Name</th>
<th align="left">Score</th>
<th align="left">Time</th>
</tr>
</thead>
<tbody id="highScoresBody">
</tbody>
</table>
<br />
<p>Special thanks to <a href="https://github.com/joe-gerhard/Solitaire", target="_blank">Joe Gerhard</a>, who wrote the majority of this game which Sean modified slightly for this site.</p>
<h3>Instructions</h3>
<ol>
<li>
To start the game, enter your name so your score will be recorded for a chance to be on the high score board above. Your score is auto-saved every 10 seconds during play.
</li>
<li>
Click on a card to select it. Then, click on where you want to place the card (drag and drop is not supported.)
</li>
<li>
To deselect a card, click it again.
</li>
<li>
Double click a card to automically move it to the foundation if the move is allowed.
</li>
<li>
If you go through all the cards in the stock, you can click where the stock was to go through it again. <strong>However, it'll cost you 100 points each time you do this after the first time.</strong>
</li>
<li>
You can review the full rules of solitaire <a href="https://www.solitairecardgames.com/how-to-play-solitaire" target="_blank">here</a>.
</li>
</ol>
</div>
</div>
</body>
<footer>
<script src="js/setIframeHeight.js"></script>
<script>
function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument? ifrm.contentDocument:
ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px"; // reset to minimal height ...
// Add extra height so the cards don't get hidden
ifrm.style.height = getDocHeight( doc ) + 200 + "px";
ifrm.style.visibility = 'visible';
}
function loadHighScores() {
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://marykateandsean2021.net/rsvp_app/game_scores")
xhr.send();
xhr.onload = function() {
if (xhr.status != 200) {
console.log("Error fetching high scores.")
} else {
var scores = JSON.parse(this.responseText);
populateHighScores(scores)
}
};
xhr.onerror = function() {
console.log("Error fetching high scores.")
};
}
function populateHighScores(scores) {
var highScores = document.getElementById('highScoresBody');
highScores.innerHTML = '';
for (var i = 0; i < scores.length; i++) {
var tr = document.createElement('tr');
var playerNameTd = document.createElement('td');
var scoreTd = document.createElement('td');
var timeTd = document.createElement('td');
playerNameTd.innerHTML = scores[i].playerName;
scoreTd.innerHTML = scores[i].score;
timeTd.innerHTML = displayTimeSeconds(scores[i].timeSeconds);
tr.appendChild(playerNameTd);
tr.appendChild(scoreTd);
tr.appendChild(timeTd);
highScores.appendChild(tr);
}
}
function displayTimeSeconds(timeSeconds) {
var seconds = timeSeconds % 60;
var minutes = Math.floor(timeSeconds / 60);
return minutes.toString().padStart(2, "0") + ":" + seconds.toString().padStart(2, "0")
}
window.onload = loadHighScores;
setInterval(loadHighScores, 30 * 1000);
</script>
</footer>