{"id":20627001,"url":"https://github.com/schneedotdev/wii-for-the-web","last_synced_at":"2026-03-10T13:05:48.971Z","repository":{"id":108533843,"uuid":"463058057","full_name":"schneedotdev/Wii-for-the-Web","owner":"schneedotdev","description":"Nintendo Wii for the web with wiimote that tracks to cursor movements","archived":false,"fork":false,"pushed_at":"2022-05-18T19:22:58.000Z","size":6331,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-15T04:42:07.236Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://wiifortheweb.netlify.app/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/schneedotdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-02-24T07:58:32.000Z","updated_at":"2022-05-18T19:40:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"c8b7dadc-c286-4451-ad9a-7864a5531ecb","html_url":"https://github.com/schneedotdev/Wii-for-the-Web","commit_stats":null,"previous_names":["schneedotdev/wii-for-the-web"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/schneedotdev/Wii-for-the-Web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schneedotdev%2FWii-for-the-Web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schneedotdev%2FWii-for-the-Web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schneedotdev%2FWii-for-the-Web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schneedotdev%2FWii-for-the-Web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/schneedotdev","download_url":"https://codeload.github.com/schneedotdev/Wii-for-the-Web/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schneedotdev%2FWii-for-the-Web/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30334412,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T12:41:07.687Z","status":"ssl_error","status_checked_at":"2026-03-10T12:41:06.728Z","response_time":106,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-11-16T13:15:29.117Z","updated_at":"2026-03-10T13:05:48.953Z","avatar_url":"https://github.com/schneedotdev.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eWii for the Web\u003c/h1\u003e\n  \u003cp\u003eNintendo Wii for the web with a wiimote that tracks to cursor movements.\u003c/p\u003e\n  \u003cp\u003e\u003cb\u003eLive Website:\u003c/b\u003e https://wiifortheweb.netlify.app/\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/77141303/169122829-3ea6f856-c4e6-450b-ab83-6687b4523683.gif\"\u003e\n\u003c/div\u003e\n\n\n## How It's Made:\n\n**Tech used:** HTML, CSS, JavaScript\n\nThe idea stemmed from the curiosity of tracking cursor movements in my browser window. As I started to build the concept of a wiimote tracking to the position of my cursor, I figured out I would need to utilize CSS transformations to give the perspective of a real hand moving a controller. In my JavaScript, I first determine the size of the browser window \nI am dealing with (this will come in use later when I set specific movements relative to the window width and height). If the window is ever resized, the values stored will be reassigned. I then add an event listener for mouse movements which will track the coordinates of my cursor. There are three more steps required in order to move the image of the wiiremote \nrelative to cursor movements. I must move the image based on where my cursor moves, tilt the image forward and backwards when the cursor moves vertically and rotate the image when the cursor moves horizontally. This gives the perspective of a human controlling the movements. Within the codeblock where I rotate the image, I additionally translate \nthe center point in which the image is rotated from. This is necessary because as I rotate the image, the top of the wiimote will no longer point to the cursor. The translation allows it so that the new line pointing from the top of the controller can point to the cursor. \n\n## Future Optimizations:\n\n\u003cul\u003e\n  \u003cli\u003eCreate loading screen for Wii Sports in HTML/CSS.\u003c/li\u003e\n  \u003cli\u003eAdd the option to customize the wiimote.\u003c/li\u003e\n  \u003cli\u003eMake the date/time on the wii menu page, represent real time.\u003c/li\u003e\n\u003c/ul\u003e\n\n## Lessons Learned:\n\n\u003cul\u003e\n  \u003cli\u003eCursor locations can be coordinates can be tracked.\u003c/li\u003e\n  \u003cli\u003eWhile adding event listeners for mouseover, make sure the event listener exists at the bottom of your JavaScript file.\u003c/li\u003e\n  \u003cli\u003eIn order to achieve the feeling that the wiimote is tracked as if it were being held by an actual hand, multiple CSS transformations are required.\u003c/li\u003e\n  \u003cli\u003eThe elements rotation varies depending on how far the cursor is from the center of the screen horizontally\u003c/li\u003e\n  \u003cli\u003eAs the wiimote element is rotated, the elements center point should be translated so that the direction that the top of the wiimote points to, can properly be directred toward the cursor.\u003c/li\u003e\n  \u003cli\u003eAs the cursor is moved vertically, the elements height should changed in order to simmulate a tilting perspective.\u003c/li\u003e\n\u003c/ul\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fschneedotdev%2Fwii-for-the-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fschneedotdev%2Fwii-for-the-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fschneedotdev%2Fwii-for-the-web/lists"}