لنصنع لعبة محاكاة Ethereum – الجزء 4

تدريب واستراحة اللاعبين

ملخص

شهد الجزء الثالث تقديم آخر قطعة بانوراما للعقد الذكي تم وضعها في مكانها ، ومن هناك ، بدايات واجهة بدائية باستخدام React و Redux.

لقد أضفت بعض الميزات الصغيرة الرائعة منذ ذلك الحين وحصلت على الواجهة إلى حالة حيث يمكن للمستخدمين إضافة لاعبين جدد ، وتدريبهم على زيادة السمات ، وإراحتهم لزيادة الحالة.

وإليك كيف فعلت ذلك.

الواجهة

تلقيت مؤخرًا سؤالاً من أحد قرائي. لقد سألوا كيف يمكن أن تستمع DApp إلى تغييرات الحساب داخل Metamask في الوقت الفعلي دون تحديث الصفحة.

يمكن لمستخدمي Metamask تغيير الحساب في أي وقت ، لكن DApp لن يعرف ذلك إلا إذا كان يستمع إليه. لا تقوم بذلك بشكل افتراضي. سيحدث خطأ إذا اعتقد DApp أن الحساب الحالي يرسل معاملة ، لكنه يأتي من حساب آخر.

أثار هذا مقالة كتبتها تشرح الاستماع إلى تغيير الحسابات وتحديث البيانات داخل التطبيق وفقًا لذلك.

كان هذا هو أول تغيير صغير أجريته على الواجهة الأمامية لجعل تجربة المستخدم أكثر سلاسة.

تدريب

كانت أكبر جزء من الوظائف المضافة هي القدرة على تدريب كل لاعب. التدريب لا يأتي بالمجان. يحتاج كل لاعب إلى XP (يتم اكتسابه من خلال لعب المباريات مع لاعبين آخرين) ويقلل من حالتهم. طالما أن سمات اللاعب تساوي تكلفتها أو تفوقها ، يمكنه التدريب.

كانت الخطوة الأولى هي استرداد تلك التكاليف والمكاسب المخزنة في عقد TrainableTennisPlayer كمتغيرات حالة عامة. من المرجح أن يتغير هذا في المستقبل. من الناحية المثالية ، كلما زادت السمة ، زادت تكلفة تدريبها أعلى ، مما يجعلها أكثر تكلفة كلما تحسن اللاعب. ومع ذلك ، فإن كل هذه القيم ثابتة في الوقت الحالي.

استرداد التكاليف والمكاسب

ملاحظة : أستخدم بنية رمز مشروع IARS. لا تستخدم google ، لقد اختلقت الاختصار.

يتم الوصول إلى متغيرات الحالة العامة في Solidity كما لو كانت طرقًا ، لذلك يتطلب استدعاءها من web3 نفس البنية.

عندما يتم تحميل لاعب ، لدي وظيفة في ملف التفاعلية الخاصة بي تسمى loadTrainingCosts () والتي تستدعي جميع متغيرات الحالة العامة التي تمثل تكاليف ومكاسب التدريب والراحة.

تكاليف التدريب والحالة XP (تم استردادها في السطور 86 و 87) ، مع زيادة سمة (تم استردادها في السطر 88) ؛ تكاليف الراحة XP (تم استردادها في السطر 89) ولكنها تزيد الحالة (تم استردادها في السطر 90).

السطر الأخير في هذه الطريقة هو استدعاء إرسال . لم أتطرق بعد إلى ما يبدو عليه هذا في المقالات السابقة في السلسلة ، لذلك سأستعرض ما يحدث هنا.

يبدأ الإرسال على الخط 91 إجراءً في الإجراءات. js يُسمى trainingDetailsLoaded () مع جميع المعلومات المسترجعة من العقد الذكي. هذا يخبر Redux بأن إجراءً قد حدث للتو وهذه المعلومات هي النتيجة. تقع على عاتق وظيفة trainingDetailsLoaded () مسؤولية توجيه المعلومات إلى المخفض الصحيح بحيث يمكن تحديث حالة DApp.

نوع الإجراء هنا هو TRAINING_DETAILS_LOADED الذي يوجهه المرسل إلى علبة التروس التالية:

يتم تحديث الحالة بجميع المعلومات الجديدة المسترجعة من العقد الذكي. يمكن للواجهة بعد ذلك استرداد هذه البيانات باستخدام محدد ، والذي يبدو كالتالي:

كل ما يحتاجه المكون هو استيراد كل من هذه المحددات وأصبح الآن يتمتع بحق الوصول الكامل إلى جميع التكاليف والمكاسب الخاصة بالتدريب والراحة!

قائمة منسدلة

نحتاج إلى أن يكون المستخدمون قادرين على تحديد السمة التي يريدون تدريبها على لاعبهم. يوفر لك React-bootstrap مكوّنًا رائعًا لنا هنا يسمى Dropdown .

عند النقر فوقها ، يتم استدعاء الوظيفة attributeSelected () مع dispatch واسم السمة ومعرف السمة. هذا مهم لأنه يتم إخراج تعداد الصلابة في شكل مصفوفات أرقام . على الرغم من أن إعلان التعداد في Solidity يبدو كالتالي:

يتطلب التفاعل معها استخدام الأعداد الصحيحة 0 و 1 و 2 و 3.

تستدعي الوظيفة attributeSelected () تفاعلًا يتبع نفس التسلسل الموضح في استرداد التكاليف والمكاسب لتحديث السمة المحددة حاليًا للتدريب.

تدريب

بمجرد تحميل المشغل وتحديد السمة المطلوبة ، يستخدم إرسال النتيجة كل هذه المعلومات لإرسال معاملة إلى دفتر الأستاذ لتدريب اللاعب. تبدو وظيفة التفاعل كما يلي:

TennisPlayer هو إشارة إلى مثيل العقد الذكي. في الوقت الحالي ، يقوم DApp بتسجيل الدخول إلى وحدة التحكم في كل مرحلة من مراحل المعاملة. أستخدم الاشتراكات في حدث Train بدلاً من التصرف بناءً على أحداث الإيصال أو التأكيد في الوقت الحالي ، ولكن قد يلزم تغيير هذا في المستقبل.

يرسل الاتصال على السطر 95 معاملة إلى هذه الوظيفة في العقد الذكي الخاص بنا:

ينبعث حدث Train () عندما يتدرب اللاعب بنجاح. للتأكد من إعادة تحميل الصفحة عند إرسال هذا الحدث ، فإن DApp يستمع إليها باستخدام وظيفة الاشتراك هذه:

عندما يتم تدريب اللاعب بنجاح ، يتم إطلاق هذا الأمر ، مما يؤدي إلى إعادة تحميل اللاعب وتحديث المعلومات الموجودة على الشاشة.

النتيجة

لقد استخدمت نفس سير العمل لراحة اللاعبين ، دون القدرة على تحديد سمة من خلال قائمة منسدلة ، لأن الراحة لا تؤدي إلا إلى زيادة الحالة.

لقد أضفت بعض ميزات الواجهة الأمامية مثل الشارات لعرض قيم السمات وتم ترميزها بالألوان بناءً على القيمة. تبدو الحالة الحالية لـ DApp كما يلي:

إليك ما يحدث:

الخطوات التالية

الواجهة مقسمة في الوقت الحالي. أحتاج إلى التفكير والتخلص من بعض الأشياء قبل إضافة وظيفة لعب المباريات على أي حال ، لذلك هذا هو التالي.

أريد أيضًا تجربة DApp على شبكة اختبار عامة ، للتأكد من أن الاستماع إلى الحدث يعمل بشكل صحيح. لقد واجهت مشكلات مع هذا في الماضي حيث تم إطلاق الأحداث واكتشافها بنجاح باستخدام blockchain المحلي لـ Ganache ، ولكن لم يتم اكتشافها بنفس الطريقة على شبكات الاختبار العامة.

بغض النظر ، يسعدني حقًا أنها تتحرك نحو النقطة التي تعمل فيها الواجهة بشكل كامل ، على الرغم من أنه من الجسيم النظر إليها الآن. بمجرد تنفيذ جميع الميزات ، يمكنني إعادة النظر في منطق اللعب في العقود الذكية لجعل اللعبة أكثر جاذبية.

احصل على أفضل عروض البرامج مباشرة في بريدك الوارد

مزيد من القراءة

إذا كنت مهتمًا بتطوير Blockchain ، فأنا أكتب دروسًا وتعليمات وتلميحات ونصائح حول كيفية البدء وإنشاء محفظة. تحقق من بعض مواردي: