Rumah > hujung hadapan web > tutorial js > Mencipta Sistem Raffle Komprehensif untuk GladiatorsBattle.com

Mencipta Sistem Raffle Komprehensif untuk GladiatorsBattle.com

Linda Hamilton
Lepaskan: 2024-11-27 09:50:10
asal
531 orang telah melayarinya

Creating a Comprehensive Raffle System for GladiatorsBattle.com

Dalam panduan terperinci ini, saya akan membimbing anda melalui penciptaan Sistem Raffle untuk GladiatorsBattle.com. Sistem ini direka bentuk untuk meningkatkan penglibatan, memupuk rasa persaingan dan memberikan pengalaman yang menarik untuk pemain.

Kami akan meneroka selok-belok teknikal, cabaran dan penyelesaian yang membentuk sistem ini, disertai dengan coretan kod dan senario dunia sebenar. Sama ada anda seorang pembangun yang ingin melaksanakan sesuatu yang serupa atau peminat Gladiators Battle yang ingin tahu tentang mekaniknya, artikel ini akan memberikan cerapan tentang cara semuanya digabungkan.

Apakah itu Sistem Raffle?

Sistem Raffle ialah ciri interaktif di mana pemain boleh menyertai undian untuk memenangi hadiah seperti item dalam permainan, kandungan eksklusif atau pengiktirafan komuniti. Ia terbahagi kepada tiga kategori utama:

  • Cabutan Berlangsung: Terbuka untuk penyertaan.
  • Cabutan akan datang: Dijadualkan untuk bermula tidak lama lagi.
  • Raffles Selesai: Paparkan pemenang dan hadiah yang lalu.

Mengapa Membina Sistem Ini?

Idea itu lahir daripada keperluan untuk:

  • Tingkatkan Penglibatan: Galakkan pemain untuk kembali dengan kerap.
  • Membina Jangkaan: Pemain tidak sabar-sabar menanti pengumuman pemenang dan cabutan bertuah baharu.
  • Memudahkan Pengurusan: Pentadbir mempunyai kawalan penuh ke atas undian, menjadikannya mudah untuk mengatur acara.

Ciri Utama

Untuk Pemain:

  • Penyertaan Masa Nyata: Sertai cabutan bertuah dan lihat kemas kini peserta secara langsung.
  • Penapisan Dinamik: Semak imbas undian berdasarkan statusnya.
  • Pengumuman Pemenang: Raikan kemenangan dengan paparan pemenang yang jelas.

Untuk Pentadbir:

  • Papan Pemuka Pentadbir: Cipta, edit dan padam undian.
  • Pengurusan Peserta: Tambah atau alih keluar peserta dengan mudah.
  • Hadiah Tersuai: Tentukan hadiah unik untuk setiap undian.

Ciri Teknikal:

  • Kemas Kini Masa Nyata: Dibina dengan Firebase Firestore untuk penyegerakan data segera.
  • Penyertaan Selamat: Dilindungi dengan peraturan Firestore untuk memastikan permainan adil.
  • SEO Dioptimumkan: Setiap halaman undian dioptimumkan dengan tag meta dan data berstruktur untuk enjin carian.

Teknologi Digunakan

Pelaksanaan

  1. Halaman Cabutan Berdepan Pemain

Komponen RafflePage berfungsi sebagai hab pusat untuk pemain menyemak imbas dan menyertai cabutan bertuah.

Fungsi Utama

  • Mengambil undian daripada Firestore.
  • Menapis undian kepada "sedang berlangsung", "akan datang" dan "selesai."
  • Melaksanakan penomboran untuk navigasi yang lebih lancar.

Coretan Kod

import React, { useState, useEffect } from "react";
import { collection, query, getDocs } from "firebase/firestore";
import { db } from "../../firebase-config";
import RaffleCard from "./RaffleCard";
import PaginationControls from "./PaginationControls";

const RafflePage = () => {
  const [raffles, setRaffles] = useState([]);
  const [loading, setLoading] = useState(true);
  const itemsPerPage = 5;

  useEffect(() => {
    const fetchRaffles = async () => {
      try {
        const rafflesCollection = collection(db, "raffles");
        const rafflesDocs = await getDocs(query(rafflesCollection));
        setRaffles(rafflesDocs.docs.map(doc => ({ id: doc.id, ...doc.data() })));
        setLoading(false);
      } catch (error) {
        console.error("Error fetching raffles:", error);
      }
    };
    fetchRaffles();
  }, []);

  return (
    <div>
      <h1>Raffles</h1>
      {loading ? <p>Loading...</p> : (
        raffles.map(raffle => (
          <RaffleCard key={raffle.id} raffle={raffle} />
        ))
      )}
    </div>
  );
};

export default RafflePage;
Salin selepas log masuk
Salin selepas log masuk

Cabaran Yang Dihadapi

  • Penapisan Dinamik: Memastikan undian dikategorikan dengan tepat berdasarkan statusnya.
  • Kemas Kini Masa Nyata: Menggunakan onSnapshot Firebase terbukti berlebihan untuk senario ini, jadi saya memilih getDocs untuk kemas kini berkala.
  1. Papan Pemuka Pentadbir

Pentadbir memerlukan cara untuk menguruskan undian tanpa mengakses pangkalan data secara langsung.

Ciri

  • Buat Cabutan Bertuah: Tambah cabutan bertuah baharu dengan tajuk, hadiah dan status.
  • Edit Raffle: Kemas kini butiran undian sedia ada.
  • Padam Cabutan: Alih keluar cabutan secara kekal.

Coretan Kod

import React, { useState, useEffect } from "react";
import { collection, query, getDocs } from "firebase/firestore";
import { db } from "../../firebase-config";
import RaffleCard from "./RaffleCard";
import PaginationControls from "./PaginationControls";

const RafflePage = () => {
  const [raffles, setRaffles] = useState([]);
  const [loading, setLoading] = useState(true);
  const itemsPerPage = 5;

  useEffect(() => {
    const fetchRaffles = async () => {
      try {
        const rafflesCollection = collection(db, "raffles");
        const rafflesDocs = await getDocs(query(rafflesCollection));
        setRaffles(rafflesDocs.docs.map(doc => ({ id: doc.id, ...doc.data() })));
        setLoading(false);
      } catch (error) {
        console.error("Error fetching raffles:", error);
      }
    };
    fetchRaffles();
  }, []);

  return (
    <div>
      <h1>Raffles</h1>
      {loading ? <p>Loading...</p> : (
        raffles.map(raffle => (
          <RaffleCard key={raffle.id} raffle={raffle} />
        ))
      )}
    </div>
  );
};

export default RafflePage;
Salin selepas log masuk
Salin selepas log masuk
  1. Butiran Cabutan Individu

Setiap undian mempunyai halaman sendiri yang memaparkan peserta, hadiah dan butang "Sertai".

Coretan Kod

import React, { useState, useEffect } from "react";
import { collection, addDoc, deleteDoc, doc, getDocs } from "firebase/firestore";
import { db } from "../../firebase-config";

const RaffleAdmin = () => {
  const [raffles, setRaffles] = useState([]);

  const createRaffle = async (title, prize) => {
    await addDoc(collection(db, "raffles"), { title, prize, status: "upcoming" });
    fetchRaffles();
  };

  const deleteRaffle = async (raffleId) => {
    await deleteDoc(doc(db, "raffles", raffleId));
    fetchRaffles();
  };

  const fetchRaffles = async () => {
    const rafflesDocs = await getDocs(collection(db, "raffles"));
    setRaffles(rafflesDocs.docs.map(doc => ({ id: doc.id, ...doc.data() })));
  };

  useEffect(() => {
    fetchRaffles();
  }, []);

  return (
    <div>
      <button onClick={() => createRaffle("New Raffle", "Epic Sword")}>Create</button>
      <ul>
        {raffles.map(raffle => (
          <li key={raffle.id}>
            {raffle.title}
            <button onClick={() => deleteRaffle(raffle.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default RaffleAdmin;
Salin selepas log masuk

Pengoptimuman SEO

Menggunakan Helmet, kami menambah tag meta pada setiap halaman untuk keterlihatan enjin carian yang lebih baik. Setiap undian mempunyai URL unik, membolehkan Google mengindeksnya dengan berkesan.

Contoh:

const joinRaffle = async () => {
  const raffleDoc = doc(db, "raffles", id);
  await updateDoc(raffleDoc, {
    participants: arrayUnion("currentUserId"),
  });
};
Salin selepas log masuk

Kesimpulan: Arena Menanti

Sistem Raffle ialah kerja penuh kasih sayang, direka untuk menggembirakan pemain dan memperkasakan pentadbir. Ia mengimbangi kesederhanaan dengan ciri berkuasa, memastikan penglibatan dan kebolehskalaan.

Anda boleh mencuba Cabutan di sini : https://gladiatorsbattle.com/raffle

Adakah ini memberi inspirasi kepada anda untuk membina sistem undian anda sendiri? Kongsi pendapat dan soalan anda dalam ulasan di bawah!

Jika anda menyukai ciri ini, selami dunia gladiator, permainan dan sejarah di GladiatorsBattle.com. Sertai komuniti kami untuk meneroka lebih banyak ciri, permainan mini dan ganjaran.

Ingin kekal berhubung? Cari kami di sini:

Tapak web: https://gladiatorsbattle.com
X: https://x.com/GladiatorsBT
LinkedIn: https://www.linkedin.com/in/pierre-romain-lopez/
Perselisihan: https://discord.gg/YBNF7KjGwx

Terima kasih kerana membaca, dan semoga berjaya membina arena ciri anda sendiri! ?

Atas ialah kandungan terperinci Mencipta Sistem Raffle Komprehensif untuk GladiatorsBattle.com. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan