Added unknown token for when a token in use is deleted
This commit is contained in:
parent
887bce81d1
commit
3f959fd3a3
@ -6,7 +6,7 @@ import ResetMapIcon from "../../icons/ResetMapIcon";
|
|||||||
import ExpandMoreDotIcon from "../../icons/ExpandMoreDotIcon";
|
import ExpandMoreDotIcon from "../../icons/ExpandMoreDotIcon";
|
||||||
|
|
||||||
import useDataSource from "../../helpers/useDataSource";
|
import useDataSource from "../../helpers/useDataSource";
|
||||||
import { mapSources as defaultMapSources } from "../../maps";
|
import { mapSources as defaultMapSources, unknownSource } from "../../maps";
|
||||||
|
|
||||||
function MapTile({
|
function MapTile({
|
||||||
map,
|
map,
|
||||||
@ -17,7 +17,7 @@ function MapTile({
|
|||||||
onMapReset,
|
onMapReset,
|
||||||
onDone,
|
onDone,
|
||||||
}) {
|
}) {
|
||||||
const mapSource = useDataSource(map, defaultMapSources);
|
const mapSource = useDataSource(map, defaultMapSources, unknownSource);
|
||||||
const [isMapTileMenuOpen, setIsTileMenuOpen] = useState(false);
|
const [isMapTileMenuOpen, setIsTileMenuOpen] = useState(false);
|
||||||
const isDefault = map.type === "default";
|
const isDefault = map.type === "default";
|
||||||
const hasMapState =
|
const hasMapState =
|
||||||
|
@ -9,11 +9,11 @@ import useDataSource from "../../helpers/useDataSource";
|
|||||||
|
|
||||||
import AuthContext from "../../contexts/AuthContext";
|
import AuthContext from "../../contexts/AuthContext";
|
||||||
|
|
||||||
import { tokenSources } from "../../tokens";
|
import { tokenSources, unknownSource } from "../../tokens";
|
||||||
|
|
||||||
function MapToken({ token, tokenState, tokenSizePercent, className }) {
|
function MapToken({ token, tokenState, tokenSizePercent, className }) {
|
||||||
const { userId } = useContext(AuthContext);
|
const { userId } = useContext(AuthContext);
|
||||||
const imageSource = useDataSource(token, tokenSources);
|
const imageSource = useDataSource(token, tokenSources, unknownSource);
|
||||||
|
|
||||||
const imageRef = useRef();
|
const imageRef = useRef();
|
||||||
// Stop touch to prevent 3d touch gesutre on iOS
|
// Stop touch to prevent 3d touch gesutre on iOS
|
||||||
|
@ -4,10 +4,10 @@ import { Box, Image } from "theme-ui";
|
|||||||
import usePreventTouch from "../../helpers/usePreventTouch";
|
import usePreventTouch from "../../helpers/usePreventTouch";
|
||||||
import useDataSource from "../../helpers/useDataSource";
|
import useDataSource from "../../helpers/useDataSource";
|
||||||
|
|
||||||
import { tokenSources } from "../../tokens";
|
import { tokenSources, unknownSource } from "../../tokens";
|
||||||
|
|
||||||
function ListToken({ token, className }) {
|
function ListToken({ token, className }) {
|
||||||
const imageSource = useDataSource(token, tokenSources);
|
const imageSource = useDataSource(token, tokenSources, unknownSource);
|
||||||
|
|
||||||
const imageRef = useRef();
|
const imageRef = useRef();
|
||||||
// Stop touch to prevent 3d touch gesutre on iOS
|
// Stop touch to prevent 3d touch gesutre on iOS
|
||||||
|
@ -4,10 +4,13 @@ import { Flex, Image, Text, Box, IconButton } from "theme-ui";
|
|||||||
import RemoveMapIcon from "../../icons/RemoveMapIcon";
|
import RemoveMapIcon from "../../icons/RemoveMapIcon";
|
||||||
|
|
||||||
import useDataSource from "../../helpers/useDataSource";
|
import useDataSource from "../../helpers/useDataSource";
|
||||||
import { tokenSources as defaultTokenSources } from "../../tokens";
|
import {
|
||||||
|
tokenSources as defaultTokenSources,
|
||||||
|
unknownSource,
|
||||||
|
} from "../../tokens";
|
||||||
|
|
||||||
function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove }) {
|
function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove }) {
|
||||||
const tokenSource = useDataSource(token, defaultTokenSources);
|
const tokenSource = useDataSource(token, defaultTokenSources, unknownSource);
|
||||||
const isDefault = token.type === "default";
|
const isDefault = token.type === "default";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -46,7 +46,6 @@ export function TokenDataProvider({ children }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function removeToken(id) {
|
async function removeToken(id) {
|
||||||
// TODO when removing token also remove it from all states that reference it and replicate
|
|
||||||
await database.table("tokens").delete(id);
|
await database.table("tokens").delete(id);
|
||||||
setTokens((prevTokens) => {
|
setTokens((prevTokens) => {
|
||||||
const filtered = prevTokens.filter((token) => token.id !== id);
|
const filtered = prevTokens.filter((token) => token.id !== id);
|
||||||
|
@ -2,14 +2,14 @@ import { useEffect, useState } from "react";
|
|||||||
|
|
||||||
// Helper function to load either file or default data
|
// Helper function to load either file or default data
|
||||||
// into a URL and ensure that it is revoked if needed
|
// into a URL and ensure that it is revoked if needed
|
||||||
function useDataSource(data, defaultSources) {
|
function useDataSource(data, defaultSources, unknownSource) {
|
||||||
const [dataSource, setDataSource] = useState(null);
|
const [dataSource, setDataSource] = useState(null);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!data) {
|
if (!data) {
|
||||||
setDataSource(null);
|
setDataSource(unknownSource);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let url = null;
|
let url = unknownSource;
|
||||||
if (data.type === "file") {
|
if (data.type === "file") {
|
||||||
url = URL.createObjectURL(new Blob([data.file]));
|
url = URL.createObjectURL(new Blob([data.file]));
|
||||||
} else if (data.type === "default") {
|
} else if (data.type === "default") {
|
||||||
@ -22,7 +22,7 @@ function useDataSource(data, defaultSources) {
|
|||||||
URL.revokeObjectURL(url);
|
URL.revokeObjectURL(url);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}, [data, defaultSources]);
|
}, [data, defaultSources, unknownSource]);
|
||||||
|
|
||||||
return dataSource;
|
return dataSource;
|
||||||
}
|
}
|
||||||
|
BIN
src/maps/Unknown Grid 22x22.jpg
Normal file
BIN
src/maps/Unknown Grid 22x22.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 170 KiB |
@ -5,6 +5,8 @@ import stoneImage from "./Stone Grid 22x22.jpg";
|
|||||||
import waterImage from "./Water Grid 22x22.jpg";
|
import waterImage from "./Water Grid 22x22.jpg";
|
||||||
import woodImage from "./Wood Grid 22x22.jpg";
|
import woodImage from "./Wood Grid 22x22.jpg";
|
||||||
|
|
||||||
|
import unknownImage from "./Unknown Grid 22x22.jpg";
|
||||||
|
|
||||||
export const mapSources = {
|
export const mapSources = {
|
||||||
blank: blankImage,
|
blank: blankImage,
|
||||||
grass: grassImage,
|
grass: grassImage,
|
||||||
@ -23,3 +25,5 @@ export const maps = Object.keys(mapSources).map((key) => ({
|
|||||||
height: 1024,
|
height: 1024,
|
||||||
type: "default",
|
type: "default",
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
export const unknownSource = unknownImage;
|
||||||
|
@ -18,7 +18,26 @@ function SettingsModal({ isOpen, onRequestClose }) {
|
|||||||
|
|
||||||
async function handleClearCache() {
|
async function handleClearCache() {
|
||||||
await database.table("maps").where("owner").notEqual(userId).delete();
|
await database.table("maps").where("owner").notEqual(userId).delete();
|
||||||
// TODO: With custom tokens look up all tokens that aren't being used in a state
|
// Find all other peoples tokens who aren't benig used in a map state and delete them
|
||||||
|
const tokens = await database
|
||||||
|
.table("tokens")
|
||||||
|
.where("owner")
|
||||||
|
.notEqual(userId)
|
||||||
|
.toArray();
|
||||||
|
const states = await database.table("states").toArray();
|
||||||
|
for (let token of tokens) {
|
||||||
|
let inUse = false;
|
||||||
|
for (let state of states) {
|
||||||
|
for (let tokenState of Object.values(state.tokens)) {
|
||||||
|
if (token.id === tokenState.tokenId) {
|
||||||
|
inUse = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!inUse) {
|
||||||
|
database.table("tokens").delete(token.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
window.location.reload();
|
window.location.reload();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -219,9 +219,11 @@ function Game() {
|
|||||||
) {
|
) {
|
||||||
sentTokens[tokenState.tokenId] = true;
|
sentTokens[tokenState.tokenId] = true;
|
||||||
const token = getToken(tokenState.tokenId);
|
const token = getToken(tokenState.tokenId);
|
||||||
// Omit file from token peer will request file if needed
|
if (token) {
|
||||||
const { file, ...rest } = token;
|
// Omit file from token peer will request file if needed
|
||||||
peer.connection.send({ id: "token", data: rest });
|
const { file, ...rest } = token;
|
||||||
|
peer.connection.send({ id: "token", data: rest });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
BIN
src/tokens/Unknown.png
Normal file
BIN
src/tokens/Unknown.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 65 KiB |
@ -29,6 +29,7 @@ import titan from "./Titan.png";
|
|||||||
import undead from "./Undead.png";
|
import undead from "./Undead.png";
|
||||||
import warlock from "./Warlock.png";
|
import warlock from "./Warlock.png";
|
||||||
import wizard from "./Wizard.png";
|
import wizard from "./Wizard.png";
|
||||||
|
import unknown from "./Unknown.png";
|
||||||
|
|
||||||
export const tokenSources = {
|
export const tokenSources = {
|
||||||
barbarian,
|
barbarian,
|
||||||
@ -69,3 +70,5 @@ export const tokens = Object.keys(tokenSources).map((key) => ({
|
|||||||
name: key.charAt(0).toUpperCase() + key.slice(1),
|
name: key.charAt(0).toUpperCase() + key.slice(1),
|
||||||
type: "default",
|
type: "default",
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
export const unknownSource = unknown;
|
||||||
|
Loading…
Reference in New Issue
Block a user