jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Progress on tabletop UI design

Browse Source
This commit is contained in:
Stefan Zermatten
2023-01-15 01:17:00 +02:00
parent cd45008f38
commit 25e6b19b49
20 changed files with 700 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/imports/api/engine/loadCreatures.js
View File

@@ -10,15 +10,17 @@ export const loadedCreatures = new Map(); // creatureId => {creature, properties
export function loadCreature(creatureId, subscription) {
if (!creatureId) throw 'creatureId is required';
let creature = loadedCreatures.get(creatureId);
if (!creature || !creature.subs.has(subscription)) {
subscription.onStop(() => {
unloadCreature(creatureId, subscription);
});
}
if (loadedCreatures.has(creatureId)) {
creature.subs.add(subscription);
} else {
creature = new LoadedCreature(subscription, creatureId);
loadedCreatures.set(creatureId, creature);
}
subscription.onStop(() => {
unloadCreature(creatureId, subscription);
});
}
function unloadCreature(creatureId, subscription) {
@@ -43,7 +45,7 @@ export function getSingleProperty(creatureId, propertyId) {
const prop = CreatureProperties.findOne({
_id: propertyId,
'ancestors.id': creatureId,
'removed': {$ne: true},
'removed': { $ne: true },
}, {
sort: { order: 1 },
});
@@ -61,7 +63,7 @@ export function getProperties(creatureId) {
// console.time(`Cache miss on creature properties: ${creatureId}`)
const props = CreatureProperties.find({
'ancestors.id': creatureId,
'removed': {$ne: true},
'removed': { $ne: true },
}, {
sort: { order: 1 },
}).fetch();
@@ -73,7 +75,7 @@ export function getPropertiesOfType(creatureId, propType) {
if (loadedCreatures.has(creatureId)) {
const creature = loadedCreatures.get(creatureId);
const props = []
for (const prop of creature.properties.values()){
for (const prop of creature.properties.values()) {
if (prop.type === propType) {
props.push(prop);
}
@@ -97,7 +99,7 @@ export function getCreature(creatureId) {
if (loadedCreatures.has(creatureId)) {
const loadedCreature = loadedCreatures.get(creatureId);
const creature = loadedCreature.creature;
if (creature) {
if (creature) {
const cloneCreature = EJSON.clone(creature);
return cloneCreature;
}
@@ -118,7 +120,7 @@ export function getVariables(creatureId) {
}
}
// console.time(`Cache miss on variables: ${creatureId}`);
const variables = CreatureVariables.findOne({_creatureId: creatureId});
const variables = CreatureVariables.findOne({ _creatureId: creatureId });
// console.timeEnd(`Cache miss on variables: ${creatureId}`);
return variables;
}
@@ -148,7 +150,7 @@ export function getProperyAncestors(creatureId, propertyId) {
// Fetch from database
return CreatureProperties.find({
_id: { $in: ancestorIds },
removed: {$ne: true},
removed: { $ne: true },
}, {
sort: { order: 1 },
}).fetch();
@@ -164,7 +166,7 @@ export function getPropertyDecendants(creatureId, propertyId) {
if (loadedCreatures.has(creatureId)) {
const creature = loadedCreatures.get(creatureId);
const props = [];
for(const prop of creature.properties.values()){
for (const prop of creature.properties.values()) {
if (prop.ancestors[expectedAncestorPostition]?.id === propertyId) {
props.push(prop);
}
@@ -216,7 +218,7 @@ class LoadedCreature {
compute();
},
});
// Observe the creature itself
self.creatureObserver = Creatures.find({
_id: creatureId,
@@ -239,7 +241,7 @@ class LoadedCreature {
self.variablesObserver = CreatureVariables.find({
_creatureId: creatureId,
}, {
fields: { _creatureId: 0},
fields: { _creatureId: 0 },
}).observeChanges({
added(id, fields) {
fields._id = id;

55
app/imports/api/tabletop/CharacterSheetDialog.vue
View File

@@ -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>

89
app/imports/api/tabletop/map/TabletopMap.vue
View File

@@ -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>