Closes #96 show users that can see an item

src/components/Board/Items/Item/Image.js

@@ -2,18 +2,29 @@ import React, { memo } from "react";
 import { useUsers } from "../../../../components/users";
 import styled from "styled-components";
 
-const OnlyYouLabel = styled.div`
+import eye from "../../../../images/eye.svg";
+
+const UnflippedFor = styled.div`
   position: absolute;
-  top: -20px;
+  top: -34px;
   right: 2px;
   color: #555;
   font-size: 0.6em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-  background-color: #cccccca0;
   pointer-events: none;
   line-height: 1.5em;
 `;
 
+const UnflippedForUser = styled.img`
+  background-color: ${({ color }) => color};
+  border-radius: 2px;
+  padding: 2px;
+  margin: 2px;
+`;
+
 const Label = styled.div`
   position: absolute;
   top: 1px;
@@ -68,8 +79,10 @@ const Image = ({
   backText,
   overlay,
 }) => {
-  const { currentUser } = useUsers();
+  const { currentUser, users } = useUsers();
+
   const size = {};
+
   if (width) {
     size.width = width;
   }
@@ -77,12 +90,27 @@ const Image = ({
     size.height = height;
   }
 
+  const unflippedForUsers = React.useMemo(() => {
+    if (Array.isArray(unflippedFor)) {
+      return unflippedFor
+        .filter((userId) => users.find(({ id }) => userId === id))
+        .map((userId) => users.find(({ id }) => userId === id));
+    }
+    return [];
+  }, [unflippedFor, users]);
+
   const flippedForMe =
-    backContent && flipped && unflippedFor !== currentUser.id;
+    backContent &&
+    flipped &&
+    (!Array.isArray(unflippedFor) || !unflippedFor.includes(currentUser.id));
 
   return (
     <Wrapper>
-      {unflippedFor === currentUser.id && <OnlyYouLabel>Only you</OnlyYouLabel>}
+      <UnflippedFor>
+        {unflippedForUsers.map(({ color, id }) => {
+          return <UnflippedForUser key={id} src={eye} color={color} />;
+        })}
+      </UnflippedFor>
       {flippedForMe && backText && <Label>{backText}</Label>}
       {(!flippedForMe || !backText) && text && <Label>{text}</Label>}
       <FrontImage

src/components/Board/Items/useItemActions.js

@@ -164,13 +164,41 @@ export const useItemActions = () => {
   );
 
   // Reveal for player only
-  const revealForMe = React.useCallback(() => {
-    batchUpdateItems(selectedItems, (item) => ({
-      ...item,
-      flipped: true,
-      unflippedFor: currentUser.id,
-    }));
-  }, [batchUpdateItems, selectedItems, currentUser.id]);
+  const toggleFlipSelf = useRecoilCallback(
+    async (snapshot) => {
+      const selectedItemList = await getSelectedItemList(snapshot);
+      const flippedSelfCount = selectedItemList.filter(
+        ({ unflippedFor }) =>
+          Array.isArray(unflippedFor) && unflippedFor.includes(currentUser.id)
+      ).length;
+
+      let flipSelf = true;
+      if (flippedSelfCount > selectedItems.length / 2) {
+        flipSelf = false;
+      }
+
+      batchUpdateItems(selectedItems, (item) => {
+        let unflippedFor;
+        if (!Array.isArray(item.unflippedFor)) {
+          unflippedFor = [];
+        } else {
+          unflippedFor = [...item.unflippedFor];
+        }
+        if (flipSelf && !unflippedFor.includes(currentUser.id)) {
+          unflippedFor.push(currentUser.id);
+        }
+        if (!flipSelf && unflippedFor.includes(currentUser.id)) {
+          unflippedFor = unflippedFor.filter((id) => id !== currentUser.id);
+        }
+        return {
+          ...item,
+          flipped: true,
+          unflippedFor,
+        };
+      });
+    },
+    [batchUpdateItems, selectedItems, currentUser.id]
+  );
 
   // Remove selected items
   const removeItems = React.useCallback(
@@ -184,8 +212,8 @@ export const useItemActions = () => {
   return {
     align,
     remove: removeItems,
-    revealForMe,
     toggleFlip,
+    toggleFlipSelf,
     toggleLock,
     toggleTap,
     shuffle: shuffleSelectedItems,

src/components/SelectedItemsPane.js

@@ -37,8 +37,8 @@ export const SelectedItems = ({ edit }) => {
   const {
     align,
     remove,
-    revealForMe,
     toggleFlip,
+    toggleFlipSelf,
     toggleLock,
     toggleTap,
     shuffle,
@@ -58,7 +58,7 @@ export const SelectedItems = ({ edit }) => {
         shortcut: "f",
       },
       flipSelf: {
-        action: revealForMe,
+        action: toggleFlipSelf,
         label: t("Reveal for me"),
         shortcut: "o",
       },
@@ -109,7 +109,7 @@ export const SelectedItems = ({ edit }) => {
     [
       align,
       remove,
-      revealForMe,
+      toggleFlipSelf,
       rotate,
       shuffle,
       t,

src/i18n/en.json

@@ -73,5 +73,8 @@
   "welcomeText": "<0>Airboardgame is a tabletop simulator to play your favorite board games with your friends online.</0>",
   "InviteFriends": "<0>To invite other players to play with you, share the following links with your friends.</0>",
   "moreInformation": "<0>For more informations, visit <2>github repository</2>.</0>",
-  "I want play...": "I want play..."
+  "I want play...": "I want play...",
+  "Zone": "Zone",
+  "Reveal for me": "Reveal for me",
+  "Waiting for connection…": "Waiting for connection…"
 }

src/i18n/fr.json

@@ -73,5 +73,8 @@
   "welcomeText": "<0>Airboardgame est un simulateur de table de jeu qui vous permet de jouer en ligne avec vos amis à vos jeux de société préférés.</0>",
   "InviteFriends": "<0>Pour inviter d'autres joueurs, partagez le lien suivant avec vos amis.</0>",
   "moreInformation": "<0>Pour plus d'informations, visitez le <2>dépôt github</2>.</0>",
-  "I want play...": "Je veux jouer..."
+  "I want play...": "Je veux jouer...",
+  "Zone": "Zone",
+  "Reveal for me": "Retourner pour moi",
+  "Waiting for connection…": "En attente d'une connection…"
 }

src/images/eye.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <title>
+    eye
+  </title>
+  <path d="M10 7.5a2.5 2.5 0 1 0 2.5 2.5A2.5 2.5 0 0 0 10 7.5zm0 7a4.5 4.5 0 1 1 4.5-4.5 4.5 4.5 0 0 1-4.5 4.5zM10 3C3 3 0 10 0 10s3 7 10 7 10-7 10-7-3-7-10-7z"/>
+<script xmlns=""/></svg>