generated from geocine/phaser3-rollup-typescript
/
index.html
165 lines (154 loc) · 6.85 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Linkagram - Find All the words</title>
<meta name="description" content="Find all the words on a 4x4 grid. A new puzzle is available each day.">
<meta charset="utf-8" />
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta property="description" content="Find all the words on a 4x4 grid. A new puzzle is available each day.">
<meta property="og:title" content="Linkagram - Daily fun word puzzle" />
<meta property="og:site_name" content="Linkagram" />
<meta property="og:url" content="https://linkagram.jasoncabot.me" />
<meta property="og:description" content="Find all words in a grid in this fun, addictive word game by Jason Cabot" />
<meta property="og:image" itemprop="image" content="https://linkagram.jasoncabot.me/assets/sample.png">
<meta property="og:image:width" content="256" />
<meta property="og:image:height" content="256" />
<meta property="article:author" content="https://jasoncabot.me" />
<script type="module" src="/src/index.ts"></script>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<script src="/registerSW.js"></script>
</head>
<body class="is-clipped">
<div class="is-hidden">
<h1>Linkagram</h1>
<h2>Play for free this daily fun word game</h2>
<p>Find all words in a grid, using each letter only once</p>
<p>Todays letters are shown below. You can use each letter only once per word and need to try and find all of them. The total amount of words to find include 3000 of the most common english words, so although you might know words that aren't recognised, that's because a larger word list is just less fun to complete!</p>
</div>
<div class="columns reverse-columns main-container is-full m-0">
<div class="column is-one-quarter wordlist-container">
<div id="wordlist"></div>
</div>
<div class="column is-flex is-flex-direction-column" id="game">
<div id="total-found"
class="is-flex is-flex-grow-1 is-justify-content-center is-unselectable is-clickable"></div>
<div id="board" class="is-flex is-flex-grow-2">
<table tabindex="0"></table>
</div>
<div id="current-word" class="is-size-3 is-flex-grow-1 is-uppercase has-text-centered is-unselectable"></div>
<svg id="connections"></svg>
</div>
<div id="button-container" class="has-text-right p-1">
<button id="stats-button" class="button is-small mr-2 mt-1">
<span class="icon">
<i class="fas fa-chart-bar"></i>
</span>
</button>
<button id="how-to-play-button" class="button is-small mr-2 mt-1">
<span class="icon">
<i class="fas fa-question"></i>
</span>
</button>
</div>
</div>
<div class="modal p-6" id="wordlist-modal">
<div class="modal-background" id="wordlist-modal-background"></div>
<div class="modal-content box content" id="wordlist-modal-content">
</div>
<button id="wordlist-modal-close" class="modal-close is-large" aria-label="close"></button>
</div>
<div class="modal p-6" id="hints-modal">
<div class="modal-background" id="hints-modal-background"></div>
<div class="modal-content box content" id="hints-modal-content">
<h1 class="title is-5">Hints</h1>
<p>
Show the word list by selecting the number of found and total words
</p>
<p>
Use hints by selecting an unknown word from the word list to reveal a single letter
</p>
<p>
You have <span id="hint-count">0</span> hints remaining. You can buy 12 more for 99p as a nice thing to do 😊
</p>
<div class="is-flex" id="get-hints-pay">
<button id="payment-request-loading" class="button is-primary is-loading is-flex-grow-1 is-fullwidth" onclick="alert('Try adding a payment method to your browser')">How do I get more hints?</button>
<div id="payment-request-button" class="is-flex-grow-1">
</div>
</div>
</div>
<button id="hints-modal-close" class="modal-close is-large" aria-label="close"></button>
</div>
<div class="modal p-6" id="how-to-play-modal">
<div class="modal-background" id="how-to-play-modal-background"></div>
<div class="modal-content box content" id="how-to-play-modal-content">
<h1 class="title is-5">How to Play</h1>
<ul class="list">
<li>Swipe to make valid words</li>
<li>Letters must be linked together</li>
<li>Each letter can be used once</li>
<li>Find all the words</li>
<li>Use hints if you are stuck</li>
<li>Select an unknown word to use a hint</li>
</ul>
<div class="is-flex is-justify-content-center">
<button id="how-to-play-modal-close-ok" class="button is-primary">
<span class="icon">
<i class="fas fa-check"></i>
</span>
<span>Play</span>
</button>
<button id="show-hints" class="ml-3 button is-secondary">
<span class="icon">
<i class="fas fa-question"></i>
</span>
<span>Hints</span>
</button>
</div>
</div>
<button id="how-to-play-modal-close" class="modal-close is-large is-align-items-center" aria-label="close"></button>
</div>
<div class="modal p-6" id="stats-modal">
<div class="modal-background" id="stats-modal-background"></div>
<div class="modal-content box" id="stats-modal-content">
<h1 class="title is-5">Your Personal Stats</h1>
<table class="table is-size-5 is-fullwidth">
<tbody>
<tr>
<td>Played</td>
<td id="stats-played">--</td>
</tr>
<tr>
<td>Completed</td>
<td id="stats-completed">--</td>
</tr>
<tr>
<td>Streak</td>
<td id="stats-streak">--</td>
</tr>
<tr>
<td>Max Streak</td>
<td id="stats-max-streak">--</td>
</tr>
</tbody>
</table>
<div class="is-flex is-justify-content-center">
<button id="share-button" class="button is-primary">
<span class="icon">
<i class="fas fa-share"></i>
</span>
<span>Share</span>
</button>
</div>
</div>
<button id="stats-modal-close" class="modal-close is-large" aria-label="close"></button>
</div>
<canvas id="celebration"></canvas>
</body>
</html>