-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (134 loc) · 14.4 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
<!DOCTYPE html>
<html lang="en" class="h-screen" data-theme="nord">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-MKMTHGF4QW"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-MKMTHGF4QW');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./src/output.css" rel="stylesheet">
<title>Emoji Match</title>
<meta name="description" content="Test your visual memory matching emoji in this classic game">
<meta property="og:url" content="https://emojimatch.com">
<meta property="og:title" content="Emoji Match | Test Your Visual Memory">
<meta property="og:description" content="Test your visual memory matching emoji in this classic game">
<meta property="og:image" content="assets/og.png">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="assets/emoji/flat/slightly_smiling_face_flat.svg" sizes="any">
<style id="myStyle"></style>
</head>
<body class="overflow-hidden text-center h-full flex flex-col">
<!-- FIRST BANNER -->
<div id="firstBanner" class="w-full bg-primary">
<div class="navbar max-w-screen-lg mx-auto">
<div class="navbar-start">
<!-- Emoji Category Dropdown -->
<select id="secondaryEmojiCategoryDropdown" title="Emoji Category Dropdown" class="select select-bordered w-fit max-w-xs hidden md:flex"></select>
</div>
<div class="shrink-[.25]">
<!-- EmojiMatch Logo -->
<svg id="a" alt="EmojiMatch Logo" class="w-full" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 240 40">
<path class="letters" fill="oklch(var(--pc))"
d="M28.41,26.02c0,.5-.1,1.43-.3,2.78-.21,1.46-.4,2.34-.56,2.62-.14.22-.33.33-.58.33-.11,0-.28-.02-.53-.05-.86-.12-3.35-.18-7.49-.18-.9,0-2.24,0-4.03-.02s-3.12-.02-4.01-.02c-.39,0-.58-.17-.58-.51,0-1.31.07-3.28.22-5.92s.22-4.6.22-5.92-.07-3.83-.21-7.47c-.04-.94-.1-2.34-.19-4.2l-.02-.25c-.02-.27.12-.4.44-.4.87,0,2.17.02,3.91.07s3.04.07,3.91.07,2.14-.02,3.87-.07,3.01-.07,3.87-.07c.61,0,.96.23,1.05.69.06.27.15,1.09.27,2.45s.19,2.19.19,2.49c0,.25-.12.37-.35.37-.07,0-.19,0-.37-.02-3.12-.26-5.92-.39-8.4-.39-.62,0-1,.15-1.14.44-.06.14-.09.59-.09,1.35s.12,1.32.35,1.58c.2.22.58.33,1.14.33.12,0,.35,0,.69-.03s.62-.03.84-.03c1.48,0,2.97-.04,4.48-.12l.97-.09c.4-.05.71-.07.95-.07.28,0,.42.13.42.4,0-.25-.11.65-.32,2.69-.09.94-.14,1.88-.14,2.81,0,.23-.17.35-.51.35l-1.58-.18c-.67-.07-2.19-.11-4.57-.11h-1.86c-.48,0-.76.12-.84.35-.01.06-.02.42-.02,1.09,0,.89.06,1.46.18,1.72.2.45.95.71,2.25.79-.02,0,.83,0,2.57,0,.62,0,1.54-.06,2.77-.17s2.14-.17,2.75-.17c.26,0,.39.21.39.63Z M56.96,30.94c0,.36-.17.54-.51.54h-6.22c-.34,0-.51-.21-.51-.62,0-1.18.04-2.96.13-5.33s.13-4.14.13-5.33c0-.34-.05-.52-.16-.54-.13.07-.91,1.88-2.36,5.43-.84,2.09-1.69,4.17-2.53,6.24-.12.27-.26.43-.44.47-.06.01-.29.02-.7.02-.61,0-.97-.12-1.09-.35-.63-1.29-1.46-3.16-2.5-5.62-1.1-2.6-1.93-4.48-2.48-5.64-.02-.06-.08-.12-.16-.19-.08.11-.12.28-.12.51,0,1.15.03,2.87.09,5.17s.09,4.02.09,5.17c0,.41-.16.62-.49.62h-5.87c-.23,0-.38-.04-.43-.11s-.08-.21-.08-.4c0-1.28.06-3.2.18-5.76s.19-4.48.19-5.76c0-1.36-.06-3.91-.18-7.65-.01-.97-.06-2.42-.16-4.34l-.02-.3c-.01-.23.23-.35.74-.35.64,0,1.61-.02,2.9-.06s2.26-.06,2.9-.06c.13,0,.31.25.54.74l5.13,11.27c.36.76.67,1.14.91,1.14.13,0,.4-.44.83-1.32,1.18-2.46,2.94-6.17,5.26-11.13.2-.46.42-.69.65-.69.34,0,.85.02,1.54.05s1.21.05,1.56.05c.29,0,.74-.03,1.34-.09s1.05-.09,1.35-.09c.35,0,.53.14.53.42,0,1.38-.05,3.45-.15,6.2s-.15,4.81-.15,6.2c0,1.28.05,3.19.16,5.75s.16,4.46.16,5.73Z M95.87,21.94c0,2.93-.24,5.2-.72,6.8-.87,2.85-2.26,5.08-4.18,6.7-.22.2-.4.3-.54.3-.13,0-.26-.08-.39-.23-.41-.48-1.05-1.2-1.92-2.16-.5-.42-1.25-1.08-2.23-1.97-.13-.14-.19-.26-.19-.35,0-.11.06-.22.19-.33.87-.76,1.42-1.28,1.65-1.56.46-.55.81-1.24,1.05-2.07.33-1.14.49-3.01.49-5.61,0-6.02-.21-10.69-.63-14.01-.02-.12-.04-.21-.04-.26,0-.21.19-.32.56-.32s.93.02,1.66.05,1.29.05,1.66.05c.35,0,.87-.02,1.56-.05s1.21-.05,1.56-.05.51.15.51.46c0,1.62-.01,4.05-.04,7.3s-.04,5.69-.04,7.32Z M106.53,18.49c0,1.38.04,3.46.11,6.24s.11,4.86.11,6.24c0,.23-.05.38-.16.44-.02.01-.18.04-.46.07-.76.09-1.78.14-3.06.14-1.71,0-2.8-.05-3.27-.14-.34-.07-.51-.25-.51-.54,0,.19.05-.84.16-3.09.21-4.75.32-7.86.32-9.35,0-1.25-.04-3.13-.12-5.64s-.12-4.39-.12-5.64c0-.26.13-.39.4-.39.36,0,.91.02,1.64.05s1.28.05,1.64.05.9-.02,1.61-.05,1.25-.05,1.61-.05c.34,0,.51.13.51.39,0,1.25-.07,3.13-.2,5.64s-.2,4.39-.2,5.64Z M136.32,30.94c0,.36-.17.54-.51.54h-6.22c-.34,0-.51-.21-.51-.62,0-1.18.04-2.96.13-5.33s.13-4.14.13-5.33c0-.34-.05-.52-.16-.54-.13.07-.91,1.88-2.36,5.43-.84,2.09-1.69,4.17-2.53,6.24-.12.27-.26.43-.44.47-.06.01-.29.02-.7.02-.61,0-.97-.12-1.09-.35-.63-1.29-1.46-3.16-2.5-5.62-1.1-2.6-1.93-4.48-2.48-5.64-.02-.06-.08-.12-.16-.19-.08.11-.12.28-.12.51,0,1.15.03,2.87.09,5.17s.09,4.02.09,5.17c0,.41-.16.62-.49.62h-5.87c-.23,0-.38-.04-.43-.11s-.08-.21-.08-.4c0-1.28.06-3.2.18-5.76s.19-4.48.19-5.76c0-1.36-.06-3.91-.18-7.65-.01-.97-.06-2.42-.16-4.34l-.02-.3c-.01-.23.23-.35.74-.35.64,0,1.61-.02,2.9-.06s2.26-.06,2.9-.06c.13,0,.31.25.54.74l5.13,11.27c.36.76.67,1.14.91,1.14.13,0,.4-.44.83-1.32,1.18-2.46,2.94-6.17,5.26-11.13.2-.46.42-.69.65-.69.34,0,.85.02,1.54.05s1.21.05,1.56.05c.29,0,.74-.03,1.34-.09s1.05-.09,1.35-.09c.35,0,.53.14.53.42,0,1.38-.05,3.45-.15,6.2s-.15,4.81-.15,6.2c0,1.28.05,3.19.16,5.75s.16,4.46.16,5.73Z M162.78,31.04c0,.21-.15.36-.44.44-.35.09-1.44.14-3.27.14-1.68,0-2.75-.05-3.23-.14-.4-.08-.65-.35-.76-.79-.4-1.69-.71-2.59-.93-2.71-.19-.08-1.76-.12-4.71-.12-1.99,0-3.05.05-3.18.16-.2.19-.42.81-.67,1.88-.22.97-.49,1.5-.81,1.58-.4.09-1.73.14-4.01.14-1.79,0-2.69-.17-2.69-.51,0-.3,1.32-4.05,3.97-11.23,2.87-7.77,4.43-12.04,4.68-12.81.14-.45.3-.67.49-.67.32,0,.8.03,1.47.09s1.16.09,1.49.09.78-.02,1.4-.06,1.08-.06,1.38-.06c.22,0,.43.19.62.58.57,1.23,2.25,5.45,5.03,12.66,2.79,7.25,4.18,11.04,4.18,11.36ZM150.31,15.03c-.25.52-.66,1.63-1.25,3.36-.63,1.83-.95,2.9-.95,3.22,0,.21.35.33,1.05.35.36.02.96.04,1.79.04.77,0,1.2-.09,1.28-.28.02-.06.04-.14.04-.25,0-.39-.27-1.45-.81-3.2-.53-1.69-.91-2.77-1.16-3.23Z M181.69,12.2c0,.23-.13.35-.39.35-.45,0-2.21-.09-5.29-.26-.07,2.96-.11,5.03-.11,6.21,0,1.38.05,3.46.17,6.24s.17,4.86.17,6.24c0,.22-.05.36-.16.42-.04.02-.2.05-.49.09-.7.09-1.73.14-3.09.14-1.51,0-2.57-.05-3.18-.14-.33-.06-.49-.24-.49-.54,0-1.38.06-3.46.18-6.22s.18-4.84.18-6.22c0-.91-.05-2.95-.14-6.12-2.34.23-4.21.35-5.61.35-.19,0-.28-.06-.28-.18,0-.15.08-.6.25-1.35.19-.82.29-1.32.32-1.49.04-.55.08-1.1.12-1.65.08-.88.22-1.32.42-1.32.02,0,.11,0,.25.02,1.9.25,4.71.37,8.42.37,1.05,0,3-.11,5.84-.33,1.52-.12,2.29-.18,2.3-.18.23,0,.37.01.4.04s.06.14.07.34c0,.32-.01.76-.04,1.32-.02.62-.04,1.06-.04,1.32,0,.29.04.72.11,1.29s.12.99.12,1.27Z M204.1,27.51c0,.19-.12.43-.37.74-2.16,2.57-5.02,3.85-8.6,3.85s-6.62-1.25-8.89-3.74c-2.21-2.41-3.32-5.46-3.32-9.14s1.08-6.59,3.25-9.07c2.26-2.6,5.14-3.9,8.63-3.9,3.8,0,6.77,1.17,8.93,3.5.23.26.35.49.35.69,0,.22-.41,1.05-1.22,2.48s-1.33,2.23-1.54,2.41c-.09.09-.21.14-.35.14-.06,0-.35-.23-.88-.7-.63-.56-1.25-1-1.86-1.32-.93-.47-1.89-.7-2.88-.7-1.72,0-3.1.64-4.13,1.93-.95,1.2-1.42,2.67-1.42,4.43s.47,3.28,1.42,4.48c1.03,1.31,2.41,1.97,4.13,1.97,1.02,0,1.99-.22,2.9-.67.6-.29,1.21-.7,1.83-1.23.52-.45.8-.67.86-.67.12,0,.23.06.35.19.19.21.7.94,1.53,2.2.86,1.3,1.28,2.02,1.28,2.14Z M229.59,30.94c0,.25-.05.4-.16.46-.05.04-.21.06-.49.09-.71.07-1.72.11-3.02.11-1.84,0-2.92-.04-3.24-.11s-.48-.23-.48-.47c0-.93.04-2.32.13-4.17s.13-3.25.13-4.17c0-.46-.13-.72-.39-.79-.4-.09-1.82-.14-4.25-.14s-3.88.05-4.29.14c-.26.06-.39.32-.39.79,0,.91.03,2.28.09,4.1s.09,3.19.09,4.1c0,.35-.16.56-.47.62-.38.07-1.48.11-3.3.11-1.58,0-2.59-.04-3.02-.11-.34-.06-.51-.24-.51-.54,0-1.27.06-3.18.18-5.73s.19-4.47.19-5.75c0-1.36-.06-3.4-.18-6.13s-.18-4.77-.18-6.13c0-.26.12-.39.37-.39.36,0,.91.02,1.64.05s1.28.05,1.64.05.94-.02,1.7-.05,1.32-.05,1.7-.05c.2,0,.3.11.3.32,0,.88-.06,2.19-.19,3.95s-.19,3.07-.19,3.95c0,.41.11.65.33.72.3.09,1.8.14,4.5.14,2.51,0,3.96-.05,4.36-.14.28-.07.42-.31.42-.72,0-.84-.04-2.12-.12-3.82s-.12-2.99-.12-3.84c0-.36.15-.54.44-.54.34,0,.86.02,1.55.05s1.22.05,1.57.05.86-.02,1.55-.05,1.22-.05,1.57-.05.51.14.51.42c0,1.35-.06,3.38-.17,6.1s-.17,4.76-.17,6.12c0,1.28.06,3.19.18,5.75s.19,4.46.19,5.73Z" />
<path class="face" fill="#fbaf30"
d="M72.76,32.38c9.34,0,14-6.27,14-14s-4.66-14-14-14-14,6.27-14,14,4.66,14,14,14Z" />
<path class="eyes" fill="#fff"
d="M67.35,19.56c2.25,0,4.08-1.83,4.08-4.08s-1.83-4.08-4.08-4.08-4.08,1.83-4.08,4.08,1.83,4.08,4.08,4.08Z M78.16,19.64c2.27,0,4.12-1.84,4.12-4.12s-1.84-4.12-4.12-4.12-4.12,1.84-4.12,4.12,1.84,4.12,4.12,4.12Z" />
<path class="features" fill="#402A32"
d="M67.91,18.38c1.61,0,2.91-1.3,2.91-2.91s-1.3-2.91-2.91-2.91-2.91,1.3-2.91,2.91,1.3,2.91,2.91,2.91Z M77.61,18.38c1.61,0,2.91-1.3,2.91-2.91s-1.3-2.91-2.91-2.91-2.91,1.3-2.91,2.91,1.3,2.91,2.91,2.91Z M67.33,21.48c.43-.32,1.04-.23,1.36.19.3.4,1.66,1.55,4.07,1.55s3.77-1.15,4.07-1.55c.32-.43.93-.52,1.36-.19.43.32.52.93.19,1.36-.67.89-2.61,2.33-5.63,2.33s-4.96-1.43-5.63-2.33c-.32-.43-.23-1.04.19-1.36Z" />
</svg>
</div>
<div class="navbar-end">
<!-- Menu Button -->
<div tabindex="0" role="button" title="Menu Button" class="btn btn-ghost btn-circle focus-visible:outline-none"
onclick="options_modal.showModal()">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
stroke="oklch(var(--pc))">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</div>
<!-- Options Modal -->
<dialog id="options_modal" class="modal">
<div class="modal-box">
<div class="flex justify-between">
<div class="font-bold text-2xl">Game Options</div>
<form method="dialog">
<button class="btn btn-sm btn-circle btn-ghost focus-visible:outline-none">✕</button>
</form>
</div>
<div class="divider"></div>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">Emoji Category</span>
<!-- Emoji Category Dropdown -->
<select id="primaryEmojiCategoryDropdown" title="Emoji Category Dropdown" class="select select-bordered w-2/4"></select>
</label>
<label class="label cursor-pointer">
<!-- Emoji Skin Tone Dropdown -->
<span class="label-text">Emoji Skin Tone</span>
<select id="emojiSkinToneDropdown" title="Emoji Skin Tone Dropdown" class="select select-bordered w-2/4"></select>
</label>
<label class="label cursor-pointer">
<span class="label-text">Card Count</span>
<!-- Card Count Dropdown -->
<select id="cardCountDropdown" title="Card Count Dropdown" class="select select-bordered w-2/4"></select>
</label>
<label class="label cursor-pointer">
<span class="label-text">Card Preview Time</span>
<!-- Card Preview Time Dropdown -->
<select id="cardPreviewTimeDropdown" title="Card Preview Time Dropdown" class="select select-bordered w-2/4"></select>
</label>
</div>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
</div>
</div>
</div>
<!-- SECOND BANNER -->
<div id="secondBanner" class="w-full bg-neutral">
<div class="flex items-center max-w-screen-lg mx-auto px-2">
<div class="flex w-2/4 shrink justify-start"></div>
<!-- Clock -->
<div id="clock" class="flex shrink-0 justify-center text-2xl text-neutral-content"></div>
<div class="w-2/4 shrink flex justify-end">
<!-- Reset Button -->
<button id="bannerReset" aria-label="Reset" class="btn btn-ghost btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" class="active:animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="oklch(var(--nc))">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</button>
</div>
</div>
</div>
<!-- GAME BOARD -->
<div id="main" class="flex items-center w-full max-w-screen-lg mx-auto px-2 py-4 grow">
<div id="cards" class="h-full w-full flex content-center justify-center flex-wrap gap-1.5"></div>
<div id="endScreen" class="hidden w-full">
<h1 class=" text-4xl">Nice Work!</h1>
<p class="text-2xl">Think you can do it faster?</p>
<button id="endScreenReset" class="btn btn-outline btn-primary mt-4">Play Again</button>
</div>
</div>
<!-- DEBUG OVERLAY -->
<!-- <div id="overlay" style="text-align:left; position: fixed; bottom: 0; left: 0; width: 100%; height: 33%; background: rgba(0,0,0,0.8); color: white; overflow: auto; padding: 10px; font-size: x-small;">
<pre id="overlay-content"></pre>
</div> -->
<footer id="footer" class="pb-4 leading-none">
<a href="https://vokrox.com" class="link">VOKROX</a>
</footer>
<script src="js/app.js"></script>
</body>
<!-- Shoutout to Microsoft for making their emoji designs open source 🙏 https://github.com/microsoft/fluentui-emoji -->
</html>