Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Converted /modals to typescript

Browse Source
This commit is contained in:
Nicola Thouliss 2021-06-02 17:49:31 +10:00
parent 32f6e1fb23
commit ecc4f67f37
33 changed files with 571 additions and 311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/LoadingOverlay.js → src/components/LoadingOverlay.tsx
View File

@ -1,9 +1,8 @@
import React from "react";
import { Box } from "theme-ui";
import Spinner from "./Spinner";
function LoadingOverlay({ bg }) {
function LoadingOverlay({ bg }: any ) {
return (
<Box
sx={{

16
src/components/Modal.js → src/components/Modal.tsx
View File

@ -1,7 +1,11 @@
import React from "react";
import Modal from "react-modal";
import React, { ReactChild } from "react";
import Modal, { Props } from "react-modal";
import { useThemeUI, Close } from "theme-ui";
type ModalProps = Props & {
children: ReactChild | ReactChild[],
allowClose: boolean
}
function StyledModal({
isOpen,
onRequestClose,
@ -9,7 +13,7 @@ function StyledModal({
allowClose,
style,
...props
}) {
}: ModalProps ) {
const { theme } = useThemeUI();
return (
@ -19,7 +23,7 @@ function StyledModal({
style={{
overlay: { backgroundColor: "rgba(0, 0, 0, 0.73)", zIndex: 100 },
content: {
backgroundColor: theme.colors.background,
backgroundColor: theme.colors?.background,
top: "50%",
left: "50%",
right: "auto",
@ -28,7 +32,7 @@ function StyledModal({
transform: "translate(-50%, -50%)",
maxHeight: "100%",
...style,
},
} as React.CSSProperties,
}}
{...props}
>
@ -46,7 +50,7 @@ function StyledModal({
StyledModal.defaultProps = {
allowClose: true,
style: {},
style: {}
};
export default StyledModal;

19
src/components/Slider.js → src/components/Slider.tsx
View File

@ -1,10 +1,19 @@
import React, { useState } from "react";
import { Box, Slider as ThemeSlider } from "theme-ui";
import { useState } from "react";
import { Box, Slider as ThemeSlider, SliderProps } from "theme-ui";
function Slider({ min, max, value, ml, mr, labelFunc, ...rest }) {
type SliderModalProps = SliderProps & {
min: number,
max: number,
value: number,
ml: any,
mr: any,
labelFunc: any
}
function Slider({ min, max, value, ml, mr, labelFunc, ...rest }: SliderModalProps ) {
const percentValue = ((value - min) * 100) / (max - min);
const [labelVisible, setLabelVisible] = useState(false);
const [labelVisible, setLabelVisible] = useState<boolean>(false);
return (
<Box sx={{ position: "relative" }} ml={ml} mr={mr}>
@ -63,7 +72,7 @@ Slider.defaultProps = {
value: 0,
ml: 0,
mr: 0,
labelFunc: (value) => value,
labelFunc: (value: any) => value,
};
export default Slider;

142
src/components/map/Map.js → src/components/map/Map.tsx
View File

@ -24,6 +24,78 @@ import {
EditShapeAction,
RemoveShapeAction,
} from "../../actions";
import { Fog, Path, Shape } from "../../helpers/drawing";
import Session from "../../network/Session";
import { Grid } from "../../helpers/grid";
import { ImageFile } from "../../helpers/image";
type Resolutions = Record<string, ImageFile>
export type Map = {
id: string,
name: string,
owner: string,
file: Uint8Array,
quality: string,
resolutions: Resolutions,
grid: Grid,
group: string,
width: number,
height: number,
type: string,
lastUsed: number,
lastModified: number,
created: number,
showGrid: boolean,
snapToGrid: boolean,
thumbnail: ImageFile,
}
export type Note = {
id: string,
color: string,
lastModified: number,
lastModifiedBy: string,
locked: boolean,
size: number,
text: string,
textOnly: boolean,
visible: boolean,
x: number,
y: number,
}
export type TokenState = {
id: string,
tokenId: string,
owner: string,
size: number,
label: string,
status: string[],
x: number,
y: number,
lastModifiedBy: string,
lastModified: number,
rotation: number,
locked: boolean,
visible: boolean
}
interface PathId extends Path {
id: string
}
interface ShapeId extends Shape {
id: string
}
export type MapState = {
tokens: Record<string, TokenState>,
drawShapes: PathId | ShapeId,
fogShapes: Fog[],
editFlags: string[],
notes: Note[],
mapId: string,
}
function Map({
map,
@ -47,14 +119,36 @@ function Map({
allowNoteEditing,
disabledTokens,
session,
}: {
map: any
mapState: MapState
mapActions: any,
onMapTokenStateChange: any,
onMapTokenStateRemove: any,
onMapChange: any,
onMapReset: any,
onMapDraw: any,
onMapDrawUndo: any,
onMapDrawRedo: any,
onFogDraw: any,
onFogDrawUndo: any,
onFogDrawRedo: any,
onMapNoteChange: any,
onMapNoteRemove: any,
allowMapDrawing: boolean,
allowFogDrawing: boolean,
allowMapChange: boolean,
allowNoteEditing: boolean,
disabledTokens: any,
session: Session
}) {
const { tokensById } = useTokenData();
const [selectedToolId, setSelectedToolId] = useState("move");
const { settings, setSettings } = useSettings();
const { settings, setSettings }: { settings: any, setSettings: any} = useSettings();
function handleToolSettingChange(tool, change) {
setSettings((prevSettings) => ({
function handleToolSettingChange(tool: any, change: any) {
setSettings((prevSettings: any) => ({
...prevSettings,
[tool]: {
...prevSettings[tool],
@ -66,7 +160,7 @@ function Map({
const drawShapes = Object.values(mapState?.drawShapes || {});
const fogShapes = Object.values(mapState?.fogShapes || {});
function handleToolAction(action) {
function handleToolAction(action: string) {
if (action === "eraseAll") {
onMapDraw(new RemoveShapeAction(drawShapes.map((s) => s.id)));
}
@ -84,27 +178,27 @@ function Map({
}
}
function handleMapShapeAdd(shape) {
function handleMapShapeAdd(shape: Shape) {
onMapDraw(new AddShapeAction([shape]));
}
function handleMapShapesRemove(shapeIds) {
function handleMapShapesRemove(shapeIds: string[]) {
onMapDraw(new RemoveShapeAction(shapeIds));
}
function handleFogShapesAdd(shapes) {
function handleFogShapesAdd(shapes: Shape[]) {
onFogDraw(new AddShapeAction(shapes));
}
function handleFogShapesCut(shapes) {
function handleFogShapesCut(shapes: Shape[]) {
onFogDraw(new CutShapeAction(shapes));
}
function handleFogShapesRemove(shapeIds) {
function handleFogShapesRemove(shapeIds: string[]) {
onFogDraw(new RemoveShapeAction(shapeIds));
}
function handleFogShapesEdit(shapes) {
function handleFogShapesEdit(shapes: Shape[]) {
onFogDraw(new EditShapeAction(shapes));
}
@ -127,7 +221,7 @@ function Map({
disabledControls.push("note");
}
const disabledSettings = { fog: [], drawing: [] };
const disabledSettings: { fog: any[], drawing: any[]} = { fog: [], drawing: [] };
if (drawShapes.length === 0) {
disabledSettings.drawing.push("erase");
}
@ -166,10 +260,10 @@ function Map({
/>
);
const [isTokenMenuOpen, setIsTokenMenuOpen] = useState(false);
const [tokenMenuOptions, setTokenMenuOptions] = useState({});
const [tokenDraggingOptions, setTokenDraggingOptions] = useState();
function handleTokenMenuOpen(tokenStateId, tokenImage) {
const [isTokenMenuOpen, setIsTokenMenuOpen]: [ isTokenMenuOpen: boolean, setIsTokenMenuOpen: React.Dispatch<React.SetStateAction<boolean>>] = useState<boolean>(false);
const [tokenMenuOptions, setTokenMenuOptions]: [ tokenMenuOptions: any, setTokenMenuOptions: any ] = useState({});
const [tokenDraggingOptions, setTokenDraggingOptions]: [ tokenDraggingOptions: any, setTokenDragginOptions: any ] = useState();
function handleTokenMenuOpen(tokenStateId: string, tokenImage: any) {
setTokenMenuOptions({ tokenStateId, tokenImage });
setIsTokenMenuOpen(true);
}
@ -200,7 +294,7 @@ function Map({
const tokenDragOverlay = tokenDraggingOptions && (
<TokenDragOverlay
onTokenStateRemove={(state) => {
onTokenStateRemove={(state: any) => {
onMapTokenStateRemove(state);
setTokenDraggingOptions(null);
}}
@ -243,7 +337,6 @@ function Map({
<MapMeasure
map={map}
active={selectedToolId === "measure"}
selectedToolSettings={settings[selectedToolId]}
/>
);
@ -254,15 +347,15 @@ function Map({
/>
);
const [isNoteMenuOpen, setIsNoteMenuOpen] = useState(false);
const [noteMenuOptions, setNoteMenuOptions] = useState({});
const [noteDraggingOptions, setNoteDraggingOptions] = useState();
function handleNoteMenuOpen(noteId, noteNode) {
const [isNoteMenuOpen, setIsNoteMenuOpen] = useState<boolean>(false);
const [noteMenuOptions, setNoteMenuOptions] = useState<any>({});
const [noteDraggingOptions, setNoteDraggingOptions]= useState<any>();
function handleNoteMenuOpen(noteId: string, noteNode: any) {
setNoteMenuOptions({ noteId, noteNode });
setIsNoteMenuOpen(true);
}
function sortNotes(a, b, noteDraggingOptions) {
function sortNotes(a: any, b: any, noteDraggingOptions: any) {
if (
noteDraggingOptions &&
noteDraggingOptions.dragging &&
@ -287,7 +380,6 @@ function Map({
<MapNotes
map={map}
active={selectedToolId === "note"}
selectedToolSettings={settings[selectedToolId]}
onNoteAdd={onMapNoteChange}
onNoteChange={onMapNoteChange}
notes={
@ -302,7 +394,7 @@ function Map({
allowNoteEditing &&
(selectedToolId === "note" || selectedToolId === "move")
}
onNoteDragStart={(e, noteId) =>
onNoteDragStart={(e: any, noteId: any) =>
setNoteDraggingOptions({ dragging: true, noteId, noteGroup: e.target })
}
onNoteDragEnd={() =>
@ -328,7 +420,7 @@ function Map({
dragging={!!(noteDraggingOptions && noteDraggingOptions.dragging)}
noteGroup={noteDraggingOptions && noteDraggingOptions.noteGroup}
noteId={noteDraggingOptions && noteDraggingOptions.noteId}
onNoteRemove={(noteId) => {
onNoteRemove={(noteId: any) => {
onMapNoteRemove(noteId);
setNoteDraggingOptions(null);
}}

10
src/contexts/KeyboardContext.js → src/contexts/KeyboardContext.tsx
View File

@ -3,10 +3,10 @@ import { EventEmitter } from "events";
const KeyboardContext = React.createContext({ keyEmitter: new EventEmitter() });
export function KeyboardProvider({ children }) {
export function KeyboardProvider({ children }: { children: any}) {
const [keyEmitter] = useState(new EventEmitter());
useEffect(() => {
function handleKeyDown(event) {
function handleKeyDown(event: Event) {
// Ignore text input
if (
event.target instanceof HTMLInputElement ||
@ -17,7 +17,7 @@ export function KeyboardProvider({ children }) {
keyEmitter.emit("keyDown", event);
}
function handleKeyUp(event) {
function handleKeyUp(event: Event) {
// Ignore text input
if (
event.target instanceof HTMLInputElement ||
@ -49,7 +49,7 @@ export function KeyboardProvider({ children }) {
* @param {KeyboardEvent} onKeyDown
* @param {KeyboardEvent} onKeyUp
*/
export function useKeyboard(onKeyDown, onKeyUp) {
export function useKeyboard(onKeyDown: (...args: any[]) => void, onKeyUp: (...args: any[]) => void) {
const context = useContext(KeyboardContext);
if (context === undefined) {
throw new Error("useKeyboard must be used within a KeyboardProvider");
@ -78,7 +78,7 @@ export function useKeyboard(onKeyDown, onKeyUp) {
* Handler to handle a blur event. Useful when using a shortcut that uses the Alt or Cmd
* @param {FocusEvent} onBlur
*/
export function useBlur(onBlur) {
export function useBlur(onBlur: EventListenerOrEventListenerObject) {
useEffect(() => {
if (onBlur) {
window.addEventListener("blur", onBlur);

103
src/contexts/TokenDataContext.js → src/contexts/TokenDataContext.tsx
View File

@ -10,13 +10,29 @@ import { decode } from "@msgpack/msgpack";
import { useAuth } from "./AuthContext";
import { useDatabase } from "./DatabaseContext";
import { tokens as defaultTokens } from "../tokens";
import { DefaultToken, FileToken, Token, tokens as defaultTokens } from "../tokens";
const TokenDataContext = React.createContext();
type TokenDataContext = {
tokens: Token[];
ownedTokens: Token[];
addToken: (token: Token) => Promise<void>;
removeToken: (id: string) => Promise<void>;
removeTokens: (ids: string[]) => Promise<void>;
updateToken: (id: string, update: Partial<Token>) => Promise<void>;
updateTokens: (ids: string[], update: Partial<Token>) => Promise<void>;
putToken: (token: Token) => Promise<void>;
getToken: (tokenId: string) => Token | undefined
tokensById: { [key: string]: Token; };
tokensLoading: boolean;
getTokenFromDB: (tokenId: string) => Promise<Token>;
loadTokens: (tokenIds: string[]) => Promise<void>;
}
const TokenDataContext = React.createContext<TokenDataContext | undefined>(undefined);
const cachedTokenMax = 100;
export function TokenDataProvider({ children }) {
export function TokenDataProvider({ children }: { children: any }) {
const { database, databaseStatus, worker } = useDatabase();
const { userId } = useAuth();
@ -24,7 +40,7 @@ export function TokenDataProvider({ children }) {
* Contains all tokens without any file data,
* to ensure file data is present call loadTokens
*/
const [tokens, setTokens] = useState([]);
const [tokens, setTokens] = useState<Token[]>([]);
const [tokensLoading, setTokensLoading] = useState(true);
useEffect(() => {
@ -32,13 +48,12 @@ export function TokenDataProvider({ children }) {
return;
}
function getDefaultTokens() {
const defaultTokensWithIds = [];
const defaultTokensWithIds: Required<DefaultToken[]> = [];
for (let defaultToken of defaultTokens) {
defaultTokensWithIds.push({
...defaultToken,
id: `__default-${defaultToken.name}`,
owner: userId,
group: "default",
});
}
return defaultTokensWithIds;
@ -46,19 +61,19 @@ export function TokenDataProvider({ children }) {
// Loads tokens without the file data to save memory
async function loadTokens() {
let storedTokens = [];
let storedTokens: any = [];
// Try to load tokens with worker, fallback to database if failed
const packedTokens = await worker.loadData("tokens");
const packedTokens: ArrayLike<number> | BufferSource = await worker.loadData("tokens");
if (packedTokens) {
storedTokens = decode(packedTokens);
} else {
console.warn("Unable to load tokens with worker, loading may be slow");
await database.table("tokens").each((token) => {
const { file, resolutions, ...rest } = token;
await database?.table("tokens").each((token: FileToken) => {
const { file, ...rest } = token;
storedTokens.push(rest);
});
}
const sortedTokens = storedTokens.sort((a, b) => b.created - a.created);
const sortedTokens = storedTokens.sort((a: any, b: any) => b.created - a.created);
const defaultTokensWithIds = getDefaultTokens();
const allTokens = [...sortedTokens, ...defaultTokensWithIds];
setTokens(allTokens);
@ -79,7 +94,7 @@ export function TokenDataProvider({ children }) {
const getTokenFromDB = useCallback(
async (tokenId) => {
let token = await database.table("tokens").get(tokenId);
let token = await database?.table("tokens").get(tokenId);
return token;
},
[database]
@ -90,23 +105,23 @@ export function TokenDataProvider({ children }) {
* Sorted by when they we're last used
*/
const updateCache = useCallback(async () => {
const cachedTokens = await database
.table("tokens")
.where("owner")
.notEqual(userId)
.sortBy("lastUsed");
if (cachedTokens.length > cachedTokenMax) {
const cacheDeleteCount = cachedTokens.length - cachedTokenMax;
const cachedTokens: Token[] | undefined = await database?.table("tokens").where("owner").notEqual(userId).sortBy("lastUsed");
// TODO: handle undefined cachedTokens
if (!cachedTokens) {
return;
}
if (cachedTokens?.length > cachedTokenMax) {
const cacheDeleteCount = cachedTokens.length - cachedTokenMax
const idsToDelete = cachedTokens
.slice(0, cacheDeleteCount)
.map((token) => token.id);
database.table("tokens").where("id").anyOf(idsToDelete).delete();
database?.table("tokens").where("id").anyOf(idsToDelete).delete();
}
}, [database, userId]);
const addToken = useCallback(
async (token) => {
await database.table("tokens").add(token);
await database?.table("tokens").add(token);
if (token.owner !== userId) {
await updateCache();
}
@ -115,23 +130,23 @@ export function TokenDataProvider({ children }) {
);
const removeToken = useCallback(
async (id) => {
await database.table("tokens").delete(id);
async (id: string) => {
await database?.table("tokens").delete(id);
},
[database]
);
const removeTokens = useCallback(
async (ids) => {
await database.table("tokens").bulkDelete(ids);
async (ids: string[]) => {
await database?.table("tokens").bulkDelete(ids);
},
[database]
);
const updateToken = useCallback(
async (id, update) => {
async (id: string, update: any) => {
const change = { lastModified: Date.now(), ...update };
await database.table("tokens").update(id, change);
await database?.table("tokens").update(id, change);
},
[database]
);
@ -140,7 +155,7 @@ export function TokenDataProvider({ children }) {
async (ids, update) => {
const change = { lastModified: Date.now(), ...update };
await Promise.all(
ids.map((id) => database.table("tokens").update(id, change))
ids.map((id: string) => database?.table("tokens").update(id, change))
);
},
[database]
@ -148,7 +163,7 @@ export function TokenDataProvider({ children }) {
const putToken = useCallback(
async (token) => {
await database.table("tokens").put(token);
await database?.table("tokens").put(token);
if (token.owner !== userId) {
await updateCache();
}
@ -157,13 +172,17 @@ export function TokenDataProvider({ children }) {
);
const loadTokens = useCallback(
async (tokenIds) => {
const loadedTokens = await database.table("tokens").bulkGet(tokenIds);
const loadedTokensById = loadedTokens.reduce((obj, token) => {
async (tokenIds: string[]) => {
const loadedTokens: FileToken[] | undefined = await database?.table("tokens").bulkGet(tokenIds);
const loadedTokensById = loadedTokens?.reduce((obj: { [key: string]: FileToken }, token: FileToken) => {
obj[token.id] = token;
return obj;
}, {});
setTokens((prevTokens) => {
if (!loadedTokensById) {
// TODO: whatever
return;
}
setTokens((prevTokens: Token[]) => {
return prevTokens.map((prevToken) => {
if (prevToken.id in loadedTokensById) {
return loadedTokensById[prevToken.id];
@ -176,22 +195,13 @@ export function TokenDataProvider({ children }) {
[database]
);
const unloadTokens = useCallback(async () => {
setTokens((prevTokens) => {
return prevTokens.map((prevToken) => {
const { file, ...rest } = prevToken;
return rest;
});
});
}, []);
// Create DB observable to sync creating and deleting
useEffect(() => {
if (!database || databaseStatus === "loading") {
return;
}
function handleTokenChanges(changes) {
function handleTokenChanges(changes: any) {
for (let change of changes) {
if (change.table === "tokens") {
if (change.type === 1) {
@ -230,12 +240,12 @@ export function TokenDataProvider({ children }) {
const ownedTokens = tokens.filter((token) => token.owner === userId);
const tokensById = tokens.reduce((obj, token) => {
const tokensById: { [key: string]: Token; } = tokens.reduce((obj: { [key: string]: Token }, token) => {
obj[token.id] = token;
return obj;
}, {});
const value = {
const value: TokenDataContext = {
tokens,
ownedTokens,
addToken,
@ -249,7 +259,6 @@ export function TokenDataProvider({ children }) {
tokensLoading,
getTokenFromDB,
loadTokens,
unloadTokens,
};
return (
@ -259,7 +268,7 @@ export function TokenDataProvider({ children }) {
);
}
export function useTokenData() {
export function useTokenData(): TokenDataContext {
const context = useContext(TokenDataContext);
if (context === undefined) {
throw new Error("useTokenData must be used within a TokenDataProvider");

3
src/global.d.ts vendored
View File

@ -4,4 +4,5 @@ declare module 'fake-indexeddb';
declare module 'fake-indexeddb/lib/FDBKeyRange';
declare module '*.glb';
declare module '*.png';
declare module '*.mp4';
declare module '*.mp4';
declare module '*.bin';

40
src/helpers/drawing.ts
View File

@ -70,7 +70,7 @@ type ShapeType = "line" | "rectangle" | "circle" | "triangle"
* @typedef {("fill"|"stroke")} PathType
*/
// type PathType = "fill" | "stroke"
type PathType = "fill" | "stroke"
/**
* @typedef Path
@ -83,15 +83,15 @@ type ShapeType = "line" | "rectangle" | "circle" | "triangle"
* @property {"path"} type
*/
// type Path = {
// blend: boolean,
// color: string,
// data: PointsData,
// id: string,
// pathType: PathType,
// strokeWidth: number,
// type: "path"
// }
export type Path = {
blend: boolean,
color: string,
data: PointsData,
id: string,
pathType: PathType,
strokeWidth: number,
type: "path"
}
/**
* @typedef Shape
@ -104,15 +104,15 @@ type ShapeType = "line" | "rectangle" | "circle" | "triangle"
* @property {"shape"} type
*/
// type Shape = {
// blend: boolean,
// color: string,
// data: ShapeData,
// id: string,
// shapeType: ShapeType,
// strokeWidth: number,
// type: "shape"
// }
export type Shape = {
blend: boolean,
color: string,
data: ShapeData,
id: string,
shapeType: ShapeType,
strokeWidth: number,
type: "shape"
}
/**
* @typedef Fog
@ -124,7 +124,7 @@ type ShapeType = "line" | "rectangle" | "circle" | "triangle"
* @property {boolean} visible
*/
type Fog = {
export type Fog = {
color: string,
data: FogData,
id: string,

10
src/helpers/grid.ts
View File

@ -38,10 +38,10 @@ type GridMeasurement ={
* @property {GridMeasurement} measurement
*/
export type Grid = {
inset: GridInset,
inset?: GridInset,
size: Vector2,
type: ("square"|"hexVertical"|"hexHorizontal"),
measurement: GridMeasurement
measurement?: GridMeasurement
}
/**
@ -51,7 +51,7 @@ export type Grid = {
* @param {number} baseHeight Height of the grid in pixels before inset
* @returns {Size}
*/
export function getGridPixelSize(grid: Grid, baseWidth: number, baseHeight: number): Size {
export function getGridPixelSize(grid: Required<Grid>, baseWidth: number, baseHeight: number): Size {
const width = (grid.inset.bottomRight.x - grid.inset.topLeft.x) * baseWidth;
const height = (grid.inset.bottomRight.y - grid.inset.topLeft.y) * baseHeight;
return new Size(width, height);
@ -225,7 +225,7 @@ export function getGridDefaultInset(grid: Grid, mapWidth: number, mapHeight: num
* @param {number} mapHeight Height of the map in pixels before inset
* @returns {GridInset}
*/
export function getGridUpdatedInset(grid: Grid, mapWidth: number, mapHeight: number): GridInset {
export function getGridUpdatedInset(grid: Required<Grid>, mapWidth: number, mapHeight: number): GridInset {
let inset = grid.inset;
// Take current inset width and use it to calculate the new height
if (grid.size.x > 0 && grid.size.x > 0) {
@ -295,7 +295,7 @@ export function hexOffsetToCube(offset: Vector2, type: ("hexVertical"|"hexHorizo
* @param {Vector2} b
* @param {Size} cellSize
*/
export function gridDistance(grid: Grid, a: Vector2, b: Vector2, cellSize: Size) {
export function gridDistance(grid: Required<Grid>, a: Vector2, b: Vector2, cellSize: Size) {
// Get grid coordinates
const aCoord = getNearestCellCoordinates(grid, a.x, a.y, cellSize);
const bCoord = getNearestCellCoordinates(grid, b.x, b.y, cellSize);

2
src/helpers/image.ts
View File

@ -109,7 +109,7 @@ export async function resizeImage(image: HTMLImageElement, size: number, type: s
* @property {string} id
*/
type ImageFile = {
export type ImageFile = {
file: Uint8Array | null,
width: number,
height: number,

15
src/helpers/select.tsx
View File

@ -8,7 +8,7 @@ import { groupBy } from "./shared";
*/
// Helper for generating search results for items
export function useSearch(items: [], search: string) {
export function useSearch(items: any[], search: string) {
// TODO: add types to search items -> don't like the never type
const [filteredItems, setFilteredItems]: [
filteredItems: any,
@ -18,10 +18,7 @@ export function useSearch(items: [], search: string) {
filteredItemScores: {},
setFilteredItemScores: React.Dispatch<React.SetStateAction<{}>>
] = useState({});
const [fuse, setFuse]: [
fuse: Fuse<never> | undefined,
setFuse: React.Dispatch<Fuse<never> | undefined>
] = useState();
const [fuse, setFuse] = useState<any>();
// Update search index when items change
useEffect(() => {
@ -85,7 +82,7 @@ export function useGroup(
export function handleItemSelect(
item: any,
selectMode: any,
selectedIds: number[],
selectedIds: string[],
setSelectedIds: any,
itemsByGroup: any,
itemGroups: any
@ -120,15 +117,15 @@ export function handleItemSelect(
const lastIndex = items.findIndex(
(m: any) => m.id === selectedIds[selectedIds.length - 1]
);
let idsToAdd: number[] = [];
let idsToRemove: number[] = [];
let idsToAdd: string[] = [];
let idsToRemove: string[] = [];
const direction = mapIndex > lastIndex ? 1 : -1;
for (
let i = lastIndex + direction;
direction < 0 ? i >= mapIndex : i <= mapIndex;
i += direction
) {
const itemId: number = items[i].id;
const itemId: string = items[i].id;
if (selectedIds.includes(itemId)) {
idsToRemove.push(itemId);
} else {

2
src/ml/Model.ts
View File

@ -1,4 +1,4 @@
import { ModelJSON, WeightsManifestConfig } from "@tensorflow/tfjs-core/dist/io/types";
import { ModelJSON } from "@tensorflow/tfjs-core/dist/io/types";
import blobToBuffer from "../helpers/blobToBuffer";
class Model {

11
src/modals/AddPartyMemberModal.js → src/modals/AddPartyMemberModal.tsx
View File

@ -1,9 +1,16 @@
import React from "react";
import { Box, Label, Text } from "theme-ui";
import Modal from "../components/Modal";
function AddPartyMemberModal({ isOpen, onRequestClose, gameId }) {
function AddPartyMemberModal({
isOpen,
onRequestClose,
gameId,
}: {
isOpen: boolean;
onRequestClose: any;
gameId: string;
}) {
return (
<Modal isOpen={isOpen} onRequestClose={onRequestClose}>
<Box>

18
src/modals/AuthModal.js → src/modals/AuthModal.tsx
View File

@ -1,27 +1,27 @@
import React, { useState, useRef } from "react";
import { useState, useRef, ChangeEvent, FormEvent } from "react";
import { Box, Input, Button, Label, Flex } from "theme-ui";
import { useAuth } from "../contexts/AuthContext";
import Modal from "../components/Modal";
function AuthModal({ isOpen, onSubmit }) {
function AuthModal({ isOpen, onSubmit }: { isOpen: boolean, onSubmit: (newPassword: string) => void}) {
const { password, setPassword } = useAuth();
const [tmpPassword, setTempPassword] = useState(password);
const [tmpPassword, setTempPassword] = useState<string>(password);
function handleChange(event) {
setTempPassword(event.target.value);
function handleChange(event: ChangeEvent<HTMLInputElement>): void {
setTempPassword(event.target?.value);
}
function handleSubmit(event) {
function handleSubmit(event: FormEvent<HTMLElement>): void {
event.preventDefault();
setPassword(tmpPassword);
onSubmit(tmpPassword);
}
const inputRef = useRef();
function focusInput() {
inputRef.current && inputRef.current.focus();
const inputRef = useRef<any>();
function focusInput(): void {
inputRef.current && inputRef.current?.focus();
}
return (

12
src/modals/ChangeNicknameModal.js → src/modals/ChangeNicknameModal.tsx
View File

@ -1,4 +1,4 @@
import React, { useRef } from "react";
import { useRef } from "react";
import { Box, Input, Button, Label, Flex } from "theme-ui";
import Modal from "../components/Modal";
@ -9,10 +9,16 @@ function ChangeNicknameModal({
onChangeSubmit,
nickname,
onChange,
}: {
isOpen: boolean,
onRequestClose: () => void,
onChangeSubmit: any,
nickname: string,
onChange: any,
}) {
const inputRef = useRef();
const inputRef = useRef<HTMLInputElement | null>(null);
function focusInput() {
inputRef.current && inputRef.current.focus();
inputRef.current && inputRef.current?.focus();
}
return (

14
src/modals/ConfirmModal.js → src/modals/ConfirmModal.tsx
View File

@ -1,8 +1,16 @@
import React from "react";
import { Box, Label, Flex, Button, Text } from "theme-ui";
import Modal from "../components/Modal";
type ConfirmModalProps = {
isOpen: boolean,
onRequestClose: () => void,
onConfirm: () => void,
confirmText: string,
label: string,
description: string,
}
function ConfirmModal({
isOpen,
onRequestClose,
@ -10,12 +18,12 @@ function ConfirmModal({
confirmText,
label,
description,
}) {
}: ConfirmModalProps ) {
return (
<Modal
isOpen={isOpen}
onRequestClose={onRequestClose}
style={{ maxWidth: "300px" }}
style={{ content: { maxWidth: "300px" } }}
>
<Box>
<Label py={2}>{label}</Label>

22
src/modals/EditGroupModal.js → src/modals/EditGroupModal.tsx
View File

@ -1,24 +1,32 @@
import React, { useEffect, useState } from "react";
import { useEffect, useState } from "react";
import { Box, Button, Label, Flex } from "theme-ui";
import Modal from "../components/Modal";
import Select from "../components/Select";
type EditGroupProps = {
isOpen: boolean,
onRequestClose: () => void,
onChange: any,
groups: string[],
defaultGroup: string | undefined | false,
}
function EditGroupModal({
isOpen,
onRequestClose,
onChange,
groups,
defaultGroup,
}) {
const [value, setValue] = useState();
const [options, setOptions] = useState([]);
}: EditGroupProps) {
const [value, setValue] = useState<{ value: string; label: string; } | undefined>();
const [options, setOptions] = useState<{ value: string; label: string; }[]>([]);
useEffect(() => {
if (defaultGroup) {
setValue({ value: defaultGroup, label: defaultGroup });
} else {
setValue();
setValue(undefined);
}
}, [defaultGroup]);
@ -26,7 +34,7 @@ function EditGroupModal({
setOptions(groups.map((group) => ({ value: group, label: group })));
}, [groups]);
function handleCreate(group) {
function handleCreate(group: string) {
const newOption = { value: group, label: group };
setValue(newOption);
setOptions((prev) => [...prev, newOption]);
@ -40,7 +48,7 @@ function EditGroupModal({
<Modal
isOpen={isOpen}
onRequestClose={onRequestClose}
style={{ overflow: "visible" }}
style={{ content: { overflow: "visible" } }}
>
<Box onSubmit={handleChange} sx={{ width: "300px" }}>
<Label py={2}>Select or add a group</Label>

33
src/modals/EditMapModal.js → src/modals/EditMapModal.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import { useEffect, useState } from "react";
import { Button, Flex, Label } from "theme-ui";
import Modal from "../components/Modal";
@ -12,8 +12,15 @@ import { isEmpty } from "../helpers/shared";
import { getGridDefaultInset } from "../helpers/grid";
import useResponsiveLayout from "../hooks/useResponsiveLayout";
import { MapState } from "../components/map/Map";
function EditMapModal({ isOpen, onDone, mapId }) {
type EditMapProps = {
isOpen: boolean,
onDone: any,
mapId: string
}
function EditMapModal({ isOpen, onDone, mapId }: EditMapProps) {
const {
updateMap,
updateMapState,
@ -23,8 +30,8 @@ function EditMapModal({ isOpen, onDone, mapId }) {
} = useMapData();
const [isLoading, setIsLoading] = useState(true);
const [map, setMap] = useState();
const [mapState, setMapState] = useState();
const [map, setMap] = useState<any>();
const [mapState, setMapState] = useState<MapState>();
// Load full map when modal is opened
useEffect(() => {
async function loadMap() {
@ -43,8 +50,8 @@ function EditMapModal({ isOpen, onDone, mapId }) {
if (isOpen && mapId) {
loadMap();
} else {
setMap();
setMapState();
setMap(undefined);
setMapState(undefined);
}
}, [isOpen, mapId, getMapFromDB, getMapStateFromDB, getMap]);
@ -64,19 +71,19 @@ function EditMapModal({ isOpen, onDone, mapId }) {
*/
// Local cache of map setting changes
// Applied when done is clicked or map selection is changed
const [mapSettingChanges, setMapSettingChanges] = useState({});
const [mapStateSettingChanges, setMapStateSettingChanges] = useState({});
const [mapSettingChanges, setMapSettingChanges] = useState<any>({});
const [mapStateSettingChanges, setMapStateSettingChanges] = useState<any>({});
function handleMapSettingsChange(key, value) {
setMapSettingChanges((prevChanges) => ({
function handleMapSettingsChange(key: string, value: string) {
setMapSettingChanges((prevChanges: any) => ({
...prevChanges,
[key]: value,
lastModified: Date.now(),
}));
}
function handleMapStateSettingsChange(key, value) {
setMapStateSettingChanges((prevChanges) => ({
function handleMapStateSettingsChange(key: string, value: string) {
setMapStateSettingChanges((prevChanges: any) => ({
...prevChanges,
[key]: value,
}));
@ -137,7 +144,7 @@ function EditMapModal({ isOpen, onDone, mapId }) {
<Modal
isOpen={isOpen}
onRequestClose={handleClose}
style={{ maxWidth: layout.modalSize, width: "calc(100% - 16px)" }}
style={{ content: {maxWidth: layout.modalSize, width: "calc(100% - 16px)"} }}
>
<Flex
sx={{

27
src/modals/EditTokenModal.js → src/modals/EditTokenModal.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react";
import { useState, useEffect } from "react";
import { Button, Flex, Label } from "theme-ui";
import Modal from "../components/Modal";
@ -11,12 +11,19 @@ import { useTokenData } from "../contexts/TokenDataContext";
import { isEmpty } from "../helpers/shared";
import useResponsiveLayout from "../hooks/useResponsiveLayout";
import { Token } from "../tokens";
function EditTokenModal({ isOpen, onDone, tokenId }) {
type EditModalProps = {
isOpen: boolean,
onDone: () => void,
tokenId: string,
};
function EditTokenModal({ isOpen, onDone, tokenId }: EditModalProps) {
const { updateToken, getTokenFromDB } = useTokenData();
const [isLoading, setIsLoading] = useState(true);
const [token, setToken] = useState();
const [token, setToken] = useState<Token>();
useEffect(() => {
async function loadToken() {
setIsLoading(true);
@ -27,7 +34,7 @@ function EditTokenModal({ isOpen, onDone, tokenId }) {
if (isOpen && tokenId) {
loadToken();
} else {
setToken();
setToken(undefined);
}
}, [isOpen, tokenId, getTokenFromDB]);
@ -41,10 +48,13 @@ function EditTokenModal({ isOpen, onDone, tokenId }) {
onDone();
}
const [tokenSettingChanges, setTokenSettingChanges] = useState({});
const [tokenSettingChanges, setTokenSettingChanges] = useState<any>({});
function handleTokenSettingsChange(key, value) {
setTokenSettingChanges((prevChanges) => ({ ...prevChanges, [key]: value }));
function handleTokenSettingsChange(key: any, value: any) {
setTokenSettingChanges((prevChanges: any) => ({
...prevChanges,
[key]: value,
}));
}
async function applyTokenChanges() {
@ -72,8 +82,7 @@ function EditTokenModal({ isOpen, onDone, tokenId }) {
isOpen={isOpen}
onRequestClose={handleClose}
style={{
maxWidth: layout.modalSize,
width: "calc(100% - 16px)",
content: { maxWidth: layout.modalSize, width: "calc(100% - 16px)" },
}}
>
<Flex

5
src/modals/ForceUpdateModal.js → src/modals/ForceUpdateModal.tsx
View File

@ -1,14 +1,13 @@
import React from "react";
import { Box, Label, Text } from "theme-ui";
import Modal from "../components/Modal";
function ForceUpdateModal({ isOpen }) {
function ForceUpdateModal({ isOpen }: { isOpen: boolean }) {
return (
<Modal
isOpen={isOpen}
allowClose={false}
style={{ maxWidth: "450px" }}
style={{ content: { maxWidth: "450px" } }}
>
<Box>
<Label py={2}>New Update Available</Label>

5
src/modals/GameExpiredModal.js → src/modals/GameExpiredModal.tsx
View File

@ -1,14 +1,13 @@
import React from "react";
import { Box, Label, Flex, Button, Text } from "theme-ui";
import Modal from "../components/Modal";
function GameExpiredModal({ isOpen, onRequestClose }) {
function GameExpiredModal({ isOpen, onRequestClose }: { isOpen: boolean, onRequestClose: () => void }) {
return (
<Modal
isOpen={isOpen}
onRequestClose={onRequestClose}
style={{ maxWidth: "450px" }}
style={{ content: { maxWidth: "450px" } }}
>
<Box>
<Label py={2}>Game Timed Out</Label>

5
src/modals/GettingStartedModal.js → src/modals/GettingStartedModal.tsx
View File

@ -1,4 +1,3 @@
import React from "react";
import { Box, Label, Text } from "theme-ui";
import raw from "raw.macro";
@ -8,12 +7,12 @@ import Link from "../components/Link";
const gettingStarted = raw("../docs/howTo/gettingStarted.md");
function GettingStartedModal({ isOpen, onRequestClose }) {
function GettingStartedModal({ isOpen, onRequestClose }: { isOpen: boolean, onRequestClose: () => void } ) {
return (
<Modal
isOpen={isOpen}
onRequestClose={onRequestClose}
style={{ maxWidth: "450px" }}
style={{ content: { maxWidth: "450px" } }}
>
<Box>
<Label py={2}>Getting Started</Label>

37
src/modals/ImportExportModal.js → src/modals/ImportExportModal.tsx
View File

@ -1,4 +1,4 @@
import React, { useRef, useState, useEffect } from "react";
import { useRef, useState, useEffect } from "react";
import { Box, Label, Text, Button, Flex } from "theme-ui";
import { saveAs } from "file-saver";
import * as Comlink from "comlink";
@ -16,24 +16,25 @@ import { useDatabase } from "../contexts/DatabaseContext";
import SelectDataModal from "./SelectDataModal";
import { getDatabase } from "../database";
import { Map, MapState, TokenState } from "../components/map/Map";
const importDBName = "OwlbearRodeoImportDB";
function ImportExportModal({ isOpen, onRequestClose }) {
function ImportExportModal({ isOpen, onRequestClose }: { isOpen: boolean, onRequestClose: () => void}) {
const { worker } = useDatabase();
const { userId } = useAuth();
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState();
const [error, setError] = useState<Error>();
const backgroundTaskRunningRef = useRef(false);
const fileInputRef = useRef();
const fileInputRef = useRef<any>();
const [showImportSelector, setShowImportSelector] = useState(false);
const [showExportSelector, setShowExportSelector] = useState(false);
const { addToast } = useToasts();
function addSuccessToast(message, maps, tokens) {
function addSuccessToast(message: string, maps: any, tokens: TokenState[]) {
const mapText = `${maps.length} map${maps.length > 1 ? "s" : ""}`;
const tokenText = `${tokens.length} token${tokens.length > 1 ? "s" : ""}`;
if (maps.length > 0 && tokens.length > 0) {
@ -53,11 +54,11 @@ function ImportExportModal({ isOpen, onRequestClose }) {
const loadingProgressRef = useRef(0);
function handleDBProgress({ completedRows, totalRows }) {
function handleDBProgress({ completedRows, totalRows }: { completedRows: number, totalRows: number }) {
loadingProgressRef.current = completedRows / totalRows;
}
async function handleImportDatabase(file) {
async function handleImportDatabase(file: File) {
setIsLoading(true);
backgroundTaskRunningRef.current = true;
try {
@ -94,7 +95,7 @@ function ImportExportModal({ isOpen, onRequestClose }) {
}
useEffect(() => {
function handleBeforeUnload(event) {
function handleBeforeUnload(event: any) {
if (backgroundTaskRunningRef.current) {
event.returnValue =
"Database is still processing, are you sure you want to leave?";
@ -121,7 +122,7 @@ function ImportExportModal({ isOpen, onRequestClose }) {
setShowImportSelector(false);
}
async function handleImportSelectorConfirm(checkedMaps, checkedTokens) {
async function handleImportSelectorConfirm(checkedMaps: any, checkedTokens: TokenState[]) {
setIsLoading(true);
backgroundTaskRunningRef.current = true;
setShowImportSelector(false);
@ -131,11 +132,11 @@ function ImportExportModal({ isOpen, onRequestClose }) {
const db = getDatabase({});
try {
// Keep track of a mapping of old token ids to new ones to apply them to the map states
let newTokenIds = {};
let newTokenIds: {[id: string]: string} = {};
if (checkedTokens.length > 0) {
const tokenIds = checkedTokens.map((token) => token.id);
const tokensToAdd = await importDB.table("tokens").bulkGet(tokenIds);
let newTokens = [];
const tokensToAdd: TokenState[] = await importDB.table("tokens").bulkGet(tokenIds);
let newTokens: TokenState[] = [];
for (let token of tokensToAdd) {
const newId = shortid.generate();
newTokenIds[token.id] = newId;
@ -146,12 +147,12 @@ function ImportExportModal({ isOpen, onRequestClose }) {
}
if (checkedMaps.length > 0) {
const mapIds = checkedMaps.map((map) => map.id);
const mapIds = checkedMaps.map((map: any) => map.id);
const mapsToAdd = await importDB.table("maps").bulkGet(mapIds);
let newMaps = [];
let newStates = [];
for (let map of mapsToAdd) {
let state = await importDB.table("states").get(map.id);
let state: MapState = await importDB.table("states").get(map.id);
// Apply new token ids to imported state
for (let tokenState of Object.values(state.tokens)) {
if (tokenState.tokenId in newTokenIds) {
@ -179,7 +180,7 @@ function ImportExportModal({ isOpen, onRequestClose }) {
backgroundTaskRunningRef.current = false;
}
function exportSelectorFilter(table, value) {
function exportSelectorFilter(table: any, value: Map | TokenState) {
// Only show owned maps and tokens
if (table === "maps" || table === "tokens") {
if (value.owner === userId) {
@ -197,7 +198,7 @@ function ImportExportModal({ isOpen, onRequestClose }) {
setShowExportSelector(false);
}
async function handleExportSelectorConfirm(checkedMaps, checkedTokens) {
async function handleExportSelectorConfirm(checkedMaps: Map[], checkedTokens: TokenState[]) {
setShowExportSelector(false);
setIsLoading(true);
backgroundTaskRunningRef.current = true;
@ -238,7 +239,7 @@ function ImportExportModal({ isOpen, onRequestClose }) {
Select import or export then select the data you wish to use
</Text>
<input
onChange={(event) => handleImportDatabase(event.target.files[0])}
onChange={(event) => event.target.files && handleImportDatabase(event.target.files[0])}
type="file"
accept=".owlbear"
style={{ display: "none" }}
@ -272,7 +273,7 @@ function ImportExportModal({ isOpen, onRequestClose }) {
</Box>
</Box>
)}
<ErrorBanner error={error} onRequestClose={() => setError()} />
<ErrorBanner error={error} onRequestClose={() => setError(undefined)} />
<SelectDataModal
isOpen={showImportSelector}
onRequestClose={handleImportSelectorClose}

13
src/modals/JoinModal.js → src/modals/JoinModal.tsx
View File

@ -1,23 +1,23 @@
import React, { useState, useRef } from "react";
import { useState, useRef, FormEvent, ChangeEvent } from "react";
import { Box, Label, Input, Button, Flex } from "theme-ui";
import { useHistory } from "react-router-dom";
import Modal from "../components/Modal";
function JoinModal({ isOpen, onRequestClose }) {
function JoinModal({ isOpen, onRequestClose }: any) {
let history = useHistory();
const [gameId, setGameId] = useState("");
function handleChange(event) {
setGameId(event.target.value);
function handleChange(event: ChangeEvent<HTMLInputElement>) {
setGameId(event.target?.value);
}
function handleSubmit(event) {
function handleSubmit(event: FormEvent<HTMLDivElement>) {
event.preventDefault();
history.push(`/game/${gameId}`);
}
const inputRef = useRef();
const inputRef = useRef<any>();
function focusInput() {
inputRef.current && inputRef.current.focus();
}
@ -27,6 +27,7 @@ function JoinModal({ isOpen, onRequestClose }) {
isOpen={isOpen}
onRequestClose={onRequestClose}
onAfterOpen={focusInput}
>
<Flex
sx={{

73
src/modals/SelectDataModal.js → src/modals/SelectDataModal.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import { ChangeEvent, useEffect, useState } from "react";
import { Box, Label, Flex, Button, Text, Checkbox, Divider } from "theme-ui";
import SimpleBar from "simplebar-react";
@ -6,6 +6,15 @@ import Modal from "../components/Modal";
import LoadingOverlay from "../components/LoadingOverlay";
import { getDatabase } from "../database";
import { Props } from "react-modal";
type SelectDataProps = Props & {
onConfirm: any,
confirmText: string,
label: string,
databaseName: string,
filter: any,
}
function SelectDataModal({
isOpen,
@ -15,10 +24,10 @@ function SelectDataModal({
label,
databaseName,
filter,
}) {
const [maps, setMaps] = useState({});
const [tokensByMap, setTokensByMap] = useState({});
const [tokens, setTokens] = useState({});
}: SelectDataProps) {
const [maps, setMaps] = useState<any>({});
const [tokensByMap, setTokensByMap] = useState<any>({});
const [tokens, setTokens] = useState<any>({});
const [isLoading, setIsLoading] = useState(false);
const hasMaps = Object.values(maps).length > 0;
@ -29,9 +38,9 @@ function SelectDataModal({
if (isOpen && databaseName) {
setIsLoading(true);
const db = getDatabase({ addons: [] }, databaseName);
let loadedMaps = {};
let loadedTokensByMap = {};
let loadedTokens = {};
let loadedMaps: any = [];
let loadedTokensByMap: any = {};
let loadedTokens: any = [];
await db
.table("maps")
.filter((map) => filter("maps", map, map.id))
@ -44,7 +53,7 @@ function SelectDataModal({
.each((state) => {
loadedTokensByMap[state.mapId] = new Set(
Object.values(state.tokens).map(
(tokenState) => tokenState.tokenId
(tokenState: any) => tokenState.tokenId
)
);
});
@ -73,9 +82,9 @@ function SelectDataModal({
}, [isOpen, databaseName, filter]);
// An object mapping a tokenId to how many checked maps it is currently used in
const [tokenUsedCount, setTokenUsedCount] = useState({});
const [tokenUsedCount, setTokenUsedCount] = useState<any>({});
useEffect(() => {
let tokensUsed = {};
let tokensUsed: any = {};
for (let mapId in maps) {
if (maps[mapId].checked && mapId in tokensByMap) {
for (let tokenId of tokensByMap[mapId]) {
@ -89,7 +98,7 @@ function SelectDataModal({
}
setTokenUsedCount(tokensUsed);
// Update tokens to ensure used tokens are checked
setTokens((prevTokens) => {
setTokens((prevTokens: any) => {
let newTokens = { ...prevTokens };
for (let id in newTokens) {
if (id in tokensUsed) {
@ -101,13 +110,13 @@ function SelectDataModal({
}, [maps, tokensByMap]);
function handleConfirm() {
let checkedMaps = Object.values(maps).filter((map) => map.checked);
let checkedTokens = Object.values(tokens).filter((token) => token.checked);
let checkedMaps = Object.values(maps).filter((map: any) => map.checked);
let checkedTokens = Object.values(tokens).filter((token: any) => token.checked);
onConfirm(checkedMaps, checkedTokens);
}
function handleSelectMapsChanged(event) {
setMaps((prevMaps) => {
function handleSelectMapsChanged(event: ChangeEvent<HTMLInputElement>) {
setMaps((prevMaps: any) => {
let newMaps = { ...prevMaps };
for (let id in newMaps) {
newMaps[id].checked = event.target.checked;
@ -116,7 +125,7 @@ function SelectDataModal({
});
// If all token select is unchecked then ensure all tokens are unchecked
if (!event.target.checked && !tokensSelectChecked) {
setTokens((prevTokens) => {
setTokens((prevTokens: any) => {
let newTokens = { ...prevTokens };
for (let id in newTokens) {
newTokens[id].checked = false;
@ -126,14 +135,14 @@ function SelectDataModal({
}
}
function handleMapChange(event, map) {
setMaps((prevMaps) => ({
function handleMapChange(event: ChangeEvent<HTMLInputElement>, map: any) {
setMaps((prevMaps: any) => ({
...prevMaps,
[map.id]: { ...map, checked: event.target.checked },
}));
// If all token select is unchecked then ensure tokens assosiated to this map are unchecked
if (!event.target.checked && !tokensSelectChecked) {
setTokens((prevTokens) => {
setTokens((prevTokens: any) => {
let newTokens = { ...prevTokens };
for (let id in newTokens) {
if (tokensByMap[map.id].has(id) && tokenUsedCount[id] === 1) {
@ -145,8 +154,8 @@ function SelectDataModal({
}
}
function handleSelectTokensChange(event) {
setTokens((prevTokens) => {
function handleSelectTokensChange(event: ChangeEvent<HTMLInputElement>) {
setTokens((prevTokens: any) => {
let newTokens = { ...prevTokens };
for (let id in newTokens) {
if (!(id in tokenUsedCount)) {
@ -157,8 +166,8 @@ function SelectDataModal({
});
}
function handleTokenChange(event, token) {
setTokens((prevTokens) => ({
function handleTokenChange(event: ChangeEvent<HTMLInputElement>, token: any) {
setTokens((prevTokens: any) => ({
...prevTokens,
[token.id]: { ...token, checked: event.target.checked },
}));
@ -167,14 +176,14 @@ function SelectDataModal({
// Some tokens are checked not by maps or all tokens are checked by maps
const tokensSelectChecked =
Object.values(tokens).some(
(token) => !(token.id in tokenUsedCount) && token.checked
) || Object.values(tokens).every((token) => token.id in tokenUsedCount);
(token: any) => !(token.id in tokenUsedCount) && token.checked
) || Object.values(tokens).every((token: any) => token.id in tokenUsedCount);
return (
<Modal
isOpen={isOpen}
onRequestClose={onRequestClose}
style={{ maxWidth: "450px", width: "100%" }}
style={{ content: {maxWidth: "450px", width: "100%"} }}
>
<Box
sx={{
@ -205,13 +214,13 @@ function SelectDataModal({
<Flex>
<Label>
<Checkbox
checked={Object.values(maps).some((map) => map.checked)}
checked={Object.values(maps).some((map: any) => map.checked)}
onChange={handleSelectMapsChanged}
/>
Maps
</Label>
</Flex>
{Object.values(maps).map((map) => (
{Object.values(maps).map((map: any) => (
<Label
key={map.id}
my={1}
@ -237,7 +246,7 @@ function SelectDataModal({
/>
Tokens
</Label>
{Object.values(tokens).map((token) => (
{Object.values(tokens).map((token: any) => (
<Box pl={4} my={1} key={token.id}>
<Label sx={{ fontFamily: "body2" }}>
<Checkbox
@ -265,8 +274,8 @@ function SelectDataModal({
</Button>
<Button
disabled={
!Object.values(maps).some((map) => map.checked) &&
!Object.values(tokens).some((token) => token.checked)
!Object.values(maps).some((map: any) => map.checked) &&
!Object.values(tokens).some((token: any) => token.checked)
}
sx={{ flexGrow: 1 }}
m={1}

14
src/modals/SelectDiceModal.js → src/modals/SelectDiceModal.tsx
View File

@ -1,4 +1,4 @@
import React, { useState } from "react";
import { useState } from "react";
import { Flex, Label, Button } from "theme-ui";
import Modal from "../components/Modal";
@ -7,8 +7,16 @@ import DiceTiles from "../components/dice/DiceTiles";
import { dice } from "../dice";
import useResponsiveLayout from "../hooks/useResponsiveLayout";
import Dice from "../dice/Dice";
function SelectDiceModal({ isOpen, onRequestClose, onDone, defaultDice }) {
type SelectDiceProps = {
isOpen: boolean,
onRequestClose: () => void,
onDone: any,
defaultDice: Dice
}
function SelectDiceModal({ isOpen, onRequestClose, onDone, defaultDice }: SelectDiceProps) {
const [selectedDice, setSelectedDice] = useState(defaultDice);
const layout = useResponsiveLayout();
@ -16,7 +24,7 @@ function SelectDiceModal({ isOpen, onRequestClose, onDone, defaultDice }) {
<Modal
isOpen={isOpen}
onRequestClose={onRequestClose}
style={{ maxWidth: layout.modalSize, width: "calc(100% - 16px)" }}
style={{ content: { maxWidth: layout.modalSize, width: "calc(100% - 16px)" } }}
>
<Flex
sx={{

59
src/modals/SelectMapModal.js → src/modals/SelectMapModal.tsx
View File

@ -1,4 +1,4 @@
import React, { useRef, useState } from "react";
import { ChangeEvent, useRef, useState } from "react";
import { Button, Flex, Label } from "theme-ui";
import shortid from "shortid";
import Case from "case";
@ -30,6 +30,15 @@ import { useAuth } from "../contexts/AuthContext";
import { useKeyboard, useBlur } from "../contexts/KeyboardContext";
import shortcuts from "../shortcuts";
import { MapState } from "../components/map/Map";
type SelectMapProps = {
isOpen: boolean,
onDone: any,
onMapChange: any,
onMapReset: any,
currentMap: any
}
const defaultMapProps = {
showGrid: false,
@ -56,7 +65,7 @@ function SelectMapModal({
onMapReset,
// The map currently being view in the map screen
currentMap,
}) {
}: SelectMapProps ) {
const { addToast } = useToasts();
const { userId } = useAuth();
@ -79,7 +88,7 @@ function SelectMapModal({
const [search, setSearch] = useState("");
const [filteredMaps, filteredMapScores] = useSearch(ownedMaps, search);
function handleSearchChange(event) {
function handleSearchChange(event: ChangeEvent<HTMLInputElement>) {
setSearch(event.target.value);
}
@ -88,7 +97,7 @@ function SelectMapModal({
*/
const [isGroupModalOpen, setIsGroupModalOpen] = useState(false);
async function handleMapsGroup(group) {
async function handleMapsGroup(group: any) {
setIsLoading(true);
setIsGroupModalOpen(false);
await updateMaps(selectedMapIds, { group });
@ -106,15 +115,15 @@ function SelectMapModal({
* Image Upload
*/
const fileInputRef = useRef();
const fileInputRef = useRef<any>();
const [isLoading, setIsLoading] = useState(false);
const [isLargeImageWarningModalOpen, setShowLargeImageWarning] = useState(
false
);
const largeImageWarningFiles = useRef();
const largeImageWarningFiles = useRef<any>();
async function handleImagesUpload(files) {
async function handleImagesUpload(files: any) {
if (navigator.storage) {
// Attempt to enable persistant storage
await navigator.storage.persist();
@ -166,7 +175,7 @@ function SelectMapModal({
clearFileInput();
}
async function handleImageUpload(file) {
async function handleImageUpload(file: any) {
if (!file) {
return Promise.reject();
}
@ -222,9 +231,9 @@ function SelectMapModal({
}
// Create resolutions
const resolutions = {};
const resolutions: any = {};
for (let resolution of mapResolutions) {
const resolutionPixelSize = Vector2.multiply(
const resolutionPixelSize: Vector2 = Vector2.multiply(
gridSize,
resolution.size
);
@ -234,7 +243,7 @@ function SelectMapModal({
) {
const resized = await resizeImage(
image,
Vector2.max(resolutionPixelSize),
Vector2.max(resolutionPixelSize, undefined) as number,
file.type,
resolution.quality
);
@ -284,7 +293,7 @@ function SelectMapModal({
});
setIsLoading(false);
URL.revokeObjectURL(url);
resolve();
resolve(undefined);
};
image.onerror = reject;
image.src = url;
@ -293,7 +302,7 @@ function SelectMapModal({
function openImageDialog() {
if (fileInputRef.current) {
fileInputRef.current.click();
fileInputRef.current?.click();
}
}
@ -302,16 +311,16 @@ function SelectMapModal({
*/
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
// The map selected in the modal
const [selectedMapIds, setSelectedMapIds] = useState([]);
const [selectedMapIds, setSelectedMapIds] = useState<string[]>([]);
const selectedMaps = ownedMaps.filter((map) =>
const selectedMaps = ownedMaps.filter((map: any) =>
selectedMapIds.includes(map.id)
);
const selectedMapStates = mapStates.filter((state) =>
const selectedMapStates = mapStates.filter((state: MapState) =>
selectedMapIds.includes(state.mapId)
);
async function handleMapAdd(map) {
async function handleMapAdd(map: any) {
await addMap(map);
setSelectedMapIds([map.id]);
}
@ -346,7 +355,7 @@ function SelectMapModal({
// Either single, multiple or range
const [selectMode, setSelectMode] = useState("single");
function handleMapSelect(map) {
function handleMapSelect(map: any) {
handleItemSelect(
map,
selectMode,
@ -392,7 +401,7 @@ function SelectMapModal({
/**
* Shortcuts
*/
function handleKeyDown(event) {
function handleKeyDown(event: KeyboardEvent): KeyboardEvent | void {
if (!isOpen) {
return;
}
@ -406,7 +415,7 @@ function SelectMapModal({
// Selected maps and none are default
if (
selectedMapIds.length > 0 &&
!selectedMaps.some((map) => map.type === "default")
!selectedMaps.some((map: any) => map.type === "default")
) {
// Ensure all other modals are closed
setIsGroupModalOpen(false);
@ -417,7 +426,7 @@ function SelectMapModal({
}
}
function handleKeyUp(event) {
function handleKeyUp(event: KeyboardEvent) {
if (!isOpen) {
return;
}
@ -444,7 +453,7 @@ function SelectMapModal({
<Modal
isOpen={isOpen}
onRequestClose={handleClose}
style={{ maxWidth: layout.modalSize, width: "calc(100% - 16px)" }}
style={{ content: { maxWidth: layout.modalSize, width: "calc(100% - 16px)" } }}
>
<ImageDrop onDrop={handleImagesUpload} dropText="Drop map to upload">
<input
@ -500,15 +509,15 @@ function SelectMapModal({
isOpen={isGroupModalOpen}
onChange={handleMapsGroup}
groups={mapGroups.filter(
(group) => group !== "" && group !== "default"
(group: any) => group !== "" && group !== "default"
)}
onRequestClose={() => setIsGroupModalOpen(false)}
// Select the default group by testing whether all selected maps are the same
defaultGroup={
selectedMaps.length > 0 &&
selectedMaps
.map((map) => map.group)
.reduce((prev, curr) => (prev === curr ? curr : undefined))
.map((map: any) => map.group)
.reduce((prev: any, curr: any) => (prev === curr ? curr : undefined))
}
/>
<ConfirmModal

57
src/modals/SelectTokensModal.js → src/modals/SelectTokensModal.tsx
View File

@ -1,4 +1,4 @@
import React, { useRef, useState } from "react";
import { ChangeEvent, useRef, useState } from "react";
import { Flex, Label, Button } from "theme-ui";
import shortid from "shortid";
import Case from "case";
@ -24,8 +24,9 @@ import { useAuth } from "../contexts/AuthContext";
import { useKeyboard, useBlur } from "../contexts/KeyboardContext";
import shortcuts from "../shortcuts";
import { FileToken, Token } from "../tokens";
function SelectTokensModal({ isOpen, onRequestClose }) {
function SelectTokensModal({ isOpen, onRequestClose }: { isOpen: boolean, onRequestClose: any }) {
const { addToast } = useToasts();
const { userId } = useAuth();
@ -43,7 +44,7 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
const [search, setSearch] = useState("");
const [filteredTokens, filteredTokenScores] = useSearch(ownedTokens, search);
function handleSearchChange(event) {
function handleSearchChange(event: ChangeEvent<HTMLInputElement>) {
setSearch(event.target.value);
}
@ -52,7 +53,7 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
*/
const [isGroupModalOpen, setIsGroupModalOpen] = useState(false);
async function handleTokensGroup(group) {
async function handleTokensGroup(group: string) {
setIsLoading(true);
setIsGroupModalOpen(false);
await updateTokens(selectedTokenIds, { group });
@ -70,13 +71,13 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
* Image Upload
*/
const fileInputRef = useRef();
const fileInputRef = useRef<any>();
const [isLoading, setIsLoading] = useState(false);
const [isLargeImageWarningModalOpen, setShowLargeImageWarning] = useState(
false
);
const largeImageWarningFiles = useRef();
const largeImageWarningFiles = useRef<File[]>();
function openImageDialog() {
if (fileInputRef.current) {
@ -84,12 +85,17 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
}
}
async function handleImagesUpload(files) {
async function handleImagesUpload(files: FileList | null) {
if (navigator.storage) {
// Attempt to enable persistant storage
await navigator.storage.persist();
}
// TODO: handle null files
if (files === null) {
return;
}
let tokenFiles = [];
for (let file of files) {
if (file.size > 5e7) {
@ -129,6 +135,9 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
async function handleLargeImageWarningConfirm() {
setShowLargeImageWarning(false);
const files = largeImageWarningFiles.current;
if (!files) {
return;
}
for (let file of files) {
await handleImageUpload(file);
}
@ -136,7 +145,7 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
clearFileInput();
}
async function handleImageUpload(file) {
async function handleImageUpload(file: File) {
let name = "Unknown Token";
if (file.name) {
// Remove file extension
@ -180,7 +189,7 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
height: image.height,
});
setIsLoading(false);
resolve();
resolve(undefined);
};
image.onerror = reject;
image.src = url;
@ -190,13 +199,13 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
/**
* Token controls
*/
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
const [selectedTokenIds, setSelectedTokenIds] = useState([]);
const [isEditModalOpen, setIsEditModalOpen] = useState<boolean>(false);
const [selectedTokenIds, setSelectedTokenIds] = useState<string[]>([]);
const selectedTokens = ownedTokens.filter((token) =>
selectedTokenIds.includes(token.id)
);
function handleTokenAdd(token) {
function handleTokenAdd(token: FileToken) {
addToken(token);
setSelectedTokenIds([token.id]);
}
@ -210,7 +219,7 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
setIsLoading(false);
}
async function handleTokensHide(hideInSidebar) {
async function handleTokensHide(hideInSidebar: boolean) {
setIsLoading(true);
await updateTokens(selectedTokenIds, { hideInSidebar });
setIsLoading(false);
@ -219,7 +228,7 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
// Either single, multiple or range
const [selectMode, setSelectMode] = useState("single");
async function handleTokenSelect(token) {
async function handleTokenSelect(token: Token) {
handleItemSelect(
token,
selectMode,
@ -233,7 +242,7 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
/**
* Shortcuts
*/
function handleKeyDown(event) {
function handleKeyDown(event: KeyboardEvent) {
if (!isOpen) {
return;
}
@ -257,7 +266,7 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
}
}
function handleKeyUp(event) {
function handleKeyUp(event: KeyboardEvent) {
if (!isOpen) {
return;
}
@ -280,11 +289,19 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
const layout = useResponsiveLayout();
let tokenId;
if (selectedTokens.length === 1 && selectedTokens[0].id) {
tokenId = selectedTokens[0].id
} else {
// TODO: handle tokenId not found
tokenId = ""
}
return (
<Modal
isOpen={isOpen}
onRequestClose={onRequestClose}
style={{ maxWidth: layout.modalSize, width: "calc(100% - 16px)" }}
style={{ content: { maxWidth: layout.modalSize, width: "calc(100% - 16px)" } }}
>
<ImageDrop onDrop={handleImagesUpload} dropText="Drop token to upload">
<input
@ -328,17 +345,19 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
</Button>
</Flex>
</ImageDrop>
<>
{(isLoading || tokensLoading) && <LoadingOverlay bg="overlay" />}
</>
<EditTokenModal
isOpen={isEditModalOpen}
onDone={() => setIsEditModalOpen(false)}
tokenId={selectedTokens.length === 1 && selectedTokens[0].id}
tokenId={tokenId}
/>
<EditGroupModal
isOpen={isGroupModalOpen}
onChange={handleTokensGroup}
groups={tokenGroups.filter(
(group) => group !== "" && group !== "default"
(group: string) => group !== "" && group !== "default"
)}
onRequestClose={() => setIsGroupModalOpen(false)}
// Select the default group by testing whether all selected tokens are the same

30
src/modals/SettingsModal.js → src/modals/SettingsModal.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react";
import { useState, useEffect } from "react";
import {
Label,
Flex,
@ -21,8 +21,9 @@ import useSetting from "../hooks/useSetting";
import ConfirmModal from "./ConfirmModal";
import ImportExportModal from "./ImportExportModal";
import { MapState } from "../components/map/Map";
function SettingsModal({ isOpen, onRequestClose }) {
function SettingsModal({ isOpen, onRequestClose }: { isOpen: boolean, onRequestClose: () => void }) {
const { database, databaseStatus } = useDatabase();
const { userId } = useAuth();
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@ -32,7 +33,7 @@ function SettingsModal({ isOpen, onRequestClose }) {
);
const [showFogGuides, setShowFogGuides] = useSetting("fog.showGuides");
const [fogEditOpacity, setFogEditOpacity] = useSetting("fog.editOpacity");
const [storageEstimate, setStorageEstimate] = useState();
const [storageEstimate, setStorageEstimate] = useState<StorageEstimate>();
const [isImportExportModalOpen, setIsImportExportModalOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);
@ -58,7 +59,7 @@ function SettingsModal({ isOpen, onRequestClose }) {
async function handleEraseAllData() {
setIsLoading(true);
localStorage.clear();
await database.delete();
await database?.delete();
window.location.reload();
}
@ -66,6 +67,11 @@ function SettingsModal({ isOpen, onRequestClose }) {
setIsLoading(true);
// Clear saved settings
localStorage.clear();
//TODO: handle id database is undefined
if (!database) {
return;
}
// Clear map cache
await database.table("maps").where("owner").notEqual(userId).delete();
// Find all other peoples tokens who aren't benig used in a map state and delete them
@ -74,7 +80,7 @@ function SettingsModal({ isOpen, onRequestClose }) {
.where("owner")
.notEqual(userId)
.toArray();
const states = await database.table("states").toArray();
const states: MapState[] = await database?.table("states").toArray();
for (let token of tokens) {
let inUse = false;
for (let state of states) {
@ -126,7 +132,7 @@ function SettingsModal({ isOpen, onRequestClose }) {
sx={{ width: "initial" }}
value={fogEditOpacity}
onChange={(e) => setFogEditOpacity(parseFloat(e.target.value))}
labelFunc={(value) => `${Math.round(value * 100)}%`}
labelFunc={(value: number) => `${Math.round(value * 100)}%`}
/>
</Label>
<Label py={2}>
@ -139,7 +145,7 @@ function SettingsModal({ isOpen, onRequestClose }) {
sx={{ width: "initial" }}
value={labelSize}
onChange={(e) => setLabelSize(parseFloat(e.target.value))}
labelFunc={(value) => `${value}x`}
labelFunc={(value: number) => `${value}x`}
/>
</Label>
<Label py={2}>
@ -154,7 +160,7 @@ function SettingsModal({ isOpen, onRequestClose }) {
onChange={(e) =>
setGridSnappingSensitivity(parseFloat(e.target.value))
}
labelFunc={(value) => `${value * 2}`}
labelFunc={(value: number) => `${value * 2}`}
/>
</Label>
<Divider bg="text" />
@ -185,13 +191,13 @@ function SettingsModal({ isOpen, onRequestClose }) {
Import / Export Data
</Button>
</Flex>
{storageEstimate && (
{storageEstimate !&& (
<Flex sx={{ justifyContent: "center" }}>
<Text variant="caption">
Storage Used: {prettyBytes(storageEstimate.usage)} of{" "}
{prettyBytes(storageEstimate.quota)} (
Storage Used: {prettyBytes(storageEstimate.usage as number)} of{" "}
{prettyBytes(storageEstimate.quota as number)} (
{Math.round(
(storageEstimate.usage / Math.max(storageEstimate.quota, 1)) *
(storageEstimate.usage as number / Math.max(storageEstimate.quota as number, 1)) *
100
)}
%)

12
src/modals/StartModal.js → src/modals/StartModal.tsx
View File

@ -1,4 +1,4 @@
import React, { useRef } from "react";
import { ChangeEvent, useRef } from "react";
import { Box, Label, Input, Button, Flex, Checkbox } from "theme-ui";
import { useHistory } from "react-router-dom";
import shortid from "shortid";
@ -9,20 +9,20 @@ import useSetting from "../hooks/useSetting";
import Modal from "../components/Modal";
function StartModal({ isOpen, onRequestClose }) {
function StartModal({ isOpen, onRequestClose }: { isOpen: boolean, onRequestClose: () => void}) {
let history = useHistory();
const { password, setPassword } = useAuth();
function handlePasswordChange(event) {
function handlePasswordChange(event: ChangeEvent<HTMLInputElement>) {
setPassword(event.target.value);
}
const [usePassword, setUsePassword] = useSetting("game.usePassword");
function handleUsePasswordChange(event) {
function handleUsePasswordChange(event: ChangeEvent<HTMLInputElement>) {
setUsePassword(event.target.checked);
}
function handleSubmit(event) {
function handleSubmit(event: ChangeEvent<HTMLInputElement>) {
event.preventDefault();
if (!usePassword) {
setPassword("");
@ -30,7 +30,7 @@ function StartModal({ isOpen, onRequestClose }) {
history.push(`/game/${shortid.generate()}`);
}
const inputRef = useRef();
const inputRef = useRef<any>();
function focusInput() {
inputRef.current && inputRef.current.focus();
}

15
src/modals/StartStreamModal.js → src/modals/StartStreamModal.tsx
View File

@ -1,8 +1,19 @@
import React from "react";
import { Box, Text, Button, Label, Flex } from "theme-ui";
import Modal from "../components/Modal";
type StartStreamProps = {
isOpen: boolean,
onRequestClose: () => void,
isSupported: boolean,
unavailableMessage: string,
stream: MediaStream,
noAudioTrack: boolean,
noAudioMessage: string,
onStreamStart: any,
onStreamEnd: any,
}
function StartStreamModal({
isOpen,
onRequestClose,
@ -13,7 +24,7 @@ function StartStreamModal({
noAudioMessage,
onStreamStart,
onStreamEnd,
}) {
}: StartStreamProps) {
return (
<Modal isOpen={isOpen} onRequestClose={onRequestClose}>
<Box>

18
src/modals/StartTimerModal.js → src/modals/StartTimerModal.tsx
View File

@ -1,4 +1,4 @@
import React, { useRef } from "react";
import { ChangeEvent, useRef } from "react";
import { Box, Label, Input, Button, Flex, Text } from "theme-ui";
import Modal from "../components/Modal";
@ -7,14 +7,22 @@ import { getHMSDuration, getDurationHMS } from "../helpers/timer";
import useSetting from "../hooks/useSetting";
type StartTimerProps = {
isOpen: boolean,
onRequestClose: () => void,
onTimerStart: any,
onTimerStop: any,
timer: any,
}
function StartTimerModal({
isOpen,
onRequestClose,
onTimerStart,
onTimerStop,
timer,
}) {
const inputRef = useRef();
}: StartTimerProps) {
const inputRef = useRef<any>();
function focusInput() {
inputRef.current && inputRef.current.focus();
}
@ -23,7 +31,7 @@ function StartTimerModal({
const [minute, setMinute] = useSetting("timer.minute");
const [second, setSecond] = useSetting("timer.second");
function handleSubmit(event) {
function handleSubmit(event: ChangeEvent<HTMLInputElement>) {
event.preventDefault();
if (timer) {
onTimerStop();
@ -44,7 +52,7 @@ function StartTimerModal({
paddingLeft: 0,
};
function parseValue(value, max) {
function parseValue(value: string, max: number) {
const num = parseInt(value);
if (isNaN(num)) {
return 0;

37
src/tokens/index.ts
View File

@ -32,6 +32,7 @@ import undead from "./Undead.png";
import warlock from "./Warlock.png";
import wizard from "./Wizard.png";
import unknown from "./Unknown.png";
import { ImageFile } from "../helpers/image";
export const tokenSources = {
barbarian,
@ -80,7 +81,40 @@ function getDefaultTokenSize(key: string) {
}
}
export const tokens = Object.keys(tokenSources).map((key) => ({
type TokenCategory = "character" | "vehicle" | "prop"
export type Token = {
id: string,
name: string,
defaultSize: number,
category: TokenCategory,
hideInSidebar: boolean,
width: number,
height: number,
owner: string,
type: string,
group: string | undefined,
created: number,
lastModified: number,
lastUsed: number,
}
export interface DefaultToken extends Omit<Token, "id" | "owner" | "created" | "lastModified" | "lastUsed"> {
id?: string,
owner?: string,
created?: number,
lastModified?: number,
lastUsed?: number,
key: string,
type: "default",
group: "default",
}
export interface FileToken extends Token {
file: Uint8Array,
thumbnail: ImageFile,
type: "file",
}
export const tokens: DefaultToken[] = Object.keys(tokenSources).map((key) => ({
key,
name: Case.capital(key),
type: "default",
@ -89,6 +123,7 @@ export const tokens = Object.keys(tokenSources).map((key) => ({
hideInSidebar: false,
width: 256,
height: 256,
group: "default",
}));
export const unknownSource = unknown;