{"id":20348554,"url":"https://github.com/tfkfan/phaser3-react-template","last_synced_at":"2025-09-23T11:32:04.745Z","repository":{"id":191189079,"uuid":"684043562","full_name":"tfkfan/phaser3-react-template","owner":"tfkfan","description":"Phaser3, react,  typescript, webpack, websocket template","archived":false,"fork":false,"pushed_at":"2024-01-08T17:34:27.000Z","size":837,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-14T22:22:37.956Z","etag":null,"topics":["game","phaser","phaser3","react","typescript","websocket"],"latest_commit_sha":null,"homepage":"https://tfkfan.github.io/phaser3-react-template/","language":"TypeScript","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/tfkfan.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-28T10:36:35.000Z","updated_at":"2024-11-11T19:37:06.000Z","dependencies_parsed_at":"2024-11-14T22:21:21.275Z","dependency_job_id":"190a41fe-4951-4694-8b7c-d885ea110764","html_url":"https://github.com/tfkfan/phaser3-react-template","commit_stats":null,"previous_names":["tfkfan/phaser3-react-template"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tfkfan%2Fphaser3-react-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tfkfan%2Fphaser3-react-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tfkfan%2Fphaser3-react-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tfkfan%2Fphaser3-react-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tfkfan","download_url":"https://codeload.github.com/tfkfan/phaser3-react-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233974684,"owners_count":18759832,"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":["game","phaser","phaser3","react","typescript","websocket"],"created_at":"2024-11-14T22:21:09.260Z","updated_at":"2025-09-23T11:32:04.722Z","avatar_url":"https://github.com/tfkfan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://github.com/tfkfan/phaser3-react-template#readme\"\u003e\u003cimg src=\"readme/header.png\" alt=\"header\" width=\"600\"\u003e\u003c/a\u003e\n  \u003cbr\u003e\n  Phaser 3 React TypeScript Starter Template\n  \u003cbr\u003e\n\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003e\nA starter template for \u003ca href=\"https://phaser.io/\" target=\"_blank\" \u003ePhaser 3\u003c/a\u003e with \u003ca href=\"https://www.typescriptlang.org/index.html\" target=\"_blank\" \u003eTypeScript\u003c/a\u003e and \u003ca href=\"https://webpack.js.org/\" target=\"_blank\" \u003ewebpack\u003c/a\u003e for building excellent html5-games that work great in the browser and on mobile devices.\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\" title=\"License: MIT\" \u003e\n    \u003cimg src=\"https://img.shields.io/badge/License-MIT-greenbright.svg?style=flat-square\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#key-features\"\u003eKey Features\u003c/a\u003e •\n  \u003ca href=\"#preview\"\u003ePreview\u003c/a\u003e •\n  \u003ca href=\"#how-to-use\"\u003eHow To Use\u003c/a\u003e •\n  \u003ca href=\"#react-controls\"\u003eReact controls\u003c/a\u003e •\n  \u003ca href=\"#websocket-support\"\u003eWebsocket support\u003c/a\u003e •\n  \u003ca href=\"#credits\"\u003eCredits\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## Key Features\n\n- All newest ES 2020 features\n- Prettier\n- Webpack dev server\n- Includes Phaser 3 TypeScript typings\n- For development and production builds\n- React gui development\n- Websocket integration\n\n## Preview\n\nThis is what you get after installing this template. A simple and clean starter template written in TypeScript. \n\n\u003cimg src=\"readme/build.png\" width=\"640\" style='border: 0.25em solid #e1e4e8;border-radius: 5px;'/\u003e\n\n## How To Use\n\nTo clone and run this template, you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer. From your command line:\n\n```bash\n# Clone this repository (yes, npx not npm)\n$ git clone https://github.com/tfkfan/phaser3-react-template.git\n\n# Go into the repository\n$ cd phaser3-react-template\n\n# Install dependencies\n$ npm install\n\n# Start the local development server (on port 8080)\n$ npm start\n\n# Ready for production?\n# Build the production ready code to the /dist folder\n$ npm run build\n```\n\n## React controls\n\nThis template allows to use react hooks outside of react components\n\nTo use this take a look to /src/global-state.ts  file to create your own handlers\n\nTo register new handler write inside your React functional component:\n```typescript\nconst [fps, setFps] = useState(0);\nconst [version, setVersion] = useState('');\n\nuseGlobalReg({\n  setVersion,\n  setFps\n});\n```\n\nTo use it inside phaser game:\n\n```typescript\nuseGlobalState(state =\u003e state.setVersion(`Phaser v${Phaser.VERSION}`));\n```\n## Websocket support\n\nUse GameWebSocket class to communicate with ws server...\n\nFirst, initialize websocket to communicate with specific server host:\n\n```typescript\nwebSocket.initConnection(\"\u003cyour ws host\u003e\")\n```\n\nThen use functionality directly:\n\n```typescript\nwebSocket.on(MessageType.UPDATE, data =\u003e {\n\n}, this)\n```\n\n```typescript\nwebSocket.send(MessageType.PLAYER_KEY_DOWN, {inputId: 'RIGHT', state: false});\n```\n\n## Credits\n\nA huge thank you to Rich [@photonstorm](https://github.com/photonstorm) for creating Phaser\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftfkfan%2Fphaser3-react-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftfkfan%2Fphaser3-react-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftfkfan%2Fphaser3-react-template/lists"}