From bbcf6351f3e7e09127b0d0d3cabb7c840c3da54c Mon Sep 17 00:00:00 2001 From: Jeremie Pardou-Piquemal <571533+jrmi@users.noreply.github.com> Date: Sat, 21 Nov 2020 22:15:59 +0100 Subject: [PATCH] Add random rotate action --- src/components/boardComponents/index.js | 8 ++++ .../boardComponents/useItemActions.js | 45 ++++++++++++++++++- src/utils/index.js | 4 ++ 3 files changed, 56 insertions(+), 1 deletion(-) diff --git a/src/components/boardComponents/index.js b/src/components/boardComponents/index.js index d69bbb8..e036e76 100644 --- a/src/components/boardComponents/index.js +++ b/src/components/boardComponents/index.js @@ -123,6 +123,10 @@ export const itemMap = { "rotate90", "stack", "shuffle", + "randomlyRotate30", + "randomlyRotate45", + "randomlyRotate90", + "randomlyRotate180", "clone", "lock", "remove", @@ -136,6 +140,10 @@ export const itemMap = { "rotate90", "stack", "shuffle", + "randomlyRotate30", + "randomlyRotate45", + "randomlyRotate90", + "randomlyRotate180", "clone", "lock", "remove", diff --git a/src/components/boardComponents/useItemActions.js b/src/components/boardComponents/useItemActions.js index f4de597..1884fb9 100644 --- a/src/components/boardComponents/useItemActions.js +++ b/src/components/boardComponents/useItemActions.js @@ -13,7 +13,7 @@ import { getActionsFromItem } from "./"; import { useTranslation } from "react-i18next"; import { nanoid } from "nanoid"; -import { shuffle as shuffleArray } from "../../utils"; +import { shuffle as shuffleArray, randInt } from "../../utils"; import deleteIcon from "../../images/delete.svg"; import stackIcon from "../../images/stack.svg"; @@ -129,6 +129,19 @@ export const useItemActions = () => { swapItems(selectedItems, shuffledItems); }, [selectedItems, swapItems]); + const randomlyRotateSelectedItems = React.useCallback( + (angle, maxRotateCount) => { + batchUpdateItems(selectedItems, (item) => { + console.log(randInt(0, 3)); + const rotation = + ((item.rotation || 0) + angle * randInt(0, maxRotateCount)) % 360; + console.log(item.rotation, rotation); + return { ...item, rotation }; + }); + }, + [selectedItems, batchUpdateItems] + ); + // Tap/Untap elements const toggleTap = useRecoilCallback( ({ snapshot }) => async () => { @@ -281,6 +294,34 @@ export const useItemActions = () => { multiple: true, icon: shuffleIcon, }, + randomlyRotate30: { + action: randomlyRotateSelectedItems.bind(null, 30, 11), + label: t("Rotate randomly 30"), + shortcut: "", + multiple: false, + icon: rotateIcon, + }, + randomlyRotate45: { + action: randomlyRotateSelectedItems.bind(null, 90, 7), + label: t("Rotate randomly 45"), + shortcut: "", + multiple: false, + icon: rotateIcon, + }, + randomlyRotate90: { + action: randomlyRotateSelectedItems.bind(null, 90, 3), + label: t("Rotate randomly 90"), + shortcut: "", + multiple: false, + icon: rotateIcon, + }, + randomlyRotate180: { + action: randomlyRotateSelectedItems.bind(null, 180, 1), + label: t("Rotate randomly 180"), + shortcut: "", + multiple: false, + icon: rotateIcon, + }, rotate30: { action: rotate.bind(null, 30), label: t("Rotate 30"), @@ -335,6 +376,7 @@ export const useItemActions = () => { cloneItem, toggleLock, removeSelectedItems, + randomlyRotateSelectedItems, ] ); @@ -349,6 +391,7 @@ export const useItemActions = () => { rotate, actionMap, availableActions, + randomlyRotate: randomlyRotateSelectedItems, }; }; diff --git a/src/utils/index.js b/src/utils/index.js index 9f97677..05ddb87 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -56,3 +56,7 @@ export const getPointerState = (e) => { }; } }; + +export const randInt = (min, max) => { + return Math.floor(Math.random() * (max - min + 1)) + min; +};