diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index 2f845e88..00000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,222 +0,0 @@ -# Change Log - -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. - -## [4.3.1](https://github.com/RSamaium/RPG-JS/compare/v4.3.0...v4.3.1) (2024-01-29) - - -### Bug Fixes - -* lerna publish packages ([41c6ef0](https://github.com/RSamaium/RPG-JS/commit/41c6ef0e5b65d9084ecab40f4c65ef2d5d04a658)) - - - - - -# [4.3.0](https://github.com/RSamaium/RPG-JS/compare/v4.2.2...v4.3.0) (2024-01-29) - - -### Bug Fixes - -* build spec ([65d48c0](https://github.com/RSamaium/RPG-JS/commit/65d48c04f8bdf53759205147ec80e00c96ed5fd9)) -* server url env ([e6a1237](https://github.com/RSamaium/RPG-JS/commit/e6a1237e360f7a25e2e8194127473e8a74d0b0ab)) -* unit tests compiler ([1292365](https://github.com/RSamaium/RPG-JS/commit/129236510198a08dbf376977068939b47d1ae350)) -* unit tests compiler ([6277f1b](https://github.com/RSamaium/RPG-JS/commit/6277f1b6f201c1f06b5058a3c985e41952520b55)) -* wallet address ([4f95fa5](https://github.com/RSamaium/RPG-JS/commit/4f95fa551f2dcc1cce23cc14a8dbbef677d25353)) - - -### Features - -* loading the game in a React app ([437917a](https://github.com/RSamaium/RPG-JS/commit/437917ace5de1a88777d84c4b39a48e147f77de4)) -* reat app integration ([1b9b5d8](https://github.com/RSamaium/RPG-JS/commit/1b9b5d8bb5dd02bcf4a68ccd5eee19c6fc00a4eb)) - - - - - -## [4.2.2](https://github.com/RSamaium/RPG-JS/compare/v4.2.1...v4.2.2) (2024-01-15) - -**Note:** Version bump only for package rpgjs - - - - - -## [4.2.1](https://github.com/RSamaium/RPG-JS/compare/v4.2.0...v4.2.1) (2024-01-12) - - -### Bug Fixes - -* lag after action ([d057e17](https://github.com/RSamaium/RPG-JS/commit/d057e1736475e03a0553882a53b96a4d77e65acf)) -* [#277](https://github.com/RSamaium/RPG-JS/issues/277) #community-256 ([924ec6d](https://github.com/RSamaium/RPG-JS/commit/924ec6d6636b51eeb46cb1509c7244f69a8adb49)), closes [#community-256](https://github.com/RSamaium/RPG-JS/issues/community-256) -* #community-261 ([8221085](https://github.com/RSamaium/RPG-JS/commit/8221085a962b1555aa20ba154b6790d4522da971)), closes [#community-261](https://github.com/RSamaium/RPG-JS/issues/community-261) -* simple-room exports ([9592d18](https://github.com/RSamaium/RPG-JS/commit/9592d186cdb7d66dba4fe7b49d31b2fc97686677)) -* spritesheetDirectories warning ([4b34a15](https://github.com/RSamaium/RPG-JS/commit/4b34a15d60261501069100fb22aa0901b32a1d98)) -* tiled parser throw error ([4adfaea](https://github.com/RSamaium/RPG-JS/commit/4adfaea557b386556b459d7f64b8a24a24116aa8)) - - - - - -# [4.2.0](https://github.com/RSamaium/RPG-JS/compare/v4.1.3...v4.2.0) (2023-12-09) - - -### Features - -* inject function ([902e62f](https://github.com/RSamaium/RPG-JS/commit/902e62ff4fdd9b5bd26ee7d5be9ccae2b051f248)) -* propagate event directive ([edbab50](https://github.com/RSamaium/RPG-JS/commit/edbab506a2552ff64d2f638d1e088748cbc8cc86)) - - - - - -## [4.1.3](https://github.com/RSamaium/RPG-JS/compare/v4.1.2...v4.1.3) (2023-11-17) - -**Note:** Version bump only for package rpgjs - - - - - -## [4.1.2](https://github.com/RSamaium/RPG-JS/compare/v4.1.1...v4.1.2) (2023-10-30) - - -### Bug Fixes - -* **doc:** react gui ([ecfcc4d](https://github.com/RSamaium/RPG-JS/commit/ecfcc4d0ad2ecf3a5ef6f55fd7526ab9cd4b102c)) -* **gui:** don't propagate events ([1439e0f](https://github.com/RSamaium/RPG-JS/commit/1439e0fa4718cbdc07cd2ceb8ff4067e116cef9b)) - - - - - -## [4.1.1](https://github.com/RSamaium/RPG-JS/compare/v4.1.0...v4.1.1) (2023-10-27) - - -### Bug Fixes - -* **compiler:** move images in RPG mode #community-216 ([182f2f1](https://github.com/RSamaium/RPG-JS/commit/182f2f11e53813cb7794295274b67d185906eb84)), closes [#community-216](https://github.com/RSamaium/RPG-JS/issues/community-216) -* **gui:** get vue instance #community-215 ([2874815](https://github.com/RSamaium/RPG-JS/commit/287481517028196f1bf8bc327b68134e8f5f63d0)), closes [#community-215](https://github.com/RSamaium/RPG-JS/issues/community-215) -* **scene:** click in scene map ([04d56d6](https://github.com/RSamaium/RPG-JS/commit/04d56d6e07c58e2c039732e35ae3b94fc6751fa5)) -* **test:** clear after scene tests ([e9a934c](https://github.com/RSamaium/RPG-JS/commit/e9a934c7fc197079036628a94891c371bae4edb2)) -* **tests:** size of ([558316e](https://github.com/RSamaium/RPG-JS/commit/558316e9c63282eef0ce6dd1594cc7b1a836c1d2)) - - - - - -# [4.1.0](https://github.com/RSamaium/RPG-JS/compare/v4.0.5...v4.1.0) (2023-10-20) - - -### Features - -* onDetectInShape and onDetectOutShape hooks in event ([b2c6a2f](https://github.com/RSamaium/RPG-JS/commit/b2c6a2f98b3bcc992deb0473a9fb1699874b6e48)) -* react ([4e02244](https://github.com/RSamaium/RPG-JS/commit/4e0224465fc8f76434039c464f063f929fb861fd)) - - - - - -## 4.0.5 (2023-10-18) - - -### Bug Fixes - -* flickering motion of an event as it moves ([b2b8832](https://github.com/RSamaium/RPG-JS/commit/b2b8832a1582933afb64c698f40d1b0e72021780)) - - - - - -## 4.0.4 (2023-10-13) - -**Note:** Version bump only for package rpgjs - - - - - -## 4.0.3 (2023-10-10) - -**Note:** Version bump only for package rpgjs - - - - - -## 4.0.2 (2023-10-03) - -**Note:** Version bump only for package rpgjs - - - - - -## 4.0.1 (2023-10-03) - -**Note:** Version bump only for package rpgjs - - - - - -# 4.0.0-rc.13 (2023-09-09) - -**Note:** Version bump only for package rpgjs - - - - - -# 4.0.0-rc.12 (2023-09-08) - -**Note:** Version bump only for package rpgjs - - - - - -# 4.0.0-rc.11 (2023-08-30) - -**Note:** Version bump only for package rpgjs - - - - - -# 4.0.0-rc.10 (2023-08-28) - -**Note:** Version bump only for package rpgjs - - - - - -# 4.0.0-rc.9 (2023-08-25) - -**Note:** Version bump only for package rpgjs - - - - - -# 4.0.0-rc.8 (2023-08-23) - -**Note:** Version bump only for package rpgjs - - - - - -# [4.0.0-rc.6](https://github.com/RSamaium/RPG-JS/compare/v4.0.0-rc.5...v4.0.0-rc.6) (2023-08-20) - -**Note:** Version bump only for package rpgjs - - - - - -# [4.0.0-rc.5](https://github.com/RSamaium/RPG-JS/compare/v4.0.0-rc.4...v4.0.0-rc.5) (2023-08-16) - -**Note:** Version bump only for package rpgjs diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 0d0a19cc..00000000 --- a/LICENSE +++ /dev/null @@ -1,19 +0,0 @@ -Copyright (C) 2020 by Samuel Ronce - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in -all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -THE SOFTWARE. \ No newline at end of file diff --git a/docs/.vitepress/cache/deps/_metadata.json b/docs/.vitepress/cache/deps/_metadata.json deleted file mode 100644 index 06cfc431..00000000 --- a/docs/.vitepress/cache/deps/_metadata.json +++ /dev/null @@ -1,47 +0,0 @@ -{ - "hash": "1a35c785", - "browserHash": "06015c59", - "optimized": { - "vue": { - "src": "../../../node_modules/vue/dist/vue.runtime.esm-bundler.js", - "file": "vue.js", - "fileHash": "89d026cc", - "needsInterop": false - }, - "vitepress > @vue/devtools-api": { - "src": "../../../node_modules/@vue/devtools-api/lib/esm/index.js", - "file": "vitepress___@vue_devtools-api.js", - "fileHash": "2645e713", - "needsInterop": false - }, - "vitepress > @vueuse/integrations/useFocusTrap": { - "src": "../../../node_modules/@vueuse/integrations/useFocusTrap.mjs", - "file": "vitepress___@vueuse_integrations_useFocusTrap.js", - "fileHash": "4e2d43e4", - "needsInterop": false - }, - "vitepress > mark.js/src/vanilla.js": { - "src": "../../../node_modules/mark.js/src/vanilla.js", - "file": "vitepress___mark__js_src_vanilla__js.js", - "fileHash": "3ed8ef59", - "needsInterop": false - }, - "vitepress > minisearch": { - "src": "../../../node_modules/minisearch/dist/es/index.js", - "file": "vitepress___minisearch.js", - "fileHash": "b062852e", - "needsInterop": false - }, - "@vue/theme": { - "src": "../../../node_modules/@vue/theme/src/index.ts", - "file": "@vue_theme.js", - "fileHash": "7db5d48e", - "needsInterop": false - } - }, - "chunks": { - "chunk-G3CMYKT2": { - "file": "chunk-G3CMYKT2.js" - } - } -} \ No newline at end of file diff --git a/docs/.vitepress/cache/deps/package.json b/docs/.vitepress/cache/deps/package.json deleted file mode 100644 index 3dbc1ca5..00000000 --- a/docs/.vitepress/cache/deps/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "type": "module" -} diff --git a/docs/.vitepress/cache/deps/vue.js b/docs/.vitepress/cache/deps/vue.js deleted file mode 100644 index 17552a48..00000000 --- a/docs/.vitepress/cache/deps/vue.js +++ /dev/null @@ -1,313 +0,0 @@ -import { - BaseTransition, - BaseTransitionPropsValidators, - Comment, - EffectScope, - Fragment, - KeepAlive, - ReactiveEffect, - Static, - Suspense, - Teleport, - Text, - Transition, - TransitionGroup, - VueElement, - assertNumber, - callWithAsyncErrorHandling, - callWithErrorHandling, - camelize, - capitalize, - cloneVNode, - compatUtils, - compile, - computed, - createApp, - createBaseVNode, - createBlock, - createCommentVNode, - createElementBlock, - createHydrationRenderer, - createPropsRestProxy, - createRenderer, - createSSRApp, - createSlots, - createStaticVNode, - createTextVNode, - createVNode, - customRef, - defineAsyncComponent, - defineComponent, - defineCustomElement, - defineEmits, - defineExpose, - defineModel, - defineOptions, - defineProps, - defineSSRCustomElement, - defineSlots, - devtools, - effect, - effectScope, - getCurrentInstance, - getCurrentScope, - getTransitionRawChildren, - guardReactiveProps, - h, - handleError, - hasInjectionContext, - hydrate, - initCustomFormatter, - initDirectivesForSSR, - inject, - isMemoSame, - isProxy, - isReactive, - isReadonly, - isRef, - isRuntimeOnly, - isShallow, - isVNode, - markRaw, - mergeDefaults, - mergeModels, - mergeProps, - nextTick, - normalizeClass, - normalizeProps, - normalizeStyle, - onActivated, - onBeforeMount, - onBeforeUnmount, - onBeforeUpdate, - onDeactivated, - onErrorCaptured, - onMounted, - onRenderTracked, - onRenderTriggered, - onScopeDispose, - onServerPrefetch, - onUnmounted, - onUpdated, - openBlock, - popScopeId, - provide, - proxyRefs, - pushScopeId, - queuePostFlushCb, - reactive, - readonly, - ref, - registerRuntimeCompiler, - render, - renderList, - renderSlot, - resolveComponent, - resolveDirective, - resolveDynamicComponent, - resolveFilter, - resolveTransitionHooks, - setBlockTracking, - setDevtoolsHook, - setTransitionHooks, - shallowReactive, - shallowReadonly, - shallowRef, - ssrContextKey, - ssrUtils, - stop, - toDisplayString, - toHandlerKey, - toHandlers, - toRaw, - toRef, - toRefs, - toValue, - transformVNodeArgs, - triggerRef, - unref, - useAttrs, - useCssModule, - useCssVars, - useModel, - useSSRContext, - useSlots, - useTransitionState, - vModelCheckbox, - vModelDynamic, - vModelRadio, - vModelSelect, - vModelText, - vShow, - version, - warn, - watch, - watchEffect, - watchPostEffect, - watchSyncEffect, - withAsyncContext, - withCtx, - withDefaults, - withDirectives, - withKeys, - withMemo, - withModifiers, - withScopeId -} from "./chunk-G3CMYKT2.js"; -export { - BaseTransition, - BaseTransitionPropsValidators, - Comment, - EffectScope, - Fragment, - KeepAlive, - ReactiveEffect, - Static, - Suspense, - Teleport, - Text, - Transition, - TransitionGroup, - VueElement, - assertNumber, - callWithAsyncErrorHandling, - callWithErrorHandling, - camelize, - capitalize, - cloneVNode, - compatUtils, - compile, - computed, - createApp, - createBlock, - createCommentVNode, - createElementBlock, - createBaseVNode as createElementVNode, - createHydrationRenderer, - createPropsRestProxy, - createRenderer, - createSSRApp, - createSlots, - createStaticVNode, - createTextVNode, - createVNode, - customRef, - defineAsyncComponent, - defineComponent, - defineCustomElement, - defineEmits, - defineExpose, - defineModel, - defineOptions, - defineProps, - defineSSRCustomElement, - defineSlots, - devtools, - effect, - effectScope, - getCurrentInstance, - getCurrentScope, - getTransitionRawChildren, - guardReactiveProps, - h, - handleError, - hasInjectionContext, - hydrate, - initCustomFormatter, - initDirectivesForSSR, - inject, - isMemoSame, - isProxy, - isReactive, - isReadonly, - isRef, - isRuntimeOnly, - isShallow, - isVNode, - markRaw, - mergeDefaults, - mergeModels, - mergeProps, - nextTick, - normalizeClass, - normalizeProps, - normalizeStyle, - onActivated, - onBeforeMount, - onBeforeUnmount, - onBeforeUpdate, - onDeactivated, - onErrorCaptured, - onMounted, - onRenderTracked, - onRenderTriggered, - onScopeDispose, - onServerPrefetch, - onUnmounted, - onUpdated, - openBlock, - popScopeId, - provide, - proxyRefs, - pushScopeId, - queuePostFlushCb, - reactive, - readonly, - ref, - registerRuntimeCompiler, - render, - renderList, - renderSlot, - resolveComponent, - resolveDirective, - resolveDynamicComponent, - resolveFilter, - resolveTransitionHooks, - setBlockTracking, - setDevtoolsHook, - setTransitionHooks, - shallowReactive, - shallowReadonly, - shallowRef, - ssrContextKey, - ssrUtils, - stop, - toDisplayString, - toHandlerKey, - toHandlers, - toRaw, - toRef, - toRefs, - toValue, - transformVNodeArgs, - triggerRef, - unref, - useAttrs, - useCssModule, - useCssVars, - useModel, - useSSRContext, - useSlots, - useTransitionState, - vModelCheckbox, - vModelDynamic, - vModelRadio, - vModelSelect, - vModelText, - vShow, - version, - warn, - watch, - watchEffect, - watchPostEffect, - watchSyncEffect, - withAsyncContext, - withCtx, - withDefaults, - withDirectives, - withKeys, - withMemo, - withModifiers, - withScopeId -}; -//# sourceMappingURL=vue.js.map diff --git a/docs/.vitepress/cache/deps/vue.js.map b/docs/.vitepress/cache/deps/vue.js.map deleted file mode 100644 index 98652118..00000000 --- a/docs/.vitepress/cache/deps/vue.js.map +++ /dev/null @@ -1,7 +0,0 @@ -{ - "version": 3, - "sources": [], - "sourcesContent": [], - "mappings": "", - "names": [] -} diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js deleted file mode 100644 index 4ce27b7c..00000000 --- a/docs/.vitepress/config.js +++ /dev/null @@ -1,305 +0,0 @@ -const apiMenu = [ - { - text: 'Functions', - collapsed: false, - sidebarDepth: 2, - items: [ - { text: "inject()", link: "/functions/inject" }, - ] - - }, - { - text: 'Classes Server-Side', - collapsed: false, - sidebarDepth: 2, - items: [ - { text: "Server Engine Class", link: "/classes/server-engine" }, - { text: "Server Class", link: "/classes/server" }, - { text: "Player Class", link: "/classes/player" }, - { text: "Scene Map Server Class", link: "/classes/scene-map-server" }, - { text: "Map Class", link: "/classes/map" }, - { text: "World Maps Class", link: "/classes/world-maps" }, - { text: "Event Class", link: "/classes/event" }, - { text: "Shape Class", link: "/classes/shape" }, - { text: "World Class", link: "/classes/world" } - ] - - }, - { - text: 'Classes Client-Side', - collapsed: false, - sidebarDepth: 2, - items: [ - { text: "Client Class", link: "/classes/client" }, - { text: "Client Engine Class", link: "/classes/client-engine" }, - { text: "Sprite Class", link: "/classes/sprite" }, - { text: "Spritesheet Class", link: "/classes/spritesheet" }, - { text: "Scene Map Class", link: "/classes/scene-map" }, - { text: "GUI Class", link: "/classes/gui" }, - { text: "Sound Class", link: "/classes/sound" }, - { text: "Resource Class", link: "/classes/resource" }, - { text: "Keyboard Class", link: "/classes/keyboard" } - ] - - }, - { - text: 'VueJS', - collapsed: false, - sidebarDepth: 2, - items: [ - { text: "Vue Inject Class", link: "/classes/vue-inject" }, - { text: "Vue directives", link: "/api-gui/vue-directive" } - ] - }, - { - text: 'React', - collapsed: false, - sidebarDepth: 2, - items: [ - { text: "React Hooks", link: "/api-gui/react" } - ] - }, - { - text: 'Testing', - collapsed: false, - sidebarDepth: 2, - items: [ - { text: "Testing Class", link: "/classes/tests" }, - ] - }, - { - text: 'Player Commands Server-Side', - collapsed: false, - sidebarDepth: 2, - items: [ - { text: "Common Commands", link: "/commands/common" }, - { text: "Components", link: "/commands/components" }, - { text: "Parameter Commands", link: "/commands/parameter" }, - { text: "Class Commands", link: "/commands/class" }, - { text: "Gold Commands", link: "/commands/gold" }, - { text: "State Commands", link: "/commands/state" }, - { text: "Element Commands", link: "/commands/element" }, - { text: "Item Commands", link: "/commands/item" }, - { text: "Skill Commands", link: "/commands/skill" }, - { text: "Variable Commands", link: "/commands/variable" }, - { text: "Move Commands", link: "/commands/move" }, - { text: "GUI Commands", link: "/commands/gui" }, - { text: "Effect Commands", link: "/commands/effect" }, - { text: "Battle Commands", link: "/commands/battle" } - ] - - }, - { - text: 'RPG Database', - collapsed: false, - sidebarDepth: 2, - items: [ - { text: "Item Database", link: "/database/item" }, - { text: "Weapon Database", link: "/database/weapon" }, - { text: "Armor Database", link: "/database/armor" }, - { text: "Actor Database", link: "/database/actor" }, - { text: "Class Database", link: "/database/class" }, - { text: "Skill Database", link: "/database/skill" }, - { text: "State Database", link: "/database/state" }, - { text: "Element Database", link: "/database/element" }, - { text: "Effect Database", link: "/database/effect" } - ] - - }, - /*{ - text: 'Testing', - collapsed: false, - sidebarDepth: 2, - items: [ - { text: "Unit Testing Class", link: "/classes/tests" } - ] - }*/ -] - -const migrationMenu = [{ - text: 'Migration', - collapsed: false, - items: [ - { text: "v3 to v4", link: "/migration/to-v4" } - ] -}] - -const web3Menu = [{ - text: 'Web3', - collapsed: false, - items: [ - { text: "Authentification with wallet", link: "/web3/auth" } - ] -}] - -const guideMenu = [{ - text: 'Quick Start', - collapsed: false, - items: [ - { text: "Getting Started", link: "/guide/get-started" }, - { text: "Structure", link: "/guide/autoload" }, - { text: "Create your first map", link: "/guide/create-map" }, - { text: "Create hero in map", link: "/guide/create-sprite" } - ] -}, -{ - text: 'Go further', - collapsed: false, - items: [ - { text: "Create World", link: "/guide/create-world-maps" }, - { text: "Add life bar, text or other above the player", link: "/guide/component" }, - { text: "Create event (NPC)", link: "/guide/create-event" }, - { text: "Create items", link: "/guide/create-database" }, - { text: "Create shape", link: "/guide/create-shape" }, - { text: "Add music in map", link: "/guide/create-sound" }, - { text: "Create animated tile", link: "/guide/animation-tile" }, - { text: "Save the player's progress", link: "/guide/save" }, - { text: "Production", link: "/guide/production" }, - ] -}, -{ - text: 'GUI', - collapsed: false, - items: [ - { text: "Customizing Your Theme", link: "/gui/theme" }, - { text: "Reusing GUI Components", link: "/gui/reuse-gui" }, - { text: "Creating Notifications in Your GUI", link: "/gui/notification-gui" }, - ] -}, -{ - text: 'Create GUI with VueJS', - collapsed: false, - items: [ - { text: "Creating Your Own GUI", link: "/guide/create-gui" }, - { text: "Adding Tooltips to Your GUI", link: "/gui/tooltip" } - ] -}, -{ - text: 'Create GUI with React', - collapsed: false, - items: [ - { text: "Create Gui with React", link: "/gui/react" }, - { text: "Adding Tooltips to Your GUI", link: "/gui/react-tooltip" }, - { text: "Integrate in React App", link: "/gui/react-app"} - ] -}, -{ - text: 'Technical', - collapsed: false, - items: [ - { text: "Environment Variables", link: "/guide/env" }, - { text: "All configuration in rpg.toml", link: "/guide/configuration" }, - { text: "Working with User Inputs", link: "/guide/inputs" }, - { text: "Supporting Gamepad Input", link: "/guide/gamepad" }, - { text: "Creating Responsive Game Design", link: "/guide/responsive-design" }, - { text: "Create Progressive Web Apps (PWA)", link: "/guide/pwa" }, - { text: "Add TailwindCSS", link: "/guide/tailwindcss" }, - { text: "Upgrade/Update RPGJS", link: "/guide/upgrade" } - ] - -}, -{ - text: 'Advanced', - collapsed: false, - items: [ - { text: "Create Authentication System", link: "/advanced/auth" }, - { text: "Synchronization between Server and Client", link: "/guide/synchronization" }, - { text: "Creating a plugin", link: "/advanced/create-plugin" }, - { text: "Using Agones for Game Server Hosting", link: "/advanced/agones" }, - { text: "Optimizing Performance", link: "/guide/performance" }, - { text: "Create Unit Tests", link: "/guide/unit-test" }, - ] -}, -...web3Menu, -...migrationMenu -] - -const pluginMenu = [{ - text: 'Plugins', - collapsed: false, - items: [ - { text: "Adding Chat Functionality", link: "/plugins/chat" }, - { text: "Saving and Loading Game Data", link: "/plugins/save" }, - { text: "Creating a Title Screen Plugin", link: "/plugins/title-screen" }, - { text: "Displaying Emotion Bubbles for Characters", link: "/plugins/emotion-bubble" } - ] -}, -{ - text: 'Unofficial Plugins', - collapsed: false, - items: [ - { text: "Character Select", link: "/plugins/character-select" }, - { text: "Inventory GUI Plugin", link: "/plugins/inventory-plugin" }, - ] -}] - -const GA_ID = 'G-VCPFWQS1BJ' - -module.exports = { - //extends: baseConfig, - title: 'RPGJS v4 Documentation', - description: 'Create your RPG or MMORPG in Javascript', - ignoreDeadLinks: true, - themeConfig: { - search: { - provider: 'local' - }, - repo: 'https://github.com/RSamaium/RPG-JS', - nav: [{ - text: 'Home', - link: 'https://rpgjs.dev' - }, - { - text: 'Guide', - link: '/guide/get-started' - }, - { - text: 'API', - link: '/commands/common' - }, - { - text: 'Plugins', - link: '/plugins/chat' - }, - { - text: 'Lean more', - items: [ - { text: 'Change Log', link: '/others/changelog' } - ] - }, - { - text: 'Community', - link: 'https://community.rpgjs.dev' - } - ], - sidebar: { - '/functions/': apiMenu, - '/classes/': apiMenu, - '/commands/': apiMenu, - '/database/': apiMenu, - '/api/': apiMenu, - '/api-gui/': apiMenu, - '/guide/': guideMenu, - '/gui/': guideMenu, - '/advanced/': guideMenu, - '/plugins/': pluginMenu, - '/migration/': guideMenu, - '/web3/': guideMenu, - }, - plugins: ['@vuepress/active-header-links'], - head: [ - [ - 'script', - { async: '', src: 'https://www.googletagmanager.com/gtag/js?id=' + GA_ID } - ], - [ - 'script', - {}, - `window.dataLayer = window.dataLayer || []; - function gtag(){dataLayer.push(arguments);} - gtag('js', new Date()); - gtag('config', '${GA_ID}');` - ] - ] - } -} \ No newline at end of file diff --git a/docs/.vitepress/theme/components/PathTo.vue b/docs/.vitepress/theme/components/PathTo.vue deleted file mode 100644 index 6f11c935..00000000 --- a/docs/.vitepress/theme/components/PathTo.vue +++ /dev/null @@ -1,60 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vitepress/theme/components/Playground.vue b/docs/.vitepress/theme/components/Playground.vue deleted file mode 100644 index 130e4e5b..00000000 --- a/docs/.vitepress/theme/components/Playground.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vitepress/theme/components/PreferenceSwitch.vue b/docs/.vitepress/theme/components/PreferenceSwitch.vue deleted file mode 100644 index 6937bfd8..00000000 --- a/docs/.vitepress/theme/components/PreferenceSwitch.vue +++ /dev/null @@ -1,257 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/docs/.vitepress/theme/components/Type.vue b/docs/.vitepress/theme/components/Type.vue deleted file mode 100644 index 4051f193..00000000 --- a/docs/.vitepress/theme/components/Type.vue +++ /dev/null @@ -1,13 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/.vitepress/theme/components/Video.vue b/docs/.vitepress/theme/components/Video.vue deleted file mode 100644 index a0263132..00000000 --- a/docs/.vitepress/theme/components/Video.vue +++ /dev/null @@ -1,11 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vitepress/theme/components/preferences.ts b/docs/.vitepress/theme/components/preferences.ts deleted file mode 100644 index 62a9863c..00000000 --- a/docs/.vitepress/theme/components/preferences.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ref } from 'vue' - -export const inBrowser = typeof window !== 'undefined' - -if (!inBrowser) { - global.localStorage = { - getItem() { - return null - }, - setItem() { - return null - }, - } - global.document = {} -} - - -const get = (key: string, defaultValue = true): boolean => { - return inBrowser - ? JSON.parse(localStorage.getItem(key) || String(defaultValue)) - : defaultValue -} - -export const preferAutoloadKey = 'vue-docs-prefer-autoload' -export const preferAutoload = ref(get(preferAutoloadKey)) \ No newline at end of file diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js deleted file mode 100644 index 91f82399..00000000 --- a/docs/.vitepress/theme/index.js +++ /dev/null @@ -1,23 +0,0 @@ -import { h } from 'vue' -import DefaultTheme from 'vitepress/theme' -import PathTo from './components/PathTo.vue' -import Video from './components/Video.vue' -import Type from './components/Type.vue' -import PreferenceSwitch from './components/PreferenceSwitch.vue' -import Playground from './components/Playground.vue' - -export default { - extends: DefaultTheme, - Layout: () => { - // @ts-ignore - return h(DefaultTheme.Layout, null, { - 'sidebar-nav-before': () => h(PreferenceSwitch), - }) - }, - enhanceApp(ctx) { - ctx.app.component('Playground', Playground) - ctx.app.component('PathTo', PathTo) - ctx.app.component('Video', Video) - ctx.app.component('Type', Type) - } -} \ No newline at end of file diff --git a/docs/advanced/agones.md b/docs/advanced/agones.md deleted file mode 100644 index 3fa4664b..00000000 --- a/docs/advanced/agones.md +++ /dev/null @@ -1,234 +0,0 @@ -# Horizontal scaling of the game - -::: warning -This module still has some limitations, developments are not finished -::: - -## What is the problem? - -When there are many worlds in the game, the CPU and RAM will be heavily used. At some point, the server will not keep up and will slow down the game - -So you have to do horizontal scaling but, it's more complex for a game because - -1. You must not lose states on a server -2. Keep the states if you switch from one server to another -3. Do not stop an instance if it contains players -4. Group the players of a map on the same server -5. Do not use a classic load balancer because it will increase latency - -## Stack - -A module has been created to manage the scaling, it uses for that: - -1. [Kubernetes](https://kubernetes.io) & [Agones](https://agones.dev/site/) -2. Redis - -## Architecture - -![diagram](/assets/agones-diagram.jpg) - -1. First, the client makes a request with a service called MatchMaker Service. The purpose of this service is to retrieve an IP address and a port from a server -2. The client connecting to the server makes the first connection. When the player arrives on the map, then this is what happens (and this at each change of map) - a. Player states (positions, objects, money amount, etc.) are stored in Redis - b. The Matchmaker service is called to retrieve the instance that handles the requested map - c. The server sends the new IP and port to the client, and the client connects to the new instance and retrieves the states stored in Redis - -Note the following points: - -- If the map has never been loaded, an instance is created and the game server is allocated (i.e. it cannot be deleted by scaling) -- If the map has already been loaded, then the player will go to the existing instance -- If the player leaves the map, then the map is deleted from the RAM of the instance. If there are more people on the instance then the instance is left - -## Limitation - -1. Even if it is scalable, you are limited by a number of players per map (= instance). It can have an side effect. For example, if you think (based on the server capacity) that the limit of a physical server is 1000 players. If on the instance we have 200 players, then the system thinks that the server is not fully loaded, it can have a second instance with 100 players. but here it is - for some reason the first instance contains the 1000 players so the server will contain a total of 1200 players. There might be some disturbances -2. All dynamic elements and especially maps will not work because if server creates a dynamic map, it will be anchored to server. We will lose the notion of scaling in this case. This is a point that is being considered -3. If you set a custom property on the player, you must pass through the [props parameter](/classes/player.html#props). This way, the state will be kept in memory when the player switches from one server to another - -## Above all - -You must know Docker and docker must be installed on your server - -1. [Install Kubernetes and Agones](https://agones.dev/site/docs/installation/) -2. [Install Redis](https://redis.io/docs/getting-started/) -3. Install Matchmaker Service: - -Locally: - -`docker run -e KUBECONFIG='' -e SECRET_TOKEN= -v /path/to/.minikube:/path/to/.minikube --net=host --name rpgjs-matchmaker rpgjs/agones-matchmaker:beta.1` - -> Note that KUBECONFIG is a JSON format and not YAML. -> The SECRET_TOKEN allows your game to interact with the matchmaker. You have to generate a token which must not be public ! (Example of a token generation:: `openssl rand -base64 16`) - -::: tip In production -In production, the command is different, you do not use the network mode in host and it should not be necessary to use a volume - -`docker run -e KUBECONFIG='' -e SECRET_TOKEN= --name rpgjs-matchmaker rpgjs/agones-matchmaker:beta.1` -::: - -> By default, the webservcie runs on port 3010 (you can change the port by specifying the PORT environment variable) - -## Install Agones Plugin in your game - -Set up in your game: - -`npx rpgjs add @rpgjs/agones` - -Next, add in `rpg.toml` - -```ts -matchMakerService = '' -``` - -> From now on, if you launch the game locally, you must indicate the secret token and the url of match maker service -> `MATCH_MAKER_SECRET_TOKEN= MATCH_MAKER_URL= REDIS_URL= npm run dev` - -### Build Image of your game - -1. [Build the image of your game](/guide/production.html#build-with-docker) -2. Push it on a registry - -## Deployment of a game server - -`fleet.yml` file: - -```yml -apiVersion: "agones.dev/v1" -kind: Fleet -metadata: - name: rpg-game-server -spec: - replicas: 2 - template: - spec: - ports: - - name: default - portPolicy: Dynamic - containerPort: 3000 - protocol: TCP - health: - initialDelaySeconds: 30 - periodSeconds: 25 - template: - spec: - containers: - - name: rpg - image: $(IMAGE) - env: - - name: MATCH_MAKER_URL - value: "$(URL)" - - name: MATCH_MAKER_SECRET_TOKEN - value: "$(SECRET_TOKEN)" - - name: REDIS_URL - value: "$(REDIS_URL)" -``` - -Put the -- The url to the image in the registry -- match maker url et le secret token -- and the url to redis - -> in production, use secrets - -Then launch the fleet: - -`kubectl apply -f fleet.yml` - -## SSL - -The game server may need an SSL certificate. - -The solution is to use Cert-Manager with a DNS01 resolver to obtain a free SSL certificate from Let's Encrypt. - -1. Install [Cert-Manager](https://cert-manager.io/docs/installation/) - -2. Next, create a certificate (the resolver depends on the platform chosen), but here's an example using Scaleway: - - a. Follow: https://github.com/scaleway/cert-manager-webhook-scaleway - - b. Then, create the certificate - - ```yml - apiVersion: cert-manager.io/v1 - kind: Issuer - metadata: - name: letsencrypt - spec: - acme: - email: - server: https://acme-v02.api.letsencrypt.org/directory - privateKeySecretRef: - name: letsencrypt-secret - solvers: - - dns01: - webhook: - groupName: acme.scaleway.com - solverName: scaleway - config: - accessKeySecretRef: - key: SCW_ACCESS_KEY - name: scaleway-secret - secretKeySecretRef: - key: SCW_SECRET_KEY - name: scaleway-secret - ``` - -> Note that the email address is required to generate the certificate. - -3. When you launch a Game Server, you also need to point a DNS to the IP. For example: `game.example.com`. You need to create the DNS before requesting the certificate, otherwise it won't work. So you need to build a logic on your side that : - 1. reads game servers with the kubernetes API - 2. retrieves an IP and adds it to the DNS configuration -4. Then ask for a certificate: - -```yml -apiVersion: cert-manager.io/v1 -kind: Certificate -metadata: - name: game-server-certificate -spec: - secretName: game-server-tls - dnsNames: - - "game.example.com" - issuerRef: - name: letsencrypt -``` - -5. Finally, the certificate and key must be sent to the game server. For this, you must use a volume: - -```yml -apiVersion: "agones.dev/v1" -kind: Fleet -metadata: - name: rpg-game-server -spec: - replicas: 2 - template: - spec: - ports: - - name: default - portPolicy: Dynamic - containerPort: 3000 - protocol: TCP - health: - initialDelaySeconds: 30 - periodSeconds: 25 - template: - spec: - containers: - - name: rpg - image: $(IMAGE) - volumeMounts: - - name: cert-volume - mountPath: /app/certs - env: - - name: MATCH_MAKER_URL - value: "$(URL)" - - name: MATCH_MAKER_SECRET_TOKEN - value: "$(SECRET_TOKEN)" - - name: REDIS_URL - value: "$(REDIS_URL)" - volumes: - - name: cert-volume - secret: - secretName: game-server-tls -``` \ No newline at end of file diff --git a/docs/advanced/auth.md b/docs/advanced/auth.md deleted file mode 100644 index a9f84cca..00000000 --- a/docs/advanced/auth.md +++ /dev/null @@ -1,119 +0,0 @@ -# `auth` Hook Documentation - -## Overview - -The `auth` hook in RPGJS is a authenticating players in your game. This document provides a comprehensive guide on how to implement and use the `auth` hook in the RPGJS project. - -::: tip Info -Authentication in RPGJS is agnostic, in the sense that you can make it work with any authentication system. It's not tied to any database or third-party system. You're free to implement your own logic. This is useful for MMORPGs. -Below is an example with a JWT. -::: - -## Implementation - -In your `main/server.ts` file, follow these steps to set up the `auth` hook: - -### Step 1: Import Required Modules - -Import the necessary modules from `@rpgjs/server`: - -```typescript -import { RpgServerEngineHooks, RpgServerEngine } from '@rpgjs/server'; -``` - -### Step 2: Define the `auth` Hook - -Implement the `auth` hook within the `RpgServerEngineHooks`: - -```typescript -const server: RpgServerEngineHooks = { - auth(server: RpgServerEngine, socket) { - // Authentication logic goes here - } -}; - -export default server; -``` - -#### Functionality - -- The `auth` hook must return a `Promise`, a `string`, or throw an error. -- If a `string` is returned, and the ID **public** matches, the player is considered connected. -- If the hook throws an error, it indicates that the player is not authenticated. - -#### Parameters - -- `server`: An instance of `RpgServerEngine`. -- `socket`: The `socket.io` object. You can access various request headers using `socket.handshake.headers`. - -## Client-Side Error Handling - -To handle errors on the client side, such as those thrown during the authentication process, implement the `onConnectError` hook in your `main/client.ts` file. - -### Step 1: Import Required Modules - -Import the necessary modules from `@rpgjs/client`: - -```typescript -import { RpgClientEngineHooks, RpgClientEngine } from "@rpgjs/client"; -``` - -### Step 2: Define the `onConnectError` Hook - -Implement the `onConnectError` hook within the `RpgClientEngineHooks` to handle connection errors: - -```typescript -const client: RpgClientEngineHooks = { - onConnectError(engine: RpgClientEngine, err: Error) { - console.log("Connection Error:", err.message); - } -}; - -export default client; -``` - -## JWT Example - -### Step 1: Import Required Modules - -Import necessary modules from `@rpgjs/server` and any other required libraries (like `jsonwebtoken` for decoding JWT): - -```typescript -import { RpgServerEngineHooks, RpgServerEngine } from '@rpgjs/server'; -import jwt from 'jsonwebtoken'; -``` - -> Install `jsonwebtoken` using `npm install jsonwebtoken`. - -### Step 2: Define the `auth` Hook with JWT Logic - -Implement the `auth` hook to handle JWT verification: - -```typescript -const server: RpgServerEngineHooks = { - auth(server: RpgServerEngine, socket) { - const token = socket.handshake.headers.authorization; - if (!token) { - throw 'No token provided'; - } - - // Replace 'YOUR_SECRET_KEY' with your actual secret key used to sign the JWT - const decoded = jwt.verify(token, 'YOUR_SECRET_KEY'); - if (!decoded) { - throw 'Invalid token'; - } - - // Assuming 'decoded' contains a property 'id' representing the user ID - return decoded.id; - } -}; - -export default server; -``` - -::: tip Notes -- Ensure you replace `'YOUR_SECRET_KEY'` with the secret key you used to sign your JWTs. -- The JWT is expected to be in the `authorization` header of the socket handshake. Make sure this aligns with how your client is sending the token. -- The example assumes the JWT contains an `id` field representing the user ID. Adjust this according to your JWT structure. -- Proper error handling is crucial to inform the client about authentication failures. -::: \ No newline at end of file diff --git a/docs/advanced/create-plugin.md b/docs/advanced/create-plugin.md deleted file mode 100644 index 981aa49d..00000000 --- a/docs/advanced/create-plugin.md +++ /dev/null @@ -1,98 +0,0 @@ -# Creating and Sharing a Plugin with the RPGJS Community - -## Step 1: Generate a Plugin Module - -Generate a new plugin module by running the following command in your terminal: - -```bash -npx rpgjs generate module myplugin -``` - -This will create a new directory named `myplugin` with the following structure: - -``` -myplugin - ├── client - │ └── index.ts - ├── server - │ └── index.ts - ├── index.ts - ├── config.json - └── package.json -``` - -## Step 2: Naming Your Plugin -Make sure the name of your plugin package starts with `rpgjs-`. For example, you might name your plugin `rpgjs-myplugin`. - -## Step 3: Understanding Autoload -The creation of the plugin does not utilize an autoload file, but instead, you will be required to create a module. - -## Step 4: Configuring the Plugin - -The `config.json` file at the root of your plugin directory will indicate what developers must or can put into their `rpg.toml` configuration file. You can then retrieve a configuration for server-side, client-side, or both from the module. - -Here's an example of what the `config.json` file might look like: - -```json -{ - "namespace": "myplugin", - "server": { - "type": "object", - "properties": { - "provider": { - "type": "string" - } - }, - "required": [ - "provider" - ] - }, - "client": {}, - "*": {} -} -``` - -::: tip -To write properties, use [JSON Schema](https://json-schema.org/). If you're not familiar, use an AI like ChatGPT :) - -Example: https://chat.openai.com/share/e0fbf66d-2f1f-4445-b176-3915cce1ebf2 -::: - -You can set configuration options for your plugin within the `rpg.toml` file, using the structure defined in your `config.json` file. Based on the above example, you might add the following to `rpg.toml`: - -```toml -[myplugin] - provider = '...' -``` - -In code, you can find the configuration with: [/api/RpgClientEngine.html#globalconfig](/api/RpgClientEngine.html#globalconfig). Example: - -In `myplugin/server/index.ts` -```ts -import { RpgServerEngine } from '@rpgjs/server'; -import { RpgServer, RpgModule } from '@rpgjs/server'; - -@RpgModule({ - engine: { - onStart(server: RpgServerEngine) { - console.log(server.globalConfig.myplugin.provider) - } - } - }) -export default class RpgServerModuleEngine {} -``` - - -## Step 6: Sharing with the Community - -Once you've created and tested your plugin, you can share it with the RPGJS community by publishing it to a package repository like npm. - -```bash -cd myplugin -npm publish -``` - -::: tip -Feel free to make a pull request on the RPGJS repository to share your plugin. -Or tell us about it on the forum! -::: \ No newline at end of file diff --git a/docs/advanced/event-changes.md b/docs/advanced/event-changes.md deleted file mode 100644 index 4986630e..00000000 --- a/docs/advanced/event-changes.md +++ /dev/null @@ -1,10 +0,0 @@ -# Modify an event according to an external situation - -## Prerequisites - -- [Know how to create an event and attach it to a map](/guide/create-event.html) - -## Goal - -Sometimes you have events that update themselves according to external events. Imagine the following scene: the hero presses a lever that opens a door. - diff --git a/docs/advanced/listen-param-client.md b/docs/advanced/listen-param-client.md deleted file mode 100644 index d9fa2f3a..00000000 --- a/docs/advanced/listen-param-client.md +++ /dev/null @@ -1,120 +0,0 @@ -# Create your own display on the sprite - -## Prerequisites - -You have created a spritesheet, and display the character on the map - -## Goal - -The purpose of this tutorial is to understand how to listen to the player's parameters on the server side (such as HP, currency amount, etc.) and display the data on the sprite. We will display the character's name. - -![name](/assets/name-hero.png) - -## Creation of the module - -First, we can create a module. Generate it with the following command - -`npx rpgjs generate module display-name` - -> Remember, the module is an independent feature of the game. By creating a module, you can add, remove or share a feature - -Add the module then in : - -```ts -import main from './main' -import displayName from './display-name' - -export default [ - main, - displayName -] -``` - -## Listen to parameter changes - -The following applies in the sprite, go to : - -```ts -import { RpgSprite, RpgSpriteHooks } from '@rpgjs/client' - -declare module '@rpgjs/client' { - export interface RpgSprite { - textGraphic: PIXI.Text - } -} - -export const sprite: RpgSpriteHooks = { - onInit(sprite: RpgSprite) { - const style = new PIXI.TextStyle({ - fontSize: 14, - fontWeight: 'bold' - }) - const textGraphic = new PIXI.Text('', style) - textGraphic.y = -25 - textGraphic.anchor.set(0.5) - sprite.textGraphic = textGraphic - sprite.addChild(textGraphic) - } - // Code not completed... -} -``` - -We use PIXI.js to display a text above the character. -To do this, in the `onInit` hook, when the sprite is displayed on the map, we add the text instance in `textGraphic` property - -> Remember to declare in the interface this new property (as we do in the code above) so that Typescript can understand that this property is not unknown - -Let's continue the code, but this time we'll listen to the name changes. So, if the server gives a name to the player, it will be applied directly to this sprite - -```ts -import { RpgSprite, RpgSpriteHooks } from '@rpgjs/client' - -declare module '@rpgjs/client' { - export interface RpgSprite { - textGraphic: PIXI.Text - } -} - -export const sprite: RpgSpriteHooks = { - onInit(sprite: RpgSprite) { - const style = new PIXI.TextStyle({ - fontSize: 14, - fontWeight: 'bold' - }) - const textGraphic = new PIXI.Text('', style) - textGraphic.y = -25 - textGraphic.anchor.set(0.5) - sprite.textGraphic = textGraphic - sprite.addChild(textGraphic) - }, - onChanges(sprite: RpgSprite, data: any) { - if (data && data.name) { - const name = data.name - // To center the text... - sprite.textGraphic.x = name.length + 12 - sprite.textGraphic.text = name - } - } -} -``` - -We have added the onChanges hook. It is called as soon as a property is changed. - -1. The condition verified that we had data and that the name has changed -2. We apply the name to the textGraphic property to display the name. We also try to center the name according to the size of the string - -# Apply the name on the server side - -It's up to you when and how you give the name. For example, as soon as the player arrives on the map, we can apply a name: - -: - -```ts -import { RpgPlayer, RpgPlayerHooks } from '@rpgjs/server' - -export const player: RpgPlayerHooks = { - onJoinMap(player: RpgPlayer) { - player.name = 'Hero' - } -} -``` \ No newline at end of file diff --git a/docs/advanced/spritesheet.md b/docs/advanced/spritesheet.md deleted file mode 100644 index 8e3cae4c..00000000 --- a/docs/advanced/spritesheet.md +++ /dev/null @@ -1,14 +0,0 @@ -# Create more advanced spritesheets - -## Prerequisites - -Have already created a Spritesheet - -## SpriteSheet - -![Animation Character](/assets/animation-chara.png) - -As you can see the animations are in several places on the image and there are several actions - ----- -Image Credit: [ArMM1998](https://opengameart.org/content/zelda-like-tilesets-and-sprites) \ No newline at end of file diff --git a/docs/api-gui/react.md b/docs/api-gui/react.md deleted file mode 100644 index 3cf7a957..00000000 --- a/docs/api-gui/react.md +++ /dev/null @@ -1,67 +0,0 @@ -# React Hooks - -## Introduction - -React hooks are a powerful feature in React that allow you to use state and other React features without writing a class. In the context of RPGJS, a framework for creating RPG games, React hooks can be particularly useful for managing game state and interactions. - -## 1. `useEventPropagator()` - -This hook is used to propagate events within the canvas element of your RPGJS game. - -### Importing - -```javascript -import { useEventPropagator } from '@rpgjs/client/react'; -``` - -### Usage - -```javascript -export default function Test() { - const propagate = useEventPropagator(); - - return
test
; -} -``` - -In this example, the `useEventPropagator` hook is used to create a `propagate` function. This function is then passed to a `div` element as a reference (`ref`). This setup allows events within the `div` to be propagated through the RPGJS game canvas. - ---- - -## 2. `RpgReactContext` - -This hook provides access to the RPGJS context, allowing you to interact with various game states like the current player's health points (HP). - -### Importing - -```javascript -import { RpgReactContext } from '@rpgjs/client/react'; -import { useContext, useEffect, useState } from 'react'; -``` - -### Usage - -```javascript -export default function MyGUI({ foo }) { - const { rpgCurrentPlayer } = useContext(RpgReactContext); - const [hp, setHp] = useState(0); - - useEffect(() => { - const subscription = rpgCurrentPlayer.subscribe(({ object }) => { - setHp(object.hp); - }); - - return () => { - subscription.unsubscribe(); - }; - }, []); - - return ( -
-

{hp}

-
- ); -} -``` - -In this example, `RpgReactContext` is used to access the current player's state. The `useContext` hook retrieves the `rpgCurrentPlayer` from `RpgReactContext`. We then use `useState` to manage the player's HP locally. The `useEffect` hook is used to subscribe to changes in the player's HP, updating the local state accordingly. When the component unmounts, the subscription is unsubscribed. \ No newline at end of file diff --git a/docs/api-gui/vue-directive.md b/docs/api-gui/vue-directive.md deleted file mode 100644 index 08277e42..00000000 --- a/docs/api-gui/vue-directive.md +++ /dev/null @@ -1,17 +0,0 @@ -# Directive for VueJS - -## `v-propagate` - -The `v-propagate` directive is straightforward to use. Simply add it to any element in your VueJS template to enable event propagation for that element within the RPGJS canvas. - -### Example - -```vue - -``` - -In this example, the `v-propagate` directive is attached to a `div` element. Any events that occur within this `div` will be propagated through the RPGJS game canvas. This is particularly useful for integrating VueJS-based GUI elements with the RPGJS game canvas, allowing for seamless interaction between the GUI and the game. \ No newline at end of file diff --git a/docs/api/readme.md b/docs/api/readme.md deleted file mode 100644 index 9ac3274b..00000000 --- a/docs/api/readme.md +++ /dev/null @@ -1 +0,0 @@ -API generated here \ No newline at end of file diff --git a/docs/classes/client-engine.md b/docs/classes/client-engine.md deleted file mode 100644 index 7879a8e4..00000000 --- a/docs/classes/client-engine.md +++ /dev/null @@ -1,19 +0,0 @@ -# RpgClientEngine - -## RpgEngineHooks - -```ts -import { RpgClientEngine, RpgClientEngineHooks } from '@rpgjs/client' - -const engine: RpgClientEngineHooks = { - onConnected(engine: RpgClientEngine) { - console.log('client is connected') - } -} -``` - - - -## RpgClientEngine - - \ No newline at end of file diff --git a/docs/classes/client.md b/docs/classes/client.md deleted file mode 100644 index 26d247c6..00000000 --- a/docs/classes/client.md +++ /dev/null @@ -1,23 +0,0 @@ -# RpgClient - -## RpgClient Entry Point - -You need to create a class that inherits RpgClientEngine - -```ts -import { entryPoint } from '@rpgjs/client' -import modules from './to/path/modules' -import io from 'socket.io-client' - -document.addEventListener('DOMContentLoaded', () => { - entryPoint(modules, { io }).start() -}) -``` -1. Use `entryPoint` to create an instance of `RpgClientEngine`. -2. Be sure to start the client part when the DOM is loaded. - - - -## @RpgClient decorator - - \ No newline at end of file diff --git a/docs/classes/event.md b/docs/classes/event.md deleted file mode 100644 index 9646020e..00000000 --- a/docs/classes/event.md +++ /dev/null @@ -1,174 +0,0 @@ -# RpgEvent - -## @EventData decorator - - - -## RpgEvent Hooks - -An event has hooks that will be called according to the life cycle of the event. - -Full example: - -```ts -import { RpgEvent, EventData, RpgPlayer } from '@rpgjs/server' - -@EventData({ - name: 'EV-1' -}) -export class CharaEvent extends RpgEvent { - onInit() { } - - onChanges(player: RpgPlayer) - - onAction(player: RpgPlayer) { } - - onPlayerTouch(player: RpgPlayer) { } - - onInShape(shape: RpgShape) {} - - onOutShape(shape: RpgShape) {} - - onDetectInShape(player: RpgPlayer, shape: RpgShape) {} - - onDetectOutShape(player: RpgPlayer, shape: RpgShape) {} -} -``` - -::: tip Info -Note that `RpgEvent` inherits from `RpgPlayer`, you can use all of the player's commands -::: - -### onInit() - -As soon as the event is created, this method is called - -### onChanges() - -this method is called as soon as any event on the map (including itself) is executed - -```ts -import { RpgEvent, EventData, RpgPlayer } from '@rpgjs/server' - -@EventData({ - name: 'EV-1' -}) -export class CharaEvent extends RpgEvent { - onChanges(player: RpgPlayer) { - if (player.getVariable('BATTLE_END')) { - this.graphic('chest-open') - } - else { - this.graphic('chest-close') - } - } -} -``` - -Above, as soon as the variable `BATTLE_END` is set to `true` (and this change is made by another event), then the graph of the event will change automatically - -### onAction() - -If the event collides with the player and the player presses the action key, the method is called - -### onPlayerTouch() - -If the event collides with the player, the method is called - -### onInShape() - -If the event fits into a shape - -Example: - -```ts -import { RpgEvent, EventData, RpgPlayer, ShapePositioning } from '@rpgjs/server' - -@EventData({ - name: 'EV-1' -}) -export class CharaEvent extends RpgEvent { - onInShape(shape: RpgShape) { - console.log(shape.id) - } -} -``` - -### onOutShape() - -If the event leaves a shape - -Example: - -```ts -import { RpgEvent, EventData, RpgPlayer, ShapePositioning } from '@rpgjs/server' - -@EventData({ - name: 'EV-1' -}) -export class CharaEvent extends RpgEvent { - onOutShape(shape: RpgShape) { - console.log(shape.id) - } -} -``` - -### OnDetect - -`since v4.1.0` - -If a player or another event enters the shape attached to the event, it triggers the hook. - -Example: - -```ts -import { RpgEvent, EventData, RpgPlayer, ShapePositioning } from '@rpgjs/server' - -@EventData({ - name: 'EV-1' -}) -export class CharaEvent extends RpgEvent { - onInit() { - this.attachShape({ - height: 100, - width: 100, - positioning: ShapePositioning.Center - }) - } - onDetectInShape(player: RpgPlayer, shape: RpgShape) { - console.log(player.id, shape.id) - } -} -``` - -### OnUnDetect - -`since v4.1.0` - -If a player or other event leaves the shape attached to the event, it triggers the hook. - -Example: - -```ts -import { RpgEvent, EventData, RpgPlayer, ShapePositioning } from '@rpgjs/server' - -@EventData({ - name: 'EV-1' -}) -export class CharaEvent extends RpgEvent { - onInit() { - this.attachShape({ - height: 100, - width: 100, - positioning: ShapePositioning.Center - }) - } - onDetectOutShape(player: RpgPlayer, shape: RpgShape) { - console.log(player.id, shape.id) - } -} -``` - -## RpgEvent methods - - \ No newline at end of file diff --git a/docs/classes/gui.md b/docs/classes/gui.md deleted file mode 100644 index d6e898cd..00000000 --- a/docs/classes/gui.md +++ /dev/null @@ -1,9 +0,0 @@ -# RpgGui - -## List of Prebuilt GUI - - - -## RpgGui API - - \ No newline at end of file diff --git a/docs/classes/keyboard.md b/docs/classes/keyboard.md deleted file mode 100644 index 1874ef00..00000000 --- a/docs/classes/keyboard.md +++ /dev/null @@ -1,5 +0,0 @@ -# KeyboardControls - -> You can access this instance from RpgClientEngine - - \ No newline at end of file diff --git a/docs/classes/map.md b/docs/classes/map.md deleted file mode 100644 index 536479d0..00000000 --- a/docs/classes/map.md +++ /dev/null @@ -1,34 +0,0 @@ -# RpgMap - -## @MapData decorator - - - -## RpgMap Hooks - -Full Example: - -```ts -import { MapData, RpgMap, RpgPlayer } from '@rpgjs/server' - -@MapData({ - id: 'medieval', - file: require('./tmx/town.tmx') -}) -class TownMap extends RpgMap { - // When map is loaded - onLoad() {} - - // When the player enters the map - onJoin(player: RpgPlayer) {} - - // When the player leaves the map - onLeave(player: RpgPlayer) { - super.onLeave(player) - } -} -``` - -## RpgMap methods - - \ No newline at end of file diff --git a/docs/classes/player.md b/docs/classes/player.md deleted file mode 100644 index 586e3db6..00000000 --- a/docs/classes/player.md +++ /dev/null @@ -1,17 +0,0 @@ -# RpgPlayer - -An `RpgPlayer` instance is created each time a player is connected. In an event, you often find a `player` parameter of type `RpgPlayer`. You have a series of methods to apply to the player - -```ts -import { RpgPlayer, RpgPlayerHooks } from '@rpgjs/server' - -export const player: RpgPlayerHooks = { - onConnected(player: RpgPlayer) { - // Making instructions when the player is connected - } -} -``` - -[Then put the class in the RpgServer decorator.](/classes/server.html#playerclass) - - \ No newline at end of file diff --git a/docs/classes/resource.md b/docs/classes/resource.md deleted file mode 100644 index 53a20e14..00000000 --- a/docs/classes/resource.md +++ /dev/null @@ -1,3 +0,0 @@ -# RpgResource - - \ No newline at end of file diff --git a/docs/classes/scene-map-server.md b/docs/classes/scene-map-server.md deleted file mode 100644 index e297c985..00000000 --- a/docs/classes/scene-map-server.md +++ /dev/null @@ -1,24 +0,0 @@ -# RpgSceneMap - -## Example to use (in module) - -```ts -import { RpgServer, RpgModule, RpgServerEngine } from '@rpgjs/server' - -@RpgModule({ - engine: { - onStart(engine: RpgServerEngine) { - const sceneMap = engine.sceneMap - sceneMap.createDynamicMap({ - id: 'myid', - file: require('./tmx/town.tmx') - }) - } - } -}) -export default class RpgServerModuleEngine {} -``` - -## API - - diff --git a/docs/classes/scene-map.md b/docs/classes/scene-map.md deleted file mode 100644 index f0b116e7..00000000 --- a/docs/classes/scene-map.md +++ /dev/null @@ -1,28 +0,0 @@ -# RpgScene - -## RpgScene Hooks - -[Put the created class in the RpgClient decorator](/classes/client.html#scenes) - -Example: - -```ts -import { RpgSceneMapHooks, RpgSceneMap } from '@rpgjs/client' - -const sceneMap: RpgSceneMapHooks = { - onAfterLoading(scene: RpgSceneMap) { - - } -} -``` - - - -## RpgScene - - - -## RpgSceneMap - - - diff --git a/docs/classes/server-engine.md b/docs/classes/server-engine.md deleted file mode 100644 index 88e4e362..00000000 --- a/docs/classes/server-engine.md +++ /dev/null @@ -1,25 +0,0 @@ -# RpgServerEngine - -## Example to use (in module) - -```ts -import { RpgServer, RpgModule, RpgServerEngine } from '@rpgjs/server' -import { player } from './player' // optional - -@RpgModule({ - engine: { - onStart(engine: RpgServerEngine) { - const globalConfig = engine.globalConfig - } - } -}) -export default class RpgServerModuleEngine {} -``` - -## RpgServerEngineHooks - - - -## RpgServerEngine - - \ No newline at end of file diff --git a/docs/classes/server.md b/docs/classes/server.md deleted file mode 100644 index 2ef0b363..00000000 --- a/docs/classes/server.md +++ /dev/null @@ -1,27 +0,0 @@ -# RpgServer - -## RpgServer EntryPoint - -You need to create a class that inherits RpgServerEngine - -```ts -import modules from './to/path/modules' -import { entryPoint } from '@rpgjs/server' - -const rpgGame = entryPoint(modules, { - io, // io is socket.io instance - basePath: __dirname -}) - -rpgGame.start() -``` -1. Put the `modules` in the entry point with entryPoint. You need to put the socket.io instance and the project path (to find the maps) -2. the function returns an instance of `RpgServerEngine`. As soon as your server is ready (listening on the port, etc.), start the RPG server. - -## Entry Point properties - - - -## @RpgModule< RpgServer > decorator - - \ No newline at end of file diff --git a/docs/classes/shape.md b/docs/classes/shape.md deleted file mode 100644 index e0ed1d14..00000000 --- a/docs/classes/shape.md +++ /dev/null @@ -1,5 +0,0 @@ -# RpgShape - -On this page you can see how to use the shapes: [Shape Guide](/guide/create-shape.html) - - \ No newline at end of file diff --git a/docs/classes/sound.md b/docs/classes/sound.md deleted file mode 100644 index ea26a6bc..00000000 --- a/docs/classes/sound.md +++ /dev/null @@ -1,53 +0,0 @@ -# RpgSound - -1. You have to create a sound with the `Sound` decorator -2. You can then use the sound when starting a amp, an animation or any action - -## Sound Decorator - -Example: - -```ts -import { Sound } from '@rpgjs/client' - -@Sound({ - id: 'town-music', - sound: require('./sound/town.ogg') -}) -export class TownMusic {} -``` - -[Put the created class in the RpgClient decorator](/classes/client.html#rpgclient-decorator) - -### Properties - - - -## Use RpgSound - -Use the RpgSound class to edit the sound: - -```ts -import { RpgSound } from '@rpgjs/client' - -RpgSound.get('town-music').play() -``` - -All sound methods come from the HowlerJS library: - -[https://github.com/goldfire/howler.js#methods](https://github.com/goldfire/howler.js#methods) - -## Global Sound - -You can globally manage all the sounds. For example, decrease the volume globally - -```ts -import { RpgSound } from '@rpgjs/client' - -RpgSound.global.volume(0.2) -``` - -All sound methods come from the HowlerJS library: - -[https://github.com/goldfire/howler.js#global-methods](https://github.com/goldfire/howler.js#global-methods) - diff --git a/docs/classes/sprite.md b/docs/classes/sprite.md deleted file mode 100644 index e67baf89..00000000 --- a/docs/classes/sprite.md +++ /dev/null @@ -1,30 +0,0 @@ -# RpgSprite - -Each time an event or player appears on the map, an `RpgSprite` is called. It contains the graphics of the player but also a container to put tiles of the map on top of the sprite (for overlay). Don't pay attention to this system, it is part of the RpgJS engine. - -However, `RpgSprite` inherits from [PIXI.Sprite](https://pixijs.download/dev/docs/PIXI.Sprite.html). This way, you can add other containers, etc. This way, you can add other containers, etc. - -[Put the created class in the RpgClient decorator](/classes/client.html#rpgclient-decorator) - -## Hooks - -```ts -import { RpgSprite, RpgSpriteHooks } from '@rpgjs/client' - -const sprite: RpgSpriteHooks = { - onInit(sprite: RpgSprite) { - - } -} -``` - - - -## RpgSprite - - - -## RpgSpriteLogic - - - diff --git a/docs/classes/spritesheet.md b/docs/classes/spritesheet.md deleted file mode 100644 index 5992b280..00000000 --- a/docs/classes/spritesheet.md +++ /dev/null @@ -1,93 +0,0 @@ -# SpriteSheet Decorator - -## Example SpriteSheet - -![Animation](/assets/animation.png) - -```ts -import { Spritesheet } from '@rpgjs/client' - -const to = () => { - const array: any = [] - let k = 0 - const durationFrame = 5 - for (let i=0 ; i < 4 ; i++) { - for (let j=0 ; j < 5 ; j++) { - array.push({ time: k * durationFrame, frameX: j, frameY: i }) - k++ - } - } - // This last beat allows the last frame to be played, otherwise the animation ends abruptly at the last frame. This can be considered as the total animation time. - array.push({ time: k * durationFrame }) - return array -} - -@Spritesheet({ - id: 'shield', - image: require('./assets/animation.png'), - framesWidth: 5, - framesHeight: 4, - width: 960, - height: 768, - opacity: 1, - anchor: [0.5], - textures: { - default: { - /* - animations: [ - [ - { time: 0, frameX: 0, frameY: 0 }, - { time: 5, frameX: 1, frameY: 0 } , - { time: 10, frameX: 2, frameY: 0 } , - { time: 15, frameX: 3, frameY: 0 } - // etc... - ] - ] - */ - animations: [ to() ] - } - } -}) -export class ShieldAnimations {} -``` - -You can call the animation - -### Client Side - -On the scene - -```ts -import { RpgSceneMapHooks, RpgSceneMap } from '@rpgjs/client' - -export const sceneMap: RpgSceneMapHooks = { - onAfterLoading(scene: RpgSceneMap) { - scene.showAnimation({ - graphic: 'shield', - animationName: 'default', - attachTo: scene.getCurrentPlayer() - }) - } -} -``` - -[Show Animation method](/classes/scene-map.html#rpgscene) - -### Server Side - -Use the `showAnimation()` command: - -```ts -player.showAnimation('shield', 'default') -``` - -it will display the animation on the player and will be visible to all other players - - -## Properties - - - -## Create Animation with Timeline system - - \ No newline at end of file diff --git a/docs/classes/tests.md b/docs/classes/tests.md deleted file mode 100644 index 382ad781..00000000 --- a/docs/classes/tests.md +++ /dev/null @@ -1,11 +0,0 @@ -# Unit Tests API - -> The unit tests are based on Vitest, please read the [guide to install and run the tests](/guide/unit-test). - -## Testing API - - - -## Fixture API - - \ No newline at end of file diff --git a/docs/classes/vue-inject.md b/docs/classes/vue-inject.md deleted file mode 100644 index c7f06b32..00000000 --- a/docs/classes/vue-inject.md +++ /dev/null @@ -1,11 +0,0 @@ -# Injections in VueJS - -## To know - -Below is the list of services that can be injected in a View component - -Read the guide "[Create GUI](/guide/create-gui.html)" to learn more about the use of injections - -## Services - - \ No newline at end of file diff --git a/docs/classes/world-maps.md b/docs/classes/world-maps.md deleted file mode 100644 index be1c752b..00000000 --- a/docs/classes/world-maps.md +++ /dev/null @@ -1,3 +0,0 @@ -# RpgWorldMaps - - \ No newline at end of file diff --git a/docs/classes/world.md b/docs/classes/world.md deleted file mode 100644 index 886cf027..00000000 --- a/docs/classes/world.md +++ /dev/null @@ -1,43 +0,0 @@ -# RpgWorld - -Finding players can be interesting to carry out commands on a group of players. The other interest is to use the `RpgWord` module in an `ExpressJS` or other server. - -Example with ExpressJS (in `src/server/rpg.ts`). We recover all the players of the game - -```ts -import http from 'http' -import express from 'express' -import { Server } from 'socket.io' -import { RpgWorld } from '@rpgjs/server' - -const app = express() -const server = http.createServer(app) - -app.get('/players', (req, res) => { - const players = RpgWorld.getPlayers() - res.json(players) -}) - -// .... -``` - -Example in an event - -```ts -import { RpgEvent, EventData, RpgPlayer, RpgWorld } from '@rpgjs/server' - -@EventData({ - name: 'EV-1' -}) -export class CharaEvent extends RpgEvent { - onAction(player: RpgPlayer) { - const map = player.getCurrentMap() - const players = RpgWorld.getPlayersOfMap(map.id) - players.forEach(player => player.hp -= 100) - } -} -``` - -## API - - \ No newline at end of file diff --git a/docs/commands/battle.md b/docs/commands/battle.md deleted file mode 100644 index 42b65c35..00000000 --- a/docs/commands/battle.md +++ /dev/null @@ -1,3 +0,0 @@ -# Battle Commands - - \ No newline at end of file diff --git a/docs/commands/class.md b/docs/commands/class.md deleted file mode 100644 index 8841f548..00000000 --- a/docs/commands/class.md +++ /dev/null @@ -1,3 +0,0 @@ -# Class/Actor Commands - - \ No newline at end of file diff --git a/docs/commands/common.md b/docs/commands/common.md deleted file mode 100644 index 8605b5d8..00000000 --- a/docs/commands/common.md +++ /dev/null @@ -1,3 +0,0 @@ -# Common Commands - - \ No newline at end of file diff --git a/docs/commands/components.md b/docs/commands/components.md deleted file mode 100644 index e6011a09..00000000 --- a/docs/commands/components.md +++ /dev/null @@ -1,37 +0,0 @@ -# Components - -The aim is to add components around the graphic: a text, a life bar, etc. This way, the server always has authority over the display and all data is synchronised to all players in real time - -Example of use: - -![hpbar](/assets/hpbar.png) - -```ts -import { RpgPlayer, RpgPlayerHooks, Components } from '@rpgjs/server' - -export const player: RpgPlayerHooks = { - onConnected(player: RpgPlayer) { - player.name = 'Sam' - player.setComponentsTop([ - Components.text('{name}'), - Components.hpBar() - ]) - } -} -``` - -The `onConnected` hook takes a player object of type `RpgPlayer` as its argument. Inside the `onConnected` hook, the `setComponentsTop` method of the `player` object is called with an array of two `Components`: - -`Components.text('{name}')`: This creates a text component that displays the name of the player. The {name} placeholder is replaced with the actual name of the player. - -`Components.hpBar()`: This creates a health bar component that displays the current and maximum health of the player. - -The `setComponentsTop `method is used to set the components that are displayed at the top of the player's screen. By setting the text and health bar components at the top, the player can easily see their name and health status while playing the game. - -## Player API - - - -## Built-in Components - - \ No newline at end of file diff --git a/docs/commands/effect.md b/docs/commands/effect.md deleted file mode 100644 index 108262d5..00000000 --- a/docs/commands/effect.md +++ /dev/null @@ -1,3 +0,0 @@ -# Effect Commands - - \ No newline at end of file diff --git a/docs/commands/element.md b/docs/commands/element.md deleted file mode 100644 index 33a11747..00000000 --- a/docs/commands/element.md +++ /dev/null @@ -1,3 +0,0 @@ -# Elements Commands - - \ No newline at end of file diff --git a/docs/commands/gold.md b/docs/commands/gold.md deleted file mode 100644 index 2ff2a42d..00000000 --- a/docs/commands/gold.md +++ /dev/null @@ -1,3 +0,0 @@ -# Gold Commands - - \ No newline at end of file diff --git a/docs/commands/gui.md b/docs/commands/gui.md deleted file mode 100644 index 92037b3c..00000000 --- a/docs/commands/gui.md +++ /dev/null @@ -1,3 +0,0 @@ -# Prebuilt GUI - - \ No newline at end of file diff --git a/docs/commands/item.md b/docs/commands/item.md deleted file mode 100644 index d7d658df..00000000 --- a/docs/commands/item.md +++ /dev/null @@ -1,3 +0,0 @@ -# Items Commands - - \ No newline at end of file diff --git a/docs/commands/move.md b/docs/commands/move.md deleted file mode 100644 index 8163de2b..00000000 --- a/docs/commands/move.md +++ /dev/null @@ -1,11 +0,0 @@ -## Movement Commands - - - -### Movements List - -All the movements below can be used in the `moveRoutes()` array. - - - -> The movement in number of pixels depends on the speed of the player. \ No newline at end of file diff --git a/docs/commands/parameter.md b/docs/commands/parameter.md deleted file mode 100644 index 62f78d6b..00000000 --- a/docs/commands/parameter.md +++ /dev/null @@ -1,3 +0,0 @@ -# Parameters Commands - - \ No newline at end of file diff --git a/docs/commands/skill.md b/docs/commands/skill.md deleted file mode 100644 index 2e2f0338..00000000 --- a/docs/commands/skill.md +++ /dev/null @@ -1,3 +0,0 @@ -# Skills Commands - - \ No newline at end of file diff --git a/docs/commands/state.md b/docs/commands/state.md deleted file mode 100644 index e483b975..00000000 --- a/docs/commands/state.md +++ /dev/null @@ -1,3 +0,0 @@ -# States Commands - - \ No newline at end of file diff --git a/docs/commands/variable.md b/docs/commands/variable.md deleted file mode 100644 index e58c9a07..00000000 --- a/docs/commands/variable.md +++ /dev/null @@ -1,3 +0,0 @@ -# Variable Commands - - \ No newline at end of file diff --git a/docs/database/actor.md b/docs/database/actor.md deleted file mode 100644 index 1e93e916..00000000 --- a/docs/database/actor.md +++ /dev/null @@ -1,43 +0,0 @@ -# Actors - - - -## Full Actor - -```ts -import { RpgPlayer, Presets } from '@rpgjs/server' -import { Fighter } from 'my-database/classes/fighter' // Remember to put a correct import -import { Actor } from '@rpgjs/database' - -const { MAXHP } = Presets - -@Actor({ - name: 'Hero', - description: 'A great fighter!', - initialLevel: 1, - finalLevel: 99, - expCurve: { - basis: 30, - extra: 20, - accelerationA: 30, - accelerationB: 30 - }, - parameters: { - [MAXHP]: { - start: 700, - end: 10000 - } - }, - startingEquipment: [], - class: Fighter -}) -export class Hero { - onSet(player: RpgPlayer) { - - } -} -``` - -## API - - \ No newline at end of file diff --git a/docs/database/armor.md b/docs/database/armor.md deleted file mode 100644 index a559ec7e..00000000 --- a/docs/database/armor.md +++ /dev/null @@ -1,43 +0,0 @@ -# Armors - - - -## Full Armor - -```ts -import { RpgPlayer } from '@rpgjs/server' -import { Armor } from '@rpgjs/database' - -@Armor({ - name: 'Shield', - description: 'Gives a little defense', - price: 4000, - pdef: 2000, - sdef: 1000, - addStates: [], - removeStates: [], - elements: [], - effects: [], - params: {}, - paramsModifier: {}, - statesDefense: [], - elementsDefense: [] -}) -export class Shield { - onAdd(player: RpgPlayer) { - - } - - onEquip(player: RpgPlayer, equip: boolean) { - - } - - onRemove(player: RpgPlayer) { - - } -} -``` - -## API - - \ No newline at end of file diff --git a/docs/database/class.md b/docs/database/class.md deleted file mode 100644 index eec37bda..00000000 --- a/docs/database/class.md +++ /dev/null @@ -1,30 +0,0 @@ -# Classes - - - -## Full Class - -```ts -import { RpgPlayer } from '@rpgjs/server' -import { Class } from '@rpgjs/database' -import type { ClassOnSet, ClassCanEquip, WeaponInstance, ArmorInstance } from '@rpgjs/database' - -@Class({ - name: 'Fighter', - description: 'A great fighter!', - skillsToLearn: [], - statesEfficiency: [], - elementsEfficiency: [] -}) -export class Fighter implements ClassOnSet, ClassCanEquip { - // Called when the class is assigned to the player - onSet(player: RpgPlayer): void { } - - // Return true if the player can equip the item - canEquip(item: WeaponInstance | ArmorInstance, player: RpgPlayer): boolean { } -} -``` - -## API - - \ No newline at end of file diff --git a/docs/database/effect.md b/docs/database/effect.md deleted file mode 100644 index aedf6806..00000000 --- a/docs/database/effect.md +++ /dev/null @@ -1,9 +0,0 @@ -# Effects - -The effects make it possible to change the combat (or other) situation. Effects are just labels - - - -## Create Custom Effect - - \ No newline at end of file diff --git a/docs/database/element.md b/docs/database/element.md deleted file mode 100644 index 0b41575c..00000000 --- a/docs/database/element.md +++ /dev/null @@ -1,15 +0,0 @@ -# Elements - -The elements allow you to vary the damage on another player - -Create a file named `elements.ts`: - -```ts -export enum Elements { - Fire = 'fire', - Water = 'water', - Ice = 'ice' -} -``` - -> We give a string for each element because it will be easier to recognize the element on the client side. \ No newline at end of file diff --git a/docs/database/item.md b/docs/database/item.md deleted file mode 100644 index ba2b84ab..00000000 --- a/docs/database/item.md +++ /dev/null @@ -1,45 +0,0 @@ -# Items - - - -## Example of full item: - -```ts -import { RpgPlayer } from '@rpgjs/server' -import { Item } from '@rpgjs/database' - -@Item({ - name: 'Potion', - description: 'Gives 100 HP', - price: 200, - hpValue: 100, - hitRate: 1, - consumable: true, - addStates: [], - removeStates: [], - elements: [], - effects: [], - paramsModifier: {} -}) -export class Potion { - onAdd(player: RpgPlayer) { - - } - - onUse(player: RpgPlayer) { - - } - - onUseFailed(player: RpgPlayer) { - - } - - onRemove(player: RpgPlayer) { - - } -} -``` - -## API - - \ No newline at end of file diff --git a/docs/database/skill.md b/docs/database/skill.md deleted file mode 100644 index 4ab59ccd..00000000 --- a/docs/database/skill.md +++ /dev/null @@ -1,40 +0,0 @@ -# Skills - - - -## Full Skill - -```ts -import { RpgPlayer } from '@rpgjs/server' -import { Skill } from '@rpgjs/database' - -@Skill({ - name: 'Fire', - description: 'Shoots a ball of fire', - spCost: 10, - power: 100, - variance: 10, - hitRate: 1, - addStates: [], - removeStates: [], - elements: [], - coefficient: {} -}) -export class Fire { - onLearn(player: RpgPlayer) { - - } - - onUse(player: RpgPlayer) { - - } - - onForget(player: RpgPlayer) { - - } -} -``` - -## API - - \ No newline at end of file diff --git a/docs/database/state.md b/docs/database/state.md deleted file mode 100644 index fa254983..00000000 --- a/docs/database/state.md +++ /dev/null @@ -1,28 +0,0 @@ -# States - -## Prerequisites - - - -## Example of full state: - -```ts -import { RpgPlayer } from '@rpgjs/server' -import { State } from '@rpgjs/database' - -@State({ - name: 'Paralyse', - description: 'The player is paralyzed', - effects: [], - paramsModifier: [], - statesEfficiency: [], - elementsEfficiency: [] -}) -export class Paralyse { - -} -``` - -## API - - \ No newline at end of file diff --git a/docs/database/weapon.md b/docs/database/weapon.md deleted file mode 100644 index 1c14ccd5..00000000 --- a/docs/database/weapon.md +++ /dev/null @@ -1,48 +0,0 @@ -# Weapons - - - -## Example of full weapon: - -```ts -import { RpgPlayer } from '@rpgjs/server' -import { Weapon } from '@rpgjs/database' - -@Weapon({ - name: 'Sword', - description: 'Gives 100 HP', - price: 2000, - atk: 10, - pdef: 10, - sdef: 10, - addStates: [], - removeStates: [], - elements: [], - effects: [], - params: { - maxhp - }, - paramsModifier: { - - }, - statesDefense: [], - elementsDefense: [] -}) -export class Sword { - onAdd(player: RpgPlayer) { - - } - - onEquip(player: RpgPlayer, equip: boolean) { - - } - - onRemove(player: RpgPlayer) { - - } -} -``` - -## API - - \ No newline at end of file diff --git a/docs/demo.png b/docs/demo.png deleted file mode 100644 index b69a21dc..00000000 Binary files a/docs/demo.png and /dev/null differ diff --git a/docs/extract.js b/docs/extract.js deleted file mode 100644 index d7c36320..00000000 --- a/docs/extract.js +++ /dev/null @@ -1,291 +0,0 @@ -const { parse } = require('comment-parser') -const fs = require('fs') -const { compareVersions } = require("compare-versions") - -const baseUrl = __dirname + '/../' -const destination = __dirname + '/api/' -const changelog = __dirname + '/others/' - -const open = function(path) { - return fs - .readdirSync(baseUrl + path) - .map(file => `${baseUrl}${path}/${file}`) - .filter(file => { - const isDir = fs.lstatSync(file).isDirectory() - return !isDir - }) -} - -const files = [ - ...open('packages/database/src'), - ...open('packages/database/src/interfaces'), - ...open('packages/server/src/Player'), - ...open('packages/common/src'), - ...open('packages/server/src'), - ...open('packages/server/src/decorators'), - ...open('packages/server/src/Scenes'), - ...open('packages/server/src/Game'), - ...open('packages/client/src/Sprite'), - ...open('packages/client/src/Sound'), - ...open('packages/client/src/Scene'), - ...open('packages/client/src/Effects'), - ...open('packages/client/src/Gui'), - ...open('packages/client/src'), - ...open('packages/tiled/src/classes'), - ...open('packages/common/src/gui'), - ...open('packages/testing/src'), - ...open('packages/plugins/title-screen') -] - -const types = [ - [ 'Effect', '/database/effect.html' ], - [ 'Element', '/database/element.html' ], - [ 'StateClass', '/database/state.html' ], - [ 'ItemClass', '/database/item.html' ], - [ 'SkillClass', '/database/skill.html' ], - [ 'WeaponClass', '/database/weapon.html' ], - [ 'ArmorClass', '/database/armor.html' ], - [ 'ActorClass', '/database/actor.html' ], - [ 'ClassClass', '/database/class.html' ], - [ 'Move', '/commands/move.html#move' ], - [ 'RpgPlayer', '/commands/common.html' ], - [ 'RpgMap', '/classes/map.html' ], - [ 'RpgEvent', '/classes/event.html' ], - [ 'RpgServerEngine', '/classes/server-engine.html' ], - [ 'RpgServer', '/classes/server.html' ], - [ 'RpgClientEngine', '/classes/client-engine.html#rpgclientengine' ], - [ 'RpgClient', '/classes/client.html' ], - [ 'RpgSprite', '/classes/sprite.html' ], - [ 'RpgGui', '/classes/gui.html' ], - [ 'RpgSceneMap', '/classes/scene-map.html' ], - [ 'RpgScene', '/classes/scene-map.html' ], - [ 'Sound', '/classes/sound.html' ], - [ 'RpgShape', '/classes/shape.html' ], - [ 'RpgWorldMaps', '/classes/world-maps.html' ], - [ - 'Timeline', - '/classes/spritesheet.html#create-animation-with-timeline-system' - ], - [ 'SpriteSheet', '/classes/spritesheet.html' ], - [ - 'PIXI.Container', - 'https://pixijs.download/dev/docs/PIXI.Container.html' - ], - [ - 'PIXI.Sprite', - 'https://pixijs.download/dev/docs/PIXI.Sprite.html' - ], - [ 'PIXI.Viewport', 'https://github.com/davidfig/pixi-viewport' ], - [ 'Observable', 'https://rxjs.dev/guide/observable.html' ], - [ 'KeyboardControls', '/classes/keyboard.html' ] - ] - -function toLink(type) { - type = type.replace(/>/g, '>') - type = type.replace(/](${list}))|(^${list})`, 'g') - type = type.replace(regexp, ` ${list}`) - } - - return `` -} - -function createSummary(summary) { - let text = '::: tip Summary\n' - for (let title of summary) { - if (!title) continue - text += `- [${title}](#${title.toLowerCase().trim().replace(/[ \/]/g, '-')})\n` - } - text += ':::' - return text -} - -function removeLeadingNewlines(text) { - // Find the first position of a non-newline character - let firstNonNewlineChar = 0; - while (firstNonNewlineChar < text.length && text[firstNonNewlineChar] === '\n') { - firstNonNewlineChar++; - } - - // Extract the text from the first non-newline position - return text.substring(firstNonNewlineChar); -} - -let md = {} -let summary = {} -let byVersion = {} -for (let file of files) { - const code = fs.readFileSync(file, 'utf-8') - const comments = parse(code, { - trim: false, - spacing: 'preserve' - }) - - for (let comment of comments) { - const { tags, description } = comment - const tag = name => tags.find(tag => tag.tag == name) - const memberofs = tags.filter(tag => tag.tag == 'memberof') - const enums = tags.filter(tag => tag.tag == 'enum') - const version = tag('since')?.name - if (!byVersion[version]) byVersion[version] = ` -## Version ${version} - -` - for (let memberof of memberofs) { - if (!md[memberof.name]) md[memberof.name] = '' - md[memberof.name] += ` ---- -` - const title = tag('title') ? `${tag('title').name} ${tag('title').description}` : tag('prop')?.name - if (!summary[memberof.name]) summary[memberof.name] = [] - summary[memberof.name].push(title) - - byVersion[version] += `- [${title}](/api/${memberof.name}.html): ${description}` - -md[memberof.name] += -`### ${title}` - - if (tag('todo')) { - md[memberof.name] += ` -::: warning -The realization of this property or method has not been completed. -::: -` - } - - const stability = tag('stability') - - if (stability) { - switch (+stability.name) { - case 0: - md[memberof.name] += ` -::: danger -Stability: 0 - Deprecated -This feature is known to be problematic, and changes are -planned. Do not rely on it. Use of the feature may cause warnings. Backwards -compatibility should not be expected. -::: -` - break; - case 1: - md[memberof.name] += ` -::: warning -Stability: 1 - Experimental -This feature is subject to change, and is gated by a command line flag. -It may change or be removed in future versions. -::: - ` - break; - } - } - - if (tag('since')) { - md[memberof.name] += ` -- **Since**: ${tag('since').name}` - } - - for (let _enum of enums) { - md[memberof.name] += ` -- **Enum**: \`${_enum.type}\` ${_enum.name} - -| Tag | Description | -| ------------- |------------:|` - const description = removeLeadingNewlines(_enum.description) - const lines = description.split('\n') - for (let line of lines) { - md[memberof.name] += ` -| ${line} |` - } - } - - if (tag('prop')) { - md[memberof.name] += -` -- **Property**: \`${tag('prop').name}\` -- **Type**: ${toLink(tag('prop').type)} -- **Optional**: \`${tag('prop').optional}\`` - } - - if (tag('readonly')) { - md[memberof.name] += -` -- **Read Only**` - } - - if (tag('method')) { - md[memberof.name] += -` -- **Method**: \`${tag('method').name}\`` - } - - if (tag('param')) { - md[memberof.name] += -` -- **Arguments**:` - for(let tag of tags) { - if (tag.tag != 'param') continue - md[memberof.name] += -` - - {${toLink(tag.type)}} \`${tag.name}\`. ${tag.description} (Optional: \`${tag.optional}\`)` - } - } - - if (tag('throws')) { - md[memberof.name] += -` -- **Throws**: -` - for(let tag of tags) { - if (tag.tag != 'throws') continue - md[memberof.name] += -` -${tag.description} ----` - } - } - - if (tag('returns')) { -md[memberof.name] += ` -- **Return**: ${toLink(tag('returns').type)} ${tag('returns').description}` - } - - if (tag('example')) { - md[memberof.name] += ` -- **Example**: ${tag('example').name} -${tag('example').description}` - } - - if (tag('default')) { - md[memberof.name] += ` -- **Default**: \`${tag('default').name}\`` - } - md[memberof.name] += -` -- **Usage**: - -${description} -` - - - } - } -} - -for (let key in md) { - const text = createSummary(summary[key]) + md[key] - fs.writeFileSync(destination + key + '.md', text, 'utf-8') -} - -let textVersion = `# AI ChangeLog -` - -textVersion += Object.keys(byVersion) - .filter(v => v !== 'undefined') - .sort((a, b) => compareVersions(b, a)) - .reduce((prevStr, currentStr) => { - const content = byVersion[currentStr] - return prevStr + content - }, '') - -fs.writeFileSync(changelog + 'changelog.md', textVersion, 'utf-8') \ No newline at end of file diff --git a/docs/functions/inject.md b/docs/functions/inject.md deleted file mode 100644 index 8357e917..00000000 --- a/docs/functions/inject.md +++ /dev/null @@ -1,40 +0,0 @@ -# Using `inject` in RPGJS - -The `inject` function in RPGJS is a powerful feature for dependency injection, allowing you to retrieve instances of various classes in both client and server environments. - -## Client-Side Injection - -To use `inject` on the client side, import it from `@rpgjs/client`. This allows you to retrieve singleton instances of classes such as `RpgClientEngine`, `KeyboardControls`, and `RpgRenderer`. - -### Retrieving the `RpgClientEngine` - -```typescript -import { inject, RpgClientEngine } from '@rpgjs/client' - -const client = inject(RpgClientEngine) -``` - -This code imports `inject` and `RpgClientEngine` from `@rpgjs/client` and then uses `inject` to retrieve the `RpgClientEngine` instance. - -### Injecting Other Classes - -Similarly, you can inject other classes like `KeyboardControls` and `RpgRenderer`: - -```typescript -import { inject, KeyboardControls, RpgRenderer } from '@rpgjs/client' - -const controls = inject(KeyboardControls) -const renderer = inject(RpgRenderer) -``` - -## Server-Side Injection - -For server-side injection, import `inject` from `@rpgjs/server`. This is typically used to retrieve the `RpgServerEngine`. - -### Retrieving the `RpgServerEngine` - -```typescript -import { inject, RpgServerEngine } from '@rpgjs/server' - -const server = inject(RpgServerEngine) -``` \ No newline at end of file diff --git a/docs/gui/_trigger-tooltip.md b/docs/gui/_trigger-tooltip.md deleted file mode 100644 index 6ba6d37a..00000000 --- a/docs/gui/_trigger-tooltip.md +++ /dev/null @@ -1,122 +0,0 @@ -## Trigger the GUI - -You have either the client side solution or the server side solution. - -- Advantage on the client side: instantaneous, no communication with the server -- Disadvantage: the server does not have the authority and cannot trigger it for all players at once - -On the server side, it's the opposite :) - -### Client Side - -1. you must open the menu, as usual (here, named `my-tooltip`) - -```ts -RpgGui.display('my-tooltip') -``` - -You can open it whenever you want, for example, after loading a map - -
- -```ts -import { RpgClient, RpgModule, RpgGui } from '@rpgjs/client' -import myTooltip from './gui/tooltip.vue' -import sprite from './sprite' - -@RpgModule({ - scenes: { - map: { - onAfterLoading() { - RpgGui.display('my-tooltip') - } - } - }, - sprite, - gui: [ - myTooltip - ] -}) -export default class RpgClientModuleEngine {} -``` - - - -```ts -import { RpgSprite, RpgSpriteHooks } from '@rpgjs/client' - -export const sprite: RpgSpriteHooks = { - onInit(sprite: RpgSprite) { - sprite.interactive = true - sprite.on('click', () => { - sprite.guiDisplay = !sprite.guiDisplay - }) - } -} -``` - -
- -
- - - -```ts -import {RpgGui } from '@rpgjs/client' - -export default { - onAfterLoading() { - RpgGui.display('my-tooltip') - } -} -``` - -2. Then you can trigger the opening on the sprite - - - -```ts -import { RpgSprite, RpgSpriteHooks } from '@rpgjs/client' - -export const sprite: RpgSpriteHooks = { - onInit(sprite: RpgSprite) { - sprite.interactive = true - sprite.on('click', () => { - sprite.guiDisplay = !sprite.guiDisplay - }) - } -} -``` - -Clicking on the sprite opens (or closes) the tooltip - -
- - -## Server Side - -> Even if we are on the server side, remember to add the GUI in the client side module - - - -```ts -import { RpgPlayer, RpgPlayerHooks } from '@rpgjs/server' - -export const player: RpgPlayerHooks = { - onJoinMap(player: RpgPlayer) { - player.gui('my-tooltip').open() - player.showAttachedGui() - // you can hide with player.hideAttachedGui() - } -} -``` - -We open the `my-tooltip` GUI and display the player's tooltip - -:::tip Tip -You can indicate which tooltips you want to display by specifying the events (or players) in parameter: - -```ts -player.showAttachedGui([otherEvent, otherPlayer]) -``` -::: \ No newline at end of file diff --git a/docs/gui/create-menu.md b/docs/gui/create-menu.md deleted file mode 100644 index 33b52574..00000000 --- a/docs/gui/create-menu.md +++ /dev/null @@ -1,5 +0,0 @@ -# Creating a menu - -## Goal - -The goal is to create an "Inn" menu. By paying a certain amount, the player will get back all his health points. \ No newline at end of file diff --git a/docs/gui/notification-gui.md b/docs/gui/notification-gui.md deleted file mode 100644 index 427b0d06..00000000 --- a/docs/gui/notification-gui.md +++ /dev/null @@ -1,60 +0,0 @@ -# Display a notification - -## Prerequisites - -You must have a menu installed on your project (or you must create it yourself) -To install default menu: - -`npx rpgjs add @rpgjs/default-gui` - -## Use Notification - -You have two ways to display a notification: - -- The message property is the message that will be displayed in the notification. -- The time property is the time in milliseconds that the notification will be displayed. -- The icon property is the icon that will be displayed in the notification. [Remember to create the client-side spritesheet before](/guide/create-sprite.html) -- The sound property is the sound that will be played when the notification is displayed. [Remember to create the client-side sound before](/guide/create-sound.html). If you don't want to put any sound, put the `null` value - -### Client Side - -Use `RpgGui`: - -```ts -import { RpgGui, PrebuiltGui } from '@rpgjs/client' - -RpgGui.display(PrebuiltGui.Notification, { - message: 'You have unlocked the secret passage', - time: 2000, - icon: 'icon_id', - sound: 'sound_id' -}) -``` - -[RpgGui API](/classes/gui.html) - -### Server Side - -Use `player.showNotification()`: - -```ts -player.showNotification('You have unlocked the secret passage', { - time: 2000, - icon: 'icon_id', - sound: 'sound_id' -}) -``` - -[player.showNotification()](/commands/gui.html#displays-a-notification) - -## Custom Notification UI - -Go to file and add notification SCSS variables - -Example: - -```scss -$notification-background-color: rgba(0, 0, 0, 0.7); -$notification-font-color: white; -$notification-font-family: 'lato'; -``` \ No newline at end of file diff --git a/docs/gui/react-app.md b/docs/gui/react-app.md deleted file mode 100644 index 79da9301..00000000 --- a/docs/gui/react-app.md +++ /dev/null @@ -1,90 +0,0 @@ -# Integrating RpgGame Component into a React App - -This guide provides step-by-step instructions on how to insert an `RpgGame` component into a React application using ViteJS. - -## Prerequisites - -Ensure that you have a React application set up with ViteJS. Your `package.json` should include the following scripts: - -```json -"scripts": { - "dev": "rpgjs dev", - "build": "rpgjs build" -} -``` - -## Step 1: Create the Game Directory - -Create a new directory within your source folder: - -``` -src/game -``` - -## Step 2: Configure RPG Module - -In your `rpg.toml` file, set the module root and disable autostart: - -```toml -modulesRoot = './src/game' -autostart = false -``` - -> The `autostart` option prevents the engine from automatically searching for a div with the id `#rpg`. Instead, it will use the React component. - -## Step 3: Import RpgGame Component - -Import the `RpgGame` component from the RPGJS client package for React: - -```javascript -import { RpgGame } from '@rpgjs/client/react'; -``` - -## Step 4: Utilize RpgGame Component - -Implement the `RpgGame` component with an `onReady` function: - -```jsx -const onReady = ({ server, client }) => { - // server is an instance of RpgServerEngine or null - // client is an instance of RpgClientEngine -}; - - -``` - -In MMORPG mode, `server` will be null. In RPG mode, you can access both client and server sides. - -## Step 5: Advanced Configuration - -To add modules via the React app, use the following setup: - -```javascript -const [modules, setModules] = useState([ - { - server: { - player: { - onConnected(player) { - player.setHitbox(24, 24); - player.speed = 4; - player.setGraphic('hero'); - } - } - }, - client: { - engine: { - onStart() { - console.log('started') - } - } - } - } -]); - - -``` - -> In MMORPG mode, you only have access to the client API. diff --git a/docs/gui/react-tooltip.md b/docs/gui/react-tooltip.md deleted file mode 100644 index ca5436e6..00000000 --- a/docs/gui/react-tooltip.md +++ /dev/null @@ -1,35 +0,0 @@ -# Create a GUI attached to a sprite - -## Prerequisites - -- Know how to create a GUI and add it in the module -- Be comfortable with React -- Since v4.1.0 - -::: warning -**Experimental Feature**: This feature is still in its experimental stage and may not be stable. -::: - -## Example - -This is very useful to make more advanced interactions on a sprite. For example, display a tooltip or additional interactive displays. - -