https://github.com/clementmadiot/hangman-typescript

This project is a hangman game in React, Typescript
https://github.com/clementmadiot/hangman-typescript

Last synced: 12 days 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 (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-08T09:40:14.000Z (about 2 months ago)
• Last Synced: 2024-11-08T10:33:34.191Z (about 2 months ago)
• Language: TypeScript
• Size: 49.8 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)

## 
 ✨ Introduction

**[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é.

## 
 🛠 Technology Used

- [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`.

# 
 🎨 Styling

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)'

      }

    },

  },

````