{"id":21763404,"url":"https://github.com/complexlity/stackup-invaders","last_synced_at":"2025-03-21T04:44:28.788Z","repository":{"id":217946083,"uuid":"734003617","full_name":"Complexlity/stackup-invaders","owner":"Complexlity","description":"Space Invaders Game","archived":false,"fork":false,"pushed_at":"2024-01-27T04:44:21.000Z","size":17113,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-26T01:29:16.040Z","etag":null,"topics":["alpinejs","immutable-zkevm","p5js"],"latest_commit_sha":null,"homepage":"https://stackup-invaders.netlify.app","language":"JavaScript","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/Complexlity.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}},"created_at":"2023-12-20T16:22:53.000Z","updated_at":"2024-01-18T19:58:16.000Z","dependencies_parsed_at":"2024-01-27T05:44:02.772Z","dependency_job_id":null,"html_url":"https://github.com/Complexlity/stackup-invaders","commit_stats":null,"previous_names":["complexlity/stackup-invaders"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Complexlity%2Fstackup-invaders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Complexlity%2Fstackup-invaders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Complexlity%2Fstackup-invaders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Complexlity%2Fstackup-invaders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Complexlity","download_url":"https://codeload.github.com/Complexlity/stackup-invaders/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244739939,"owners_count":20501990,"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":["alpinejs","immutable-zkevm","p5js"],"created_at":"2024-11-26T12:15:17.602Z","updated_at":"2025-03-21T04:44:28.768Z","avatar_url":"https://github.com/Complexlity.png","language":"JavaScript","readme":"# Stackup Invaders Bounty\n\nLive Preview - [stackup-invaders.netlify.app](https://stackup-invaders.netlify.app)\n\nI made four improvements to the initial application which can be put into four groups:\n\n- UI Improvements\n- UX Improvements\n- Bug Fixes\n- Feature Addition\n\n## Tool\n\nI have used [Alpine Js](https://alpinejs.dev/) throughout the application.\n\nThis is because working with vanilla js can get very complex even for very minor features. Also, updating the application with a new framework like React is also not feasible without rebuilding the application from scratch.\n\nAlpine Js is an extremely lightweight library which I can use alongside the initial application without breaking anything while also adding interactivity and state very easily\n\n```html\n\u003cbutton\n        x-cloak\n      x-show=\"!user\"\n\n      @click=\"\n        loadingUser = true\n        try {\n          await connectPassport()\n          user = window.userProfile\n        }\n        catch(err){\n          console.log(err)\n        }\n        finally {\n          loadingUser = false\n        }\n\t\t\t\t\"\u003e\n....\n```\n\nAbove shows how I added the functionality to the connect wallet button while also ensuring it only shows when a user is not connected.\n\n## UI Improvements\n\nI improved the user interface in the following ways\n\n1. I added 'space-y' background which was more in-line with the theme of the game\n2. I improved the onboarding process by putting the connect button in a more standard position and adding the loading feedback when the user is signing in\n3. I improved the look of all the buttons in the game\n\n## UX Improvements\n\nI made the experience playing the game even better in the following ways\n\n1. I added sounds for every activity that happens in the game. As this is standard expectation in [fixed shooter games](https://en.wikipedia.org/wiki/Category:Fixed_shooters).\nThe main sounds category are:\n\n- **Fail Sound**. When the user is defeated. Found in [/sounds/fail.wav](/sounds/fail.wav)\n- **Shotting Sound**. There two shooter sounds. One for the player ([/sounds/shoot2.wav](/sounds/shoot2.wav)) on the other for the invaders\n([/sounds/shoot.wav](/sounds/shoot.wav)) .\n- **In Game Sound**. This is the continuous sound that plays as the game is being played. Found in [/sounds/in-game.wav](/sounds/in-game.wav) .\n- **Upgrade Sound**. This is the sound that plays whenever the player levels up (gets a chance the mint a new NFT). As there are three possible NFTs to win, there are three upgrade sounds: [/sounds/upgrade1.wav](/sounds/upgrade1.wav),\n[/sounds/upgrade2.wav](/sounds/upgrade2.wav),\n[/sounds/upgrade3.wav](/sounds/upgrade3.wav) .\n\n- **Start Up Sound**. This is sound that plays when the game begins. Found in [/sounds/start.wav](/sounds/start.wav) .\n\n2. I added a start button which is click to restart the game when it ends. This makes it clearer what to do to restart the game.\n\n3. I added feedback when minting an NFT. This way, the user knows an activity is in progress. In the initial application, there's no feedback and the user could even click it a lot of times.\n\n## Bug Fix\n\nIn the original application, the `claim` button which was used to `mint` a new NFT did not work.\n\nThe method which was recommended by the immutable team only worked in a node environment and could only work in the browser if used with a build step (like in a framework like NextJs). This was not an option since I couldn't rewrite the entire application for that singular reason.\n\nAfter going through the immutable contracts source code (`@imtbl/contracts` which we had used in a node environment). I found that we used class called `ERC721Client` was just a wrapper around the `ethers` contract factory. It implemented some new helpful methods like `populateMint` and `populateMintBatch` which was used a mint NFTs. But this had not special code that call the `mint` function of the `ethers` contract factory\n\n```javascript\nasync populateMint(to, tokenId, overrides = {}) {\n        return await this.contract.populateTransaction.mint(to, tokenId, { ...overrides_1.defaultGasOverrides, ...overrides });\n    }\n```\n\nAbove is what the definition of the `populateMint` function is where `this` in that case is simple the `ethers` contract factory.\n\nI simply replaced the `populateMint` method with `populateTransaction.mint` and used the default `ethers.Contract` factory which I had access via the `ethers` esm package imported in the browser.\n\nThe entire code is found in the `mintNft` function in  [/assets/js/login.js](/assets/js/login.js)\n\n## Feature Addition\n\nI added three new features to the game play:\n\n1. I added a third NFT minting step which signified the last level. Also, I deployed new contracts with new images.\n\n2. I added a new spaceship look and bullet at the third upgrade level. Where spaceship shoots three bullets rather than two.\n\n3. I added an global high score. For every user that beats this high score, the user's address and the new high score is saved to a Redis database via a serverless function on vercel.\nSave and Load Score Code found [Here](https://github.com/Complexlity/immutable-game/blob/main/src/pages/api/scoring.js)\n\n## Getting Started\n\nTo test this application locally, run the following commands on the terminal\n\n- Clone the repository\n\n```bash\ngit clone https://github.com/Complexlity/stackup-invaders\ncd stackup-invaders\n```\n\n- Open the `index.html` file in the browser!. No more installations needed\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomplexlity%2Fstackup-invaders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcomplexlity%2Fstackup-invaders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomplexlity%2Fstackup-invaders/lists"}