Force Push

app/(home)/page.tsx

@@ -32,7 +32,11 @@ export default function Home() {
     const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
     let frame = 0;
 
+<<<<<<< HEAD
     const randomizeText = (txt: string) => {
+=======
+    const randomizeText = (txt : string) => {
+>>>>>>> 137a176ee44b0d9b680febdbf7eb8857586f21f4
       return txt
         .split("")
         .map(() => chars[Math.floor(Math.random() * chars.length)])

app/leaderboard/components/Canvas.module.scss

@@ -0,0 +1,5 @@
+.container{
+    display: block;
+    height: 100%;
+    width: 100%;
+}

app/leaderboard/components/Canvas.tsx

@@ -0,0 +1,71 @@
+"use client";
+import { useRef , useEffect, LegacyRef} from "react";
+import styles from './Canvas.module.scss';
+
+const renderMatrix = (ref : any , color : any ) => {
+    let canvas = ref.current;
+    let context = canvas.getContext("2d");
+
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    const katakana =
+        "アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン";
+    const latin = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    const nums = "0123456789";
+    const alphabet = katakana + latin + nums;
+
+    const fontSize = 32;
+    const columns = canvas.width / fontSize;
+
+    const rainDrops : number[]  = [];
+
+    for (let x = 0; x < columns; x++) {
+        rainDrops[x] = 1;
+    }
+
+    const render = () => {
+        context.fillStyle = "rgba(0, 0, 0, 0.05)"; // black w a tiny bit of alpha
+        context.fillRect(0, 0, canvas.width, canvas.height);
+
+        context.fillStyle = color ? color : "#0F0";
+        context.font = fontSize + "px monospace";
+
+        for (let i = 0; i < rainDrops.length; i++) {
+            // randomize the string of characters to render
+            const text = alphabet.charAt(
+                Math.floor(Math.random() * alphabet.length)
+            );
+            context.fillText(text, i * fontSize, rainDrops[i] * fontSize);
+
+            if (
+                rainDrops[i] * fontSize > canvas.height &&
+                Math.random() > 0.975
+            ) {
+                rainDrops[i] = 0;
+            }
+            rainDrops[i]++;
+        }
+    };
+    return render;
+};
+
+const MatrixRainingLetters = (props : any ) => {
+    const ref : any = useRef();
+    const keyName = "mrl-" + props.key;
+    const thisClassName = "mrl-container " + props.custom_class;
+    useEffect(() => {
+        const render = renderMatrix(ref, props.color);
+        const intervalId = setInterval(render, 30);
+        return () => clearInterval(intervalId);
+    }, [props.color]);
+
+    return (
+        <>
+            <canvas key={keyName} className={thisClassName} ref={ref} 
+            style={{height:"100%", width:"100%"}}/>
+        </>
+    );
+};
+
+export default MatrixRainingLetters;

app/leaderboard/components/Positions.module.scss

@@ -0,0 +1,102 @@
+@import url("https://fonts.googleapis.com/css2?family=Audiowide&display=swap");
+@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400');
+
+.container{
+    margin:0 auto;
+    width: 80%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: center;
+    margin-top: 20px;
+    gap: 20px;
+}
+
+.leaderboardItem{
+    font-family: "Audiowide", sans-serif;
+    font-size: 1.5rem;
+    border-radius: 10px;
+    width: 30rem;
+    height: 12rem;
+    background-color: rgba(0, 0, 0, 0.7);
+    transition: all 0.3s;
+}
+
+.first{
+    position: relative;
+    width: 30rem;
+    height: 15rem;
+    box-shadow: 0 0 20px #FFD700;
+    border: 2px solid #FFD700;
+}
+
+.first:hover{
+    background-color: #FFD700;
+}
+
+.second{
+    position: relative;
+    box-shadow: 0 0 20px #C0C0C0;
+    border: 2px solid #C0C0C0;
+}
+
+.second:hover{
+    background-color: #C0C0C0;
+}
+
+.third{
+    position: relative;
+    box-shadow: 0 0 20px #cd7f32;
+    border: 2px solid #cd7f32;
+}
+
+.third:hover{
+    background-color: #cd7f32;
+}
+
+
+.canvas{
+    border-radius: 10px;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+}
+
+.userInfo{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    z-index: 10;
+    color: white;
+}
+
+.avatar{
+    width: 5rem;
+    height: 5rem;
+    border-radius: 50%;
+    margin-bottom: 10px;
+}
+
+.position{
+    font-size: 1.5rem;
+    font-weight: 700;
+}
+
+.name{
+    font-size: 1.2rem;
+    font-family: "Lato" , sans-serif;
+    font-weight: 500;
+}
+
+.score{
+    font-size: 1.2rem;
+    font-family: "Lato" , sans-serif;
+    font-weight: 400;
+}
+
+
+
+

app/leaderboard/components/Positions.tsx

@@ -0,0 +1,45 @@
+import styles from './Positions.module.scss';
+import clsx from 'clsx';
+import Canvas from './Canvas';
+// import Matrix from './Matrix';
+
+export default function Positions() {
+
+    return (
+        <div className={styles.container}>
+            <div className={`${styles.leaderboardItem} , ${styles.second}`}>
+                    <div className={styles.canvas}>
+                        <Canvas />
+                    </div>
+                    <div className={styles.userInfo}>
+                        <h1 className={styles.position}>Second</h1>
+                        <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" className={styles.avatar}/>
+                        <h1 className={styles.username}>John Doe</h1>
+                        <h1 className={styles.score}>900</h1>
+                    </div>
+                </div>
+                <div className={`${styles.leaderboardItem} , ${styles.first}`}>
+                    {/* <div className={styles.canvas}>
+                        <Canvas />
+                    </div> */}
+                    <div className={styles.userInfo}>
+                        <h1 className={styles.position}>First</h1>
+                        <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" className={styles.avatar}/>
+                        <h1 className={styles.username}>John Doe</h1>
+                        <h1 className={styles.score}>900</h1>
+                    </div>
+                </div>
+                <div className={`${styles.leaderboardItem} , ${styles.third}`}>
+                <div className={styles.canvas}>
+                        <Canvas />
+                    </div>
+                    <div className={styles.userInfo}>
+                        <h1 className={styles.position}>Third</h1>
+                        <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" className={styles.avatar}/>
+                        <h1 className={styles.username}>John Doe</h1>
+                        <h1 className={styles.score}>900</h1>
+                    </div>
+                </div>
+        </div>
+    );
+}