From 4a7ed01766933981914edb04f8b1b8326167f0cc Mon Sep 17 00:00:00 2001 From: Nimish Date: Sat, 11 Oct 2025 00:19:14 +0530 Subject: [PATCH 1/2] Chore: Tailwind Refactoring --- package-lock.json | 5 +- package.json | 5 +- postcss.config.js | 6 + src/components/celebration/Celebration.css | 20 +- src/components/celebration/Celebration.js | 42 ++-- src/components/sharebutton/ShareButton.js | 252 +++++++++------------ src/components/sharebutton/sharebutton.css | 4 +- tailwind.config.js | 43 ++++ 8 files changed, 196 insertions(+), 181 deletions(-) create mode 100644 postcss.config.js create mode 100644 tailwind.config.js diff --git a/package-lock.json b/package-lock.json index 76c2576..6b7bfe5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,10 @@ "web-vitals": "^1.1.2" }, "devDependencies": { - "prettier": "^3.6.2" + "autoprefixer": "^10.4.21", + "postcss": "^8.5.6", + "prettier": "^3.6.2", + "tailwindcss": "^3.4.18" } }, "node_modules/@adobe/css-tools": { diff --git a/package.json b/package.json index ad83776..836085d 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,10 @@ "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,css,scss,json,md}\"" }, "devDependencies": { - "prettier": "^3.6.2" + "autoprefixer": "^10.4.21", + "postcss": "^8.5.6", + "prettier": "^3.6.2", + "tailwindcss": "^3.4.18" }, "eslintConfig": { "extends": [ diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..2428c34 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: [ + require('tailwindcss'), + require('autoprefixer') + ], +}; diff --git a/src/components/celebration/Celebration.css b/src/components/celebration/Celebration.css index 011b4c7..baa5cc9 100644 --- a/src/components/celebration/Celebration.css +++ b/src/components/celebration/Celebration.css @@ -1,4 +1,4 @@ -.celebration-notification { +/* .celebration-notification { position: fixed; top: 30%; left: 50%; @@ -9,9 +9,9 @@ width: 100%; background-color: #000000cc; animation: fade 3s linear; -} +} */ -h3 { +/* h3 { text-decoration: underline; margin-top: 0.4em; margin-bottom: 0.5em; @@ -21,12 +21,12 @@ h3 { color: greenyellow; font-size: 4rem; margin-top: 0.4px; -} -.button { +} */ +/* .button { margin: 2px; -} +} */ -.restart-btn { +/* .restart-btn { position: absolute; top: 94%; left: 50%; @@ -39,9 +39,9 @@ h3 { font-weight: 500; line-height: 1.1; letter-spacing: 2px; -} +} */ -@keyframes fade { +/* @keyframes fade { 0% { opacity: 0; } @@ -67,4 +67,4 @@ h3 { 100% { opacity: 1; } -} +} */ diff --git a/src/components/celebration/Celebration.js b/src/components/celebration/Celebration.js index 2c66267..be5d3e8 100644 --- a/src/components/celebration/Celebration.js +++ b/src/components/celebration/Celebration.js @@ -1,4 +1,3 @@ -import './Celebration.css'; import React, { useRef } from 'react'; import ShareButton from './../sharebutton/ShareButton'; import PropTypes from 'prop-types'; @@ -9,25 +8,32 @@ export default function Celebration({ handleRestartGame, }) { const highScoreRef = useRef(null); + return ( -
-
-

- Highscore achieved: {highScore} -
-

- { -

- {elapsedTime}s -

- } -
- -
- +
+

+ Highscore achieved:{' '} + + {highScore} + +

+ +

+ {elapsedTime}s +

+ +
+
+ +
); } diff --git a/src/components/sharebutton/ShareButton.js b/src/components/sharebutton/ShareButton.js index aa76032..c94750e 100644 --- a/src/components/sharebutton/ShareButton.js +++ b/src/components/sharebutton/ShareButton.js @@ -1,13 +1,11 @@ -import './sharebutton.css'; import React, { useState } from 'react'; import html2canvas from 'html2canvas'; import PropTypes from 'prop-types'; export default function ShareButton({ highScore, highScoreRef }) { const [screenshotImage, setScreenshotImage] = useState(null); + const [isDialogOpen, setIsDialogOpen] = useState(false); - const shareDialog = document.querySelector('.share-dialog'); - const closeButton = document.querySelector('.close-button'); const handleScreenshot = () => { html2canvas(highScoreRef.current, { useCORS: true, @@ -24,8 +22,10 @@ export default function ShareButton({ highScore, highScoreRef }) { .catch(error => { console.error('Error capturing screenshot:', error); }); + shareContent(); }; + const shareContent = async () => { if (navigator.share && screenshotImage) { try { @@ -33,176 +33,130 @@ export default function ShareButton({ highScore, highScoreRef }) { title: 'High Score Screenshot', text: `I achieved a high score of ${highScore} in A&A Match!`, url: 'https://aa-memory.vercel.app/', - files: [ - new File(['highScore'], screenshotImage, { type: 'image/jpeg' }), - ], }); - console.log('Sharing successfully!'); + console.log('Shared successfully!'); } catch (error) { - console.error('Error while sharing: ', error); + console.error('Error while sharing:', error); } } else { - shareDialog.classList.add('is-open'); - closeButton.addEventListener('click', event => { - shareDialog.classList.remove('is-open'); - }); + setIsDialogOpen(true); } }; - const closeDialog = () => { - shareDialog.classList.remove('is-open'); - }; - return ( -
-
-
-

Share this pen

- -
-
- - + const closeDialog = () => setIsDialogOpen(false); - + return ( +
+ {/* Overlay and Dialog */} + {isDialogOpen && ( +
+
+
+

+ Share this game +

+ +
- -
-
-
https://aa-memory.vercel.app/
- + {/* Share Buttons */} +
+ {[ + { name: 'Facebook', color: '#3b5998' }, + { name: 'Twitter', color: '#1da1f2' }, + { name: 'LinkedIn', color: '#0077B5' }, + { name: 'Email', color: '#777' }, + ].map(platform => ( + + ))} +
+ + {/* Link Row */} +
+ + https://aa-memory.vercel.app/ + + +
+
-
+ )} + {/* Main Share Button */} - - - - - - - - - - + - - - - - - - - - - - - - - - - - + d='M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8m-6-6l-4 4m0 0l4 4m-4-4h12' + /> + + Share + - - - - - - - + {/* Inline Tailwind animation definition */} +
); } -// PropTypes validation ShareButton.propTypes = { highScore: PropTypes.number.isRequired, highScoreRef: PropTypes.shape({ diff --git a/src/components/sharebutton/sharebutton.css b/src/components/sharebutton/sharebutton.css index b86245b..8f6a077 100644 --- a/src/components/sharebutton/sharebutton.css +++ b/src/components/sharebutton/sharebutton.css @@ -1,4 +1,4 @@ -html { +/* html { box-sizing: border-box; } @@ -129,4 +129,4 @@ header { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -} +} */ diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..0deaee4 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,43 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + darkMode: 'class', // enable class-based dark mode + theme: { + extend: { + // Custom breakpoints + screens: { + 'xxs': '320px', // extra extra small + 'xs': '390px', // extra small + }, + // Keyframes + keyframes: { + fade: { + '0%': { opacity: '0' }, + '100%': { opacity: '1' }, + }, + shake: { + '10%, 90%': { transform: 'translateX(-1px)' }, + '20%, 80%': { transform: 'translateX(2px)' }, + '30%, 50%, 70%': { transform: 'translateX(-4px)' }, + '40%, 60%': { transform: 'translateX(4px)' }, + }, + collapse: { + '0%': { transform: 'scale(1) rotate(0deg)' }, + '50%': { transform: 'scale(0.2) rotate(360deg)' }, + '100%': { transform: 'scale(1) rotate(720deg)' }, + }, + }, + // Animation classes + animation: { + fade: 'fade 3s linear', + shake: 'shake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97)', + collapse: 'collapse 1.2s forwards', + }, + // Optional: custom colors for light/dark theme + colors: { + themeText: 'var(--text)', + themeBg: 'var(--background)', + }, + }, + }, + plugins: [], +}; From b49c2d58a8493515333812cdaf90225dca965548 Mon Sep 17 00:00:00 2001 From: Nimish Date: Sun, 12 Oct 2025 15:58:44 +0530 Subject: [PATCH 2/2] Chore 0.1 - Updated on requested changes --- src/components/celebration/Celebration.css | 16 +-- src/components/celebration/Celebration.js | 112 ++++++++++++++++++--- src/components/sharebutton/ShareButton.js | 13 +-- tailwind.config.js | 11 +- 4 files changed, 117 insertions(+), 35 deletions(-) diff --git a/src/components/celebration/Celebration.css b/src/components/celebration/Celebration.css index baa5cc9..856f357 100644 --- a/src/components/celebration/Celebration.css +++ b/src/components/celebration/Celebration.css @@ -9,9 +9,9 @@ width: 100%; background-color: #000000cc; animation: fade 3s linear; -} */ +} -/* h3 { +h3 { text-decoration: underline; margin-top: 0.4em; margin-bottom: 0.5em; @@ -21,12 +21,12 @@ color: greenyellow; font-size: 4rem; margin-top: 0.4px; -} */ -/* .button { +} +.button { margin: 2px; -} */ +} -/* .restart-btn { +.restart-btn { position: absolute; top: 94%; left: 50%; @@ -39,9 +39,9 @@ font-weight: 500; line-height: 1.1; letter-spacing: 2px; -} */ +} -/* @keyframes fade { +@keyframes fade { 0% { opacity: 0; } diff --git a/src/components/celebration/Celebration.js b/src/components/celebration/Celebration.js index be5d3e8..63033e7 100644 --- a/src/components/celebration/Celebration.js +++ b/src/components/celebration/Celebration.js @@ -10,30 +10,112 @@ export default function Celebration({ const highScoreRef = useRef(null); return ( -
-

+

+ + +

Highscore achieved:{' '} - + {highScore}

-

- {elapsedTime}s +

+ Time:{' '} + + {elapsedTime}s +

-
+
+
- -
); } diff --git a/src/components/sharebutton/ShareButton.js b/src/components/sharebutton/ShareButton.js index c94750e..84c80f6 100644 --- a/src/components/sharebutton/ShareButton.js +++ b/src/components/sharebutton/ShareButton.js @@ -33,6 +33,9 @@ export default function ShareButton({ highScore, highScoreRef }) { title: 'High Score Screenshot', text: `I achieved a high score of ${highScore} in A&A Match!`, url: 'https://aa-memory.vercel.app/', + files: [ + new File(['highScore'], screenshotImage, { type: 'image/jpeg' }), + ], }); console.log('Shared successfully!'); } catch (error) { @@ -144,15 +147,7 @@ export default function ShareButton({ highScore, highScoreRef }) { {/* Inline Tailwind animation definition */} - +
); } diff --git a/tailwind.config.js b/tailwind.config.js index 0deaee4..d433e68 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -8,12 +8,16 @@ module.exports = { 'xxs': '320px', // extra extra small 'xs': '390px', // extra small }, - // Keyframes + // Custom keyframes keyframes: { fade: { '0%': { opacity: '0' }, '100%': { opacity: '1' }, }, + // fadeIn: { + // '0%': { opacity: '0', transform: 'scale(0.95)' }, + // '100%': { opacity: '1', transform: 'scale(1)' }, + // }, shake: { '10%, 90%': { transform: 'translateX(-1px)' }, '20%, 80%': { transform: 'translateX(2px)' }, @@ -26,13 +30,14 @@ module.exports = { '100%': { transform: 'scale(1) rotate(720deg)' }, }, }, - // Animation classes + // Animation utilities animation: { fade: 'fade 3s linear', + // fadeIn: 'fadeIn 0.3s ease-out forwards', shake: 'shake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97)', collapse: 'collapse 1.2s forwards', }, - // Optional: custom colors for light/dark theme + // Optional: light/dark theme variables colors: { themeText: 'var(--text)', themeBg: 'var(--background)',