Name Screen Gui

Samarium

Name Screen Gui

Description

Display a GUI before going to a map. We ask for the player's name

Structure

main
- maps
- characters
- gui
  - name.vue
- player.ts
rpg.toml

Files

player.ts

import { RpgPlayer, type RpgPlayerHooks, Components } from '@rpgjs/server'

const player: RpgPlayerHooks = {
    onConnected(player: RpgPlayer) {
        const guiNameScreen = player.gui('NameScreenGui')
        guiNameScreen.on('setName', ({ name }) => {
            console.log('Character name is', name)
            guiNameScreen.close()
            player.name = name
            player.setComponentsTop(Components.text('{name}'))
            player.changeMap('./main/maps/map')
        })
        guiNameScreen.open()
    }
}

export default player

name-screen.vue

<template>
    <div class="name-screen">
        <div class="dialog-box">
            <form @submit.prevent="changeName">
                <h2>Enter your name</h2>
                <input type="text" v-model="name" />
                <button>OK</button>
            </form>
        </div>
    </div>
</template>

<script>
    export default {
        inject: ['rpgGuiInteraction'],
        name: 'NameScreenGui',
        data() {
            return {
                name: ''
            }
        },
        methods: {
            changeName() {
                this.rpgGuiInteraction('NameScreenGui', 'setName', {
                    name: this.name
                })
            }
        }
    }
</script>

<style>
    .name-screen {
        position: absolute;
        background: white;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dialog-box {
        background-color: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
        width: 300px;
        text-align: center;
    }

    .dialog-box h2 {
        margin: 0 0 15px;
    }

    .dialog-box input {
        width: 90%;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .dialog-box button {
        background-color: #007BFF;
        color: #fff;
        padding: 10px 15px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .dialog-box button:hover {
        background-color: #0056b3;
    }
</style>

config

modules = [
    './main'
]

[start]
    graphic = 'hero'
    hitbox = [16, 16]