File with upload

backend/src/index.js

@@ -20,6 +20,7 @@ export const main = async ({ store, schedules, functions, hooks }) => {
   await store.createOrUpdateBox("room", { security: "public" });
   await store.createOrUpdateBox("session", { security: "public" });
   await store.createOrUpdateBox("user", { security: "private" });
+  await store.createOrUpdateBox("files", { security: "private" });
 
   // Add schedules
   schedules["daily"] = [deleteOldSession(store)];

package.json

@@ -21,6 +21,7 @@
     "lodash.debounce": "^4.0.8",
     "marked": "^4.0.12",
     "memoizee": "^0.4.14",
+    "mime-types": "^2.1.35",
     "nanoid": "^3.3.0",
     "openvidu-browser": "^2.26.0",
     "p-limit": "^4.0.0",

src/gameComponents/AdvancedImage.jsx → src/gameComponents/AdvancedImage/AdvancedImage.jsx

@@ -1,11 +1,11 @@
 import React, { memo } from "react";
 import { useUsers } from "react-sync-board";
 import styled from "styled-components";
-import { media2Url } from "../mediaLibrary";
+import { media2Url } from "../../mediaLibrary";
 import { FiEye } from "react-icons/fi";
 
-import Canvas from "./Canvas";
-import { getImage } from "../utils/image";
+import Canvas from "../Canvas";
+import { getImage } from "../../utils/image";
 
 const UnflippedFor = styled.div`
   position: absolute;
@@ -76,8 +76,6 @@ const AdvancedImage = ({
     flipped &&
     (!Array.isArray(unflippedFor) || !unflippedFor.includes(currentUser.uid));
 
-  const flippable = Boolean(backUrl);
-
   const canvasLayers = React.useMemo(() => {
     const result = [];
     if (flippedForMe) {
@@ -108,16 +106,7 @@ const AdvancedImage = ({
   }, [frontUrl, backUrl]);
 
   return (
-    <Wrapper
-      onMouseEnter={(e) => {
-        flippable && e.target.classList.add("hvr-curl-top-right");
-        e.target.classList.add("hovered");
-      }}
-      onMouseLeave={(e) => {
-        flippable && e.target.classList.remove("hvr-curl-top-right");
-        e.target.classList.remove("hovered");
-      }}
-    >
+    <Wrapper>
       <Canvas
         layers={canvasLayers}
         width={width}

src/gameComponents/forms/AdvancedImageFormFields.jsx → src/gameComponents/AdvancedImage/AdvancedImageFormFields.jsx

@@ -1,11 +1,13 @@
 import React from "react";
 import { Field } from "react-final-form";
 import { useTranslation } from "react-i18next";
+import { useField } from "react-final-form";
 
 import Label from "../../ui/formUtils/Label";
 
-import { ImageField } from "../../mediaLibrary";
+import { ImageField, media2Url } from "../../mediaLibrary";
 import { uid } from "../../utils";
+import { getImage } from "../../utils/image";
 
 const defaultLayer = () => {
   return {
@@ -158,6 +160,13 @@ const LayersForm = ({ value, onChange }) => {
 
 const ImageForm = ({ initialValues }) => {
   const { t } = useTranslation();
+  const {
+    input: { onChange: onWidthChange },
+  } = useField("width");
+  const {
+    input: { onChange: onHeightChange },
+  } = useField("height");
+
   return (
     <>
       <Label>
@@ -192,7 +201,22 @@ const ImageForm = ({ initialValues }) => {
         {t("Front image")}
         <Field name="front" initialValue={initialValues.front}>
           {({ input: { value, onChange } }) => {
-            return <ImageField value={value} onChange={onChange} />;
+            const onFrontImageChange = (newValue) => {
+              // Propagate change
+              onChange(newValue);
+
+              const url = media2Url(newValue);
+              if (url) {
+                getImage(url).then((image) => {
+                  if (image?.width && image?.height) {
+                    // Update item dimension if possible
+                    onWidthChange(image.width);
+                    onHeightChange(image.height);
+                  }
+                });
+              }
+            };
+            return <ImageField value={value} onChange={onFrontImageChange} />;
           }}
         </Field>
       </Label>

src/gameComponents/AdvancedImage/index.js

@@ -0,0 +1,50 @@
+import i18n from "../../i18n";
+import createItemTemplate from "../utils";
+
+import AdvancedImage from "./AdvancedImage";
+import AdvancedImageFormFields from "./AdvancedImageFormFields";
+
+const RectTemplate = createItemTemplate({
+  type: "advancedImage",
+  component: AdvancedImage,
+  defaultActions: (item) => {
+    let actions = ["stack", "shuffle", "clone", "lock", "remove"];
+    if (item.layers?.length) {
+      actions = ["nextImage"].concat(actions);
+    }
+    if (item.back) {
+      return ["flip", "flipSelf"].concat(actions);
+    } else {
+      return actions;
+    }
+  },
+  availableActions: (item) => {
+    let actions = [
+      "tap",
+      "rotate",
+      "randomlyRotate",
+      "stack",
+      "alignAsLine",
+      "alignAsSquare",
+      "shuffle",
+      "clone",
+      "lock",
+      "remove",
+    ];
+    if (item.layers?.length) {
+      actions = ["prevImageForLayer", "nextImageForLayer", "rollLayer"].concat(
+        actions
+      );
+    }
+    if (item.back) {
+      return ["flip", "flipSelf"].concat(actions);
+    } else {
+      return actions;
+    }
+  },
+  form: AdvancedImageFormFields,
+  name: i18n.t("Advanced Image"),
+  template: { layers: [], front: "/default.png" },
+});
+
+export default RectTemplate;

src/gameComponents/Anchor.jsx → src/gameComponents/Anchor/Anchor.jsx

@@ -10,9 +10,9 @@ import {
 } from "react-sync-board";
 import useAsyncEffect from "use-async-effect";
 
-import { getItemElement, fastItemIntersect } from "../utils";
-import useGameItemActions from "./useGameItemActions";
-import useGlobalConf from "../hooks/useGlobalConf";
+import { getItemElement, fastItemIntersect } from "../../utils";
+import useGameItemActions from "../useGameItemActions";
+import useGlobalConf from "../../hooks/useGlobalConf";
 
 const StyledAnchor = styled.div`
   ${({ highlight, editMode, color }) => css`

src/gameComponents/Anchor/index.js

@@ -0,0 +1,19 @@
+import i18n from "../../i18n";
+import createItemTemplate from "../utils";
+
+import Anchor from "./Anchor";
+import AnchorFormFields from "./AnchorFormFields";
+
+const AnchorTemplate = createItemTemplate({
+  type: "anchor",
+  component: Anchor,
+  defaultActions: ["clone", "lock", "remove"],
+  availableActions: ["clone", "lock", "remove"],
+  form: AnchorFormFields,
+  name: i18n.t("Anchor"),
+  template: {},
+  resizeDirections: {},
+  excludeFields: { rotation: true, family: true, grid: true },
+});
+
+export default AnchorTemplate;

src/gameComponents/Canvas.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 
 import { getImage } from "../utils/image";
+import { useAsync } from "@react-hookz/web/esm/useAsync";
 
 const defaultSize = 50;
 
@@ -105,9 +106,60 @@ const ImageWrapper = styled.div`
   align-items: center;
 `;
 
+const Error = styled.div`
+  min-width: 50px;
+  min-height: 50px;
+  &:after {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    content: "\\274c";
+    font-size: 25px;
+    color: #fff;
+    line-height: 50px;
+    text-align: center;
+  }
+`;
+
+const Loading = styled.div`
+  background: transparent;
+  background: linear-gradient(
+    90deg,
+    transparent 8%,
+    #f5f5f53d 18%,
+    transparent 33%
+  );
+  background-size: 200% 100%;
+  animation: 2s shine linear infinite;
+  min-width: 50px;
+  min-height: 50px;
+`;
+
 const NoCanvas = ({ layers, width, height }) => {
   const [firstImage, ...rest] = layers;
 
+  const [state, actions] = useAsync(async () => {
+    await getImage(firstImage.url);
+    return true;
+  }, false);
+
+  React.useEffect(() => {
+    if (firstImage.url) {
+      actions.reset();
+      actions.execute();
+    }
+  }, [actions, firstImage.url]);
+
+  if (state.status === "error") {
+    return <Error />;
+  }
+
+  if (state.status === "loading") {
+    return <Loading />;
+  }
+
   return (
     <div style={{ position: "relative" }}>
       {firstImage && (

src/gameComponents/CheckerBoard/index.js

@@ -0,0 +1,25 @@
+import i18n from "../../i18n";
+import createItemTemplate from "../utils";
+
+import CheckerBoard from "./CheckerBoard";
+import CheckerBoardFormFields from "./CheckerBoardFormFields";
+
+const CheckerBoardTemplate = createItemTemplate({
+  type: "checkerboard",
+  component: CheckerBoard,
+  defaultActions: ["clone", "lock", "remove"],
+  availableActions: ["clone", "lock", "remove"],
+  form: CheckerBoardFormFields,
+  name: i18n.t("Checkerboard"),
+  template: {
+    width: 50,
+    height: 50,
+    color: "#CCC",
+    alternateColor: "#888",
+    colCount: 3,
+    rowCount: 3,
+    layer: -1,
+  },
+});
+
+export default CheckerBoardTemplate;

src/gameComponents/Counter.jsx → src/gameComponents/Counter/Counter.jsx

@@ -48,7 +48,7 @@ const Counter = ({
   color = "#CCC",
   label = "",
   textColor = "#000",
-  fontSize = "22",
+  fontSize = 22,
   setState,
 }) => {
   const setValue = (e) => {

src/gameComponents/Counter/index.js

@@ -0,0 +1,23 @@
+import i18n from "../../i18n";
+import createItemTemplate from "../utils";
+
+import Component from "./Counter";
+import FormComponent from "./CounterFormFields";
+
+const Template = createItemTemplate({
+  type: "counter",
+  component: Component,
+  form: FormComponent,
+  defaultActions: ["prevImage", "nextImage", "clone", "lock", "remove"],
+  availableActions: ["prevImage", "nextImage", "clone", "lock", "remove"],
+  name: i18n.t("Counter"),
+  template: {
+    value: 0,
+    color: "#CCC",
+    textColor: "#000",
+    fontSize: "22",
+  },
+  resizeDirections: {},
+});
+
+export default Template;

src/gameComponents/Cube/index.js

@@ -0,0 +1,27 @@
+import i18n from "../../i18n";
+import createItemTemplate, { sizeResize } from "../utils";
+
+import Component from "./Cube";
+import FormComponent from "./CubeFormFields";
+
+const Template = createItemTemplate({
+  type: "cube",
+  component: Component,
+  form: FormComponent,
+  defaultActions: ["clone", "lock", "remove"],
+  availableActions: [
+    "stack",
+    "alignAsLine",
+    "alignAsSquare",
+    "shuffle",
+    "clone",
+    "lock",
+    "remove",
+  ],
+  name: i18n.t("Cube"),
+  template: { size: 50, color: "#b3b3b3" },
+  resize: sizeResize,
+  resizeDirections: { b: true },
+});
+
+export default Template;