fix(app): many updates

Author: ThornWalli

packages/app/components/App.vue

@@ -8,6 +8,12 @@
     <cw-panel-unit-preview v-if="selectedUnit" :unit="selectedUnit">
       <template #actions>
         <cw-button @click="onClickRotate">Rotate</cw-button>
+        <cw-button
+          v-if="canPlaced"
+          :selected="!!placedUnit"
+          @click="onClickPlacement"
+          >Move</cw-button
+        >
       </template>
     </cw-panel-unit-preview>
     <cw-panel-camera-control v-if="app" :app="app" />
@@ -16,8 +22,16 @@
 
 <script lang="ts" setup>
 import Renderer from './Renderer.vue';
-import { markRaw, nextTick, onMounted, onUnmounted, ref, type Raw } from 'vue';
-import { Subscription } from 'rxjs';
+import {
+  computed,
+  markRaw,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  ref,
+  type Raw
+} from 'vue';
+import { fromEvent, Subscription } from 'rxjs';
 import { Vector2 } from 'three';
 import Player from '../lib/classes/Player';
 import App from '../lib/classes/App';
@@ -37,7 +51,6 @@ const rendererEl = ref<InstanceType<typeof Renderer> | null>(null);
 const subscription = new Subscription();
 
 const dimension = ref<Vector2>();
-let resizeObserver: ResizeObserver;
 
 setupFonts();
 defineProps<{
@@ -46,6 +59,9 @@ defineProps<{
 
 const app = ref<App>();
 const selectedUnit = ref<Raw<Unit> | null>(null);
+const placedUnit = ref<Raw<Unit> | null>(null);
+const canPlaced = computed(() => selectedUnit.value?.options.canPlaced);
+
 // let sceneUnsubscribe;
 onMounted(async () => {
   nextTick(() => {
@@ -54,7 +70,7 @@ onMounted(async () => {
 });
 
 function setup() {
-  const { $el, renderer } = rendererEl.value!;
+  const { renderer } = rendererEl.value!;
 
   if (!renderer) {
     throw new Error('Renderer not ready');
@@ -77,27 +93,51 @@ function setup() {
       selectedUnit.value = unit ? markRaw(unit) : null;
     })
   );
+  subscription.add(
+    app.value.modules.placement.startPlace$.subscribe(unit => {
+      placedUnit.value = unit;
+    })
+  );
+  subscription.add(
+    app.value.modules.placement.stopPlace$.subscribe(() => {
+      placedUnit.value = null;
+    })
+  );
 
-  const onResize = () => {
-    dimension.value = new Vector2($el.offsetWidth, $el.offsetHeight);
-    renderer.resize(dimension.value);
-  };
-  resizeObserver = new ResizeObserver(onResize);
+  subscription.add(
+    fromEvent(window, 'resize', {
+      passive: true
+    }).subscribe(() => {
+      onResize();
+    })
+  );
 
-  resizeObserver.observe($el);
+  onResize();
 }
 
 onUnmounted(() => {
-  resizeObserver.disconnect();
   subscription.unsubscribe();
   app.value?.destroy();
 });
 
+const rootEl = ref<HTMLElement>();
+function onResize() {
+  const { width, height } = rootEl.value!.getBoundingClientRect();
+  dimension.value = new Vector2(width, height);
+  rendererEl.value?.renderer?.resize(dimension.value);
+}
+
 function onClickRotate() {
   if (selectedUnit.value) {
     selectedUnit.value.rotateRight();
   }
 }
+
+function onClickPlacement() {
+  if (selectedUnit.value) {
+    app.value?.modules.placement?.startPlace(selectedUnit.value);
+  }
+}
 </script>
 
 <style lang="postcss" scoped>

packages/app/components/Button.vue

@@ -1,7 +1,7 @@
 <template>
   <base-button
     class="cw-button"
-    :class="{ [`style-type-${styleType}`]: styleType }">
+    :class="{ selected, [`style-type-${styleType}`]: styleType }">
     <slot>Button</slot>
   </base-button>
 </template>
@@ -11,6 +11,7 @@ import BaseButton from './base/Button.vue';
 
 defineProps<{
   styleType?: 'light' | 'dark';
+  selected?: boolean;
 }>();
 </script>
 
@@ -30,6 +31,7 @@ defineProps<{
     opacity: 0.5;
   }
 
+  &.selected,
   &:not([disabled]):hover {
     background: rgb(255 255 255 / 10%);
   }

packages/app/components/Panel.vue

@@ -22,11 +22,14 @@ defineProps<{
   gap: 10px;
   padding: 1em;
   color: white;
-  background: rgb(0 0 0 / 60%);
+  background: rgb(0 0 0 / 80%);
+  border: solid 1px rgb(255 255 255 / 80%);
   border-radius: 9px;
+  box-shadow: 0 0 4px 0 rgb(0 0 0 / 40%);
 
   & .title {
     display: block;
+    font-size: 14px;
     font-weight: bold;
     text-align: center;
   }

packages/app/components/Renderer.vue

@@ -1,5 +1,8 @@
 <template>
-  <div ref="rootEl" class="cw-renderer">
+  <div
+    ref="rootEl"
+    class="cw-renderer"
+    :class="{ pixelated: renderer?.pixelated }">
     <canvas ref="canvasEl" />
   </div>
 </template>
@@ -35,7 +38,7 @@ const canvasEl = ref();
 const subscription = new Subscription();
 
 const defaultRendererOptions: RendererOptions = {
-  pixelSize: 1,
+  pixelated: false,
   controls: true
 };
 
@@ -44,15 +47,15 @@ onMounted(async () => {
     rootEl.value.offsetWidth,
     rootEl.value.offsetHeight
   );
-  const { pixelSize, controls } = $props.options || defaultRendererOptions;
+  const { pixelated, controls } = $props.options || defaultRendererOptions;
 
   renderer.value = markRaw(
     new Renderer(
       canvasEl.value,
       dimension,
       {
         debug: !!$props.debug,
-        pixelSize: pixelSize,
+        pixelated: pixelated,
         controls: controls
       },
       $props.modules
@@ -86,10 +89,15 @@ defineExpose({
 </script>
 
 <style lang="postcss" scoped>
-canvas {
-  touch-action: none;
-  image-rendering: optimizeSpeed; /* Für ältere Browser */
-  image-rendering: crisp-edges; /* Für moderne Browser */
-  image-rendering: pixelated;
+.cw-renderer {
+  &.pixelated {
+    image-rendering: optimizeSpeed;
+    image-rendering: crisp-edges;
+    image-rendering: pixelated;
+  }
+
+  & canvas {
+    touch-action: none;
+  }
 }
 </style>

packages/app/components/debug/UnitPreview.vue

@@ -101,6 +101,7 @@ function setupScene(renderer: Renderer) {
   const groundMesh = new Mesh(groundTile.geometry, groundTile.material);
   groundMesh.material.side = DoubleSide;
   groundMesh.receiveShadow = true;
+  groundMesh.material.side = DoubleSide;
   scene.add(groundMesh);
   // #endregion
 

packages/app/components/panel/UnitPreview.vue

@@ -11,7 +11,7 @@
       </li>
     </ul>
 
-    <div v-if="$slots.actions">
+    <div v-if="$slots.actions" class="actions">
       <slot name="actions"></slot>
     </div>
   </cw-panel>
@@ -48,13 +48,15 @@ function refresh(unit: Unit) {
 }
 
 function refreshDebugInfo(unit: Unit) {
-  const position = unit.getRootPosition();
+  const position = unit.getPosition();
   const rotation = unit.getRootRotation();
+  const size = unit.size;
 
   const info = {
     Pos: `${position.x.toFixed(2)}x${position.y.toFixed(2)}x${position.z.toFixed(2)}`,
     Rot: `${rotation.x.toFixed(2)}x${rotation.y.toFixed(2)}`,
-    URot: `${$props.unit.rotation}`
+    URot: `${$props.unit.rotation}`,
+    Size: `${size.x}x${size.y}`
   };
   debugInfo.value = Object.entries(info);
 }
@@ -211,5 +213,12 @@ watch(
     align-items: center;
     justify-content: center;
   }
+
+  & .actions {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    justify-content: center;
+  }
 }
 </style>

packages/app/lib/classes/App.ts

@@ -7,18 +7,21 @@ import UnitFocusAppModule from './appModule/UnitFocus';
 import RoomAppModule from './appModule/Room';
 import PlayerAppModule from './appModule/Player';
 import SelectionAppModule from './appModule/Selection';
+import PlacementAppModule from './appModule/Placement';
 
 type AppModuleList = (
   | typeof UnitFocusAppModule
   | typeof PlayerAppModule
   | typeof RoomAppModule
   | typeof SelectionAppModule
+  | typeof PlacementAppModule
 )[];
 interface AppModules {
   room: RoomAppModule;
   player: PlayerAppModule;
   unitFocus: UnitFocusAppModule;
   selection: SelectionAppModule;
+  placement: PlacementAppModule;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
@@ -43,7 +46,8 @@ export default class App {
       RoomAppModule,
       PlayerAppModule,
       UnitFocusAppModule,
-      SelectionAppModule
+      SelectionAppModule,
+      PlacementAppModule
     );
 
     // #region Modules