ساختن یک مدال رهبر بازی پویا با React و Tailwind CSS

“در دنیایی که واقعاً سریع تغییر می کند ، تنها استراتژی تضمین شده برای شکست ، خطرات نیست.” – مارک زاکربرگ

• مارک زاکربرگ بنیانگذار و مدیرعامل فیس بوک است که دست اول دیده است که چگونه عناصر رقابتی در سیستم عامل های اجتماعی ، از جمله بازی ، مشارکت کاربر و نوآوری را هدایت می کنند. نقل قول از مصاحبه اکتبر 2011 در مدرسه استارتاپی y Combinator در پالو آلتو ، کالیفرنیا.

اگر می خواهید چالش دیروز را ببینید: Analytics in React

اگر می خواهید خودتان این چالش را امتحان کنید: DailyUi

بنابراین من در مجموع دو چالش را از دست دادم ، زندگی اتفاق می افتد …

بنابراین من با یک ایده ایجاد یک تابلوی رهبری با ایده ایجاد یک صفحه پوشش پاپ آپ ، یک فوریت پیدا کردم

سریع: یک پاپ آپ از یک تابلوی رهبری ایجاد کنید

• آیا این یک بازی است؟ سیاست؟ فیلم؟ چگونه پوشش بسته خواهد شد؟

بنابراین امروز ، ما در حال طراحی یک پاپ آپ تابلوی بازی هستیم و عناصر رقابتی را با تعامل کاربر صاف ترکیب می کنیم. من یک پنجره تعاملی ایجاد کرده ام که ضمن حفظ عملکرد و دسترسی ، رتبه بندی بازیکن را نشان می دهد.

رابط باید شامل موارد زیر باشد:

• روکش پاپ متحرک با یک پس زمینه

• رتبه بندی بازیکن با نمرات

• شاخص های بصری برای موقعیت های برتر

• آواتارهای پخش کننده و وضعیت

• انتقال صاف

• عملکرد دکمه را ببندید

• طراحی پاسخگو

راه حل

در اینجا مؤلفه React وجود دارد که این شرایط را با استفاده از آنها به ارمغان می آورد Tailwind CSS وت شفاف نمادها:

{/* LeaderBoardPopup.js */}

import React, { useState } from 'react';
import { X, Trophy, Medal } from 'lucide-react';

const LeaderboardPopup = () => {
  const [isOpen, setIsOpen] = useState(true);

  const leaderboardData = [
    { rank: 1, username: "ProGamer123", score: 25000, wins: 48 },
    { rank: 2, username: "NinjaWarrior", score: 23450, wins: 45 },
    { rank: 3, username: "PixelMaster", score: 22100, wins: 42 },
    { rank: 4, username: "GameKing99", score: 21000, wins: 39 },
    { rank: 5, username: "StarPlayer", score: 20500, wins: 37 }
  ];

  const getMedalColor = (rank) => { {/* Use CSS to edit the color */}
    switch(rank) {
      case 1: return "text-yellow-500";
      case 2: return "text-gray-400";
      case 3: return "text-amber-600";
      default: return "text-gray-600";
    }
  };

  if (!isOpen) return null;

  return (
    
 className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
      
 className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 relative overflow-hidden">
        {/* Header */}
        
 className="bg-indigo-600 p-4 flex justify-between items-center">
          
 className="flex items-center space-x-2">
             className="text-white" size={24} />
            
 className="text-xl font-bold text-white">Top Players
          

           
            onClick={() => setIsOpen(false)}
            className="text-white hover:text-gray-200 transition-colors"
          >
             size={24} />
          
        

        {/* Leaderboard Content */}
        
 className="p-6">
          {leaderboardData.map((player) => (
            
 
              key={player.rank}
              className="flex items-center justify-between mb-4 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
            >
              
 className="flex items-center space-x-4">
                
 className="flex items-center justify-center w-8">
                  {player.rank <= 3 ? (
                     className={getMedalColor(player.rank)} size={24} />
                  ) : (
                     className="text-gray-600 font-medium">{player.rank}
                  )}
                
                

                  
 className="font-semibold text-gray-800">{player.username}
                  
 className="text-sm text-gray-500">{player.wins} wins
                
              
              
 className="text-right">
                
 className="font-bold text-indigo-600">{player.score.toLocaleString()}
                
 className="text-xs text-gray-500">points
              
            
          ))}
        

        {/* Footer */}
        
 className="bg-gray-50 p-4 border-t">
          
 className="text-center text-sm text-gray-600">
            Rankings update every hour
          
        
      
    
  );
};

export default LeaderboardPopup;

توجه: این کد شبیه HTML نیست؟

• واکنش نشان دادن از نحو به نام استفاده می کند JSX (JavaScript XML) ، که به شما امکان می دهد کد HTML مانند را در JavaScript بنویسید. اگرچه به نظر می رسد HTML ، در واقع یک قند نحوی بیش از JavaScript است و HTML خالص نیست. JSX در زمان اجرا در JavaScript گردآوری می شود ، جایی که عناصر React ایجاد می شوند.

برای استفاده از این مؤلفه در برنامه خود:

{/* app.js */}

import LeaderboardPopup from './LeaderboardPopup';

function App() {
  return (
    
 className="min-h-screen bg-gray-100">
       />
    
  );
}

کد را با استفاده از آن اجرا کنید Codespaces GitHub:

1 یک مخزن در GitHub ایجاد کنید

• به GitHub بروید و یک مخزن جدید ایجاد کنید (به عنوان مثال ، leaderboard-app).

• آن را با یک readme آغاز کنید ، یا آن را خالی بگذارید.

2 برنامه های GitHub را باز کنید

• پس از ایجاد مخزن خود ، به صفحه مخزن در GitHub بروید.

• بر روی دکمه “کد” کلیک کرده و سپس “Open with Codespaces” را انتخاب کنید

• برای باز کردن یک نمونه کد جدید ، روی “CodeSpace جدید” کلیک کنید

3 برنامه React خود را در مکان های کد تنظیم کنید

• در ترمینال موجود در Codespaces GitHub ، دستورات زیر را برای تنظیم یک برنامه React جدید اجرا کنید:

  npx create-react-app leaderboard-app
  cd leaderboard-app
  

• این یک برنامه React جدید ایجاد می کند و به داخل حرکت می کند leaderboard-app فهرست راهنما

4 وابستگی ها را نصب کنید

5 کد خود را اضافه کنید

• در ویرایشگر Codespaces ، به src پوشه و ایجاد یک فایل جدید به نام LeaderboardPopup.js

• چسباندن خود LeaderboardPopup کد کامپوننت در این پرونده

• باز src/App.js و واردات LeaderboardPopup مؤلفه:

  import LeaderboardPopup from './LeaderboardPopup';
  

• سپس ، اضافه کنید در App JSX مؤلفه.

6 برنامه خود را اجرا کنید

• در ترمینال Codespaces ، سرور توسعه React خود را شروع کنید:

  npm start
  

• GitHub Codespaces به طور خودکار یک پنجره پیش نمایش را برای برنامه شما باز می کند ، جایی که می توانید مشاهده کنید LeaderboardPopup در عمل

برخی از یادداشت ها:

• وابستگی: اطمینان حاصل کنید که تمام وابستگی های لازم (مانند lucide-react) در فضای کد نصب شده اند.

• واکنش اولیه برنامه: با دویدن npx create-react-app leaderboard-app، شما یک برنامه React جدید را آغاز می کنید ، بنابراین اطمینان حاصل کنید که ساختار پوشه صحیح است (برنامه باید در آن ایجاد شود leaderboard-app دایرکتوری).

• پیش نمایش: GitHub Codespaces به طور خودکار پیش نمایش برنامه React خود را تنظیم می کند ، بنابراین شما قادر خواهید بود تغییرات خود را به صورت زنده مشاهده کنید.

نمونه

این مؤلفه چندین ویژگی کلیدی را افزایش می دهد:

• Tailwind CSS برای یک ظاهر طراحی شده پاسخگو و مدرن

• آیکون های Lucide برای عناصر بصری سازگار

• قلاب برای مدیریت دولت واکنش نشان می دهد

• روکش معین برای توجه کاربر متمرکز

• طراحی پاسخگو که روی همه دستگاه ها کار می کند

ویژگی های کلیدی اجرا شده:

• رابط تمیز و مدرن با سلسله مراتب واضح و بصری

• شاخص های مدال برای 3 بازیکن برتر

• نمره و برنده نمایش آمار

• قابلیت نزدیک تعاملی

• برای بازخورد پیشرفته کاربر حالتهای شناور

• فاصله و تایپوگرافی سازگار

• طرح پاسخگو که با اندازه صفحه سازگار است

برای تقویت بیشتر این مؤلفه ، در نظر بگیرید:

• اضافه کردن انیمیشن های ورودی/خروجی

• اجرای گزینه های مرتب سازی

• از جمله آواتارهای بازیکن

• افزودن قابلیت های فیلتر

• پشتیبانی از به روزرسانی های زمان واقعی

• از جمله ردیابی پیشرفت بازیکن

پایان

ایجاد یک تابلوی بازی مؤثر نیاز به تعادل جذابیت بصری با عملکرد دارد. این پیاده سازی نشان می دهد که چگونه ویژگی های React مدرن و CSS Tailwind می توانند برای ایجاد یک رابط تابلوی جذاب و پاسخگو ترکیب شوند. رویکرد معین ضمن حفظ دسترسی و تجربه کاربر ، توجه متمرکز به رتبه بندی را تضمین می کند.

برای توسعه آینده ، این رویکرد چندین مزیت ارائه می دهد. ساختار مؤلفه امکان گسترش آسان ویژگی را فراهم می کند ، در حالی که Tailwind CSS یک ظاهر طراحی و پاسخگویی مداوم را تضمین می کند. سلسله مراتب بصری واضح به بازیکنان کمک می کند تا به سرعت جایگاه خود را درک کنند و رقابت سالم را تشویق می کنند.

به یاد داشته باشید که یک تابلوی عالی بیش از لیستی از نمرات نیست – این ابزاری برای تعامل رانندگی و ایجاد جامعه در بازی شما است. این پیاده سازی پایه و اساس ایجاد یک ویژگی رقابتی جذاب را فراهم می کند که می تواند حفظ و رضایت بازیکن را تقویت کند.