https://github.com/clementmadiot/hangman-typescript
This project is a hangman game in React, Typescript
https://github.com/clementmadiot/hangman-typescript
Last synced: 5 months ago
JSON representation
This project is a hangman game in React, Typescript
- Host: GitHub
- URL: https://github.com/clementmadiot/hangman-typescript
- Owner: ClementMadiot
- Created: 2024-10-28T13:07:59.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-11-08T09:40:14.000Z (8 months ago)
- Last Synced: 2024-12-12T20:14:43.313Z (7 months ago)
- Language: TypeScript
- Size: 99.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Hangman-typeScript
##
📋 Summary
- ✨ [Introduction](#introduction)
- 🛠 [Technology Used](#tech-stack)
- 📝 [Features](#features)
- 🚀 [Launch App](#launch-app)
- 🎨 [Styling](#style)
**[ENG]** This project is a classic Hangman game built using TypeScript, Tailwind CSS, and Vite. It offers a fun and interactive experience where players guess letters to reveal a hidden word.
**[FR]** Ce projet est un jeu de Pendu classique construit à l'aide de TypeScript, Tailwind CSS et Vite. Il offre une expérience amusante et interactive où les joueurs devinent des lettres pour révéler un mot caché.
- [TailwindCSS](https://tailwindcss.com/docs/installation)
Tailwind CSS is a valuable tool for developers who want to build modern, responsive, and visually appealing websites without sacrificing development speed.
## 📝 Features
👉 **Word Generation** : Generates a random word from a predefined list.
👉 **Word Display**: Displays the word as a series of underscores, revealing guessed letters.
👉 **Keyboard Input:** :
- **Keyboard** : Players can use their physical keyboard to input guesses.
- **On-screen Keyboard**: Players can click on virtual keyboard buttons to input guesses.
👉 **Letter Disabling**: Once a letter is guessed, it is disabled to prevent repeated guesses.
👉 **Win/Lose Conditions** :
- **Win** : The player wins by guessing all letters correctly. Correct guesses are displayed in blue.
- **Lose** : The player loses if they exhaust all incorrect guesses. Incorrect guesses are displayed in red.
##
🚀 Launch App
Follow these steps to set up the project locally on your machine.
**Prerequisites**
> [!NOTE]
> Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) _(Node Package Manager)_
**Cloning the Repository**
```bash
git clone {git remote URL}
cd {git project..}
```
**Installation**
> After cloning the repository, run the command `npm i` or `yarn i` to install the project's dependencies.
_npm_
```
npm install
```
_yarn_
```
yarn install
```
> Once the dependencies are installed, start the project with the command `npm run dev`.
Global styling are defined using **CSS** & **TailwindCSS**
index.css
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100dvw;
overflow-x: hidden;
height: 100%;
background: linear-gradient(to top, #dfe9f3 0%, white 100%);
}
```
tailwind.config.js
````cjs
theme: {
extend: {
colors: {
blackLight: "#303841",
},
gridTemplateColumns:{
'auto-fit-75': 'repeat (auto-fill, minmax(75px, 1fr)'
}
},
},
````