+
+
+
+
diff --git a/client/src/game/ui/Floors.vue b/client/src/game/ui/Floors.vue
index abe227229..9e65ae7fb 100644
--- a/client/src/game/ui/Floors.vue
+++ b/client/src/game/ui/Floors.vue
@@ -88,7 +88,7 @@ const selectedLayer = computed(() => {
+
+
+ Chat
+
+ ({{ chatState.raw.messages.length - messagesSeenCount }})
+
+
+
+
+
+
+
+
+
+
+
+
+ No messages yet.
+
+ {
diff --git a/client/src/game/ui/dice/LgDiceResults.vue b/client/src/game/ui/dice/LgDiceResults.vue
deleted file mode 100644
index b3caa8254..000000000
--- a/client/src/game/ui/dice/LgDiceResults.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-
-
-
- ({
get() {
return $.useToolIcons.value;
},
@@ -22,7 +22,7 @@ const useToolIcons = computed({
},
});
-const showTokenDirections = computed({
+const showTokenDirections = computed({
get() {
return $.showTokenDirections.value;
},
@@ -31,7 +31,7 @@ const showTokenDirections = computed({
},
});
-const gridColour = computed({
+const gridColour = computed({
get() {
return $.gridColour.value;
},
@@ -40,7 +40,7 @@ const gridColour = computed({
},
});
-const gridModeLabelFormat = computed({
+const gridModeLabelFormat = computed({
get() {
return $.gridModeLabelFormat.value;
},
@@ -49,7 +49,7 @@ const gridModeLabelFormat = computed({
},
});
-const fowColour = computed({
+const fowColour = computed({
get() {
return $.fowColour.value;
},
@@ -58,7 +58,7 @@ const fowColour = computed({
},
});
-const rulerColour = computed({
+const rulerColour = computed({
get() {
return $.rulerColour.value;
},
diff --git a/client/src/game/ui/settings/client/BehaviourSettings.vue b/client/src/game/ui/settings/client/BehaviourSettings.vue
index 3385adfb9..cbf84f755 100644
--- a/client/src/game/ui/settings/client/BehaviourSettings.vue
+++ b/client/src/game/ui/settings/client/BehaviourSettings.vue
@@ -10,7 +10,7 @@ const { t } = useI18n();
const { reactive: $ } = playerSettingsState;
const pss = playerSettingsSystem;
-const invertAlt = computed({
+const invertAlt = computed({
get() {
return $.invertAlt.value;
},
@@ -19,7 +19,7 @@ const invertAlt = computed({
},
});
-const disableScrollToZoom = computed({
+const disableScrollToZoom = computed({
get() {
return $.disableScrollToZoom.value;
},
@@ -28,7 +28,7 @@ const disableScrollToZoom = computed({
},
});
-const defaultTrackerMode = computed({
+const defaultTrackerMode = computed({
get() {
return $.defaultTrackerMode.value;
},
@@ -49,7 +49,7 @@ function setDefaultTrackerMode(event: Event): void {
defaultTrackerMode.value = mode !== TrackerMode.Absolute;
}
-const mousePanMode = computed({
+const mousePanMode = computed({
get() {
return $.mousePanMode.value;
},
diff --git a/client/src/game/ui/settings/client/DisplaySettings.vue b/client/src/game/ui/settings/client/DisplaySettings.vue
index f58800924..725605970 100644
--- a/client/src/game/ui/settings/client/DisplaySettings.vue
+++ b/client/src/game/ui/settings/client/DisplaySettings.vue
@@ -13,7 +13,7 @@ const hasGameboard = coreStore.state.boardId !== undefined;
const { reactive: $ } = playerSettingsState;
const pss = playerSettingsSystem;
-const useHighDpi = computed({
+const useHighDpi = computed({
get() {
return $.useHighDpi.value;
},
@@ -22,7 +22,7 @@ const useHighDpi = computed({
},
});
-const gridSize = computed({
+const gridSize = computed({
get() {
return $.gridSize.value;
},
@@ -32,7 +32,7 @@ const gridSize = computed({
},
});
-const useAsPhysicalBoard = computed({
+const useAsPhysicalBoard = computed({
get() {
return $.useAsPhysicalBoard.value;
},
@@ -41,7 +41,7 @@ const useAsPhysicalBoard = computed({
},
});
-const miniSize = computed({
+const miniSize = computed({
get() {
return $.miniSize.value;
},
@@ -51,7 +51,7 @@ const miniSize = computed({
},
});
-const ppi = computed({
+const ppi = computed({
get() {
return $.ppi.value;
},
diff --git a/client/src/game/ui/settings/client/InitiativeSettings.vue b/client/src/game/ui/settings/client/InitiativeSettings.vue
index e740c6818..2c2a7a1c3 100644
--- a/client/src/game/ui/settings/client/InitiativeSettings.vue
+++ b/client/src/game/ui/settings/client/InitiativeSettings.vue
@@ -13,7 +13,7 @@ const pss = playerSettingsSystem;
const effectVisibilityOptions = Object.values(InitiativeEffectMode);
-const openOnActivate = computed({
+const openOnActivate = computed({
get() {
return $.initiativeOpenOnActivate.value;
},
@@ -22,7 +22,7 @@ const openOnActivate = computed({
},
});
-const cameraLock = computed({
+const cameraLock = computed({
get() {
return $.initiativeCameraLock.value;
},
@@ -31,7 +31,7 @@ const cameraLock = computed({
},
});
-const visionLock = computed({
+const visionLock = computed({
get() {
return $.initiativeVisionLock.value;
},
@@ -40,7 +40,7 @@ const visionLock = computed({
},
});
-const effectVisibility = computed({
+const effectVisibility = computed({
get() {
return $.initiativeEffectVisibility.value;
},
diff --git a/client/src/game/ui/settings/client/PerformanceSettings.vue b/client/src/game/ui/settings/client/PerformanceSettings.vue
index 2b28b55ed..682997efa 100644
--- a/client/src/game/ui/settings/client/PerformanceSettings.vue
+++ b/client/src/game/ui/settings/client/PerformanceSettings.vue
@@ -10,7 +10,7 @@ const { t } = useI18n();
const { reactive: $ } = playerSettingsState;
const pss = playerSettingsSystem;
-const onlyRenderActiveFloor = computed({
+const onlyRenderActiveFloor = computed({
get() {
return !$.renderAllFloors.value;
},
diff --git a/client/src/game/ui/settings/dm/DmSettings.vue b/client/src/game/ui/settings/dm/DmSettings.vue
index f2bc9b911..f59a5c851 100644
--- a/client/src/game/ui/settings/dm/DmSettings.vue
+++ b/client/src/game/ui/settings/dm/DmSettings.vue
@@ -13,6 +13,7 @@ import VisionSettings from "../location/VisionSettings.vue";
import AdminSettings from "./AdminSettings.vue";
import { DmSettingCategory } from "./categories";
+import FeatureSettings from "./FeatureSettings.vue";
const emit = defineEmits<(e: "close" | "focus") => void>();
defineProps<{ modalIndex: ModalIndex }>();
@@ -36,6 +37,7 @@ defineExpose({ close });
const tabs: { name: string; component: Component; props: { global: true } }[] = [
{ name: t(DmSettingCategory.Admin), component: AdminSettings, props: { global: true } },
+ { name: t(DmSettingCategory.Features), component: FeatureSettings, props: { global: true } },
{ name: t(DmSettingCategory.Grid), component: GridSettings, props: { global: true } },
{ name: t(DmSettingCategory.Vision), component: VisionSettings, props: { global: true } },
{ name: t(DmSettingCategory.Floor), component: FloorSettings, props: { global: true } },
diff --git a/client/src/game/ui/settings/dm/FeatureSettings.vue b/client/src/game/ui/settings/dm/FeatureSettings.vue
new file mode 100644
index 000000000..1d9b83d53
--- /dev/null
+++ b/client/src/game/ui/settings/dm/FeatureSettings.vue
@@ -0,0 +1,45 @@
+
+
+
+ ({
get() {
return getOption($.airMapBackground, location.value).value;
},
@@ -52,7 +52,7 @@ function setAirBackgroundFromEvent(event: Event): void {
// GROUND
-const groundBackground = computed({
+const groundBackground = computed({
get() {
return getOption($.groundMapBackground, location.value).value;
},
@@ -71,7 +71,7 @@ function setGroundBackgroundFromEvent(event: Event): void {
// UNDERGROUND
-const undergroundBackground = computed({
+const undergroundBackground = computed({
get() {
return getOption($.undergroundMapBackground, location.value).value;
},
diff --git a/client/src/game/ui/settings/location/GridSettings.vue b/client/src/game/ui/settings/location/GridSettings.vue
index e5a02c719..b8cea499f 100644
--- a/client/src/game/ui/settings/location/GridSettings.vue
+++ b/client/src/game/ui/settings/location/GridSettings.vue
@@ -15,7 +15,7 @@ const lss = locationSettingsSystem;
const location = computed(() => (props.global ? undefined : uiState.reactive.openedLocationSettings));
-const useGrid = computed({
+const useGrid = computed({
get() {
return getOption($.useGrid, location.value).value;
},
@@ -24,7 +24,7 @@ const useGrid = computed({
},
});
-const gridType = computed({
+const gridType = computed({
get() {
return getOption($.gridType, location.value).value;
},
@@ -33,7 +33,7 @@ const gridType = computed({
},
});
-const unitSize = computed({
+const unitSize = computed({
get() {
return getOption($.unitSize, location.value).value;
},
@@ -42,7 +42,7 @@ const unitSize = computed({
},
});
-const unitSizeUnit = computed({
+const unitSizeUnit = computed({
get() {
return getOption($.unitSizeUnit, location.value).value;
},
@@ -51,7 +51,7 @@ const unitSizeUnit = computed({
},
});
-const dropRatio = computed({
+const dropRatio = computed({
get() {
return getOption($.dropRatio, location.value).value;
},
diff --git a/client/src/game/ui/settings/location/VariaSettings.vue b/client/src/game/ui/settings/location/VariaSettings.vue
index 39a6f6f10..fd30feb91 100644
--- a/client/src/game/ui/settings/location/VariaSettings.vue
+++ b/client/src/game/ui/settings/location/VariaSettings.vue
@@ -15,7 +15,7 @@ const location = computed(() => (props.global ? undefined : uiState.reactive.ope
const { reactive: $, getOption } = locationSettingsState;
const lss = locationSettingsSystem;
-const movePlayerOnTokenChange = computed({
+const movePlayerOnTokenChange = computed({
get() {
return getOption($.movePlayerOnTokenChange, location.value).value;
},
@@ -24,7 +24,7 @@ const movePlayerOnTokenChange = computed({
},
});
-const limitMovementDuringInitiative = computed({
+const limitMovementDuringInitiative = computed({
get() {
return getOption($.limitMovementDuringInitiative, location.value).value;
},
diff --git a/client/src/game/ui/settings/location/VisionSettings.vue b/client/src/game/ui/settings/location/VisionSettings.vue
index 344e835df..69edb7af2 100644
--- a/client/src/game/ui/settings/location/VisionSettings.vue
+++ b/client/src/game/ui/settings/location/VisionSettings.vue
@@ -29,7 +29,7 @@ const fakePlayer = computed({
},
});
-const fullFow = computed({
+const fullFow = computed({
get() {
return getOption($.fullFow, location.value).value;
},
@@ -38,7 +38,7 @@ const fullFow = computed({
},
});
-const fowLos = computed({
+const fowLos = computed({
get() {
return getOption($.fowLos, location.value).value;
},
@@ -47,7 +47,7 @@ const fowLos = computed({
},
});
-const fowOpacity = computed({
+const fowOpacity = computed({
get() {
return getOption($.fowOpacity, location.value).value;
},
@@ -56,7 +56,7 @@ const fowOpacity = computed({
},
});
-const visionMinRange = computed({
+const visionMinRange = computed({
get() {
return getOption($.visionMinRange, location.value).value;
},
@@ -68,7 +68,7 @@ const visionMinRange = computed({
},
});
-const visionMaxRange = computed({
+const visionMaxRange = computed({
get() {
return getOption($.visionMaxRange, location.value).value;
},
diff --git a/client/src/game/ui/tools/DiceTool.vue b/client/src/game/ui/tools/DiceTool.vue
index dabeb741d..77703942d 100644
--- a/client/src/game/ui/tools/DiceTool.vue
+++ b/client/src/game/ui/tools/DiceTool.vue
@@ -1,282 +1,279 @@
- ![D20 result icon]()
- {{ getTotalRoll(results) }}
-
-
-
-
diff --git a/client/src/game/ui/settings/client/AppearanceSettings.vue b/client/src/game/ui/settings/client/AppearanceSettings.vue
index 4d4b30a61..7164ebcdd 100644
--- a/client/src/game/ui/settings/client/AppearanceSettings.vue
+++ b/client/src/game/ui/settings/client/AppearanceSettings.vue
@@ -13,7 +13,7 @@ const { t } = useI18n();
const { reactive: $ } = playerSettingsState;
const pss = playerSettingsSystem;
-const useToolIcons = computed({
+const useToolIcons = computed
+
+
+
+
diff --git a/client/src/game/ui/settings/dm/categories.ts b/client/src/game/ui/settings/dm/categories.ts
index 01973d28d..e448693b7 100644
--- a/client/src/game/ui/settings/dm/categories.ts
+++ b/client/src/game/ui/settings/dm/categories.ts
@@ -1,5 +1,6 @@
export enum DmSettingCategory {
Admin = "common.admin",
+ Features = "common.features",
Floor = "common.floor",
Grid = "common.grid",
Vision = "common.vision",
diff --git a/client/src/game/ui/settings/location/FloorSettings.vue b/client/src/game/ui/settings/location/FloorSettings.vue
index a86f849bf..8df189f6b 100644
--- a/client/src/game/ui/settings/location/FloorSettings.vue
+++ b/client/src/game/ui/settings/location/FloorSettings.vue
@@ -33,7 +33,7 @@ function getBackgroundValueFromType(type: BackgroundType): string {
// AIR
-const airBackground = computed({
+const airBackground = computed
+
+
+
+
+
+
+
+
-
-
-
- {{ r.player }}
+
+
diff --git a/client/src/game/ui/tools/DrawTool.vue b/client/src/game/ui/tools/DrawTool.vue
index 35eb149a1..1fbd4dcad 100644
--- a/client/src/game/ui/tools/DrawTool.vue
+++ b/client/src/game/ui/tools/DrawTool.vue
@@ -164,9 +164,12 @@ const alerts = computed(() => {
\\ SETTINGS \\
+
+
+
+
+ \\ CONFIGURE \\
+
+
+
+
+
-
+
+
- {{ r.roll }}
- {{ r.result }}
-
-
-
- Share with all
-
- Auto roll
-
-
-
- 20
- 12
- 10
- 8
- 6
- 4
- {{ diceText }}
-
-
-
+
+
+
+
+
+ \\ HISTORY \\
+
+
+
+
+
+ {{ player }}
+ {{ name }}
+ {{ historyRoll.result }}
+ No dice rolls have been made so far
+
-
{{ t("game.ui.selection.edit_dialog.dialog.block_movement") }}
+
import { onMounted, toRef } from "vue";
+import { useI18n } from "vue-i18n";
import type { GlobalPoint } from "../../../core/geometry";
import { rotateAroundPoint } from "../../../core/math";
import type { Polygon } from "../../shapes/variants/polygon";
import { selectedSystem } from "../../systems/selected";
+import { rulerTool } from "../../tools/variants/ruler";
import { selectTool } from "../../tools/variants/select";
import { selectToolState } from "../../tools/variants/select/state";
+const { t } = useI18n();
+
const { $, _$ } = selectToolState;
const selected = selectTool.isActiveTool;
@@ -47,17 +51,35 @@ function removePoint(): void {
const selection = selectedSystem.get({ includeComposites: false })[0] as Polygon;
selection.removePoint(getGlobalRefPoint(selection));
}
+
+function toggle(event: MouseEvent): void {
+ const state = (event.target as HTMLButtonElement).getAttribute("aria-pressed") ?? "false";
+ rulerTool.showPublic.value = state === "false";
+}
+
+function toggleGridMode(event: MouseEvent): void {
+ const state = (event.target as HTMLButtonElement).getAttribute("aria-pressed") ?? "false";
+ rulerTool.gridMode.value = state === "false";
+}
-
-
-
-
-
+ {
spellTool.state.selectedSpellShape = shape;
await spellTool.drawShape();
@@ -28,7 +43,7 @@ async function selectShape(shape: SpellShape): Promise {
+
@@ -81,8 +103,9 @@ function removePoint(): void {
}
}
-#ruler {
+.tool-detail {
display: flex;
+ flex-direction: column;
}
button {
@@ -98,6 +121,10 @@ button {
position: relative;
outline: none;
+ &:disabled {
+ opacity: 0.5;
+ }
+
&:hover {
&::before {
box-shadow: 0 0 0.5em #333;
diff --git a/client/src/game/ui/tools/SpellTool.vue b/client/src/game/ui/tools/SpellTool.vue
index 9f254818f..2df14af06 100644
--- a/client/src/game/ui/tools/SpellTool.vue
+++ b/client/src/game/ui/tools/SpellTool.vue
@@ -3,14 +3,21 @@ import { computed } from "vue";
import { useI18n } from "vue-i18n";
import ColourPicker from "../../../core/components/ColourPicker.vue";
+import { GridType } from "../../../core/grid";
import { baseAdjust } from "../../../core/http";
import { selectedState } from "../../systems/selected/state";
+import { locationSettingsState } from "../../systems/settings/location/state";
import { SpellShape, spellTool } from "../../tools/variants/spell";
const { t } = useI18n();
const selected = spellTool.isActiveTool;
-const shapes = Object.values(SpellShape);
+
+const isHexGrid = computed(() => locationSettingsState.reactive.gridType.value !== GridType.Square);
+
+const shapes = computed(() =>
+ isHexGrid.value ? [SpellShape.Hex] : [SpellShape.Square, SpellShape.Circle, SpellShape.Cone],
+);
const canConeBeCast = computed(() => selectedState.reactive.selected.size > 0);
@@ -18,8 +25,16 @@ const translationMapping = {
[SpellShape.Square]: t("game.ui.tools.DrawTool.square"),
[SpellShape.Circle]: t("game.ui.tools.DrawTool.circle"),
[SpellShape.Cone]: t("game.ui.tools.DrawTool.cone"),
+ [SpellShape.Hex]: t("game.ui.tools.DrawTool.square"),
};
+const stepSize = computed(() => {
+ if (isHexGrid.value && spellTool.state.selectedSpellShape === SpellShape.Hex) {
+ return 1;
+ }
+ return 5;
+});
+
async function selectShape(shape: SpellShape): Promise
+
+
+
+
+
+
+
-
+
{
type="number"
style="flex: 1; align-self: center"
min="0"
- step="5"
+ :step="stepSize"
/>
+
+
+
+
-import { computed, onMounted, ref, watch } from "vue";
+import { computed } from "vue";
import type { CSSProperties } from "vue";
import { useI18n } from "vue-i18n";
@@ -10,6 +10,7 @@ import { accessState } from "../../systems/access/state";
import { gameSystem } from "../../systems/game";
import { gameState } from "../../systems/game/state";
import { labelState } from "../../systems/labels/state";
+import { roomState } from "../../systems/room/state";
import { playerSettingsState } from "../../systems/settings/players/state";
import { activeModeTools, activeTool, activeToolMode, dmTools, toggleActiveMode, toolMap } from "../../tools/tools";
import { initiativeStore } from "../initiative/state";
@@ -21,7 +22,6 @@ import MapTool from "./MapTool.vue";
import RulerTool from "./RulerTool.vue";
import SelectTool from "./SelectTool.vue";
import SpellTool from "./SpellTool.vue";
-import { useToolPosition } from "./toolPosition";
import VisionTool from "./VisionTool.vue";
const { t } = useI18n();
@@ -29,8 +29,6 @@ const { t } = useI18n();
const hasGameboard = coreStore.state.boardId !== undefined;
const detailBottom = computed(() => (playerSettingsState.reactive.useToolIcons.value ? "7.8rem" : "6.6rem"));
-const detailRight = ref("0px");
-const detailArrow = ref("0px");
const visibleTools = computed(() => {
{
@@ -42,6 +40,8 @@ const visibleTools = computed(() => {
if (labelState.reactive.labels.size === 0) continue;
} else if (toolName === ToolName.Vision) {
if (accessState.reactive.ownedTokens.size <= 1) continue;
+ } else if (toolName === ToolName.Dice) {
+ if (!roomState.reactive.enableDice) continue;
}
const tool = toolMap[toolName];
@@ -55,20 +55,6 @@ const visibleTools = computed(() => {
}
});
-watch(
- [() => playerSettingsState.reactive.useToolIcons.value, activeTool, activeToolMode, visibleTools],
- () => updateDetails(),
- { flush: "post" },
-);
-
-onMounted(() => updateDetails());
-
-function updateDetails(): void {
- const pos = useToolPosition(activeTool.value);
- detailRight.value = pos.right;
- detailArrow.value = pos.arrow;
-}
-
function getStyle(tool: ToolMode): CSSProperties {
if (tool === activeToolMode.value) {
return {
@@ -99,10 +85,7 @@ function toggleFakePlayer(): void {
-
+
@@ -275,31 +256,15 @@ function toggleFakePlayer(): void {
-
-
-