{"id":13341381,"url":"https://github.com/abuna1985/vue-memory-game","last_synced_at":"2025-03-11T21:30:53.767Z","repository":{"id":41393818,"uuid":"484626964","full_name":"abuna1985/vue-memory-game","owner":"abuna1985","description":"Experience the captivating Vue Memory Game, meticulously crafted with Vue and TypeScript. Sharpen your memory by matching pairs of cards in this immersive gaming adventure. Play now!","archived":false,"fork":false,"pushed_at":"2022-09-09T07:12:08.000Z","size":1940,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-07-30T21:02:03.287Z","etag":null,"topics":["css","game","responsive","single-page-app","typescript","vue","vuejs","web-accessibility"],"latest_commit_sha":null,"homepage":"https://abuna1985.github.io/vue-memory-game/","language":"Vue","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/abuna1985.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-23T02:35:37.000Z","updated_at":"2023-07-18T09:12:07.000Z","dependencies_parsed_at":"2023-01-18T02:00:51.798Z","dependency_job_id":null,"html_url":"https://github.com/abuna1985/vue-memory-game","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/abuna1985%2Fvue-memory-game","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abuna1985%2Fvue-memory-game/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abuna1985%2Fvue-memory-game/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abuna1985%2Fvue-memory-game/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abuna1985","download_url":"https://codeload.github.com/abuna1985/vue-memory-game/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221249547,"owners_count":16784961,"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":["css","game","responsive","single-page-app","typescript","vue","vuejs","web-accessibility"],"created_at":"2024-07-29T19:25:25.711Z","updated_at":"2024-10-23T23:31:05.113Z","avatar_url":"https://github.com/abuna1985.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv id=\"top\"\u003e\u003c/div\u003e\n\n# Vue Memory Card Matching Game\n\n[![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/abuna1985/vue-memory-game/vue?color=green)](https://vuejs.org/)\n[![GitHub package.json dependency version (dev dep on branch)](https://img.shields.io/github/package-json/dependency-version/abuna1985/vue-memory-game/dev/typescript?color=green)](https://www.typescriptlang.org/)\n[![GitHub commits](https://badgen.net/github/commits/abuna1985/vue-memory-game/main?color=green)](https://github.com/abuna1985/vue-memory-game/commits/)\n[![GitHub stars](https://badgen.net/github/stars/abuna1985/vue-memory-game?color=green)](https://github.com/abuna1985/vue-memory-game/stargazers/)\n[![GitHub watchers](https://badgen.net/github/watchers/abuna1985/vue-memory-game?color=green)](https://github.com/abuna1985/vue-memory-game/watchers/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://abuna1985.github.io/vue-memory-game/\"\u003e\n    \u003cimg src=\"images/card.png\" alt=\"Logo\" width=\"80\" height=\"80\"\u003e\n  \u003c/a\u003e\n\n  \u003ch3 align=\"center\"\u003eVue Memory Card Matching Game\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://abuna1985.github.io/vue-memory-game/\"\u003eView Demo\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n## About The Project\n\u003cbr\u003e\n\n![Vue Memory Game Desktop View](./images/vue-memory-game-desktop.jpg)\n\n\nThis is a memory card matching game that showcases my mastery of Vue.js (version 3) and TypeScript. This is based off a tutorial from @bencodezen [peek-a-vue project](https://github.com/bencodezen/peek-a-vue). \n\nI also added the following to my project:\n\n* TypeScript Declarations\n* Camping theme for the cards and background image\n* Web Accessibility\n  * Made the back of the cards `\u003cbutton\u003e` elements so they can be accessed by the keyboard (`tab` and `shift + tab`)\n  * The card button default state is `disabled` until the `Start Game` button is clicked\n* Additional State\n  * Displaying the total number of `turns` the player takes to to complete the game.\n\n\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\n\n## How to play\n\nFirst, you must press the `Start Game` button.\n\nThe game board consists of sixteen cards arranged randomly in a 4x4 grid. The deck is made up of eight different pairs of camping themed cards. Each turn:\n\n* A player flips one card over to reveal its underlying image\n* The player then turns over a second card, trying to find the corresponding card with the same symbol\n* If the cards match, both cards stay flipped over\n* If the cards do not match, both cards are returned to their initial hidden state\n* The game ends once all cards have been correctly matched (with a fun surprise)\n\n\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\n\n## Getting Started\n\n### Installation\n\n1. Clone the repo\n    ```sh\n    git clone https://github.com/abuna1985/vue-memory-game.git\n    ```\n2. Install NPM packages\n    ```sh\n    npm install\n    ```\n3. Run develop environment  (compiles and hot-reloads)\n    ```sh\n    npm run serve\n    ```\n### Deployment\n\n1. Create production build (Compiles and minifies to HTML/CSS/JavaScript)\n    ```sh\n    npm run build\n    ```\n2. Create `gh-pages` branch (only needs to done once)\n    ```sh\n    git branch gh-pages\n    ```\n3. move the contents of the `dist` folder to the `gh-pages` branch\n    ```sh\n    npm run deploy\n    ```\n### Run Unit Tests\n```sh\nnpm run test:unit\n```\n### Lints And Fix Files\n```sh\nnpm run lint\n```\n### Customize Configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n\n\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\n\n## Usage\n\n\u003cdetails\u003e\n    \u003csummary\u003e\u003cstrong\u003eClick here to see a desktop screenshot of the game\u003c/strong\u003e\u003c/summary\u003e\n    \u003ch4\u003eDesktop Screenshot of the Vue Memory Game\u003c/h4\u003e\n    \u003cimg src=\"./images/vue-memory-game-desktop.jpg\" /\u003e\n\u003c/details\u003e\n\u003cbr\u003e\n\u003cdetails\u003e\n    \u003csummary\u003e\u003cstrong\u003eClick here to see a mobile screenshot of the game\u003c/strong\u003e\u003c/summary\u003e\n    \u003ch4\u003eMobile Screenshot of the Vue Memory Game\u003c/h4\u003e\n    \u003cimg src=\"./images/vue-memory-game-mobile.jpg\" /\u003e\n\u003c/details\u003e\n\n\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\n\n## Roadmap\n\n- [ ] Add Toggle button to switch to a 2nd theme\n- [ ] A choice of grids before the games start\n  - [x] 4x4\n  - [ ] 4x5\n  - [ ] 4x6\n\n\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\n\n## License\n\nDistributed under the MIT License. See `LICENSE.txt` for more information.\n\n\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\n\n## Contact\n\nAdam Abundis - [@adamabundis](https://twitter.com/adamabundis) - adamjabundis@gmail.com\n\nDemo Link: [https://abuna1985.github.io/vue-memory-game/](https://abuna1985.github.io/vue-memory-game/)\n\n\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\n\n## Acknowledgments\n\n* [Vue.js v3 documentation](https://vuejs.org/)\n* [@bencodezen - Peek A Vue repo](https://github.com/bencodezen/peek-a-vue)\n* [Youtube - Peek A Vue](https://youtu.be/WQa9-4K3me4)\n* [Youtube- Modus Create - Vue 3 Hooks and Type Safety with TypeScript](https://youtu.be/aJdi-uEKYAc)\n* [Youtube - Leveraging Types with TypeScript – Kirk Shillingford – Virtual Coffee Brownbag](https://youtu.be/IDLwHFwgNY4)\n\n\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabuna1985%2Fvue-memory-game","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabuna1985%2Fvue-memory-game","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabuna1985%2Fvue-memory-game/lists"}