add front-end

app/.gitignore

@@ -0,0 +1,23 @@
+# Nuxt dev/build outputs
+.output
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

app/README.md

@@ -0,0 +1,63 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app/app.vue

@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>

app/assets/styles/index.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

app/nuxt.config.ts

@@ -0,0 +1,11 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  css: ['@/assets/styles/index.scss'],
+  devtools: { enabled: true },
+  postcss: {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  },
+});

app/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@freeblox/app",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "latest",
+    "@nuxt/schema": "^3.5.3",
+    "@types/node": "^18.0.0",
+    "autoprefixer": "^10.4.14",
+    "nuxi": "^3.5.3",
+    "nuxt": "^3.5.2",
+    "postcss": "^8.4.24",
+    "sass": "^1.62.1",
+    "tailwindcss": "^3.3.2",
+    "typescript": "^5.1.3",
+    "vue-tsc": "^1.4.2"
+  },
+  "dependencies": {
+    "@freeblox/client": "workspace:^",
+    "@freeblox/editor": "workspace:^",
+    "@unhead/vue": "^1.1.27",
+    "@vue/reactivity": "^3.3.4",
+    "@vue/runtime-core": "^3.3.4",
+    "@vue/runtime-dom": "^3.3.4",
+    "@vue/shared": "^3.3.4",
+    "defu": "^6.1.2",
+    "ufo": "^1.1.2",
+    "unctx": "^2.3.1",
+    "unstorage": "^1.6.1",
+    "vue": "^3.2.47",
+    "vue-router": "^4.2.2",
+    "vue-types": "^5.0.4"
+  }
+}

app/pages/editor.vue

@@ -0,0 +1,13 @@
+<template>
+  <ClientOnly>
+    <LazyEditorWrapper />
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import { EditorWrapper as LazyEditorWrapper } from '@freeblox/editor';
+</script>
+
+<style lang="scss">
+@import '@freeblox/editor/dist/style.css';
+</style>

app/pages/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h1>Nuxt Routing set up successfully!</h1>
+    <p class="text-green-500">Current route: {{ route.path }}</p>
+    <a href="https://nuxt.com/docs/getting-started/routing" target="_blank"
+      >Learn more about Nuxt Routing</a
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute();
+</script>

app/pages/player.vue

@@ -0,0 +1,13 @@
+<template>
+  <ClientOnly>
+    <LazyGameWrapper />
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import { GameWrapper as LazyGameWrapper } from '@freeblox/client';
+</script>
+
+<style lang="scss">
+@import '@freeblox/client/dist/style.css';
+</style>

app/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

app/tailwind.config.js

@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './components/**/*.{js,vue,ts}',
+    './layouts/**/*.vue',
+    './pages/**/*.vue',
+    './plugins/**/*.{js,ts}',
+    './nuxt.config.{js,ts}',
+    './app.vue',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

app/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

packages/client/package.json

@@ -12,6 +12,10 @@
     ".": {
       "import": "./dist/client.js",
       "require": "./dist/client.umd.cjs"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
     }
   },
   "author": "Evert Prants <evert@lunasqu.ee>",

packages/client/src/game/core/gameplay.ts

@@ -1,12 +1,10 @@
 import {
   EngineComponent,
-  EventEmitter,
   World,
   instanceCharacterObject,
   getCharacterController,
   Humanoid,
 } from '@freeblox/engine';
-import { GameEvents } from '../types/events';
 
 import { Vector3 } from 'three';
 import { ThirdPersonCamera } from './camera';

packages/client/src/index.ts

@@ -1 +1 @@
-export * as GameWrapper from './components/GameWrapper.vue';
+export { default as GameWrapper } from './components/GameWrapper.vue';

packages/editor/package.json

@@ -12,6 +12,10 @@
     ".": {
       "import": "./dist/editor.js",
       "require": "./dist/editor.umd.cjs"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
     }
   },
   "author": "Evert Prants <evert@lunasqu.ee>",

packages/editor/src/components/EditorWrapper.vue

@@ -19,11 +19,13 @@ import EditorToolbar from './EditorToolbar.vue';
 import TransformControls from './TransformControls.vue';
 import EditorSidebar from './EditorSidebar.vue';
 import EditorAssets from './assets/EditorAssets.vue';
+import { ViewportComponent } from '@freeblox/engine';
 
 const wrapperRef = ref();
 const editorRef = shallowRef<Editor>(new Editor());
 
-const resize = () => editorRef.value.viewport.setSizeFromViewport();
+const resize = () =>
+  editorRef.value.getComponent(ViewportComponent).setSizeFromViewport();
 
 onMounted(() => {
   editorRef.value.mount(wrapperRef.value);

packages/editor/src/index.ts

@@ -1 +1 @@
-export * as EditorWrapper from './components/EditorWrapper.vue';
+export { default as EditorWrapper } from './components/EditorWrapper.vue';

packages/engine/src/gameobjects/environment.object.ts

@@ -6,7 +6,7 @@ import { EditorProperty, EditorPropertyExclude } from '../decorators/property';
 export class Environment extends GameObject {
   public objectType = Environment.name;
   @EditorPropertyExclude()
-  public name = Environment.name;
+  public name = 'Environment';
   public virtual = true;
 
   @EditorPropertyExclude()

packages/engine/src/gameobjects/group.object.ts

@@ -1,6 +1,6 @@
 import { GameObject3D } from '../types/game-object';
 
 export class Group extends GameObject3D {
-  public objectType = Group.name;
-  public name = Group.name;
+  public objectType = 'Group';
+  public name = 'Group';
 }

packages/engine/src/gameobjects/humanoid.object.ts

@@ -25,8 +25,8 @@ export type HumanoidBodyPart =
 
 export class Humanoid extends GameObject implements Ticking {
   public isTickingObject = true;
-  public objectType = Humanoid.name;
-  public name = Humanoid.name;
+  public objectType = 'Humanoid';
+  public name = 'Humanoid';
   private ready = false;
   private skeleton!: Skeleton;
   private _health = 100;

packages/engine/src/gameobjects/index.ts

@@ -13,15 +13,15 @@ import { MeshPart } from './mesh.object';
 import { Humanoid } from './humanoid.object';
 
 export const instancableGameObjects: Record<string, Instancable<GameObject>> = {
-  [Group.name]: Group,
-  [Brick.name]: Brick,
-  [Cylinder.name]: Cylinder,
-  [Sphere.name]: Sphere,
-  [Torus.name]: Torus,
-  [Capsule.name]: Capsule,
-  [Wedge.name]: Wedge,
-  [WedgeCorner.name]: WedgeCorner,
-  [WedgeInnerCorner.name]: WedgeInnerCorner,
+  ['Group']: Group,
+  ['Brick']: Brick,
+  ['Cylinder']: Cylinder,
+  ['Sphere']: Sphere,
+  ['Torus']: Torus,
+  ['Capsule']: Capsule,
+  ['Wedge']: Wedge,
+  ['WedgeCorner']: WedgeCorner,
+  ['WedgeInnerCorner']: WedgeInnerCorner,
 };
 
 export * from './environment.object';

packages/engine/src/utils/character.ts

@@ -68,8 +68,11 @@ export const instanceCharacterObject = async (name: string) => {
   baseObject.add(bone as Bone);
   baseObject.archivable = false;
   baseObject.name = name;
-  convertedBodyParts.forEach((object) => baseObject.add(object));
-  convertedBodyParts.forEach((object) => (object.archivable = false));
+
+  convertedBodyParts.forEach((object) => {
+    baseObject.add(object);
+    object.archivable = false;
+  });
 
   head.texture = base.faceTexture;
 

pnpm-workspace.yaml

@@ -1,3 +1,3 @@
 packages:
-  - 'apps/**'
+  - 'app'
   - 'packages/**'