ficik/battle-caster-v1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ new maps

Browse Source
This commit is contained in:
Stanislav Fifik
2024-11-24 17:34:41 +00:00
parent eb6abbb97d
commit 641938f7e4
38 changed files with 1241 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/modules/controls/ControlApp.vue
View File

@@ -1,52 +1,34 @@
<template>
<AppLayout>
<div style="background-color: white; display: flex; flex-direction: row;gap: 0.5rem;padding: 0.5rem;margin-bottom:0.5rem; color: black">
<FilesAside />
<!-- <div style="max-width: 32px; height: 32px; overflow: hidden;">
<google-cast-launcher style="--disconnected-color: black;" ></google-cast-launcher>
</div>
<button @click="openMapWindow">Open map window</button>
<button @click="onStreamImage">Stream image</button> -->
</div>
<template v-slot:overview>
<ScreenManager />
</template>
<Tabs
:tabs="[
{label: 'Sounds', key: 'sounds'},
{label: 'Settings', key: 'settings'},
{label: 'Devices', key: 'devices'},
{label: 'Map', key: 'map'},
]"
>
<template v-slot:settings>
<fieldset>
<legend>Image settings</legend>
<label>Width</label>
<input type="number" v-model="imageWidth" />
<label>Screen Diameter</label>
<input type="number" v-model="screenDiameterInch" />
<label>Flip <input type="checkbox" v-model="flipped"></label>
<label>Position (X/Y)</label>
<input type="range" min="0" max="100" v-model="positionX" />
<input type="range" min="0" max="100" v-model="positionY" />
<button @click="positionX = 50;positionY = 50">center</button>
</fieldset>
</template>
<template v-slot:devices>
<RemoteDevices />
</template>
<template v-slot:sounds>
<div style="padding: 1rem">
<Soundboard />
</div>
</template>
<template v-slot:map>
<MapControl />
</template>
</Tabs>
<template v-slot:settings>
<fieldset>
<legend>Image settings</legend>
<label>Width</label>
<input type="number" v-model="imageWidth" />
<label>Screen Diameter</label>
<input type="number" v-model="screenDiameterInch" />
<label>Flip <input type="checkbox" v-model="flipped"></label>
<label>Position (X/Y)</label>
<input type="range" min="0" max="100" v-model="positionX" />
<input type="range" min="0" max="100" v-model="positionY" />
<button @click="positionX = 50;positionY = 50">center</button>
</fieldset>
</template>
<template v-slot:devices>
<RemoteDevices />
</template>
<template v-slot:sounds>
<div style="padding: 1rem">
<Soundboard />
</div>
</template>
<template v-slot:map>
<MapControl />
</template>
</AppLayout>
</template>
<script setup lang="ts">

24
src/modules/summon/SummonApp.vue
View File

@@ -1,6 +1,9 @@
<template>
<Debug />
<canvas ref="canvas" style="max-width: 100%" />
<!--<Debug />-->
<div style="overflow: hidden;height: 100vh;width: 100vw;">
<audio id="mainAudio" style="display: none"></audio>
<video id="mainVideo" loop muted autoplay playsinline style="width: 100vw;height: 100vh"></video>
</div>
</template>
<script setup lang="ts">
import {inject, ref} from 'vue';
@@ -9,10 +12,9 @@ import {WebRtcChannelSymbol} from '../../model/injectionSymbols';
import {VirtualFile} from '../../model/FileSystem/types';
const webRtc = inject(WebRtcChannelSymbol)!;
const canvas = ref<HTMLCanvasElement>();
const cachedFiles = new Map<string, Blob>();
const fileToKey = (file: VirtualFile) => `${file.source}:${file.path.join('/')}`;
/*const cachedFiles = new Map<string, Blob>();
const fileToKey = (file: VirtualFile) => `${file.source}:${file.path.join('/')}`;*/
function sendScreenInfo() {
webRtc.send({
@@ -38,15 +40,17 @@ window.addEventListener('resize', () => {
webRtc.on((message) => {
console.log('webRtc message', message);
if (message.type === 'connected') {
if (message.type === 'disconnect') {
window.close();
} else if (message.type === 'connected') {
sendScreenInfo();
sendAudioInfo();
} else if (message.type === 'fileTransfered') {
debugger;
/*debugger;
const key = fileToKey(message.meta);
cachedFiles.set(key, message.blob);
cachedFiles.set(key, message.blob);*/
} else if (message.type === 'showFile') {
debugger;
/*debugger;
const key = fileToKey(message.file);
const blob = cachedFiles.get(key);
if (blob) {
@@ -59,7 +63,7 @@ webRtc.on((message) => {
ctx.drawImage(img, 0, 0);
}
img.src = url;
}
}*/
} else if (message.type === 'transform') {
// canvas.value.style = `max-width: 100%;transform: scale(${message.scale}) translate(${message.x}%, ${message.y}%);transition: transform 100ms;`;
}