私は次のリアルタイム1 V 1ゲームを作った.CSSを学ぶ方法

誰もがあなたが5文字の単語を推測する必要がありますし、6の試みを持っているゲームを悪化させる知っている.
それで、私はあなたが誰が最初に語を推測することができるかについて見るために他のプレーヤーと対戦することができるバージョンを作る良い考えであると思いました.
そして、あなたはリアルタイムであなたの対戦相手から推測を見ることができます.
私はそれを呼んだWarWordly そして、それは日の製品でしたProduct Hunt

ゲームのルール
ゲームのルールは十分に簡単ですが、有効な単語を起動し、各文字は、このルールにacording色を受け取る:

⬜️ 灰色:手紙は間違っています

🟧 オレンジ:文字は正しいが間違った位置にある

🟩 緑:文字が正しいと正しい位置にある

1 V 1ゲームを悪化させる
このゲームのアイデアは、他のプレイヤーと競うことができるということです.

だから左側には推測があり、右側は相手です.

リアルタイム化
主な技術は以下の通りである.

▲ Next.js 反応アプリとして

🔋 Supabase DB , Auth & Realtime

🎨 Tailwind CSS スタイリング

💾 SWR データ取得用

これらのツールは、それはとても簡単に右のアイデアを起動すると知っているので、誰もがそれを使用することができますので、なぜ、あなたの小さなゲーム製品の製品狩りの製品を作ることができます.
全体のゲームはオープンソースでありproject on GitHub .
我々は、このポストのリアルタイム機能に集中するつもりです.

コードしましょう
Supabaseでは、PostgreSQLのデータベースの任意の種類を作成することができますが、彼らは本当にクールな機能をどこで任意のテーブルに購読を作成することができますてjavascript client .
プロジェクトにクライアントをインストールする

npm install @supabase/supabase-js

次に、クライアントをページにインポートします

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)

あなたはあなたをつかむことができますSUPABASE_URL and SUPABASE_ANON_KEY あなたのsupabaseアカウントから.
現在、我々はAをつくるつもりですReact Hook 我々のデータベースから我々のテーブルを予約するために.

import { useEffect } from "react";

useEffect(() => {
    if (!battleId) return;

    // Subscribe to the Battle
    const battleSubscription = supabase
        .from(`battles:id=eq.${battleId}`)
        .on("UPDATE", (payload) => {
            // Updates all the data from the Battle to SWR
            battleMutate(payload.new);
        })
        .subscribe();

    // Cleanup on unmount
    return () => {
        battleSubscription.unsubscribe();
    };
}, [battleId]);

このコードは魔法が起こるところです、それで、より近い観察をしましょう👇.
最初にインポートuseEffect 反応から.
それからフックはフックを作ります.

useEffect(() => {
   // code...
}, [battleId]);

使用するbattleId フックに対する依存性として、これは私たちのバトルIDを持つ変数です.なぜなら、私たちはデータベース上での戦いを見つけるためにIDを必要とするからです.
その後、私たちがしなければならないのは、Supabasecreate a new subscription データベースに

// Subscribe to the Battle
const battleSubscription = supabase
    .from(`battles:id=eq.${battleId}`)
    .on("UPDATE", (payload) => {
        // Updates all the data from the Battle to SWR
        battleMutate(payload.new);
    })
    .subscribe();

このコードは私たちにJSオブジェクトを送りますUPDATE データベース
これは我々の敵から推測を追跡する方法です.
その後、我々は素晴らしいを使用して戦闘の状態を更新することができますSWR とその変異関数

// Updates all the data from the Battle to SWR
battleMutate(payload.new);

そしてそれです.
これは、ゲームをリアルタイムですることができますし、プレイヤーが最初に単語を推測参照してくださいコードです.
このコードを見ることができますthe repo on GitHub .

エンディング
私はこの短いポストは、コードのいくつかの行を使用してアプリケーションに簡単にリアルタイム機能を作る方法を学ぶことができます願っています.
🎮 あなたはplay the game here
🛠 プロフィールentire project on GitHub
🙋‍♂️ こんにちは