dscnitrourkela/project-icecream

Profile Picture frame generator for various themes and festive

project-icecream's Issues

Layers bug

As of now, the frame and the text boxes can be overlayed by the image.
The desired behaviour is that the Frame should always be ahead no matter what.

Make a carousel for mobile view

Is your feature request related to a problem? Please describe.
Update the carousel display style. Check the following images

Describe the solution you'd like

• The one on the left is what we have for the mobile view currently. The one on the right is what we want.
• Try to implement this without using any external packages.
• Try to add some buttons below for easier access also so that you don't have to swipe every time (up to you).

Additional context

• It should work on swipe events also.
• Comment below to get access for the figma designs.

Resources

• Touch Events

Transformable text.

Is your feature request related to a problem? Please describe.
The current text is not transformable and has no background which makes it difficult to read on images with the same colour background.

Describe the solution you'd like

• Create a transformable text component that handles the transformation of text (increase, decrease the size, rotation)
• Options to change the background colour of the text. As of now create a state in the parent component which stores the background colour and use that to update the colour. (A custom colour picker is to be created in the text box input component - to be done later )
• Make sure there is a distinction between the name and guild name. (change of text size and font would do the job. Make the Name bolder and guild name regular)

Image aspect ratio bug.

The current behaviour is that, whenever an image is uploaded, its aspect ratio is changed to 1:1 which is not the desired behaviour.

What we want:

• The image should adjust according to its aspect ratio i.e. If the image is landscape, its width should be extended fully as per the frame and vice versa.
• The image should be able to be zoomed in. A simpler way is using the transformable component, but the preferred way would be to be able to zoom in as per normal (using gestures/scroll)

Increase spacing between pagination bullets

Describe the bug

Currently, the pagination is cluttered try to improve it.

Setup ESLint, Prettier

Is your feature request related to a problem? Please describe.
The current repository lacks any sort of linting and formatting. In order to maintain a consistent coding style throughout the repository, it is necessary to set up ESLint and Prettier.

Describe the solution you'd like

• A common coding standard that the community follows for React projects is the one set up by Airbnb. Extending our config to use those styles would be a great idea.
• Additional configuration might be required as the project uses Typescript and not Javascript. ESLint was designed to work with Javascript.

Additional context
You can checkout this repository for a similar setup: Project Guava Web

Create the desktop screen.

Is your feature request related to a problem? Please describe.
Desktop UI is ready. Make sure that the responsiveness is maintained.

Describe the solution you'd like
All the required components i.e.

1. Frame (Canvas)
2. Frame carousel
3. Upload Input
4. Name and Guild Inputs.

Preferably use CSS Grids. Though, seeing the designs there is no strict requirement for the same and can be done using flexbox as well.

Make the site responsive.

Is your feature request related to a problem? Please describe.
The site is working properly on the desktop however breaks on a smaller screen.

Describe the solution you'd like

• Improve the responsiveness of the site.
• Design can be discussed if required.
• Try to work with the given components while using flex-box or grid for mobile screen.

Text Box updates

Is your feature request related to a problem? Please describe.
As of now, the text shown is sort of static. As in there is no way to change the font family, no way to update background colour, no option to change the shape of the text background shape.

Describe the solution you'd like

• Add a colour picker to chose and update the background of the text. (Possible additions for options to chose a gradient - just like Figma, linear, radial, etc)
• A drop down to choose a selected few font families for the text. No need for separate ones for name and guild, a common would do the job.
• The design team could come up with a few shapes as background. So a carousel of shapes to choose from for the text box would be great.

Shift to HTML 5 Canvas

Issue
The current implementation of this project is using basic HTML elements for rendering and a package named JIMP for image manipulation. While it is easy to have a setup like this, it is not very robust and has tons of bugs.

Solution

• A better implementation of this would be using HTML 5 Canvas. Canvas is really powerful and best suited for such projects. It has built-in APIs for image manipulation as well as saving the Canvas as png which is handy for us.
• There can be 2 possible ways to implement this. The first being that we use vanilla javascript to implement canvas along with some supporting libraries such as konva, p5.js, etc.
• The other solution, which might be more feasible in this context would be using a canvas library that has a react version of their library. React Konva is one such library.

Additional context
The project is written in typescript, you might want to checkout typescript and using it with react beforehand

Input boxes are not properly made

Describe the bug
The input box placeholder is not proper, requiring you to first delete the placeholder and then type into it.

To Reproduce
Go and type something in the input box.

Expected behavior
The input boxes should work properly

Additional context
Extra work on inputs is appreciated.

type checking

Frame Problem
i have seen when i change frame only some page has frame not all

Type checking
i can implement react type checking for easy to debug

Update Carousel look

Is your feature request related to a problem? Please describe.
Update the carousel display style. Check the following images

Describe the solution you'd like
The one on the left is what we have for the mobile view currently. The one on the right is what we want.
Try to implement this without using any external packages.

Additional context
Comment below to get access for the figma designs.

Frameboi 2.0 updates

• Fix logos, images
• Fix text
• Upload new frames
• Deployment Check on hacknitr.tech
• Do PR for the frames

Change the broken image links

Describe the bug
Some frame links are broken try to change them with some good ones.

Screenshots