{"id":15980245,"url":"https://github.com/markteekman/rock-paper-scissors-game","last_synced_at":"2026-02-06T14:32:17.161Z","repository":{"id":104835440,"uuid":"494384281","full_name":"markteekman/rock-paper-scissors-game","owner":"markteekman","description":"Frontend Mentor challenge \"Rock, Paper, Scissors Game\" using CSS Flexbox and Grid, Accessibility best practices, CSS Animations to make the game more interactive and vanilla JavaScript for the game logic.","archived":false,"fork":false,"pushed_at":"2022-09-22T08:58:21.000Z","size":1052,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-24T10:44:05.586Z","etag":null,"topics":["accessibility","astro","css-animations","css-grid","flexbox","html","javascript","scss","wcag"],"latest_commit_sha":null,"homepage":"https://markteekman.github.io/rock-paper-scissors-game/","language":"Astro","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/markteekman.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":"2022-05-20T08:32:23.000Z","updated_at":"2025-01-24T18:21:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"57b6822f-75e4-42c7-9be2-f7b1a21839a0","html_url":"https://github.com/markteekman/rock-paper-scissors-game","commit_stats":{"total_commits":39,"total_committers":2,"mean_commits":19.5,"dds":"0.17948717948717952","last_synced_commit":"58944aa93df3f58bfe876369f0576b4e025ae77e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":"incluud/accessible-astro-starter","purl":"pkg:github/markteekman/rock-paper-scissors-game","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markteekman%2Frock-paper-scissors-game","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markteekman%2Frock-paper-scissors-game/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markteekman%2Frock-paper-scissors-game/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markteekman%2Frock-paper-scissors-game/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markteekman","download_url":"https://codeload.github.com/markteekman/rock-paper-scissors-game/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markteekman%2Frock-paper-scissors-game/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29164862,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T12:44:37.655Z","status":"ssl_error","status_checked_at":"2026-02-06T12:44:13.991Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["accessibility","astro","css-animations","css-grid","flexbox","html","javascript","scss","wcag"],"created_at":"2024-10-08T00:03:10.625Z","updated_at":"2026-02-06T14:32:17.140Z","avatar_url":"https://github.com/markteekman.png","language":"Astro","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - Rock, Paper, Scissors solution\n\nThis is a solution to the [Rock, Paper, Scissors challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/rock-paper-scissors-game-pTgwgvgH). Frontend Mentor challenges help you improve your coding skills by building realistic projects. \n\n## Table of contents\n\n- [Overview](#overview)\n  - [The challenge](#the-challenge)\n  - [Extra challenges](#extra-challenges)\n  - [Screenshot](#screenshot)\n  - [Links](#links)\n- [My process](#my-process)\n  - [Built with](#built-with)\n  - [What I learned](#what-i-learned)\n  - [Continued development](#continued-development)\n  - [Useful resources](#useful-resources)\n- [Author](#author)\n\n## Overview\n\n### The challenge\n\nUsers should be able to:\n\n- View the optimal layout for the game depending on their device's screen size\n- Play Rock, Paper, Scissors against the computer\n- Maintain the state of the score after refreshing the browser _(optional)_\n- **Bonus**: Play Rock, Paper, Scissors, Lizard, Spock against the computer _(optional)_\n\n### Extra challenges\n\nAs an extra challenge I will do the following things:\n\n- Add smooth animations to make it feel more like a game.\n- Also add a computer score to make the game more interesting.\n- Be able to reset the scores (which state I maintain using `localStorage`)\n- Make the game accessible according to WCAG 2.1 standards, things like color contrast, clear element focus and the correct screen reader contexts.\n\n### Screenshot\n\n![social-preview-image](https://user-images.githubusercontent.com/3909046/172068130-dd1929d4-d8de-4f79-8447-aa36ebdb2170.png)\n\n### Links\n\n- [Solution URL](https://www.frontendmentor.io/solutions/astro-wcag-accessibility-css-flexbox-and-css-animations-OQei0e5Kj)\n- [Live Site URL](https://markteekman.github.io/rock-paper-scissors/)\n\n## My process\n\n### Built with\n\n- Semantic HTML5 markup\n- CSS custom properties\n- Flexbox\n- CSS Grid\n- WCAG 2.1 best practices\n- CSS Animations\n- Vanilla JavaScript\n- [Astro](https://astro.build) - Astro Static Site Generator\n- [Accessible Astro Starter](https://github.com/markteekman/accessible-astro-starter) - My own starter template for Astro\n- [Accessible Astro Components](https://github.com/markteekman/accessible-astro-components) - My own pre-build Astro components\n\n### What I learned\n\n- I didn't know the assets for the attributes would only be the icon SVG's (scissors, paper, rock etc.), so I was excited to try and create the whole icon button design using CSS only. Which includes the inner shadow effects that make it look like a poker-chip of some sort. I used the `::before` and `::after` pseudo elements to get to the desired result:\n\n```scss\n\u003cstyle lang=\"scss\" is:global\u003e\n  @use '../assets/scss/base/breakpoint' as *;\n\n  span[class*=\"attribute-\"] {\n    position: relative;\n    display: grid;\n    place-items: center;\n    width: var(--small-badge-outer);\n    height: var(--small-badge-outer);\n    border-radius: 100%;\n    transition: 0.2s ease-in-out;\n\n    @include breakpoint(700) {\n      width: var(--large-badge-outer);\n      height: var(--large-badge-outer);\n    }\n\n    img {\n      position: relative;\n      z-index: 2;\n      width: 35%;\n    }\n\n    \u0026::before,\n    \u0026::after {\n      content: '';\n      position: absolute;\n      border-radius: 100%;\n\n      \u0026:hover {\n        background-color: purple;\n      }\n    }\n\n    \u0026::before {\n      z-index: 2;\n      width: var(--small-badge-inner);\n      height: var(--small-badge-inner);\n      background-color: #e0e0e0;\n      box-shadow: inset 0 6px 2px rgba(0, 0, 0, 0.15);\n\n      @include breakpoint(700) {\n        width: var(--large-badge-inner);\n        height: var(--large-badge-inner);\n      }\n    }\n\n    \u0026::after {\n      z-index: 1;\n      width: var(--small-badge-outer);\n      height: var(--small-badge-outer);\n\n      @include breakpoint(700) {\n        width: var(--large-badge-outer);\n        height: var(--large-badge-outer);\n      }\n    }\n\n    \u0026[class*=\"scissors\"] {\n      \u0026::after {\n        background: linear-gradient(#ec9e0e, #eca922);\n        box-shadow: inset 0 -5px 0 #c16a1b;\n      }\n    }\n\n    \u0026[class*=\"paper\"] {\n      \u0026::after {\n        background: linear-gradient(hsl(230, 89%, 62%), hsl(230, 89%, 65%));\n        box-shadow: inset 0 -5px 0 #2b44c3;\n      }\n    }\n\n    \u0026[class*=\"rock\"] {\n      \u0026::after {\n        background: linear-gradient(hsl(349, 71%, 52%), hsl(349, 70%, 56%));\n        box-shadow: inset 0 -5px 0 #9c1732;\n      }\n    }\n\n    \u0026[class*=\"lizard\"] {\n      \u0026::after {\n        background: linear-gradient(hsl(261, 73%, 60%), hsl(261, 72%, 63%));\n        box-shadow: inset 0 -5px 0 #5e33a7;\n      }\n    }\n\n    \u0026[class*=\"spock\"] {\n      \u0026::after {\n        background: linear-gradient(hsl(189, 59%, 53%), hsl(189, 58%, 57%));\n        box-shadow: inset 0 -5px 0 #2c8ba8;\n      }\n    }\n }\n\u003c/style\u003e\n```\n\n### Continued development\n\n- I used fixed widths and heights to achieve the buttons on the pentagon background. I was thinking about using CSS Grid, but didn't know how to get it right. I'm curious about how other solutions tackled it and I might try it out if there's a better way.\n- My `playerWins()` and `computerWins()` functions could probably be refactored to one function using some if-statements, as it has a lot of the same code. So I might change this in the future.\n- Some kind of global leaderboard where users can see each others scores (idea credits: https://github.com/rebelchris).\n- The responsive design could be enhanced a bit as well. I used a small and a large breakpoint, but it could definitely improve by using a medium breakpoint as well.\n- There should be better screenreader feedback after making a choice, eihter by adding a `role=\"status\"` or by resetting the focus.\n- Improving accessibility by adding better text alternatives to \"You picked\", \"The house picked\" and \"You lose\".\n\n### Useful resources\n\n- Nothing at the moment.\n\n## Author\n\n- [Personal Website](https://www.markteekman.nl)\n- [Frontend Mentor Profile](https://www.frontendmentor.io/profile/markteekman)\n- [LinkedIn Profile](https://nl.linkedin.com/in/markteekman)\n- [Twitter Profile](https://twitter.com/MarkTeekman)\n- [GitHub Repositories](https://github.com/markteekman)\n- [NPM Packages](https://www.npmjs.com/~markteekman)\n- [CodePen Creations](https://codepen.io/markteekman)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkteekman%2Frock-paper-scissors-game","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkteekman%2Frock-paper-scissors-game","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkteekman%2Frock-paper-scissors-game/lists"}