{"id":19051711,"url":"https://github.com/nickgraffis/solitaire","last_synced_at":"2026-05-11T07:47:04.379Z","repository":{"id":103521703,"uuid":"441793381","full_name":"nickgraffis/solitaire","owner":"nickgraffis","description":"A simple game of solitaire for the web.","archived":false,"fork":false,"pushed_at":"2022-01-08T22:39:20.000Z","size":222,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T15:56:38.440Z","etag":null,"topics":["games","netlify","react","solitaire","solitaire-card-game","solitaire-game","tailwind","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/nickgraffis.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-26T02:19:18.000Z","updated_at":"2023-07-07T22:57:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"5253aaec-8037-42c6-94b3-ef0d315d5470","html_url":"https://github.com/nickgraffis/solitaire","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"nickgraffis/react-typescript-vite-tailwind-netlify-starter","purl":"pkg:github/nickgraffis/solitaire","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickgraffis%2Fsolitaire","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickgraffis%2Fsolitaire/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickgraffis%2Fsolitaire/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickgraffis%2Fsolitaire/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nickgraffis","download_url":"https://codeload.github.com/nickgraffis/solitaire/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickgraffis%2Fsolitaire/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262762458,"owners_count":23360329,"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":["games","netlify","react","solitaire","solitaire-card-game","solitaire-game","tailwind","tailwindcss","typescript"],"created_at":"2024-11-08T23:19:24.405Z","updated_at":"2026-05-11T07:47:04.316Z","avatar_url":"https://github.com/nickgraffis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🃏 Solitare\n\n* ⚡️💨 Vite - for super fast development\n* 💅 TailwindCSS\n* 🃏 - Cards by [Rohit Chouhan](https://www.figma.com/@rohitchouhan)\n\n# 👵🏻 Who's it for?\nMy mom, have fun with it if you like...\n\n# 🤔 Things to consider\n1. How should I make this a really useable drag and drop? 🤔...Working on it, for now, it's just moving cards with the double click.\n2. What should I do when the user wins? 🤷‍♂️...That is always the coolest part right?\n\n# 🤓 Nerdy stuff\nWhen creating a new game we need to start off with a deck of cards:\n\n```ts\nconst deck = Array(4).fill(0).map((_, suit) =\u003e Array(13).fill(0).map((_, number) =\u003e ({\n  suit: _getSuit(suit),\n  value: _getValue(number),\n  image: `./${_getValue(number)}_${_getSuit(suit)}.svg`,\n  flipped: false,\n  cardId: `${_getValue(number)}_${_getSuit(suit)}`,\n  position: -1\n}))).flat()\n```\nWe create an array of 4 suits, then inside each array another array of 13 cards.\n* `suit: '❤️' | '♠️' | '💎' | '♣️'`\n* `value: 'ace' | 'two' | 'three' | 'four' | 'five' | 'six' | 'seven' | 'eight' | 'nine' | 'ten' | 'jack' | 'queen' | 'king'`\n* `image: string` -- card svgs named by card value and card suit\n* `flipped: boolean` -- is the card visible or not, defaults to `false`\n* `cardId: string` -- a unique id\n* `position: number` -- what position within the game board, defaults to `-1` \n\nAfter we have a deck we need to shuffle that deck:\n```ts\n// Shuffle the deck of cards\nconst shuffleArray = array =\u003e {\n  for (let i = array.length - 1; i \u003e 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const temp = array[i];\n    array[i] = array[j];\n    array[j] = temp;\n  }\n\n  return array\n}\n\nconst shuffledDeck = shuffleArray(deck)\n```\n\nThen we need to build up the game _board_\n```ts\nexport const initialState = {\n  gameId: '',\n  deck: shuffledDeck,\n  finished: [\n    [],\n    [],\n    [],\n    []\n  ],\n  unfinished: [\n    row(1, 1),\n    row(2, 1),\n    row(3, 1),\n    row(4, 1),\n    row(5, 1),\n    row(6, 1),\n    row(7, 1),\n  ]\n}\n```\n\nHere the deck is all of the shuffled cards that are not used in the `unfinished` array. \n\nThe `finished` array is all empty to start.\n\nThe `unfinished` array needs to be filled with cards, and have the last one flipped:\n\n```ts\nconst row = (cards: number, flipped: number) =\u003e {\n  const row = []\n  let cardsFlipped = 0\n  for (let i = 0; i \u003c cards; i++) {\n    row.push({\n      ...shuffledDeck.pop(),\n      flipped: cardsFlipped \u003c flipped,\n      position: cards + 3\n      //+ 3 because 0, 1, 2, 3 are all for the finished slots\n    })\n    cardsFlipped++\n  }\n  return row.reverse()\n}\n```\n\nNow we have our initial game state and we can add cards to either a position within the `unfinished` array, or to the `finished` array if the card is an ace or if we have found an ace and the card is ready to be placed in the finished pile.\n\nWe can display cards from the deck by _flipping_ them.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnickgraffis%2Fsolitaire","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnickgraffis%2Fsolitaire","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnickgraffis%2Fsolitaire/lists"}