Implement Preview of any SVGs in the Series

[caseywescott]

Increasing Access

On the pop up that previews SVG, add forward back buttons as well as a textfield to select # / size of series.

Feature enhancement details

The preview would go through the loop in the svg code to allow the minter to look through the series to ensure that they like what they see.

[Ugo-X]

I am a Full Stack blockchain Developer with expertise in Next.js, Nest.js, TypeScript, JavaScript, React, Node.js, Three.js, and Solidity. My journey with OnlyDust hackathons began at Edition 1, and I've since made 47 contributions across 11 projects. With my extensive experience on the OnlyDust platform (profile: https://app.onlydust.com/u/Ugo-X), I've honed my skills in delivering quality solutions under pressure. I bring a unique blend of technical proficiency and user-focused design to every project, whether it's crafting immersive 3D experiences or developing smart contracts. My track record shows I can adapt quickly and contribute effectively to diverse challenges. As we surf through Edition 7, I'm excited to leverage my skills and hackathon experience to push the boundaries of blockchain development. I'm confident in my ability to tackle new challenges and drive innovation in this space.

HOW I WOULD TACKLE THIS ISSUE:

Set Up Component Framework

• Create a DrawingNavigator component with React hooks for state management.
• Implement basic navigation logic (previous, next functions).

Sketch Management

• Create an array or object to store multiple sketch configurations.
• Implement logic to switch between sketches based on navigation.

Rendering System

• Use an iframe to isolate each sketch's execution environment.
• Develop a method to dynamically inject sketch code, HTML, and CSS into the iframe.

Code Display

• Add a section to display the current sketch's code.
• Ensure code updates when navigating between sketches.

Save Functionality

• Maintain the existing "Save SVG" functionality for each sketch.
• Ensure the save function is properly scoped to the current sketch.

Integration Steps

1. Create the new DrawingNavigator component in the project.
2. Modify the existing sketch code to fit the new multi-sketch structure.
3. Update the main application to use DrawingNavigator instead of the single sketch display.
4. Ensure all existing functionalities (like SVG saving) are preserved in the new structure.

Testing Strategy

• Unit test the DrawingNavigator component for proper navigation and state management.
• Integration test the sketch rendering and interaction within the iframe.
• Test the SVG save functionality for each sketch.
• Perform cross-browser testing to ensure compatibility.

Performance Considerations

• Optimize sketch switching to minimize lag.
• Consider lazy loading for sketch configurations if the number of sketches becomes large.

I would work on resolving this issue as soon as soon as possible and would make sure to keep in contact with the team so i can report my progress.