From 9c9e000ffed304eebe948b699c4110d7f78c9970 Mon Sep 17 00:00:00 2001 From: Andrey Efimov Date: Sat, 20 Jul 2024 17:59:54 +0300 Subject: [PATCH] Telegram Mini App --- .eslintrc.cjs | 1 + index.html | 3 +++ package-lock.json | 20 ++++++++++---------- src/assets/scss/base/global.scss | 2 +- src/assets/scss/base/variables.scss | 2 +- src/assets/scss/blocks/rules.scss | 6 ++++++ src/main.js | 1 + src/modules/tg.js | 16 ++++++++++++++++ 8 files changed, 39 insertions(+), 12 deletions(-) create mode 100644 src/modules/tg.js diff --git a/.eslintrc.cjs b/.eslintrc.cjs index d9e301c..69ccbb3 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -10,6 +10,7 @@ module.exports = { globals: { document: 'readonly', window: 'readonly', + URL: 'readonly', }, parserOptions: { ecmaVersion: 'latest', diff --git a/index.html b/index.html index 70bc556..1abd176 100644 --- a/index.html +++ b/index.html @@ -44,6 +44,9 @@

Пасьянс «Колодец»

Вернуться к игре + + Играть в Telegram +

Цель игры — собрать 104 карты (2 колоды) в четырёх угловых слотах, повёрнутых на 45°. На каждый слот кладутся карты одной масти в порядке уменьшения достоинства — от короля до туза, затем король и так далее до второго туза. diff --git a/package-lock.json b/package-lock.json index 3f5376a..d1c016c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1536,12 +1536,12 @@ } }, "node_modules/braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", "dev": true, "dependencies": { - "fill-range": "^7.0.1" + "fill-range": "^7.1.1" }, "engines": { "node": ">=8" @@ -2113,9 +2113,9 @@ } }, "node_modules/ejs": { - "version": "3.1.9", - "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz", - "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==", + "version": "3.1.10", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz", + "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==", "dev": true, "dependencies": { "jake": "^10.8.5" @@ -2504,9 +2504,9 @@ } }, "node_modules/fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", "dev": true, "dependencies": { "to-regex-range": "^5.0.1" diff --git a/src/assets/scss/base/global.scss b/src/assets/scss/base/global.scss index ff66078..f2853fb 100644 --- a/src/assets/scss/base/global.scss +++ b/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; } } diff --git a/src/assets/scss/base/variables.scss b/src/assets/scss/base/variables.scss index b5d8a42..2833706 100644 --- a/src/assets/scss/base/variables.scss +++ b/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; } } diff --git a/src/assets/scss/blocks/rules.scss b/src/assets/scss/blocks/rules.scss index 2539319..b29856c 100644 --- a/src/assets/scss/blocks/rules.scss +++ b/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; diff --git a/src/main.js b/src/main.js index bf1b523..825e87b 100644 --- a/src/main.js +++ b/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; diff --git a/src/modules/tg.js b/src/modules/tg.js new file mode 100644 index 0000000..7d7b20a --- /dev/null +++ b/src/modules/tg.js @@ -0,0 +1,16 @@ +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(); + window.Telegram.WebApp.disableVerticalSwipes(); + }); + document.head.append(script); +}