diff --git a/index.html b/index.html index 1ace7ea..67aae03 100644 --- a/index.html +++ b/index.html @@ -1,27 +1,42 @@ - + + + + What Pokémon are you today ? - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + -
-

Hello,

-

You are today.

-

Made with by Diamant. -

+
+
+

+

+

+
-
- - +
+ diff --git a/manifest.webmanifest b/manifest.webmanifest new file mode 100644 index 0000000..2c8bcc9 --- /dev/null +++ b/manifest.webmanifest @@ -0,0 +1,23 @@ +{ + "name": "What Pokemon Are You today ?", + "short_name": "WPAYT ?", + "theme_color": "#242424", + "background_color": "#ffffff", + "display": "minimal-ui", + "scope": "/", + "start_url": "/", + "icons": [ + { + "src": "src/images/icons/manifest-icon-192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "maskable any" + }, + { + "src": "src/images/icons/manifest-icon-512.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "maskable any" + } + ] +} diff --git a/package-lock.json b/package-lock.json index 70fe63e..162839e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -956,6 +956,16 @@ "@parcel/plugin": "2.0.0-nightly.727+eae38150" } }, + "@parcel/packager-raw-url": { + "version": "2.0.0-nightly.2349", + "resolved": "https://registry.npmjs.org/@parcel/packager-raw-url/-/packager-raw-url-2.0.0-nightly.2349.tgz", + "integrity": "sha512-lYId9bm9qgP6QUUDg6/6GKHnDz9vooqtV63MLK9pBnuYdny2DbbsxKK/iOjAvCrMfl4VOhs5iVU1zYefYY4r3Q==", + "dev": true, + "requires": { + "@parcel/plugin": "2.0.0-nightly.727+eae38150", + "@parcel/utils": "2.0.0-nightly.727+eae38150" + } + }, "@parcel/plugin": { "version": "2.0.0-nightly.727", "resolved": "https://registry.npmjs.org/@parcel/plugin/-/plugin-2.0.0-nightly.727.tgz", @@ -1277,6 +1287,18 @@ "sass": "^1.32.4" } }, + "@parcel/transformer-webmanifest": { + "version": "2.0.0-nightly.2349", + "resolved": "https://registry.npmjs.org/@parcel/transformer-webmanifest/-/transformer-webmanifest-2.0.0-nightly.2349.tgz", + "integrity": "sha512-aH6U9ikghfHTeS9+N8AvfM6D4aLmqhfqf7OMb55FROCfnF91NKxoye5KPsx97Yy2dsvycg6n6IEwKeQhb9Jk5A==", + "dev": true, + "requires": { + "@parcel/diagnostic": "2.0.0-nightly.727+eae38150", + "@parcel/plugin": "2.0.0-nightly.727+eae38150", + "@parcel/utils": "2.0.0-nightly.727+eae38150", + "json-source-map": "^0.6.1" + } + }, "@parcel/types": { "version": "2.0.0-nightly.727", "resolved": "https://registry.npmjs.org/@parcel/types/-/types-2.0.0-nightly.727.tgz", @@ -1401,6 +1423,15 @@ "integrity": "sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==", "dev": true }, + "aggregate-error": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz", + "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==", + "requires": { + "clean-stack": "^2.0.0", + "indent-string": "^4.0.0" + } + }, "ajv": { "version": "6.12.6", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", @@ -1577,6 +1608,14 @@ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==", "dev": true }, + "axios": { + "version": "0.21.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", + "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", + "requires": { + "follow-redirects": "^1.10.0" + } + }, "balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -1948,6 +1987,11 @@ } } }, + "clean-stack": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", + "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==" + }, "cli-cursor": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz", @@ -3095,8 +3139,7 @@ "follow-redirects": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz", - "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==", - "dev": true + "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==" }, "for-in": { "version": "1.0.2", @@ -3639,6 +3682,11 @@ "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", "dev": true }, + "indent-string": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", + "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==" + }, "indexes-of": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz", @@ -4240,6 +4288,11 @@ "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", "dev": true }, + "memory-cache": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/memory-cache/-/memory-cache-0.2.0.tgz", + "integrity": "sha1-eJCwHVLADI68nVM+H46xfjA0hxo=" + }, "merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -4639,6 +4692,14 @@ "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=", "dev": true }, + "p-map": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz", + "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==", + "requires": { + "aggregate-error": "^3.0.0" + } + }, "pako": { "version": "1.0.11", "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz", @@ -4786,10 +4847,15 @@ "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==", "dev": true }, - "pokemon.js": { - "version": "1.1.8", - "resolved": "https://registry.npmjs.org/pokemon.js/-/pokemon.js-1.1.8.tgz", - "integrity": "sha512-EiCb5IcZxRunyy6bBgCx/rgEGoMkDBvVOTb/8yeNOGcNXiJ+xo7fl6BLH2qZGJqm6Y1ZiLW21ybnn+gYnmCY/g==" + "pokedex-promise-v2": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/pokedex-promise-v2/-/pokedex-promise-v2-3.3.2.tgz", + "integrity": "sha512-Jz6ayPmJKtvOxB+jxAvF0auQBkiphOHITDkUpexR55ncx5EfHd+UHNN1r6ROl5A5s9NFoZ5eZU6tgxPjbGnOMQ==", + "requires": { + "axios": "^0.21.1", + "memory-cache": "^0.2.0", + "p-map": "^4.0.0" + } }, "posix-character-classes": { "version": "0.1.1", @@ -6986,6 +7052,43 @@ "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==", "dev": true }, + "workbox-cacheable-response": { + "version": "6.1.5", + "resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-6.1.5.tgz", + "integrity": "sha512-x8DC71lO/JCgiaJ194l9le8wc8lFPLgUpDkLhp2si7mXV6S/wZO+8Osvw1LLgYa8YYTWGbhbFhFTXIkEMknIIA==", + "requires": { + "workbox-core": "^6.1.5" + } + }, + "workbox-core": { + "version": "6.1.5", + "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-6.1.5.tgz", + "integrity": "sha512-9SOEle7YcJzg3njC0xMSmrPIiFjfsFm9WjwGd5enXmI8Lwk8wLdy63B0nzu5LXoibEmS9k+aWF8EzaKtOWjNSA==" + }, + "workbox-expiration": { + "version": "6.1.5", + "resolved": "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-6.1.5.tgz", + "integrity": "sha512-6cN+FVbh8fNq56LFKPMchGNKCJeyboHsDuGBqmhDUPvD4uDjsegQpDQzn52VaE0cpywbSIsDF/BSq9E9Yjh5oQ==", + "requires": { + "workbox-core": "^6.1.5" + } + }, + "workbox-routing": { + "version": "6.1.5", + "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-6.1.5.tgz", + "integrity": "sha512-uC/Ctz+4GXGL42h1WxUNKxqKRik/38uS0NZ6VY/EHqL2F1ObLFqMHUZ4ZYvyQsKdyI82cxusvhJZHOrY0a2fIQ==", + "requires": { + "workbox-core": "^6.1.5" + } + }, + "workbox-strategies": { + "version": "6.1.5", + "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-6.1.5.tgz", + "integrity": "sha512-QhiOn9KT9YGBdbfWOmJT6pXZOIAxaVrs6J6AMYzRpkUegBTEcv36+ZhE/cfHoT0u2fxVtthHnskOQ/snEzaXQw==", + "requires": { + "workbox-core": "^6.1.5" + } + }, "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", diff --git a/package.json b/package.json index 49fd976..670c341 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,7 @@ { "name": "what-pokemon-you-are-today", - "version": "1.0.1", + "version": "1.3.0", "description": "This little project have just a single utility: telling you what Pokemon you are today !", - "main": "dist/index.html", "homepage": "https://wpayt.diams.app", "author": { "name": "DiamantDev", @@ -14,10 +13,16 @@ "build": "parcel build index.html" }, "dependencies": { - "pokemon.js": "^1.1.8" + "pokedex-promise-v2": "^3.3.2", + "workbox-cacheable-response": "^6.1.5", + "workbox-expiration": "^6.1.5", + "workbox-routing": "^6.1.5", + "workbox-strategies": "^6.1.5" }, "devDependencies": { + "@parcel/packager-raw-url": "^2.0.0-nightly.2349", "@parcel/transformer-sass": "^2.0.0-nightly.727", + "@parcel/transformer-webmanifest": "^2.0.0-nightly.2349", "parcel": "^2.0.0-nightly.725", "sass": "^1.35.1", "typescript": "4.2.3" diff --git a/readme.md b/readme.md index 69fb884..c6dfadf 100644 --- a/readme.md +++ b/readme.md @@ -1,19 +1,17 @@ - # What Pokemon Are You Today ! -This little project have just a single utility: telling you what Pokemon you are today ! +This little project have just a single utility: telling you what Pokemon you are +today ! GitHub forks GitHub stars GitHub license Website - ## Authors - [@diamantdotdev](https://www.github.com/diamantdotdev) - ## Run Locally Clone the project @@ -40,12 +38,14 @@ Start the server npm run start ``` - ## Features - Telling what Pokemon are you today. -- ***SMOOTH ANIMATION*** -- Stored via `localstorage` (No online store) +- **_SMOOTH ANIMATION_** +- Stored via `localstorage`. (No online storage.) - Website background based on Pokemon first type. - - +- `NEW` PWA Support. +- `NEW` Telling what Level you are today. +- `NEW` Some Smooth Reveal Animation. +- `NEW` Get an history of what Pokemon you has been. +- `NEW` French translation. diff --git a/src/_types.scss b/src/_types.scss deleted file mode 100644 index d19a18c..0000000 --- a/src/_types.scss +++ /dev/null @@ -1,131 +0,0 @@ -$black: #222222; -$white: #eeeeee; - -body { - &.normal { - background-color: #eeeeee; - color: $black; - p a { - color: $black; - } - } - &.fighting { - background-color: #756573; - color: $white; - p a { - color: $white; - } - } - &.flying { - background-color: #657581; - color: $white; - p a { - color: $white; - } - } - &.poison { - background-color: #ad569f; - color: $black; - p a { - color: $black; - } - } - &.ground { - background-color: #9f8853; - color: $black; - p a { - color: $black; - } - } - &.rock { - background-color: #565f1d; - color: $white; - p a { - color: $white; - } - } - &.bug { - background-color: #417241; - color: $white; - p a { - color: $white; - } - } - &.ghost { - background-color: #3c55b8; - color: $white; - p a { - color: $white; - } - } - &.steel { - background-color: #dddcfe; - color: $black; - p a { - color: $black; - } - } - &.fire { - background-color: #c6761d; - color: $black; - p a { - color: $black; - } - } - &.water { - background-color: #184088; - color: $white; - p a { - color: $white; - } - } - &.grass { - background-color: #89ca5f; - color: $black; - p a { - color: $black; - } - } - &.electric { - background-color: #edf31d; - color: $black; - p a { - color: $black; - } - } - &.psychic { - background-color: #f2087e; - color: $black; - p a { - color: $black; - } - } - &.ice { - background-color: #8db0bb; - color: $black; - p a { - color: $black; - } - } - &.dragon { - background-color: #604324; - color: $white; - p a { - color: $white; - } - } - &.dark { - background-color: #042e2d; - color: $white; - p a { - color: $white; - } - } - &.fairy { - background-color: #f454b3; - color: $black; - p a { - color: $black; - } - } -} diff --git a/src/card.png b/src/images/card.png similarity index 100% rename from src/card.png rename to src/images/card.png diff --git a/src/icon.png b/src/images/icon.png similarity index 100% rename from src/icon.png rename to src/images/icon.png diff --git a/src/images/icons/apple-icon-180.png b/src/images/icons/apple-icon-180.png new file mode 100644 index 0000000..a0dfdc1 Binary files /dev/null and b/src/images/icons/apple-icon-180.png differ diff --git a/src/images/icons/apple-splash-1125-2436.jpg b/src/images/icons/apple-splash-1125-2436.jpg new file mode 100644 index 0000000..4008c22 Binary files /dev/null and b/src/images/icons/apple-splash-1125-2436.jpg differ diff --git a/src/images/icons/apple-splash-1136-640.jpg b/src/images/icons/apple-splash-1136-640.jpg new file mode 100644 index 0000000..4689f18 Binary files /dev/null and b/src/images/icons/apple-splash-1136-640.jpg differ diff --git a/src/images/icons/apple-splash-1170-2532.jpg b/src/images/icons/apple-splash-1170-2532.jpg new file mode 100644 index 0000000..0bd669b Binary files /dev/null and b/src/images/icons/apple-splash-1170-2532.jpg differ diff --git a/src/images/icons/apple-splash-1242-2208.jpg b/src/images/icons/apple-splash-1242-2208.jpg new file mode 100644 index 0000000..b9a7189 Binary files /dev/null and b/src/images/icons/apple-splash-1242-2208.jpg differ diff --git a/src/images/icons/apple-splash-1242-2688.jpg b/src/images/icons/apple-splash-1242-2688.jpg new file mode 100644 index 0000000..d283924 Binary files /dev/null and b/src/images/icons/apple-splash-1242-2688.jpg differ diff --git a/src/images/icons/apple-splash-1284-2778.jpg b/src/images/icons/apple-splash-1284-2778.jpg new file mode 100644 index 0000000..016eae5 Binary files /dev/null and b/src/images/icons/apple-splash-1284-2778.jpg differ diff --git a/src/images/icons/apple-splash-1334-750.jpg b/src/images/icons/apple-splash-1334-750.jpg new file mode 100644 index 0000000..b7b210f Binary files /dev/null and b/src/images/icons/apple-splash-1334-750.jpg differ diff --git a/src/images/icons/apple-splash-1536-2048.jpg b/src/images/icons/apple-splash-1536-2048.jpg new file mode 100644 index 0000000..81c12fa Binary files /dev/null and b/src/images/icons/apple-splash-1536-2048.jpg differ diff --git a/src/images/icons/apple-splash-1620-2160.jpg b/src/images/icons/apple-splash-1620-2160.jpg new file mode 100644 index 0000000..ea8eacc Binary files /dev/null and b/src/images/icons/apple-splash-1620-2160.jpg differ diff --git a/src/images/icons/apple-splash-1668-2224.jpg b/src/images/icons/apple-splash-1668-2224.jpg new file mode 100644 index 0000000..60eb338 Binary files /dev/null and b/src/images/icons/apple-splash-1668-2224.jpg differ diff --git a/src/images/icons/apple-splash-1668-2388.jpg b/src/images/icons/apple-splash-1668-2388.jpg new file mode 100644 index 0000000..e13013c Binary files /dev/null and b/src/images/icons/apple-splash-1668-2388.jpg differ diff --git a/src/images/icons/apple-splash-1792-828.jpg b/src/images/icons/apple-splash-1792-828.jpg new file mode 100644 index 0000000..89e4e12 Binary files /dev/null and b/src/images/icons/apple-splash-1792-828.jpg differ diff --git a/src/images/icons/apple-splash-2048-1536.jpg b/src/images/icons/apple-splash-2048-1536.jpg new file mode 100644 index 0000000..9bf03ed Binary files /dev/null and b/src/images/icons/apple-splash-2048-1536.jpg differ diff --git a/src/images/icons/apple-splash-2048-2732.jpg b/src/images/icons/apple-splash-2048-2732.jpg new file mode 100644 index 0000000..756777e Binary files /dev/null and b/src/images/icons/apple-splash-2048-2732.jpg differ diff --git a/src/images/icons/apple-splash-2160-1620.jpg b/src/images/icons/apple-splash-2160-1620.jpg new file mode 100644 index 0000000..84640d1 Binary files /dev/null and b/src/images/icons/apple-splash-2160-1620.jpg differ diff --git a/src/images/icons/apple-splash-2208-1242.jpg b/src/images/icons/apple-splash-2208-1242.jpg new file mode 100644 index 0000000..4203096 Binary files /dev/null and b/src/images/icons/apple-splash-2208-1242.jpg differ diff --git a/src/images/icons/apple-splash-2224-1668.jpg b/src/images/icons/apple-splash-2224-1668.jpg new file mode 100644 index 0000000..a5247d7 Binary files /dev/null and b/src/images/icons/apple-splash-2224-1668.jpg differ diff --git a/src/images/icons/apple-splash-2388-1668.jpg b/src/images/icons/apple-splash-2388-1668.jpg new file mode 100644 index 0000000..7960d16 Binary files /dev/null and b/src/images/icons/apple-splash-2388-1668.jpg differ diff --git a/src/images/icons/apple-splash-2436-1125.jpg b/src/images/icons/apple-splash-2436-1125.jpg new file mode 100644 index 0000000..3ef8d6e Binary files /dev/null and b/src/images/icons/apple-splash-2436-1125.jpg differ diff --git a/src/images/icons/apple-splash-2532-1170.jpg b/src/images/icons/apple-splash-2532-1170.jpg new file mode 100644 index 0000000..e4f6b27 Binary files /dev/null and b/src/images/icons/apple-splash-2532-1170.jpg differ diff --git a/src/images/icons/apple-splash-2688-1242.jpg b/src/images/icons/apple-splash-2688-1242.jpg new file mode 100644 index 0000000..81121d8 Binary files /dev/null and b/src/images/icons/apple-splash-2688-1242.jpg differ diff --git a/src/images/icons/apple-splash-2732-2048.jpg b/src/images/icons/apple-splash-2732-2048.jpg new file mode 100644 index 0000000..43a8fec Binary files /dev/null and b/src/images/icons/apple-splash-2732-2048.jpg differ diff --git a/src/images/icons/apple-splash-2778-1284.jpg b/src/images/icons/apple-splash-2778-1284.jpg new file mode 100644 index 0000000..baaa46a Binary files /dev/null and b/src/images/icons/apple-splash-2778-1284.jpg differ diff --git a/src/images/icons/apple-splash-640-1136.jpg b/src/images/icons/apple-splash-640-1136.jpg new file mode 100644 index 0000000..619d026 Binary files /dev/null and b/src/images/icons/apple-splash-640-1136.jpg differ diff --git a/src/images/icons/apple-splash-750-1334.jpg b/src/images/icons/apple-splash-750-1334.jpg new file mode 100644 index 0000000..3b8ad61 Binary files /dev/null and b/src/images/icons/apple-splash-750-1334.jpg differ diff --git a/src/images/icons/apple-splash-828-1792.jpg b/src/images/icons/apple-splash-828-1792.jpg new file mode 100644 index 0000000..380763e Binary files /dev/null and b/src/images/icons/apple-splash-828-1792.jpg differ diff --git a/src/images/icons/manifest-icon-192.png b/src/images/icons/manifest-icon-192.png new file mode 100644 index 0000000..b35792a Binary files /dev/null and b/src/images/icons/manifest-icon-192.png differ diff --git a/src/images/icons/manifest-icon-512.png b/src/images/icons/manifest-icon-512.png new file mode 100644 index 0000000..54fcf5f Binary files /dev/null and b/src/images/icons/manifest-icon-512.png differ diff --git a/src/index.ts b/src/index.ts deleted file mode 100644 index 29163f6..0000000 --- a/src/index.ts +++ /dev/null @@ -1,43 +0,0 @@ -const pokemonJS = require('pokemon.js'); - -const dateNow = Date.now() - (Date.now() % 86400000); - -const lastDay = parseInt(localStorage.getItem('day') as string, 10) || 0; - -const difference = dateNow - lastDay >= 86400000; - -pokemonJS.getAll().then((pokemon: [string]) => { - const rdmPoke = difference - ? pokemon[Math.round(Math.random() * pokemon.length)] - : (localStorage.getItem('pokemon') as string); - const textToEdit = document.querySelector('#poke') as HTMLSpanElement; - textToEdit.innerText = rdmPoke; - localStorage.setItem('day', `${difference ? dateNow : lastDay}`); - localStorage.setItem('pokemon', rdmPoke); - pokemonJS.getSprites(rdmPoke).then((url: any) => { - const img = document.querySelector('img') as HTMLImageElement; - img.alt = rdmPoke; - img.src = url.other['official-artwork'].front_default; - const icon = document.querySelector('.icon') as HTMLLinkElement; - icon.href = url.front_default; - const a = - rdmPoke.startsWith('a') || - rdmPoke.startsWith('e') || - rdmPoke.startsWith('i') || - rdmPoke.startsWith('o') || - rdmPoke.startsWith('u') - ? 'an' - : 'a'; - const shareURL = `https://twitter.com/intent/tweet?text=Today, I'm ${a} ${rdmPoke}, and you? Check here:&hashtags=WhatPokemonAreYouToday,Pokemon&url=https://wpart.diams.app`; - const aP = document.querySelector('#a') as HTMLSpanElement; - aP.innerText = a; - const tweetBtn = document.querySelector('#tweet') as HTMLLinkElement; - tweetBtn.href = shareURL; - tweetBtn.removeAttribute('hidden'); - pokemonJS - .getType(rdmPoke) - .then((type: [{ logo: string; name: string }]) => { - document.body.classList.add('ready', type[0].name); - }); - }); -}); diff --git a/src/scss/_anim.scss b/src/scss/_anim.scss new file mode 100644 index 0000000..83b6dde --- /dev/null +++ b/src/scss/_anim.scss @@ -0,0 +1,31 @@ +.reveal { + &#you { + filter: blur(10px); + animation: textReveal 1.5s ease-in-out 5s 1 forwards; + } + &#sprite { + filter: blur(10px); + filter: brightness(0); + animation: imgReveal 5s ease-in-out 3s 1 forwards; + } +} + +@keyframes textReveal { + 0% { + filter: blur(10px); + } + 100% { + filter: blur(0px); + } +} + +@keyframes imgReveal { + 0% { + filter: blur(10px); + filter: brightness(0); + } + 100% { + filter: blur(0px); + filter: brightness(1); + } +} diff --git a/src/scss/_types.scss b/src/scss/_types.scss new file mode 100644 index 0000000..86bd16d --- /dev/null +++ b/src/scss/_types.scss @@ -0,0 +1,129 @@ +$black: #222222; +$white: #eeeeee; + +.normal { + background-color: #eeeeee; + color: $black; + p a { + color: $black; + } +} +.fighting { + background-color: #756573; + color: $white; + p a { + color: $white; + } +} +.flying { + background-color: #657581; + color: $white; + p a { + color: $white; + } +} +.poison { + background-color: #ad569f; + color: $black; + p a { + color: $black; + } +} +.ground { + background-color: #9f8853; + color: $black; + p a { + color: $black; + } +} +.rock { + background-color: #565f1d; + color: $white; + p a { + color: $white; + } +} +.bug { + background-color: #417241; + color: $white; + p a { + color: $white; + } +} +.ghost { + background-color: #3c55b8; + color: $white; + p a { + color: $white; + } +} +.steel { + background-color: #dddcfe; + color: $black; + p a { + color: $black; + } +} +.fire { + background-color: #c6761d; + color: $black; + p a { + color: $black; + } +} +.water { + background-color: #184088; + color: $white; + p a { + color: $white; + } +} +.grass { + background-color: #89ca5f; + color: $black; + p a { + color: $black; + } +} +.electric { + background-color: #edf31d; + color: $black; + p a { + color: $black; + } +} +.psychic { + background-color: #f2087e; + color: $black; + p a { + color: $black; + } +} +.ice { + background-color: #8db0bb; + color: $black; + p a { + color: $black; + } +} +.dragon { + background-color: #604324; + color: $white; + p a { + color: $white; + } +} +.dark { + background-color: #042e2d; + color: $white; + p a { + color: $white; + } +} +.fairy { + background-color: #f454b3; + color: $black; + p a { + color: $black; + } +} diff --git a/src/style.scss b/src/scss/style.scss similarity index 50% rename from src/style.scss rename to src/scss/style.scss index 4955ed9..4519a35 100644 --- a/src/style.scss +++ b/src/scss/style.scss @@ -10,7 +10,6 @@ body { transition: opacity 1s ease-in-out, transform 1s ease-in-out, background-color 1s ease-in-out; opacity: 1; - overflow: hidden; transform: translateY(0px); &:not(.ready) { opacity: 0; @@ -18,12 +17,22 @@ body { } font-family: 'Inter', sans-serif; display: flex; - flex-direction: row; - height: 100vh; + flex-direction: column; + min-height: 100vh; width: 100%; - justify-content: space-around; align-items: center; - flex-wrap: wrap; + justify-content: space-around; + .day { + display: flex; + width: 100%; + flex-direction: row; + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + @media (max-width: 1000px) { + margin: 10vh 0; + } + } h1 { font-size: 4vw; } @@ -57,4 +66,48 @@ body { } } +.history { + display: flex; + flex-wrap: wrap; + justify-content: center; + font-family: 'Inter', sans-serif; + margin: 10px; + text-align: center; + overflow: hidden; + + div { + margin: 10px; + padding: 20px; + border-radius: 5px; + border: solid 0.5px black; + p { + font-size: 1vw; + } + span { + font-size: 0.5vw; + } + img { + max-width: 100%; + height: auto; + } + } + @media (max-width: 1000px) { + text-align: left; + div { + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + align-items: center; + width: 100%; + p { + font-size: 3vw; + } + span { + font-size: 1.5vw; + } + } + } +} + @import 'types'; +@import 'anim'; diff --git a/src/ts/History.ts b/src/ts/History.ts new file mode 100644 index 0000000..05c4233 --- /dev/null +++ b/src/ts/History.ts @@ -0,0 +1,53 @@ +import { DataLS } from '.'; +import { getData } from './getData'; +import { Color } from './Interfaces'; +interface Name { + language: Color; + name: string; +} + +const history = + (JSON.parse(localStorage.getItem('history') as string) as [DataLS]) || []; +const historyDOM = document.querySelector('.history') as HTMLDivElement; + +export const historyAdd = (data: DataLS) => { + history.push(data); + localStorage.setItem('history', JSON.stringify(history)); +}; + +export const historyShowed = (userLang: string) => { + if (history[0] != undefined) { + const his = history.reverse(); + his.forEach((poke, i) => { + if (i > 6) return; + getData(poke.pokemonID).then((data) => { + const matchName = + data.Names.filter( + (lang: Name) => lang.language.name == userLang + )[0] != undefined + ? data.Names.filter( + (lang: Name) => lang.language.name == userLang + )[0].name + : data.Names[0] != undefined + ? data.Names[0].name + : data.Name; + + const dateSet = new Date(poke.date); + const div = document.createElement('div'); + div.className = data.Type; + div.innerHTML = `${data.Name} +

${matchName} (${poke.level})
+ ${dateSet.toLocaleDateString()}

`; + historyDOM.appendChild(div); + }); + }); + } else { + document.body.removeChild(historyDOM); + } +}; diff --git a/src/ts/Interfaces.d.ts b/src/ts/Interfaces.d.ts new file mode 100644 index 0000000..df884a5 --- /dev/null +++ b/src/ts/Interfaces.d.ts @@ -0,0 +1,267 @@ +export interface Result { + name: string; + url: string; +} + +export interface AllPokes { + count: number; + results: Result[]; +} + +export interface Pokemon { + abilities: Ability[]; + baseExperience: number; + forms: Species[]; + gameIndices: any[]; + height: number; + heldItems: HeldItem[]; + id: number; + isDefault: boolean; + locationAreaEncounters: string; + moves: Move[]; + name: string; + order: number; + pastTypes: any[]; + species: Species; + sprites: Sprites; + stats: Stat[]; + types: Type[]; + weight: number; +} + +export interface Ability { + ability: Species; + isHidden: boolean; + slot: number; +} + +export interface Species { + name: string; + url: string; +} + +export interface HeldItem { + item: Species; + versionDetails: VersionDetail[]; +} + +export interface VersionDetail { + rarity: number; + version: Species; +} + +export interface Move { + move: Species; + versionGroupDetails: VersionGroupDetail[]; +} + +export interface VersionGroupDetail { + levelLearnedAt: number; + moveLearnMethod: Species; + versionGroup: Species; +} + +export interface GenerationV { + blackWhite: Sprites; +} + +export interface GenerationIv { + diamondPearl: Sprites; + heartgoldSoulsilver: Sprites; + platinum: Sprites; +} + +export interface Versions { + generationI: GenerationI; + generationIi: GenerationIi; + generationIii: GenerationIii; + generationIv: GenerationIv; + generationV: GenerationV; + generationVi: { [key: string]: GenerationVi }; + generationVii: GenerationVii; + generationViii: GenerationViii; +} + +export interface Sprites { + backDefault: null | string; + backFemale: null; + backShiny: null | string; + backShinyFemale: null; + front_default: null | string; + frontFemale: null; + frontShiny: null | string; + frontShinyFemale: null; + other?: Other; + versions?: Versions; + animated?: Sprites; +} + +export interface GenerationI { + redBlue: RedBlue; + yellow: RedBlue; +} + +export interface RedBlue { + backDefault: null; + backGray: null; + frontDefault: null; + frontGray: null; +} + +export interface GenerationIi { + crystal: Crystal; + gold: Crystal; + silver: Crystal; +} + +export interface Crystal { + backDefault: null; + backShiny: null; + frontDefault: null; + frontShiny: null; +} + +export interface GenerationIii { + emerald: Emerald; + fireredLeafgreen: Crystal; + rubySapphire: Crystal; +} + +export interface Emerald { + frontDefault: null; + frontShiny: null; +} + +export interface GenerationVi { + frontDefault: null | string; + frontFemale: null; + frontShiny: null | string; + frontShinyFemale: null; +} + +export interface GenerationVii { + icons: DreamWorld; + ultraSunUltraMoon: GenerationVi; +} + +export interface DreamWorld { + frontDefault: null | string; + frontFemale: null; +} + +export interface GenerationViii { + icons: DreamWorld; +} + +export interface Other { + dreamWorld: DreamWorld; + officialArtwork: OfficialArtwork; +} + +export interface OfficialArtwork { + frontDefault: string; +} + +export interface Stat { + baseStat: number; + effort: number; + stat: Species; +} + +export interface Type { + slot: number; + type: Species; +} + +export interface Form { + formName: string; + formNames: Name[]; + formOrder: number; + id: number; + isBattleOnly: boolean; + isDefault: boolean; + isMega: boolean; + name: string; + names: Name[]; + order: number; + pokemon: Pokemon; + sprites: Sprites; + types: Type[]; + versionGroup: Pokemon; +} + +export interface Name { + language: Color; + name: string; +} + +export interface Pokemon { + name: string; + url: string; +} + +export interface Spaces { + baseHappiness: number; + captureRate: number; + color: Color; + eggGroups: Color[]; + evolutionChain: EvolutionChain; + evolvesFromSpecies: Color; + flavorTextEntries: FlavorTextEntry[]; + formDescriptions: any[]; + formsSwitchable: boolean; + genderRate: number; + genera: Genus[]; + generation: Color; + growthRate: Color; + habitat: Color; + hasGenderDifferences: boolean; + hatchCounter: number; + id: number; + isBaby: boolean; + isLegendary: boolean; + isMythical: boolean; + name: string; + names: Name[]; + order: number; + palParkEncounters: PalParkEncounter[]; + pokedexNumbers: PokedexNumber[]; + shape: Color; + varieties: Variety[]; +} + +export interface Color { + name: string; + url: string; +} + +export interface EvolutionChain { + url: string; +} + +export interface FlavorTextEntry { + flavorText: string; + language: Color; + version: Color; +} + +export interface Genus { + genus: string; + language: Color; +} + +export interface PalParkEncounter { + area: Color; + baseScore: number; + rate: number; +} + +export interface PokedexNumber { + entryNumber: number; + pokedex: Color; +} + +export interface Variety { + isDefault: boolean; + pokemon: Color; +} diff --git a/src/ts/getData.ts b/src/ts/getData.ts new file mode 100644 index 0000000..514e2d8 --- /dev/null +++ b/src/ts/getData.ts @@ -0,0 +1,44 @@ +var Pokedex = require('pokedex-promise-v2'); +var P = new Pokedex(); + +import { AllPokes, Pokemon, Form, Spaces } from './Interfaces'; + +export const getData = async ( + pokemonID: number, + difference: boolean = false, + online: boolean = true +) => { + if (online) { + const allPoke: AllPokes = await P.getPokemonsList(); + const ID = difference + ? Math.round(Math.random() * allPoke.count) + : pokemonID; + const Poke: Pokemon = await P.getPokemonByName(allPoke.results[ID].name); + + try { + const PokeSpaces: Spaces = await P.getPokemonSpeciesByName( + Poke.forms[0].name + ); + + return { + ID, + Names: PokeSpaces.names, + Name: PokeSpaces.name, + ImgID: Poke.id, + Type: Poke.types[0].type.name, + }; + } catch (error) { + const PokeForm: Form = await P.getPokemonFormByName(Poke.forms[0].name); + + return { + ID, + Names: PokeForm.names, + Name: PokeForm.name, + ImgID: Poke.id, + Type: Poke.types[0].type.name, + }; + } + } else { + return JSON.parse(localStorage.getItem('dataCache') as string); + } +}; diff --git a/src/ts/index.ts b/src/ts/index.ts new file mode 100644 index 0000000..98b087d --- /dev/null +++ b/src/ts/index.ts @@ -0,0 +1,101 @@ +import { getData } from './getData'; +import { historyAdd, historyShowed } from './History'; +import { Color } from './Interfaces'; + +export interface DataLS { + pokemonID: number; + date: number; + level: number; + version: string; +} + +const version = '1.3'; + +interface Name { + language: Color; + name: string; +} + +// Language checker +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); +const userLang: 'fr' | 'en' = + (urlParams.get('lang') || navigator.language.slice(0, 2)) == 'fr' + ? 'fr' + : 'en'; + +// Date +const dateNow = Date.now() - (Date.now() % 86400000); +const dataGet: DataLS = JSON.parse(localStorage.getItem('data') as string) || { + date: 0, +}; +const lastDay = dataGet.date; +const difference = dateNow - lastDay >= 86400000 || dataGet.version != version; +const online = navigator.onLine; + +// HTML Element +const hello = document.querySelector('#hello') as HTMLHeadingElement; +const you = document.querySelector('#you') as HTMLParagraphElement; +const footer = document.querySelector('.footer') as HTMLParagraphElement; +const img = document.querySelector('img') as HTMLImageElement; +const icon = document.querySelector('.icon') as HTMLLinkElement; +const day = document.querySelector('.day') as HTMLDivElement; + +const language = (Names: Name[], level: number, Name: string) => { + const matchName = + Names.filter((lang) => lang.language.name == userLang)[0] != undefined + ? Names.filter((lang) => lang.language.name == userLang)[0].name + : Names[0] != undefined + ? Names[0].name + : Name; + const language = { + fr: { + hello: `${ + 8 <= new Date().getHours() && new Date().getHours() <= 18 + ? 'Bonjour,' + : 'Bonsoir,' + }`, + you: `Vous êtes un.e ${matchName} niveau ${level} aujourd'hui.`, + footer: `Créée avec par Diamant. - Partager sur twitter.`, + Offfooter: `Créée avec par Diamant. - Version hors ligne.`, + }, + en: { + hello: `Hello,`, + you: `You are an ${matchName} lvl ${level} today.`, + footer: `Made with by Diamant. - Share on twitter.`, + Offfooter: `Made with by Diamant. - Offline mode.`, + }, + }; + return language[userLang]; +}; + +getData(dataGet.pokemonID, difference, online).then((data) => { + if (dataGet.date != 0 && difference) historyAdd(dataGet); + localStorage.setItem('dataCache', JSON.stringify(data)); + const send = { + pokemonID: data.ID, + date: difference ? dateNow : lastDay, + level: difference ? Math.round(Math.random() * 99 + 1) : dataGet.level, + version: version, + }; + localStorage.setItem('data', JSON.stringify(send)); + const languageText = language(data.Names, send.level, data.Name); + + img.alt = data.Name; + img.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${data.ImgID}.png`; + + hello.innerHTML = languageText.hello; + you.innerHTML = languageText.you; + footer.innerHTML = online ? languageText.footer : languageText.Offfooter; + historyShowed(userLang); + + if (difference) { + you.classList.add('reveal'); + img.classList.add('reveal'); + } + + document.body.classList.add('ready', data.Type as string); + if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('../../sw.js'); + } +}); diff --git a/sw.js b/sw.js new file mode 100644 index 0000000..e911ec5 --- /dev/null +++ b/sw.js @@ -0,0 +1,49 @@ +// Used for filtering matches based on status code, header, or both +import { CacheableResponsePlugin } from "workbox-cacheable-response"; +// Used to limit entries in cache, remove entries after a certain period of time +import { ExpirationPlugin } from "workbox-expiration"; +import { registerRoute } from "workbox-routing"; +import { + CacheFirst, + NetworkFirst, + StaleWhileRevalidate, +} from "workbox-strategies"; + +// Cache page navigations (html) with a Network First strategy +registerRoute( + // Check to see if the request is a navigation to a new page + ({ request }) => request.mode === "navigate", + // Use a Network First caching strategy + new NetworkFirst({ + // Put all cached files in a cache named 'pages' + cacheName: "pages", + plugins: [ + // Ensure that only requests that result in a 200 status are cached + new CacheableResponsePlugin({ + statuses: [200], + }), + ], + }) +); + +// Cache images with a Cache First strategy +registerRoute( + // Check to see if the request's destination is style for an image + ({ request }) => request.destination === "image", + // Use a Cache First caching strategy + new CacheFirst({ + // Put all cached files in a cache named 'images' + cacheName: "images", + plugins: [ + // Ensure that only requests that result in a 200 status are cached + new CacheableResponsePlugin({ + statuses: [200], + }), + // Don't cache more than 50 items, and expire them after 30 days + new ExpirationPlugin({ + maxEntries: 50, + maxAgeSeconds: 60 * 60 * 24 * 30, // 30 Days + }), + ], + }) +); diff --git a/tsconfig.json b/tsconfig.json index 7152bfa..8928264 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,8 +1,9 @@ { - "exclude": ["dist/*.*"], + "exclude": ["dist/*.*", "*.js"], "compilerOptions": { "strict": true, "module": "commonjs", + "checkJs": false, "jsx": "preserve", "esModuleInterop": true, "sourceMap": true,