dev-tanay / rubik-cube

Rubik Cube

Hi there, I'm Tanay Das

A Passionate Frontend Developer From India

👨🏻‍💻 About Me :

• 🌱 I’m currently learning Web Dev & Cloud Computing
• 💬 Ask me about C, C++, PYTHON, JAVA, HTML, CSS, JS
• 📝 I’m currently working on personal projects & Contribute to Open-Source
• 👨‍💻 All of my projects are available at Tanay Das
• 📫 How to reach me [email protected]
• ☕ I belive, a perfect cup of coffee can be the ultimate solution for any stress.

🌐 Socials :

💻 Technologies :

Language

Hosting

Libraries & Framework

Servers

Tools

Operating System

📊 GitHub Stats :

⌚︎ Time Zone: Asia/Kolkata

💬 Programming Languages: 
C/C++                    6 hrs 4 mins        ███████████████████████░░   94.05% 
JavaScript               21 mins             █░░░░░░░░░░░░░░░░░░░░░░░░   5.65% 
Other                    1 min               ░░░░░░░░░░░░░░░░░░░░░░░░░   0.29%

🔥 Editors: 
VS Code                  6 hrs 27 mins       █████████████████████████   100.0%

💻 Operating System: 
Windows                  6 hrs 27 mins       █████████████████████████   100.0%

✍️ Quote :

Support Me :

rubik-cube's Issues

Back option on leaderboad page

as I clicked on this trophy button, this page opened.

Now if I want to go to the home page to play the game I need to refresh the page then I can go but it's not good for users so I suggest a back button or navigation bar to easily navigate throughout the site.

I want to contribute it under GSSOC'24. Please assign me.

Removing Bug and Enhancing User Functionality

ISSSUE NOTICED
The current version of our game lacks essential control features, which affects the user experience. Specifically, the game continues from the previously recorded time when users navigate away and return, instead of resetting. When users navigate away from the game and return, the timer resumes from the last recorded time instead of starting fresh. This can be confusing and frustrating for users who expect a reset. The absence of Stop, Pause, and Reset buttons limits users' control over their gameplay.

PROPOSED SOLUTION

Adding Timer
Modify the game's functionality to reset the timer whenever the game is restarted. This ensures a fresh start each time the game begins.

Add Control Buttons:
Pause Button: Allows users to pause the game, freezing the current state until they decide to resume.
Stop Button: Stops the game entirely and resets all parameters to their initial states.
Reset Button: Resets the game without stopping it, providing a quick way to start over from the beginning without navigating away.

OUTCOME
It will Improve User Experience and Enhance the Functionality

I am the GSSOC'24 Contributor
I would like to work on the issue . So kindly assign me the issue and label it.

Screenshots

After going back and coming back to the game

It restarts from the previous holded time

kindly Assign me the issue

Learn.md

Learn repos should have a LEARN.md file to teach student how to build your project step by step. You can explain how to build your project with text, code snippets, images, or even short (5 minute) long video lessons. As the maintainer of a Learn repo, the LEARN.md file requires you to think critically about how to explain the building of your project and how to also make it engaging. We don't expect you to be an expert teacher, but we would like you to reflect on how difficult it was to get to your level of knowledge, and then provide friendly guidance to help other students to learn.

Reference: https://github.com/Recode-Hive/Stackoverflow-Analysis/blob/main/Learn.md

Add Leaderboard

Add a leaderboard so that people can see and compete.
How I would do this ?

1. Add a name prompt that takes in the username of the player
2. add a leaderboard toggle to see the leaderboard
3. once the cube is solved the result is stored and compared and shown

Responsive Rubik Cube

The issue aims to enhance the Rubik's Cube game's user interface by implementing a visually appealing background and ensuring responsiveness across various devices. By adding a background color and making design adjustments, the goal is to improve the overall aesthetics and user experience of the game. This involves modifying the HTML and CSS code to incorporate the background and ensure it scales appropriately on different screen sizes. Additionally, existing UI elements and functionality, such as the Google Sign-In integration and game controls, are retained to maintain the game's functionality while enhancing its visual presentation.

@Dev-tanay please assign me

Make cursor pointer on some button

When we move cursor on some button (E.G : Corner button) , it should be pointer for better user experience.

So kindly review this issue and it is relevant to you then please assign me this issue under GSSOC24.

thank you

Improving the UI of the buttons

I would like to contribute to this project by adding some button UI. The buttons are not quite visible properly and return to home is missing after we enter leaderboard. I would like to work on these issues for this project.

Add Challenge Mode

---

name: Challenge Mode for player
about: create a challenge mode for payer to compare his current score/timing to prev highest score or best timing
title: "[FEAT] Challenge Mode"

---

Is your feature request related to a problem? Please describe.
Right now the game seems to be in practice mode, where you are able to see the time taken to finish that particular cube. That is good for beginners but it's boring.

Describe the solution you'd like
I think there should be a way to find the highest score (if you assign score based on performance of the solver/player) or the least time taken and the count down should be in reverse, in comparision to the previous time taken.

Describe alternatives you've considered

• we can make a database and store all the details of the player
• Or we can use the local memory

Adding a Pull Request (PR) Template

• We all know presentation is important for everything we do.
• A Pull Request, raised for contributing to the project, is not an exception.
• A Pull Request Template would make things simpler for the Project Admin to understand.
• It would also streamline the process of highlighting the main points.

Implementation:
The Pull Request Template will mainly consist of the following sections separately:

• Description: Users have to provide a brief description of the change and mention the issue no., which will be fixed by this PR.
• Type of change: Users will be provided with four different checkboxes for different PRs: Bug Fix, New Feature, Breaking Change, Documentation Update.
• Checklist: Users will be provided with a checklist where they'll be able to check boxes, consisting of "This code was written by me", "My changes generate no new warnings", etc.

@Dev-tanay Kindly assign me this issue under GSSoC '24.
Thank you!

Adding Left Sidebar for Leaderboard, Social Links, Feedback

i want to fixed sidebar for better engagement. Features include leaderboard, social links, and feedback. Maintain modern design and seamless integration.
I would be really thankful if you assign me this issue as a part of GSSoC'24 @Dev-tanay .

Add About Page with Rubik's Cube Solution Formulas

Currently, the project lacks an "About" page, which could serve as a valuable resource for users interested in learning about Rubik's Cube solving methods. This issue proposes the addition of an "About" page that provides basic information about Rubik's Cubes and includes a comprehensive list of formulas and algorithms for solving the Rubik's Cube.

I would be really thankful if you assign me this issue as a part of GSSoC'24 @Dev-tanay .

Add Goggle SIgnIn/Login

I intend to add the goggle login/ signin option to this page so that the users can have their own personalised profile. The goggle login button will be added befoe this page loads into action.

Addition light mode and dark mode

By adding the day mode and night mode the user . It will help them to choose the mode of their convince which can helps to reduce eye strain in the long-term use of screens. Kindly assign this issue to me @Dev-tanay
thank you!

Add badges in readme

There is no readme and no badges in readme.md i can make new readme with badegs.
Please assign this issue me to under Gssoc'24 , i would like to work on this

Adding Undo and Redo Functionality

I propose adding an undo and redo feature to the Rubik Cube game to provide a way to rectify accidental moves. This feature would allow users to revert their last action or redo a previously undone move, providing greater flexibility and control during gameplay.
Please assign me this issue

Updating of Icons Colour For Better Visual Experience to the User #SSOC

• The User Experience of the Rubik's Cube game is highly appreciable. However, for better Visual Experience the icons colour need to be changes.
• While playing the "Rubik's cube" game i find it difficult to identify the icons on the Webpage as they were in Light grey colour.
• To identify the icons fastly and use it effectively, we need to change the colour of the icon to people's comfortable colour.
• As per my research in Google, most of the users prefer Blue or Light Blue colour to use for Icons.
• Since it is my First Open Source Contribution, I'm very excited to contribute in your project .
• If you like the idea , please assign it to me so that i can give a better visual experience for the user.
  #SSOC

Adding Auto-commenting feature for PR raised

Problem:

• When contributors raise pull requests (PRs) in a project, it is crucial to provide immediate acknowledgment and feedback to encourage collaboration and maintain transparency.
• However, manually commenting on every PR can be time-consuming for maintainers, leading to delays and inconsistency in communication. This can result in contributors feeling undervalued or discouraged from further participation.
• This solution introduces a new GitHub Actions workflow that automatically comments on new and updated pull requests.
• This feature aims to streamline the contribution process by providing contributors with immediate feedback and guidance upon creating or updating their pull requests.

Features of the solution I want to implement:

• This feature aims to address the problem of delayed and inconsistent communication following the raising of PRs.
• By automatically commenting on PRs as soon as they are raised, it ensures that contributors receive immediate feedback and acknowledgment for their efforts.
• This fosters a positive and supportive environment for collaboration, encouraging continued participation and engagement from contributors.

@Dev-tanay Kindly assign me this issue under GSSoC '24.
Thank you!

Add Visual Indicators for Current Move

To enhance the user experience and make the Rubik's Cube game more intuitive, I propose adding visual indicators to display the current state of the cube. This includes highlighting selected faces and indicating the last move made.

Proposed Solution:

• When a user clicks or hovers over a face, it should be highlighted to indicate selection.
• We can use CSS classes and event listeners to achieve this.
• We can also store the last move and update the UI to highlight the affected faces.

Benefits:

• Users can easily see which face is selected or hovered over.
• Users receive immediate visual feedback on their interactions.
• Visual indicators help users understand the impact of their moves, improving their solving skills.

Adding Reset Button and Time limit feature

There is no reset button below the rubic cube to restart and reset the cube again due to which many user will find it difficult and irritating to refresh the page again. Also without a time limit for resolving the Rubik's cube, users might find it less engaging or useful

there is no reset button below the cube to restart the game again. So I can add reset button so that the users will find it easy and interesting to play and also introduce a reset button along with a time limit feature to enhance the user experience.

@Dev-tanay I can solve this. Kindly add the labels to this issue and Please assign me this issue i would be happy to contribute in your project

Show a Rubik's Cube inside the settings

While opening the settings of the Rubik's Cube, show the cube graphics on the side so that we can see the changes we are making.

Add New Component for Restart Button Functionality to Rubik's Cube Timer.

The current Rubik's Cube Timer component lacks a restart button functionality, which hinders users' ability to reset the timer during a solving session. Adding a restart button would significantly improve user experience by allowing them to reset the timer without having to refresh the page or manually stop and start the timer again.

Proposed Solution:
Integrate a restart button into the Rubik's Cube Timer component UI, positioned prominently for easy access. When clicked, the restart button should reset the timer to zero, providing users with a convenient way to restart their solving sessions without interrupting their workflow.

The timer reset button should on the right side of the ongoing timer.

[Please Assign this Task to me under GSSOC'24]

FEATURE : Add 'Guidelines' Button for the Website

Guidelines Button Missing on Rubik's Cube Website

Describe the bug
Currently, there is no guideline button available on the Rubik's Cube website, which makes it challenging for users to understand how to play the game.

To Reproduce
Steps to reproduce the absence of the guideline button:

1. Navigate to the Rubik's Cube website.
2. Look for a guideline button in the user interface.
3. Observe that there is no such button available.

Expected behavior
There should be a visible and easily accessible guideline button on the Rubik's Cube website that provides instructions on how to play the game.

Additional context
The addition of a guideline button which includes visual information will enhance user experience and make it easier for new users to understand how to interact with the Rubik's Cube website.

IMPROVE THE BACKGROUND WHITE THEME , WHICH MATCHES THE GAMING THEME

We can improve the gaming theme of the background, the background is white in color which looks so simple , i can add some gaming theme in the background related to the rubik cube
Please assign it to me @Dev-tanay
Thank you

Add Dark/Light Mode Toggle

Problem Statement:
Currently, the website lacks a toggle functionality for switching between dark and light modes. This feature is increasingly expected by users and enhances accessibility, particularly in low-light environments.

Proposed Solution:
Integrate a toggle button prominently placed on the website interface, allowing users to switch between dark and light modes according to their preference. This toggle should persist across sessions, providing a consistent experience for returning visitors.

Expected Behavior:

Users should be able to switch between dark and light modes seamlessly.
The toggle button should reflect the current mode (e.g., a moon icon for dark mode and a sun icon for light mode).
The selected mode should persist across sessions, maintaining user preferences.

I would like to work on this issue @Dev-tanay

Improve SEO and Performance Optimization

I'd like to contribute by improving the project's SEO and performance. Here's my proposal:

SEO Optimization:

• Add meta tags to enhance search engine visibility.
• Improve content for better indexing by search engines.

Performance Optimization:

• Optimize images and other assets to reduce load times.
• Minify CSS and JavaScript files to improve page speed.

These changes will help increase visibility and provide a better user experience. @Dev-tanay Please assign this task to me if approved.

Thank you!

Enhancing User Experience with Subtle Background Music and Sounds

Enhanced Atmosphere: Background music can set the tone and mood, making the application more appealing and enjoyable. For instance, calm and soothing music can create a relaxed atmosphere, while upbeat tunes can energize the user. We can also offer the option to mute the music if desired, providing users with control over their audio experience.

Implementation of Docker Containerization for the Application

Title: Docker Containerization Implementation

Objective:

• Implement Docker containerization to streamline deployment, enhance scalability, and improve portability across different environments.

Benefits:

• Streamlined Deployment: Consistent deployment across platforms reduces issues.

• Improved Portability: Facilitates migration between environments.

• Simplified Maintenance: Easier management and updates without system impact.

Adding a README file

I've noticed your project lacks a README.md file, crucial for sharing essential project details and fostering collaboration. As a GSSoC 2024 participant, I'm keen on contributing meaningfully. Can you assign me this task? I'm dedicated to crafting a thorough README for the project's benefit. Thanks for considering. Eagerly awaiting your response.

Thank you @Dev-tanay

Contributor's Logo

Addition of Contributor's logo to readme.md file.

Assign under GSSOC.

to remove a bug in the ui theme div

Currently when the ui theme namely the scroll bars for brightness,hue and saturation are changed, only one side of the cube gets reflected with these chaned.It should reflect on all the sides of the cube. I wish to adress to this issue and fix this.
I agree to follow this project's Code of Conduct.
I'm a GSSoC'24 contributor.
I want to work on this issue.

Improve Mouse Cursor Behavior for Better User Interaction

Description:

Currently, the mouse cursor remains as a default arrow when hovering over interactive elements on the website. This can lead to confusion for users who expect the cursor to change to a pointer to indicate clickable or interactive elements.

Issue:

When hovering over links, buttons, or other interactive elements, the mouse cursor should change to a pointer to provide visual feedback to users.

Expected Outcome:

Improved user interaction: Users will have clearer visual cues indicating interactive elements, enhancing usability and reducing friction in navigating the website.

Creating a logo for the website

Adding a logo can be a nice idea. I have experience with logo designing assign it to me under Gssos'24. @Dev-tanay

Adding A New Camera Angle to the Project

These are the existing camera angles in the project. Apart from this i would also like to add the panoramic view to the project. Thank you

Add Code of Conduct

We recommend that every repo has a code of conduct. If you don’t feel comfortable creating your own Code of Conduct from scratch we highly recommend using one of the templates provided by GitHub. If you do use a template, please read through the template and ensure that you can and will abide by the Code of Conduct.

Please follow these instructions on how to add a Code of Conduct.

Sample: https://github.com/Recode-Hive/Stackoverflow-Analysis/blob/main/CODE_OF_CONDUCT.md

Add GitHub Desktop Contribution Instructions

I am interested in contributing to the project by adding detailed instructions on how to contribute using GitHub Desktop.

I believe that by providing clear and comprehensive guidance, we can encourage more contributors to participate in the project, especially those who prefer using GitHub Desktop for their contributions.

Could you please assign me the issue related to adding GitHub Desktop contribution instructions under gssoc24? I am excited about the opportunity to contribute to the project and help streamline the contribution process for others.

Add Control Functions with Keyboard Keys

Feature Request : Implement control functions using keyboard keys to enhance the interactivity of the web-based Rubik's cube game.

Problem: The current implementation lacks keyboard controls for rotating the Rubik's cube, limiting user interaction. Adding this feature will provide a more intuitive and user-friendly experience.

Proposed solution:

1. Capture Keyboard Events: Use JavaScript to detect key presses.
2. Define Actions: Determine actions for each key press (e.g., rotate up, down, left, right).
3. Implement Functions: Write functions to execute the defined actions.
4. Bind to Events: Associate functions with key presses using event listeners.
5. Error Handling: Handle unexpected key presses gracefully.

Update README.md

I've gone through the project's repository, and while the website itself is simple and elegant, I noticed that the repository is missing its README.md.

Here is how Rubik-Cube's README.md will look like:

---

Rubik-Cube

[Link to game demo - https://dev-tanay.github.io/Rubik-Cube/]

[Screenshot of the game home screen]

1. About the Game

This section will talk briefly about Rubik Cube, and its objective.

2. How to Play

It will explain how to:
a. Rotate the segments of the cube
b. Change the view of the cube

Using the mouse cursor, as well as touch.

Explanatory screenshots will also be added.

3. Installation

Steps to clone the repository to local machine, and open the index.html file in any web browser, along with commands

4. Navigating through the game screen

This final section will explain various buttons on the screen, like leaderboard, stats, preferences, theme, reset.

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

I can develop this easy-to-read README.md for this project repository, if it's assigned to me under #gssoc label

Adding milliseconds functionality to timer

Add Milliseconds Functionality to Rubik's Cube Game Timer

Description

Improvement Suggestion: Enhance the existing Rubik's Cube game by adding milliseconds functionality to the game timer.

Current Functionality: The current timer only supports seconds, which limits the precision of the game timing.

Proposed Improvement: Modify the convert() function to include milliseconds, providing more precise timing for a better gameplay experience.

Changes Made: I have already made the necessary changes in the convert() function to support milliseconds. These changes are aimed at improving the overall functionality and precision of the game timer.

Why This Improvement?

1. Enhanced Precision: Adding milliseconds to the timer allows for more accurate measurement of solving times, which is especially beneficial for competitive players.
2. Better User Experience: A more precise timer enhances the gameplay experience, making the game more engaging and realistic.

Steps Taken

1. Modified the convert() function to support milliseconds.
2. Tested the changes to ensure the timer accurately displays milliseconds.

Additional Context

I initially made a PR for an existing issue related to this improvement. However, the original issue was deleted by the author. Therefore, I am creating this as a fresh issue to continue the discussion and implementation of this improvement.

References

• Here's the PR /pull/130

Adding Try Again Option

Problem Statement: Once the user has completed the challenge, there is no way for the user (other than refreshing the website) to get to the main menu (or any other page).

Solution Proposed: Add a 'try again' option redirecting the user to the main menu.

Expected behavior: The user will get redirected to the main menu once he clicks the button.

I agree to follow this project's Code of Conduct.
I'm an SSoC'24 contributor.
I want to work on this issue, please assign it to me @Dev-tanay.

Addition of Custom Cursor

Add issue template

Issue templates are very helpful for a collaboration repo. When users identify a bug or want to add a new feature, you can provide templates so you can collect all the pertinent information you need to fix a bug or add a new feature.

We recommend creating a “Report Bug” and “Feature Request” issue template.
you can refer this: https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository

Some suggested prompts/questions you can add to a “Report Bug” template are:

Briefly describe the bug
What is the expected behavior?
Please provide step by step instructions on how to reproduce the bug
Some suggested prompts/questions you can add to a “Feature Request” issue template are:

Briefly describe your feature request
What problem is this feature trying to solve?
How do we know when the feature is complete?

Reference: https://github.com/Recode-Hive/Stackoverflow-Analysis/issues/new/choose
Click on Get Started button and copy the template to yours.

Adding a Installation and Setup Guide.

I've noticed your project lacks a Installation and Setup Guide, crucial for sharing essential project details and fostering collaboration. As a GSSoC 2024 participant, I'm keen on contributing meaningfully.
I'm dedicated to crafting a thorough README for the project's benefit. Thanks for considering. Eagerly awaiting your response.

I've done a readme file for another project, you can check my profile, i always give my best.

Can you assign me this task?

Thank u @Dev-tanay

Doumentation Fix

Hii @Dev-tanay
The documentation does not contain the technology used section. A good documentation must contain what all techs are being used in the project.
I would love to fix this documentation issue. Please assign it to me under GSSoC'24.

A small video showing how things work

We can add a clip showing arrows that shows how things work in the game like moving the Rubik's cube.

Also adding a timer for the users , so that they can set up a time limit under which they wish to complete the game

Restart button at the end of the game

Also adding a high score containing the lowest time taken by the player to solve the Rubik's cube

Kindly Assign me this issue under GSSOC '24
@Dev-tanay

Adding an Issue Template

• We all know presentation is important for everything we do.
• An issue, raised for contributing to the project, is not an exception.
• An Issue Template would make things simpler for the Project Admin to understand.
• It would also streamline the process of highlighting the main points.

Implementation:

• The Issue template would be subdivided into two sections: One entitled "New Feature Request" and the other would be entitled "Bug Report".
• Both the subdivisons will have different templates.

New Feature Request:

• Describe the issue you want to solve through this feature.
• Mention the feature you want to add.
• Mention the program for which you want to contribute.
• Checkbox to agree with the Contributing guidelines.

Bug Report:

• Give a brief about the bug
• What is the expected behaviour
• Description on how you will solve the bug
• Mention the program for which you want to contribute.
• Checkbox to agree with the Contributing guidelines.

@Dev-tanay Kindly assign me this issue under GSSoC '24.
Thank you!

Color Customisation for Rubik Cube

Description
Currently, the Rubik's Cube simulator does not allow users to customize the colors of the cube. Adding color customization functionality would enhance the user experience and allow users to personalize their cube according to their preferences.

Proposal

• Implement a UI element (e.g., dropdown menus, color pickers) to allow users to select colors for each face of the Rubik's Cube.
• Write JavaScript functions to handle the color customization logic and update the cube's colors accordingly.
• Modify the code responsible for rendering the Rubik's Cube to use the custom colors defined by the user.

Additional Details

• This feature would be valuable for users who want to customize the appearance of the Rubik's Cube to their liking.
• It aligns with our goal of providing a flexible and user-friendly Rubik's Cube simulator.
  pls assign this task to me @Dev-tanay for ssoc

Adding a good ui to game to change themes

I would like to add a feature where user can change themes too.
Please assign this issue under SSOC.

Additon of Preloader

Assign under GSSOC
Addition of preloader which gives clarity to the user that the webpage is still loading.

Girlscript Summer of Code Introduction/Tracking

👋 Hi @Dev-tanay,

I am Prince,web developer Girlscript Summer of Code. I'll be collaborating with you on preparing your repo for GSSoC'24 Program

Why are these changes required?
After Analysing last year's contributions and feedback it would be great for students to have a couple of standard readme files on the repo to understand what the project is all about and some issues detailing what they can contribute. This will help you to see increased engagement in your repository as well.

As mentioned students get a chance to learn step by step, how to build this project as well as invite mentors to collaborate and add features to this repo. I will generate issues, which will provide guidance on how to prepare your repo for Girlscript summer of code 2024 on 10th May.

This issue will serve as a tracking issue to track all issues related to GSSoC'24. I recommend creating a new branch for every issue and opening a pull request to track changes so we can effectively collaborate with each other and merge changes when you and I feel like those changes are ready to be merged on your primary branch.

If you have any questions or concerns, please feel free to leave a comment on this issue or any of the other issues that are generated.

I look forward to working with you

• #1
• #2
• #3
• #4
• #5

Add pyramid cube

I can add the pyramid cube section to the website to make it more diverse and interesting.