hmm, ok, I need to show the GUI to the player, hide the RPG controls GUI, and stop all keyboard input.
Because my project is an educational programming language game.
- how to stop all inputs using serve side functions?
- how to send variables to vue components?
i'm trying to send props to my vue component, but always returns undefined when i call my props in component
this code only work with RPG_TYPE=rpg
import { RpgGui, Control, inject, KeyboardControls } from '@rpgjs/client'
import { ProblemResponse } from '../contracts/interfaces';
import { RpgPlayer } from '@rpgjs/server';
class CommonsCodeEditor{
showCodeEditor(player: RpgPlayer, problem: ProblemResponse){
RpgGui.display('gui-code-editor', );
RpgGui.hide('rpg-controls')
inject(KeyboardControls).stopInputs()
}
hideCodeEditor(){
RpgGui.hide('gui-code-editor');
RpgGui.display('rpg-controls')
inject(KeyboardControls).listenInputs()
}
}
export default new CommonsCodeEditor()
<script lang="ts">
import MonacoEditor from 'monaco-editor-vue3'
import commonsCodeEditor from '@commons/commons-code-editor'
import { ProblemResponse } from '@contracts/interfaces';
import { RpgPlayer } from '@rpgjs/server';
export default {
name: 'gui-code-editor',
inject: ['rpgCurrentPlayer'],
props: {
problem: { type: Object }
},
components: {
MonacoEditor
},
data() {
return {
code: 'const noop = () => { }'
}
},
methods: {
hideCodeEditor() {
commonsCodeEditor.hideCodeEditor()
}
},
mounted() {
console.log(this.problem)
}
}
</script>
<template>
<div id='rpg'>
<div className='parent'>
<div className="row">
<div id='problem-desc'>
<h2>
{{ "hi" }}
</h2>
</div>
<div id='editor'>
<MonacoEditor theme="vs-dark" language="python" v-model:value="code">
</MonacoEditor>
</div>
</div>
<div className="row allign-end">
<button @click="hideCodeEditor" className='button danger'>close</button>
<button className='button primary'>edit</button>
</div>
</div>
</div>
</template>
thanks for your helping, do you have discord?