Telegram Mini App

.eslintrc.cjs

@@ -10,6 +10,7 @@ module.exports = {
 	globals: {
 		document: 'readonly',
 		window: 'readonly',
+		URL: 'readonly',
 	},
 	parserOptions: {
 		ecmaVersion: 'latest',

index.html

@@ -44,6 +44,9 @@ <h1 class="rules__header">Пасьянс «Колодец»</h1>
 						Вернуться к игре
 					</button>
 					<button class="rules__button rules__restart" type="button">Разложить</button>
+					<a class="rules__button rules__telegram" href="https://t.me/WellCardGameBot" target="_blank">
+						Играть в Telegram
+					</a>
 				</div>
 				<p class="rules__text">
 					Цель игры — собрать 104 карты (2 колоды) в четырёх угловых слотах, повёрнутых на 45°. На каждый слот кладутся карты одной масти в порядке уменьшения достоинства — от короля до туза, затем король и так далее до второго туза.

src/assets/scss/base/global.scss

@@ -9,7 +9,7 @@ html {
 	scroll-behavior: smooth;
 	overflow-anchor: none;
 
-	@media (max-width: 480px) and (min-height: 150vw) {
+	@media (max-width: 767px), (min-height: 150vw) {
 		font-size: 14px;
 	}
 }

src/assets/scss/base/variables.scss

@@ -4,7 +4,7 @@ $green: #096312;
 $black: #000000;
 
 @mixin mobile {
-	@media (max-width: 600px), (max-height: 600px) {
+	@media (max-width: 767px), (max-height: 600px) {
 		@content;
 	}
 }

src/assets/scss/blocks/rules.scss

@@ -47,6 +47,8 @@
 	padding: 1rem 0;
 	font-size: 1rem;
 	font-family: inherit;
+	text-align: center;
+	text-decoration: none;
 	background-color: $gray;
 	border: none;
 	border-radius: 1.25rem;
@@ -56,6 +58,10 @@
 	transition: all 0.3s ease-in-out;
 	user-select: none;
 
+	@include mobile {
+		max-width: none;
+	}
+
 	&:hover,
 	&:focus {
 		color: #ffffff;

src/main.js

@@ -4,6 +4,7 @@ import { getDropCoords } from '@/modules/functions/get-drop-coords';
 import { reloadHandler } from '@/modules/functions/reload-handler';
 import { restartHandler } from '@/modules/functions/restart-handler';
 import { rulesOpenHandler } from '@/modules/functions/rules-open-handler';
+import '@/modules/tg';
 
 const CARDS_IN_KEYS = 14;
 

src/modules/functions/drag-drop-handler.js

@@ -18,6 +18,7 @@ class Coords {
 
 export const dragDropHandler = (evt) => {
 	evt.preventDefault();
+	evt.stopPropagation();
 
 	const startCoords = new Coords(evt.clientX, evt.clientY);
 

src/modules/tg.js

@@ -0,0 +1,14 @@
+import { rules } from '@/modules/settings';
+
+const params = new URL(window.location.toString()).searchParams;
+const tgMode = typeof params.get('tg') === 'string';
+
+if (tgMode) {
+	rules.querySelector('.rules__telegram').remove();
+	const script = document.createElement('script');
+	script.src = 'https://telegram.org/js/telegram-web-app.js';
+	script.addEventListener('load', () => {
+		window.Telegram?.WebApp?.expand();
+	});
+	document.head.append(script);
+}