type-it-client/index.html at main · RkeyDev/type-it-client · GitHub

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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-K6D6NV3QD0"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-K6D6NV3QD0');
</script>
  <script>
 (function () {
  const blockedRoutes = new Set(['game','lobby']);

  function getCurrentRoute() {
    return (location.hash.slice(1).split('?')[0]) || 'login';
  }

  function shouldClean() {
    return blockedRoutes.has(getCurrentRoute());
  }

  function removeIframesOutsideBody() {
    if (!shouldClean()) return;

    const body = document.body;
    if (!body || !body.parentNode) return;

    // Go through all iframes in the document
    const allIframes = Array.from(document.getElementsByTagName('iframe'));

    for (const iframe of allIframes) {
      if (!body.contains(iframe)) {
        console.warn('Removing rogue iframe outside body:', iframe.src || iframe);
        iframe.remove();
      }
    }
  }

  // Clean immediately and on future route changes
  window.addEventListener('load', removeIframesOutsideBody);
  window.addEventListener('hashchange', () => {
    setTimeout(removeIframesOutsideBody, 150);
  });

  // Observe DOM mutations to catch dynamically injected iframes
  const observer = new MutationObserver(() => {
    removeIframesOutsideBody();
  });
  observer.observe(document.documentElement, { childList: true, subtree: true });
})();


  </script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Type It!</title>
  <meta name="description" content="Play Type It!, a fun multiplayer typing game online. Compete with friends and score points by typing the longest words. Free to play.">
  <meta name="keywords" content="Type It, typing game, multiplayer game, online word game, free online game, competitive typing">
  <meta name="author" content="RkeyDev">
  <meta name="robots" content="index, follow">

  <!-- Open Graph for social sharing -->
  <meta property="og:title" content="Type It! – Multiplayer Typing Game Online">
  <meta property="og:description" content="Play Type It!, a fun multiplayer typing game online. Compete with friends and score points by typing the longest words. Free to play.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://rkeydev.github.io/">
  <meta property="og:image" content="https://rkeydev.github.io/src/assets/favicon.png">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Type It! – Multiplayer Typing Game Online">
  <meta name="twitter:description" content="Play Type It!, a fun multiplayer typing game online. Compete with friends and score points by typing the longest words. Free to play.">
  <meta name="twitter:image" content="https://raw.githubusercontent.com/RkeyDev/type-it-client/main/favicon.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="https://raw.githubusercontent.com/RkeyDev/type-it-client/main/favicon.png" sizes="32x32">

  <!-- Stylesheet -->
  <link id="page-style" rel="stylesheet" href="">

  <!-- Structured Data for Google -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "VideoGame",
    "name": "Type It!",
    "url": "https://rkeydev.github.io/",
    "description": "Type It! is a multiplayer typing game where players compete to type the longest words and score points.",
    "genre": "Typing Game",
    "publisher": {
      "@type": "Organization",
      "name": "RkeyDev"
    }
  }
  </script>
</head>

<body style="visibility: hidden;">


  <div class="background-shapes"></div>
  <script>
  const container = document.querySelector('.background-shapes');
const symbols = ['A','B','C','D','E','F','G','H','I','J','K','L','M',
                 'N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];

const SYMBOL_COUNT = 100; // number of symbols floating at once

// Only run once
if (!window.typeItBackgroundInitialized) {
    window.typeItBackgroundInitialized = true;

    // Pre-generate floating symbols
    for (let i = 0; i < SYMBOL_COUNT; i++) {
        const div = document.createElement('div');
        const size = Math.random() * 40 + 20;
        const left = Math.random() * 100;
        const delay = Math.random() * 20; // start at random point in animation
        const duration = Math.random() * 20 + 15;
        const symbol = symbols[Math.floor(Math.random() * symbols.length)];

        div.textContent = symbol;
        div.style.fontSize = `${size}px`;
        container.style.color = "white";
        div.style.left = `${left}%`;
        div.style.animationDuration = `${duration}s`;
        div.style.animationDelay = `-${delay}s`; // spreads symbols across animation
        container.appendChild(div);
    }

    function createSymbol() {
        const div = document.createElement('div');
        const size = Math.random() * 40 + 20;
        const left = Math.random() * 100;
        const duration = Math.random() * 20 + 15;
        const symbol = symbols[Math.floor(Math.random() * symbols.length)];

        div.textContent = symbol;
        div.style.fontSize = `${size}px`;
        div.style.left = `${left}%`;
        div.style.animationDuration = `${duration}s`;
        div.style.animationDelay = `0s`;
        container.appendChild(div);

        // Remove after animation to avoid DOM clutter
        setTimeout(() => container.removeChild(div), duration * 1000);
    }

    setInterval(createSymbol, 1000); // create one new symbol every 1 second
}

    if (window.innerHeight < window.innerWidth) {
      document.body.classList.add("landscape");
    } else {
      document.body.classList.remove("landscape");
    }

  </script>
  <main id="app">


    <!-- Page content will load here -->
  </main>

  <script src="./src/pages/socket.js"></script>
  <script src="./src/pages/router.js"></script>
  <script>
    sessionStorage.clear();
    const button_press_sound = new Audio("./src/assets/sounds/button-press-sound.mp3");
    window.addEventListener("click",(event)=>{
      const target = event.target;
          button_press_sound.playbackRate = 2;
      if(target.tagName === "BUTTON" || target.tagName === "SELECT" || target.tagName === "A" || target.tagName === "INPUT" && ["button", "submit", "reset","checkbox"].includes(target.type)){
        button_press_sound.currentTime = 0;
        button_press_sound.play();
      }

    });


  </script>


<section id="right-banner-ad">
    <div id="right-banner-ad-container">
      <script type="text/javascript">
	atOptions = {
		'key' : '8ed8a15dcba51943150de3fbaa56ad6c',
		'format' : 'iframe',
		'height' : 300,
		'width' : 160,
		'params' : {}
	};
</script>
<script type="text/javascript" src="//www.highperformanceformat.com/8ed8a15dcba51943150de3fbaa56ad6c/invoke.js"></script>
  </div>
</section>

<section id="left-banner-ad">
  <div id="left-banner-ad-container">
      <script type="text/javascript">
	atOptions = {
		'key' : '8ed8a15dcba51943150de3fbaa56ad6c',
		'format' : 'iframe',
		'height' : 300,
		'width' : 160,
		'params' : {}
	};
</script>
<script type="text/javascript" src="//www.highperformanceformat.com/8ed8a15dcba51943150de3fbaa56ad6c/invoke.js"></script>
  </div>
</section>

<footer>
  <div id="mobile-screens-ad-container">
    <script type="text/javascript">
    atOptions = {
      'key' : '0eb2e3f91cb8aec8263fd5512397c80f',
      'format' : 'iframe',
      'height' : 50,
      'width' : 320,
      'params' : {}
    };
  </script>
  <script type="text/javascript" src="//www.highperformanceformat.com/0eb2e3f91cb8aec8263fd5512397c80f/invoke.js"></script>
  </div>
  <script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="rkeyDev" data-description="Support me on Buy me a coffee!" data-message="Support the developer!" data-color="#FF813F" data-position="Right" data-x_margin="18" data-y_margin="18"></script>
</footer>

<div id="popup-ad">
  <script type='text/javascript' src='//gardeningcoercive.com/37/f1/b1/37f1b1f0d15c94c5950927055273029f.js'></script>
</div>


<script>
(function lockTitle() {
  const originalTitle = document.title;

  // Reset title if changed
  const observer = new MutationObserver(() => {
    if (document.title !== originalTitle) {
      document.title = originalTitle;
    }
  });

  // Observe title changes
  observer.observe(document.querySelector('title'), { childList: true });

  setInterval(() => {
    if (!document.querySelector('title')) {
      const title = document.createElement('title');
      title.textContent = originalTitle;
      document.head.appendChild(title);
    } else if (document.title !== originalTitle) {
      document.title = originalTitle;
    }
  }, 500);
})();
</script>

</body>
</html>