Skip to content

v0.0.5-RC2

Compare
Choose a tag to compare
@shr0x shr0x released this 05 Jun 23:53
· 53 commits to main since this release
1d58372

RC2

Frontend rework

Our frontend app now uses createContext for globally page setting which will make it easier later on to be able to set pages ('components') from inside other components.

Example of using page setter/getter

import { FC, useCallback } from "react";
import { usePage } from "./PageContext";

export const MyComponent: FC = () => {
    const {page, setPage} = usePage();
    
    const handleClick = useCallback(() => {
        //check whether the page is or not 'auth' and if its not then set it!
        if (page !== "auth") setPage("auth")
    }, [])
    
    return <button onClick={() => handleClick()}>CLICK ME</button>
}

We are now using shared data in frontend also! Shared data is quite useful when you want to keep track of what you're doing, like what kind of data you're using, instead of having them declared in both parts, shared and frontend we are now declaring them only in the shared folder. Eventually every interface that's being exported from the modules and used more than once will be moved to shared folder.

Events

Instead of creating 'new files' to store events added with EventManager we're now creating events inside store class.

This change requires you that everytime you create a new store you make sure 'createEvents' method is there as a public method.

Before:

import { useEffect } from "react";
import MyStore from "stores/MyStore";
import EventManager from "utils/EventManager.util";

export const InitMyStoreEvents = (store: MyStore) => {
    return useEffect(() => {
        EventManager.addHandler("pagename", "setdata", (data: number) => store.setData(data));
        EventManager.stopAddingHandler("pagename");
        return () => EventManager.removeTargetHandlers("pagename");
    }, [store]);
};

After:

import { makeObservable, observable, action } from "mobx";
import EventManager from "utils/EventManager.util";

class MyStore {
    @observable
    mydata: number = 0;

    constructor(){
        makeObservable(this);
    }
    
    @action.bound
    setData(data: number) {
        this.mydata = data;
    }

    public createEvents() {
        EventManager.addHandler("pagename", "setdata", (data: number) => this.setData(data));
        EventManager.stopAddingHandler("pagename");
    }
}

Make sure the newly created store is included in the main App.tsx inside the primary used useEffect

const myStore = useLocalObservable(() => new MyStore());
const myOtherCoolStore = useLocalObservable(() => new MyOtherCoolStore());

useEffect(() => {
    const stores = [
        { store: myStore, event: "myStore" },
        { store: myOtherCoolStore, event: "myOtherCoolStore" },
    ];
    stores.forEach(({ store, event }) => {
        //this will call our created createEvents method to initialize events that can be called form backend
        store.createEvents();
        return () => EventManager.removeTargetHandlers(event);
    });
}, [myStore, myOtherCoolStore])

Shared data changes

Shared data now exports namespaces, interfaces and enums instead of declaring them. This mainly was done because we're now using shared data in frontend like interfaces and enums and using declared enum is not possible since frontend wouldn't know what that enum really is when building, but importing them let's the frontend know what their values are.

Other Fixes

[/] Fixed errors when creating a second or third character due to database relations being described wrongly.
[/] Fixed an issue with things not working correctly after creating a character for the first time (like inventory or hud wasn't updating)
[/] Fixed chat input image tripping when a suggested command was displayed.
[/] Fixed item swapping causing issues with items equipped in quick use.

What's Changed

Full Changelog: v0.0.5-RC1...v0.0.5-RC2