feat: Landing page and Assets (#11)

* feat: landing page

* feat : Game assets changes

* feat: tint for pvp

---------

Co-authored-by: Bhoopesh <bhoopesh459@gmail.com>
Co-authored-by: Mughil <rsmughilsrinivasan@gmail.com>
Co-authored-by: shubham-1806 <shub.agarwal2003@gmail.com>

package.json

@@ -57,6 +57,7 @@
     "react-google-recaptcha-v3": "^1.10.1",
     "react-hot-toast": "^2.4.0",
     "react-lazylog": "^4.5.3",
+    "react-matrix-effect": "^1.1.0",
     "react-paginate": "^8.1.4",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.6.1",

packages/renderer/src/scenes/TileMap.ts

@@ -198,6 +198,7 @@ export class TileMap extends Phaser.Scene {
           direction,
         );
         troop.setDepth(troop.y);
+        troop.setTint(actorType === 'D' ? 0xff3333 : 0x7094db);
         actorType === 'D'
           ? this.opponent_troops.set(id, this.add.existing(troop))
           : this.troops.set(id, this.add.existing(troop));

src/components/Background/BackgroundVideo.module.css → src/components/Background/BackGroundVideo.module.css

@@ -1,8 +1,7 @@
 .bgvideo{
-    z-index: -100;
-    position: fixed;
-    top: 0;
-    width: 100vw;
+    z-index: -99;
     height: 100vh;
+    width: 100vw;
     object-fit: cover;
-}
+    position: fixed;
+}

src/components/Background/BackGroundVideo.tsx

@@ -0,0 +1,36 @@
+import { useRef, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import styles from './BackGroundVideo.module.css';
+import bgvideo from '../../../public/assets/bgEffect.mp4';
+
+const BackGroundVideo = () => {
+  const location = useLocation();
+  const vid = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (vid.current) {
+      vid.current.playbackRate = 0.5;
+    }
+  }, []);
+
+  const isNotHomePage = location.pathname !== '/';
+
+  return (
+    <>
+      {isNotHomePage ? (
+        <video
+          src={bgvideo}
+          autoPlay
+          loop
+          muted
+          className={styles.bgvideo}
+          ref={vid}
+        />
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default BackGroundVideo;

src/components/Background/BackgroundImage.module.css

@@ -0,0 +1,39 @@
+.mainContainer {
+    z-index: 0;
+    position: fixed;
+    top: 0;
+}
+
+.mainContainer img {
+    width: 100vw;
+
+    @media screen and (max-width:280px) {
+        width: 5vw;
+        transform: translateX(-35%);
+    }
+
+    @media screen and (min-width:280px) and (max-width:429px) {
+        width: 344vw;
+        transform: translateX(-35%);
+    }
+
+    @media screen and (min-width:430px) and (max-width:500px) {
+        width: 340vw;
+        transform: translateX(-35%);
+    }
+    @media screen and (min-width:500px) and (max-width:768px) {
+        width: 210vw;
+        transform: translateX(-25%);
+    }
+
+
+    @media screen and (min-width:769px) and (max-width:1024px) {
+        width: 225vw;
+        transform: translateX(-28%);
+    }
+
+    @media screen and (min-width:912px) and (max-width:912px) {
+        width: 235vw;
+        transform: translateX(-29%);
+    }
+}

src/components/Background/BackgroundImage.tsx

@@ -0,0 +1,22 @@
+import styles from './BackgroundImage.module.css';
+import bg from '../../../public/assets/bg.jpg';
+import { useLocation } from 'react-router-dom';
+
+const BackgroundImage = () => {
+  const location = useLocation();
+  const isHomePage = location.pathname === '/';
+
+  return (
+    <>
+      {isHomePage ? (
+        <div className={styles.mainContainer}>
+          <img src={bg} alt="Background" />
+        </div>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default BackgroundImage;

src/components/DashboardOptions/DashboardOptions.module.css

@@ -1,12 +1,12 @@
 .dropdown a:active {
   background-color: #232627;
 }
-
 .menuBackground{
   background-color:#1e1e1e !important;
 }
 
 .menuText{
   color: #aaaaaa;
-  font-family: 'Poppins';
+  font-family: 'Press Start 2P', sans-serif;
+  font-size: 0.85rem;
 }

src/components/Home/AboutGame/AboutGame.module.css

@@ -19,15 +19,13 @@
 
 .content {
   color: #eaeaea;
-  font-family: 'Poppins';
+  font-family: 'Press Start 2P';
   font-weight: 400;
-  font-size: 32px;
 }
 
 .col1 {
   display: flex;
   align-items: center;
-  border-right: 3px solid #4d4d4d;
   min-width: 300px;
   padding-right: 3%;
 }
@@ -86,7 +84,7 @@
 
 @media only screen and (max-height: 800px) {
   .content {
-    font-size: 20px;
+    font-size: 15px;
   }
   .about {
     margin-top: 16px;

src/components/Home/Footer/Footer.tsx

@@ -24,9 +24,15 @@ export default function Footer(): JSX.Element {
       <div className={styles.textContainer}>
         <div className={styles.container}>
           <div className={styles.heading}> Contact</div>
-          <div>Ezhil: +91 6381553859</div>
-          <div>Ram Ganesh: +91 9025517379</div>
-          <div>Vignesh: +91 6381196740</div>
+          <div>
+            Ezhil: <span className={styles.number}>+91 6381553859</span>
+          </div>
+          <div>
+            Ram Ganesh: <span className={styles.number}> +91 9025517379</span>
+          </div>
+          <div>
+            Vignesh: <span className={styles.number}> +91 6381196740 </span>
+          </div>
         </div>
         <div className={styles.container}>
           <div className={styles.heading}>Quick Links</div>

src/components/Home/Footer/footer.module.css

@@ -6,7 +6,7 @@
   padding: 3rem 5rem 3rem 5rem;
 }
 
-.footerContainer > div {
+.footerContainer>div {
   align-self: baseline;
 }
 
@@ -15,7 +15,8 @@
   font-size: 22px;
   margin-bottom: 30px;
   color: #eaeaea !important;
-  font-family: 'Poppins';
+  font-family: 'Press Start 2P', sans-serif;
+
 }
 
 .textContainer {
@@ -29,17 +30,22 @@
 }
 
 .container .links:hover {
-  text-decoration: underline;
   cursor: pointer;
+  color: white;
+  text-decoration: none !important;
 }
 
 .credit {
   display: flex;
   flex-direction: column;
 }
 
+.heart {
+  color: red;
+}
+
 .title {
-  font-family: 'Roboto Mono';
+  font-family: 'Press Start 2P', sans-serif;
   font-size: 800;
   font-size: 35px;
   font-style: bold;
@@ -49,23 +55,30 @@
 
 .title:hover {
   cursor: pointer;
-  color: rgb(20, 94, 42);
+  color: green;
 }
+
 .creditText {
-  font-family: sans-serif;
+  font-family: 'Press Start 2P', sans-serif;
   color: #aaaaaa;
   font-size: 16px;
   float: left;
   vertical-align: baseline;
 }
 
-.container > div {
-  font-family: sans-serif;
-  margin: 10px;
+.container>div {
+  font-family: 'Press Start 2P', sans-serif;
+  font-size: 11px;
   color: #aaaaaa;
+  margin: 10px;
   letter-spacing: 1.5px;
 }
 
+.number {
+  font-size: 10px;
+  color:white;
+}
+
 @media screen and (max-width: 900px) {
   .footerContainer {
     padding: 10px 40px 10px 40px;
@@ -100,4 +113,4 @@
   .heading {
     font-size: 20px;
   }
-}
+}