Progress on tabletop UI design

app/imports/api/tabletop/CharacterSheetDialog.vue

@@ -1,55 +0,0 @@
-<template>
-  <dialog-base>
-    <template #replace-toolbar>
-      <v-tabs
-        v-if="creature && creature.settings"
-        v-model="tab"
-        :color="$vuetify.theme.themes.dark.primary"
-      >
-        <v-tab>
-          Stats
-        </v-tab>
-        <v-tab>
-          Features
-        </v-tab>
-        <v-tab>
-          Inventory
-        </v-tab>
-        <v-tab v-if="!creature.settings.hideSpellsTab">
-          Spells
-        </v-tab>
-        <v-tab>
-          Character
-        </v-tab>
-        <v-tab v-if="creature.settings.showTreeTab">
-          Tree
-        </v-tab>
-      </v-tabs>
-    </template>
-    <character-sheet
-      show-menu-button
-      :creature-id="creatureId"
-    />
-  </dialog-base>
-</template>
-
-<script lang="js">
-import DialogBase from '/imports/client/ui/dialogStack/DialogBase.vue';
-import CharacterSheet from '/imports/client/ui/creature/character/CharacterSheet.vue';
-
-export default {
-	components: {
-    DialogBase,
-		CharacterSheet,
-	},
-  props: {
-    creatureId: {
-      type: String,
-      required: true,
-    },
-  },
-  data(){return {
-    tab: 0,
-  }},
-}
-</script>

app/imports/api/tabletop/map/TabletopMap.vue

@@ -1,89 +0,0 @@
-<template>
-  <div>
-    <canvas
-      ref="map"
-      class="tabletop-map"
-    />
-  </div>
-</template>
-
-<script>
-import * as THREE from 'three';
-import { Tracker } from 'meteor/tracker'
-import { MapControls } from '/imports/client/ui/tabletop/three/OrbitControls.js';
-
-const maps = [
-  {
-    name: 'first map',
-    position: { x: 0, y: 0 },
-    width: 5,
-    height: 5,
-    texture: '/images/battlemap.webp',
-  }
-];
-
-export default {
-  mounted(){
-    const scene = new THREE.Scene();
-    const perspectiveCam = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
-    perspectiveCam.position.z = 5;
-    const orthoCam = new THREE.OrthographicCamera( -2, 2, 2, -2, 1, 1000 );
-    orthoCam.position.z = 5
-    const activeCamera = orthoCam;
-
-
-    const renderer = new THREE.WebGLRenderer({canvas: this.$refs.map});
-
-    activeCamera.up.set( 0, 0, 1 ); // Use z as upwards
-    const controls = new MapControls( activeCamera, renderer.domElement );
-
-    maps.forEach(map => {
-      const texture = new THREE.TextureLoader().load( map.texture );
-      const material = new THREE.MeshBasicMaterial({ map: texture });
-      material.map.needsUpdate = true;
-      const plane = new THREE.Mesh(new THREE.PlaneGeometry(map.width, map.height), material);
-      plane.overdraw = true;
-      scene.add(plane);
-    });
-
-  /*
-    const axesHelper = new THREE.AxesHelper( 5 );
-    scene.add( axesHelper );
-  */
-
-    function resizeCanvasToDisplaySize() {
-      const canvas = renderer.domElement;
-      // look up the size the canvas is being displayed
-      const width = canvas.clientWidth;
-      const height = canvas.clientHeight - 50;
-
-      // adjust displayBuffer size to match
-      if (canvas.width !== width || canvas.height !== height) {
-        // you must pass false here or three.js sadly fights the browser
-        perspectiveCam.aspect = width / height;
-        orthoCam.left= width / -200;
-        orthoCam.right = width / 200;
-        orthoCam.top = height / 200;
-        orthoCam.bottom = height / -200;
-        perspectiveCam.updateProjectionMatrix();
-        orthoCam.updateProjectionMatrix();
-        controls.update();
-        renderer.setSize(width, height, false);
-      }
-    }
-    function animate() {
-      resizeCanvasToDisplaySize();
-      renderer.render( scene, activeCamera );
-      requestAnimationFrame( animate );
-    }
-    animate();
-  },
-}
-</script>
-
-<style>
-  .tabletop-map {
-    height: 100%;
-    width: 100%;
-  }
-</style>