diff --git a/package-lock.json b/package-lock.json index d6d7aa65..df663bbb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "react-dom": "^16.2.0", "react-sortable-hoc": "^0.6.8", "select-dom": "^7.1.1", + "tailwind-merge": "^2.2.1", "webext-options-sync": "^4.2.1", "webextension-polyfill": "^0.10.0" }, @@ -80,12 +81,14 @@ "license": "MIT" }, "node_modules/@babel/runtime": { - "version": "7.8.7", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.7.tgz", - "integrity": "sha512-+AATMUFppJDw6aiR5NVPHqIQBlV/Pj8wY/EZH+lmvRdUo9xBaz/rF3alAwFJQavvKfeOlPE7oaaDHVbcySbCsg==", - "license": "MIT", + "version": "7.23.8", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.8.tgz", + "integrity": "sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==", "dependencies": { - "regenerator-runtime": "^0.13.4" + "regenerator-runtime": "^0.14.0" + }, + "engines": { + "node": ">=6.9.0" } }, "node_modules/@babel/runtime-corejs3": { @@ -99,6 +102,11 @@ "regenerator-runtime": "^0.13.4" } }, + "node_modules/@babel/runtime/node_modules/regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" + }, "node_modules/@biomejs/biome": { "version": "1.5.2", "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-1.5.2.tgz", @@ -13120,6 +13128,7 @@ "version": "0.13.5", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz", "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==", + "dev": true, "license": "MIT" }, "node_modules/regex-not": { @@ -14778,6 +14787,18 @@ "node": ">=0.10.0" } }, + "node_modules/tailwind-merge": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.2.1.tgz", + "integrity": "sha512-o+2GTLkthfa5YUt4JxPfzMIpQzZ3adD1vLVkvKE1Twl9UAhGsEbIZhHHZVRttyW177S8PDJI3bTQNaebyofK3Q==", + "dependencies": { + "@babel/runtime": "^7.23.7" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.1.tgz", diff --git a/package.json b/package.json index 526a155e..6697e053 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "react-dom": "^16.2.0", "react-sortable-hoc": "^0.6.8", "select-dom": "^7.1.1", + "tailwind-merge": "^2.2.1", "webext-options-sync": "^4.2.1", "webextension-polyfill": "^0.10.0" }, diff --git a/src/content/features/notifications.js b/src/content/features/notifications.js new file mode 100644 index 00000000..f6c27506 --- /dev/null +++ b/src/content/features/notifications.js @@ -0,0 +1,163 @@ +import React from 'dom-chef' +import { twMerge } from 'tailwind-merge' +import storage from '../../shared/storage' +import styles from 'tailwindInline:../styles.css' + +function createNotification({ + title, + description, + link, + linkLabel = 'Find out more', + onClose, +}) { + const rootElement = document.createElement('div') + rootElement.attachShadow({ mode: 'open' }) + + const styleElement = document.createElement('style') + styleElement.textContent = styles + + rootElement.shadowRoot.appendChild(styleElement) + + const buttonLinkClassNames = + 'inline-flex items-center justify-center gap-1 rounded-md px-2 py-1 outline-none border border-transparent transition text-center cursor-pointer text-neutral-900 bg-white hover:text-white hover:bg-neutral-950 hover:border-neutral-600 flex-1' + + rootElement.shadowRoot.appendChild( +
+
+ + Repeek + + + + +
{ + rootElement.remove() + onClose() + }} + > + + Close + + + +
+
+
+
{title}
+
{description}
+
+
+ + {linkLabel}{' '} + + External link + + + + + + + Follow on{' '} + + X + + + +
+
, + ) + + document.body.appendChild(rootElement) +} + +export default async () => { + const { repeekNotificationClosed, faceitBetaNotificationClosed } = + await storage.getAll() + + if (!repeekNotificationClosed) { + await new Promise((resolve) => { + createNotification({ + title: 'FACEIT Enhancer is now Repeek', + description: + "Don't worry, nothing really changes for you, right away. Repeek is setting the foundation to be better and faster than ever before.", + linkLabel: 'Read more', + link: 'https://repeek.gg/blog/faceit-enhancer-becomes-repeek?utm_source=faceit&utm_medium=repeek&utm_campaign=repeek-announcement', + onClose: () => { + storage.set({ repeekNotificationClosed: true }) + resolve() + }, + }) + }) + } + + if (!faceitBetaNotificationClosed) { + createNotification({ + title: 'FACEIT Beta support now available', + description: + 'You can now use Repeek on the new FACEIT Beta platform! Simply enable it in the Repeek general settings or read our guide to find out more.', + onClose: () => { + storage.set({ faceitBetaNotificationClosed: true }) + }, + }) + } +} diff --git a/src/content/features/repeek-notification.js b/src/content/features/repeek-notification.js deleted file mode 100644 index 531d3a28..00000000 --- a/src/content/features/repeek-notification.js +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'dom-chef' -import storage from '../../shared/storage' -import styles from 'tailwindInline:../styles.css' - -export default async () => { - const { repeekNotificationClosed } = await storage.getAll() - - if (repeekNotificationClosed) { - return - } - - const rootElement = document.createElement('div') - rootElement.attachShadow({ mode: 'open' }) - - const styleElement = document.createElement('style') - styleElement.textContent = styles - - rootElement.shadowRoot.appendChild(styleElement) - - const buttonLinkClassNames = - 'gap-1 rounded-md px-2 py-1 outline-none border border-transparent transition text-center cursor-pointer text-neutral-900 bg-white hover:text-white hover:bg-neutral-950 hover:border-neutral-600 flex-1' - - rootElement.shadowRoot.appendChild( -
-
FACEIT Enhancer is now Repeek
-
- FACEIT Enhancer has been renamed to Repeek and got a new look and - website! -
-
- - Read more - - - Follow on Twitter - -
-
- { - storage.set({ repeekNotificationClosed: true }) - rootElement.remove() - }} - > - Close and don't show again - -
-
, - ) - - document.body.appendChild(rootElement) -} diff --git a/src/content/index.js b/src/content/index.js index ec0dc223..3d920371 100755 --- a/src/content/index.js +++ b/src/content/index.js @@ -23,7 +23,7 @@ import clickModalMatchRoomCaptainOk from './features/click-modal-match-room-capt import clickModalPartyInviteAccept from './features/click-modal-party-invite-accept' import closeFaceitClientDownloadBanner from './features/close-faceit-client-download-banner' import copyMatchRoomCopyServerData from './features/copy-match-room-copy-server-data' -import repeekNotification from './features/repeek-notification' +import notifications from './features/notifications' import * as modals from './helpers/modals' import * as pages from './helpers/pages' import { runFeatureIf } from './helpers/user-settings' @@ -182,7 +182,7 @@ async function initContent() { return } - repeekNotification() + notifications() observeBody() } diff --git a/src/shared/settings.js b/src/shared/settings.js index 60917d0c..b80ebb75 100644 --- a/src/shared/settings.js +++ b/src/shared/settings.js @@ -53,4 +53,5 @@ export const DEFAULTS = { notifyMatchRoomAutoVetoMaps: true, teamRosterPlayersInfo: true, repeekNotificationClosed: false, + faceitBetaNotificationClosed: false, }