Showed box shadow on winner

florianstancioiu · Nov 4, 2023 · 2a314a5 · 2a314a5
1 parent 9402c49
commit 2a314a5
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/src/components/GameResult.jsx b/src/components/GameResult.jsx
@@ -10,6 +10,16 @@ const GameResult = () => {
     (state) => state.game.currentGame.playerChoice
   );
   const pcChoice = useSelector((state) => state.game.currentGame.pcChoice);
+  const playerWinner = useSelector(
+    (state) => state.game.currentGame.playerWinner
+  );
+
+  const playerWinnerBorderClasses = playerWinner
+    ? 'rounded-full shadow-winner'
+    : '';
+  const pcWinnerBorderClasses = !playerWinner
+    ? 'rounded-full shadow-winner'
+    : '';
 
   return (
     <div>
@@ -18,7 +28,7 @@ const GameResult = () => {
           <p className='text-white uppercase text-[24px] leading-[32px] hidden md:block mb-[63px]'>
             You picked
           </p>
-          <div className='rounded-full shadow-winner'>
+          <div className={playerWinnerBorderClasses}>
             {playerChoice === 'rock' && (
               <img
                 className='block mx-auto mb-[17px] w-[130px] md:w-[293px]'
@@ -51,7 +61,7 @@ const GameResult = () => {
           <p className='text-white uppercase text-[24px] leading-[32px] hidden md:block mb-[63px]'>
             The house picked
           </p>
-          <div className='rounded-full shadow-winner'>
+          <div className={pcWinnerBorderClasses}>
             {pcChoice === 'scissors' && (
               <img
                 className='block mx-auto mb-[17px] w-[130px] md:w-[293px]'

diff --git a/src/components/UI/Btn.jsx b/src/components/UI/Btn.jsx
@@ -2,7 +2,7 @@ const Btn = ({ title, onClick }) => {
   return (
     <button
       onClick={onClick}
-      className='block mx-auto uppercase text-white text-[16px] border-white border-[1px] rounded-[8px] py-[10px] px-[36px] md:float-right'
+      className='block mx-auto uppercase text-white text-[16px] border-white border-[1px] rounded-[8px] py-[10px] px-[36px] md:absolute md:bottom-[20px] md:right-[20px] hover:bg-white hover:text-rules'
     >
       {title}
     </button>

diff --git a/src/main.jsx b/src/main.jsx
@@ -5,10 +5,10 @@ import App from './App.jsx';
 import './index.css';
 import store from './store';
 
-// <React.StrictMode>
-
 ReactDOM.createRoot(document.getElementById('root')).render(
-  <Provider store={store}>
-    <App />
-  </Provider>
+  <React.StrictMode>
+    <Provider store={store}>
+      <App />
+    </Provider>
+  </React.StrictMode>
 );