Touch not working

[nooberjones]

Hello,

Does touch work to place the pieces? It seems to only work to zoom in and out but not to move and place the pieces?

Also, I have installed node 14.7.3 and am getting errors when building. Is that the only requirement to build?

Thanks

[alexwing]

Currently, I am using Node.js version 14.17.5. I am not sure if that could be the source of your issue.

Regarding the placement of pieces, I don't quite understand what you are referring to. To move the pieces, you need to click on the list of countries and then click on the map in the correct location. In touch mode for mobile devices, it works similarly, but of course, the piece is not dragged since there is no mouse.

[nooberjones]

Thanks, any way to have the piece dragged by touch when touching it and panning the map when not touching the pieces?

I am getting this error now.

Its return type 'ReactNode' is not a valid JSX element.
49 | return (
50 | <React.Fragment>

51 | <Modal
| ^^^^^
52 | show={showIn}
53 | onHide={handleClose}
54 | size="sm"

I appreciate your help!

[alexwing]

The error message "Its return type 'ReactNode' is not a valid JSX element" typically means that the component is returning a type that React does not recognize as a valid JSX element. Specifically, ReactNode is a broad type that encompasses anything that can be rendered in React, but there is some mismatch causing React not to recognize it as a valid JSX element in this context.

Here’s a breakdown of what might be causing this issue and how you can troubleshoot it:

1. Check Imports: Ensure that all imports are correct. Specifically, React and React.Fragment should be properly imported.

   import React from 'react';
   import Modal from 'your-modal-component-path'; // Adjust based on where your Modal component is imported from

2. Ensure Props Are Correct: Verify that the props (showIn and handleClose) are correctly defined and used.

3. Validate the Return Type: Ensure that the component is returning valid JSX. Here’s a basic example:

   import React from 'react';
   import Modal from 'your-modal-component-path'; // Adjust based on where your Modal component is imported from
   
   const MyComponent = ({ showIn, handleClose }) => {
     return (
       <React.Fragment>
         <Modal
           show={showIn}
           onHide={handleClose}
           size="sm"
         >
           {/* Modal content */}
         </Modal>
       </React.Fragment>
     );
   };
   
   export default MyComponent;

4. Check if Modal is a Valid Component: Ensure that Modal is a valid React component. If Modal is imported from an external library, make sure the import and usage are correct according to the library’s documentation.

5. Update Dependencies: Sometimes, such errors can be due to version incompatibilities. Ensure all your dependencies are up-to-date.

6. Look for Errors Elsewhere: Sometimes the issue is not exactly where the error message indicates. Review the entire component to ensure there are no other issues.

If you are not sure which component exactly is causing the problem, try isolating the issue by removing components or adding them back one at a time. Here’s how you can attempt to reproduce and identify the problem:

1. Isolate the Modal Component: Create a simple test case with only the Modal component to see if it works in isolation.

   import React from 'react';
   import Modal from 'your-modal-component-path'; // Adjust based on where your Modal component is imported from
   
   const TestModal = () => {
     const [show, setShow] = React.useState(true);
     const handleClose = () => setShow(false);
   
     return (
       <React.Fragment>
         <Modal
           show={show}
           onHide={handleClose}
           size="sm"
         >
           Test Content
         </Modal>
       </React.Fragment>
     );
   };
   
   export default TestModal;

2. Check Parent Components: Ensure that the issue is not stemming from the parent components that render this Modal.

3. Log and Debug: Add console logs or use React DevTools to inspect the props and component tree to ensure everything is being passed and rendered as expected.

If after these steps you still encounter issues, providing more code or a more detailed context might help in pinpointing the exact problem.

[alexwing]

It seems like you're experiencing an issue with touch functionality for placing pieces. Let me explain the current behavior and why implementing a different type of drag-and-drop might not be feasible with the current setup.

Currently, the functionality works as follows:

• Selecting from the List: When you select a piece from the list, it gets anchored to the cursor.
• Placing the Piece: The cursor then acts as the point where the piece is placed on the map.

In the current implementation, the pieces are not directly on the map. Instead, they are part of a layer that follows the cursor. This design means that the pieces are not interactable on the map itself but are always relative to the cursor’s position.

Changing this behavior to allow a different type of drag-and-drop would likely require significant changes to the core functionality, particularly in the CursorCore and AnimatedCursor functions. These functions are responsible for the cursor behavior and how pieces are attached to and moved with the cursor.

Given this setup, implementing touch functionality to drag and drop pieces directly on the map, as you might be requesting, isn't straightforward with the current design. The pieces are not elements on the map but are part of the cursor’s layer, making the requested behavior difficult to achieve without a major overhaul.

I hope this clarifies the situation. If you have any other questions or need further assistance, feel free to ask!