{"id":13793300,"url":"https://github.com/vasu-gondaliya/rubiks-cube","last_synced_at":"2025-05-12T20:30:55.482Z","repository":{"id":38373290,"uuid":"292284196","full_name":"vasu-gondaliya/rubiks-cube","owner":"vasu-gondaliya","description":"A Rubik's Cube Visualizer with face turns, cube rotations, scramble generator, flat view of cube and cube animation","archived":false,"fork":false,"pushed_at":"2024-10-05T06:14:33.000Z","size":333,"stargazers_count":28,"open_issues_count":5,"forks_count":30,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-18T08:50:04.314Z","etag":null,"topics":["3d-animation","css","hacktoberfest","hacktoberfest-accepted","hacktoberfest2024","rubiks-cube","visualizer"],"latest_commit_sha":null,"homepage":"https://vasu-gondaliya.github.io/rubiks-cube/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vasu-gondaliya.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-02T13:01:26.000Z","updated_at":"2024-10-05T06:20:36.000Z","dependencies_parsed_at":"2024-08-03T23:01:29.192Z","dependency_job_id":"53537c48-4939-4527-ba54-a7a4d2e9a084","html_url":"https://github.com/vasu-gondaliya/rubiks-cube","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasu-gondaliya%2Frubiks-cube","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasu-gondaliya%2Frubiks-cube/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasu-gondaliya%2Frubiks-cube/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasu-gondaliya%2Frubiks-cube/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vasu-gondaliya","download_url":"https://codeload.github.com/vasu-gondaliya/rubiks-cube/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253816671,"owners_count":21968862,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d-animation","css","hacktoberfest","hacktoberfest-accepted","hacktoberfest2024","rubiks-cube","visualizer"],"created_at":"2024-08-03T23:00:18.196Z","updated_at":"2025-05-12T20:30:54.788Z","avatar_url":"https://github.com/vasu-gondaliya.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# Rubik's Cube\n[![forthebadge](https://forthebadge.com/images/badges/uses-html.svg)](https://forthebadge.com)\n[![forthebadge](https://forthebadge.com/images/badges/uses-css.svg)](https://forthebadge.com)\n[![forthebadge](https://forthebadge.com/images/badges/uses-js.svg)](https://forthebadge.com)\n[![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)\n\n## Table of Contents\n- [Preview](#preview)\n- [Getting Started](#getting-started)\n- [Files](#files)\n\n## Preview\n### A Rubik's Cube Visualizer with face turns, cube rotations, scramble generator and flat view of cube.\n![main-cube](./assets/main.png?raw=true)\n### Scrambled Cube\n\u003cimg src=\"https://raw.githubusercontent.com/vasu-gondaliya/cube/master/assets/cube.png\" alt=\"cube\" width=\"45%\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/vasu-gondaliya/cube/master/assets/flat.png\" alt=\"flat\" width=\"45%\"\u003e\n\n## Getting Started\n1. Fork a copy of the repo from https://github.com/vasu-gondaliya/rubiks-cube/.\n2. Clone the repo onto your machine using `git clone \u003cREPO URL\u003e` (e.g. `git clone https://github.com/your-user-name/your-rubiks-cube-repo.git`).\n3. Open `index.html` in a web browser of your choice to use the visualizer.\n\nNo other preresiquites or configurations needed.\n\nNote: If for regular use or for testing, on-screen buttons would be more useful for you than using the given keyboard commands, `index.html` has hidden buttons which perform most functionality. \nThese buttons can be revealed by commenting out the line `visibility: hidden` under the `buttons` class in `cube.css`. \nRevealing the buttons will overlap with the default layout of the visualizer, but could be useful if for some reason keyboard functionality is problematic for you.\n\n## Files\n### Style Sheets\n- `cube.css`: Handles styling of the main visualizer page, notably the instruction tables.\n- `cubeparts.css`: Handles styling of the individual squares (\"parts\") of the cube.\n\t- This includes coloring and the positioning of each part in 3d space. Each part's class is labeled `f` for front, `b` for back, `u` for up, `d` for down, `l` for left, and `r` for right, along with its numbering in a 3x3 grid corresponding to a face of the cube (where `1` is the top-left square in the grid, `2` the top-middle, etc.).\n\t- Note: The styling for the classes `part`, `front`, `back`, `up`, `down`, `left`, and `right` is duplicated in `planeparts.css`. `planeparts.css` overwrites the corresponding `cubeparts.css` styling, so any changes to the listed classes must also be made in `planeparts.css`.\n- `planeparts.css`: Analogous to `cubeparts.css` except it handles the styling for the plane view of the cube (which can be toggled on using `v` in the visualizer).\n\t- Classes follow the same convention except prepended by an `x`, e.g. `xf1` is the first part of the front face in plane view.\n- `cubeanimations.css`: Animates the movements of the cube (when the user uses the arrow keys to change the facings or when the automated animation changes the facings).\n\t- The classes (e.g. `s23`) correspond to the different states of the cube created in `cube.js`.\n\n### Logic\n- `cube.js`: Handles all the user interaction. Includes functions corresponding to each keyboard command (e.g. `faceturn()`, `changeView()`) and handles the keyboard events.\n\n### GUI\n- `index.html`: The visualizer itself as the user sees it. Includes the cube (styled according to the [sheets](#style-sheets)) and tables which explain the keyboard commands for each action, as handled in `cube.js`.\n\n### Supplementary:\n- `cube.cpp`: Used to automate writing the `cubeparts.css` and `cubeanimations.css` files. Reads the raw data of the coordinates from `cubeinput.txt` and prints that data into the context of CSS code.\n- `cubeinput.txt`: Has the (x,y,z) coordinates for `cube.cpp` to read for the positions of each state (labeled in the comments as `front`, `back`, etc.) and the coordinates for the animation transformations.\n\t- Example: The first row of data under the `front` label is `0 0 45`. This corresponds to the line `transform: translate3d(0px, 0px, 45px);` for `#f1` in `cubeparts.css`.\n- `cube.txt`: Previously served the function of `cubeinput.txt`, now is a blank file.\n- `/assets`: Stores images used in `README.md`.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvasu-gondaliya%2Frubiks-cube","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvasu-gondaliya%2Frubiks-cube","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvasu-gondaliya%2Frubiks-cube/lists"}