{"id":16266888,"url":"https://github.com/byronhsu/never-blink","last_synced_at":"2025-04-13T00:46:50.321Z","repository":{"id":35810261,"uuid":"190750590","full_name":"ByronHsu/Never-Blink","owner":"ByronHsu","description":"👀Blink and lose.","archived":false,"fork":false,"pushed_at":"2022-11-22T03:51:53.000Z","size":96854,"stargazers_count":904,"open_issues_count":7,"forks_count":68,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-13T00:46:22.753Z","etag":null,"topics":["blink","flask","game","peerjs","react","socketio","video-streaming"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ByronHsu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-07T13:46:13.000Z","updated_at":"2025-04-11T11:58:01.000Z","dependencies_parsed_at":"2023-01-16T07:01:18.267Z","dependency_job_id":null,"html_url":"https://github.com/ByronHsu/Never-Blink","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/ByronHsu%2FNever-Blink","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ByronHsu%2FNever-Blink/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ByronHsu%2FNever-Blink/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ByronHsu%2FNever-Blink/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ByronHsu","download_url":"https://codeload.github.com/ByronHsu/Never-Blink/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248650434,"owners_count":21139672,"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":["blink","flask","game","peerjs","react","socketio","video-streaming"],"created_at":"2024-10-10T17:43:17.784Z","updated_at":"2025-04-13T00:46:50.295Z","avatar_url":"https://github.com/ByronHsu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Never-Blink\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"assets/logo.png\" width=\"300px\"\u003e\n\u003c/p\u003e\n\n## 1. 🎉 Introduction\n\n🙌 Upvote for my [product hunt](https://www.producthunt.com/posts/never-blink)!\n\nRandomly connect to a player around the world and challenge him/her. Remember not to blink!\n\nFor full version of demo video, click [here](https://www.youtube.com/watch?v=VCP36k5OqDs\u0026t=59s).\n\n\u003cimg src=\"assets/out.gif\"/\u003e\n\n## 2. 📜 Implementation\n\n### 1. Project structure\n\n```\n.\n├── backend\n│   ├── __init__.py\n│   ├── detect.py\n│   └── shape_predictor_68_face_landmarks.dat (detect model)\n├── package.json\n├── requirements.txt\n├── server.py\n├── src\n│   ├── app.jsx\n│   ├── index.js\n│   ├── play.jsx\n│   └── start.jsx\n├── static\n│   └── bundle.js\n├── templates\n│   └── index.html\n└── webpack.config.js\n```\n\nWe use `react` as our frontend framework, and use `peerjs` to communicate between clients. At backend, we use `flask` to host the server. For connection between clients and server, we use `socketio` to implement real-time data transfer.\n\n\u003cimg src=\"assets/structure.png\" width=\"500px\"\u003e\n\n### 2. Game State\n\nWe use the notion of [Finite State Machine](https://zh.wikipedia.org/wiki/%E6%9C%89%E9%99%90%E7%8A%B6%E6%80%81%E6%9C%BA) to design our game state. The circle is the state. The text in the top of each box is the event causing state transition, and the text in the bottom of each box is the action taken when event occurs. The logic looks quite simple here, but it is not that easy to implement. For more detail you can check [play.jsx](./src/play.jsx) or [server.py](./src/server.py).\n\n\u003cimg src=\"assets/gamestate.png\" width=\"500px\"\u003e\n\n## 3. 💻 Development\n\nI spent lots of time formatting my code and writing comments to make it as readable as possible. Hope you enjoy 😊\n\n1. Clone this repo.\n\n```bash\ngit clone git@github.com:ByronHsu/Never-Blink.git\n```\n\n2. Install the packages\n\n```bash\n# Frontend\nnpm install\n# Backend\npip install -r requirements.txt\n```\n\n3. Build and Run\n\n```bash\n# Build frontend files\nnpm run build\n# Run server\nnpm run start\n```\n\nEvery time you changed your code, you should run the above command again. We do not support hot module replacement now.\n\n4. Start and Enjoy\n\nGoto `https://0.0.0.0:3000`\n\n`0.0.0.0:3000` does not work, remember to add `https`.\n\n## 4. 🚧 Problem\n\n1. Because the detector is too slow and weak, we can not endure too many clients. Therefore, we do not deploy it to a public server now. We plan to train a robust and fast model in the future.\n2. When restarting, the old media connection listener will be called again. So we remove restart temporarily.\n\n## 5. 📖 Reference\n\n1. Environment setup: https://github.com/rwieruch/minimal-react-webpack-babel-setup\n2. Simple P2P WebRTC package: https://github.com/peers/peerjs\n3. Socket-io: https://socket.io/docs/client-api/\n4. Flask-socketio: https://flask-socketio.readthedocs.io/en/latest/\n5. Blink detector: https://github.com/dilawar/eye-blink-detector\n6. Material UI: https://material-ui.com/\n\n## 6. 🗞️ License\n\n[MIT Licensed](./License)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbyronhsu%2Fnever-blink","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbyronhsu%2Fnever-blink","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbyronhsu%2Fnever-blink/lists"}