Code Crafters--Day5&Day6

Code Crafters–Day5&Day6

According to the plan, we will complete the first working part of our project

#Code Display
The complete code uploaded to github

Login interface

using TMPro;
using UnityEngine;
using UnityEngine.UI;

namespace Erinn
{
    public sealed class LoginPanel : MonoBehaviour
    {
        public TMP_InputField LoginEmail;
        public TMP_InputField LoginUserpassword;
        public Button LoginButton;
        public TMP_InputField RegisterEmail;
        public TMP_InputField RegisterUsername;
        public TMP_InputField RegisterUserpassword;
        public TMP_InputField RegisterCode;
        public Button RegisterSendCodeButton;
        public Button RegisterButton;
        public GameObject Tip;
        public TMP_Text TipText;

        public GameObject ChatWall;
        
        private void Start() => Register();

        public void Register()
        {
            NetworkTransport.Singleton.RegisterHandler<LoginResponse>(OnLoginResponse);
            NetworkTransport.Singleton.RegisterHandler<RegisterEmailcodeResponse>(OnEmailcodeResponse);
            NetworkTransport.Singleton.RegisterHandler<RegisterResponse>(OnRegisterResponse);
            LoginButton.onClick.AddListener(OnLoginButton);
            RegisterSendCodeButton.onClick.AddListener(OnRegisterSendCodeButton);
            RegisterButton.onClick.AddListener(OnRegisterButton);
            return;

            void OnLoginButton()
            {
                var email = LoginEmail.text;
                if (string.IsNullOrEmpty(email))
                {
                    OnTip("邮箱不能为空");
                    return;
                }

                var userpassword = LoginUserpassword.text;
                if (string.IsNullOrEmpty(userpassword))
                {
                    OnTip("密码不能为空");
                    return;
                }

                var request = new LoginRequest(email, userpassword);
                NetworkTransport.Singleton.Send(request);
            }

            void OnRegisterSendCodeButton()
            {
                var email = RegisterEmail.text;
                if (string.IsNullOrEmpty(email))
                {
                    OnTip("邮箱不能为空");
                    return;
                }

                NetworkTransport.Singleton.Send(new RegisterEmailcodeRequest(email));
            }

            void OnRegisterButton()
            {
                var email = RegisterEmail.text;
                if (string.IsNullOrEmpty(email))
                {
                    OnTip("邮箱不能为空");
                    return;
                }

                var username = RegisterUsername.text;
                if (string.IsNullOrEmpty(username))
                {
                    OnTip("用户名不能为空");
                    return;
                }

                var userpassword = RegisterUserpassword.text;
                if (string.IsNullOrEmpty(userpassword))
                {
                    OnTip("密码不能为空");
                    return;
                }

                if (userpassword.Length is < 8 or > 15)
                {
                    OnTip("密码长度应为8到15位");
                    return;
                }

                var emailcode = RegisterCode.text;
                if (string.IsNullOrEmpty(emailcode))
                {
                    OnTip("验证码不能为空");
                    return;
                }

                NetworkTransport.Singleton.Send(new RegisterRequest(email, username, userpassword, emailcode));
            }

            void OnLoginResponse(LoginResponse response)
            {
                if (response.Success)
                {
                    ChatWall.SetActive(true);
                    gameObject.SetActive(false);
                    return;
                }
                OnTip(response.Error);
            }

            void OnEmailcodeResponse(RegisterEmailcodeResponse response) => OnTip(response.Error);

            void OnRegisterResponse(RegisterResponse response) => OnTip(response.Error);

            void OnTip(string message)
            {
                TipText.text = message;
                Tip.SetActive(true);
            }
        }
    }
}

Chat interface

using TMPro;
using UnityEngine;
using UnityEngine.UI;

namespace Erinn
{
    public sealed class ChatWallPanel : MonoBehaviour
    {
        public TMP_Text ChatOutput;
        public TMP_InputField InputField;
        public Button SendButton;

        private void Awake()
        {
            Register();
        }

        public void Register()
        {
            SendButton.onClick.AddListener(OnSendButton);
            NetworkTransport.Singleton.RegisterHandler<ChatWallResponse>(OnChatWallResponse);
            NetworkTransport.Singleton.RegisterHandler<ChatWallMessage>(OnChatWallMessage);
            return;

            void OnSendButton()
            {
                var content = InputField.text;
                if (string.IsNullOrEmpty(content))
                    return;
                NetworkTransport.Singleton.Send(new ChatWallRequest(content));
                InputField.text = "";
            }

            void OnChatWallResponse(ChatWallResponse response) => ChatOutput.text += $"\r\n{response.Error}";

            void OnChatWallMessage(ChatWallMessage message) => ChatOutput.text += $"\r\n{message.Username}: {message.Content}";
        }
    }
}

Code Analysis

Login interface

This code mainly implements the following functions:

1. The email address, user name, password, and verification code cannot be empty.
2. Password length must be 8 to 15 characters authentication function.
3. Email, user name, password, verification code submission function.

Features are as follows:

1. UnityEngine.UI and TMP_InputField are used to make the interface input more convenient and beautiful.
2. Network transmission using NetworkTransport. Singleton, makes the code more concise and clear.
3. The listener is added by clicking the event to realize the response of the button click event.
4. The OnTip method is used to display error information.

In addition, the comments in our code make it easier for you to understand our code.

Chat interface

Features and functions:

1. Using the Unity engine and TMPRO library, is a Unity UI chat panel.
2. The code defines a sealed class called ChatWallPanel, inherited from MonoBehaviour, which is the main class in the Unity engine for handling UI interactions.
3. The class defines three common references to the TMP_Text, TMP_InputField, and Button components, which represent the chat output window, input box, and send button respectively.
4. In the Awake method, the Register method is called to register the network interaction.
5. In the Register method, three network processors are registered to handle ChatWallResponse, ChatWallMessage, and ChatWallRequest.
6. OnSendButton method, obtain the content of the input box and determine whether is empty, if no empty, through NetworkTransport Singleton. Send ChatWallRequest request the Send method, and empty the contents of the input box.
7. The OnChatWallResponse and OnChatWallMessage methods process the received ChatWallResponse and ChatWallMessage messages and update the content of the ChatOutput text.

Summary and Picture Display

At this point, our code has realized the front-end design of the two main pages, and includes a variety of error prompts, mailbox prompts and other secondary pages.

Project Overview

For the whole project, we completed the main front end and a small part of the interconnection with the back end, which is used to handle the login and registration related UI interface operations. It includes input boxes, buttons and other controls, as well as login requests, registration requests and other network communication processing logic. When the user clicks the login or registration button, the corresponding request is sent according to the content in the input box and is processed after receiving the response from the server. At the same time, if the content in the input box does not meet the requirements, a prompt box will be displayed to remind the user.
We will continue to work on perfecting the interface with the back-end and testing the overall project.

Project burnout diagram(Day5&Day6)