Adding Solitaire game

Games/Single_Player_Solitaire/README.md

@@ -0,0 +1,98 @@
+Hii!! This is a small single player solitaire game 
+The goal of the single-player card game is to get rid of your cards and build the deck into a sequence and by suit from ace through king. The game is won when the whole deck of cards is built into the foundation. 
+# What is Foundation?
+The  piles of the sequence the player is trying to build from the tableau, beginning with the King. The aces will go at the bottom of the foundation.
+# The scoring System!!
+Though not all players are in it to earn the most possible points, there is a definitive scoring system in Solitaire.
+What are we offerring you as score?
+So, till now ther's no scoring system, just the piles and you need to stack up the cards from Ace to King
+
+---------------------------------------------------------------------------------------------------------------------------
+There are total 52 cards in the game of Solitaire
+13 of Clubs (Black)   3 face cards(King, Queen, Jack) and others forom Ace to 10 (1,2,3,4,5,6,7,8,9,10)
+13 of Spades (Black)  3 face cards(King, Queen, Jack) and others forom Ace to 10 (1,2,3,4,5,6,7,8,9,10)
+13  of Hearts (Red)   3 face cards(King, Queen, Jack) and others forom Ace to 10 (1,2,3,4,5,6,7,8,9,10)
+13 of Diamonds (Red)  3 face cards(King, Queen, Jack) and others forom Ace to 10 (1,2,3,4,5,6,7,8,9,10)
+
+---------------------------------------------------------------------------------------------------------------------------
+                            So Once Again, I welcome you ^_^
+
+                            Welcome to the Solitaire Game! This is a classic solitaire game implemented using HTML, CSS, and JavaScript. The game includes features such as a "Hint" button and a "New Game" button, and the win condition is met when any one foundation pile is completed from Ace to King.
+
+## Table of Contents
+
+-- [Description](#description)
+- [Features](#features)
+- [Technologies Used](#technologies-used)
+- [Getting Started](#getting-started)
+  - [Prerequisites](#prerequisites)
+  - [Installation](#installation)
+- [Gameplay](#gameplay)
+  - [Objective](#objective)
+  - [Controls](#controls)
+- [Project Structure](#project-structure)
+- [Contributing](#contributing)
+
+
+## Features
+- **New Game Button**: Start a new game at any time.
+- **Hint Button**: Get a hint for a possible move.
+- **Win Condition**: The game is won if any one foundation pile is completed from Ace to King.
+- **Interactive UI**: Click and drag to move cards.
+
+## Technologies Used
+- HTML
+- CSS
+- JavaScript
+
+## Getting Started
+
+### Prerequisites
+- A modern web browser (Chrome, Firefox, Safari, etc.)
+
+### Installation
+
+To run the game locally, follow these steps:
+
+1. Clone the repository:
+    ```bash
+    git clone https://github.com/your-username/solitaire-game.git
+    ```
+2. Navigate to the project directory:
+    ```bash
+    cd solitaire-game
+    ```
+
+## Usage
+
+Open the `newindex.html` file in your preferred web browser to start playing the game.
+
+## Game Rules
+
+1. **Objective:** The goal is to move all cards to the foundation piles, each pile from Ace to King of the same suit.
+2. **Setup:** The game starts with seven tableau piles. The first pile has one
+
+# Objective
+The goal of solitaire is to move all cards to the foundation piles, sorted by suit in ascending order from Ace to King.
+
+# Controls
+New Game Button: Click to start a new game.
+Hint Button: Click to receive a hint for a possible move.
+Card Movement: Click and drag to move cards between piles.
+
+# Project Structure
+newindex.html: The main HTML file containing the game layout.
+newstyles.css: The CSS file for styling the game.
+newscript.js: The JavaScript file containing the game logic.
+
+# Contributing
+Contributions are welcome! Please follow these steps:
+
+Fork the repository.
+Create a new branch (git checkout -b feature-branch).
+Make your changes.
+Commit your changes (git commit -m 'Add some feature').
+Push to the branch (git push origin feature-branch).
+Open a pull request.
+
+--------------------------------ENJOY----------------------------

Games/Single_Player_Solitaire/css/styles.css

@@ -0,0 +1,148 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #2E7D32;
+}
+
+#game-board {
+    display: grid;
+    grid-template-areas:
+        "stock waste foundations foundations foundations foundations"
+        "tableau tableau tableau tableau tableau tableau tableau";
+    gap: 10px;
+    padding: 10px;
+    background-color: #388E3C;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+.card-pile {
+    width: 100px;
+    height: 140px;
+    background-color: #4CAF50;
+    border-radius: 10px;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
+    position: relative;
+}
+
+#stock {
+    grid-area: stock;
+}
+
+#waste {
+    grid-area: waste;
+}
+
+#foundations {
+    display: flex;
+    gap: 10px;
+    grid-area: foundations;
+}
+
+.foundation {
+    flex: 1;
+}
+
+#tableau {
+    display: flex;
+    gap: 10px;
+    grid-area: tableau;
+}
+
+.tableau-pile {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.card {
+    width: 100px;
+    height: 140px;
+    border-radius: 10px;
+    background-color: white;
+    border: 2px solid #000;
+    position: absolute;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    transition: transform 0.2s;
+    font-family: 'Georgia', serif;
+    font-weight: bold;
+    color: #000;
+}
+
+.card.dragging {
+    opacity: 0.5;
+}
+
+.card.face-down {
+    background-color: #4CAF50;
+    border: 2px solid #388E3C;
+    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5);
+}
+
+.card.face-up {
+    background-color: white;
+}
+
+.card .rank {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    font-size: 18px;
+}
+
+.card .suit {
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+    font-size: 24px;
+}
+
+.card.hearts .rank,
+.card.hearts .suit {
+    color: red;
+}
+
+.card.diamonds .rank,
+.card.diamonds .suit {
+    color: red;
+}
+
+.card.clubs .rank,
+.card.clubs .suit {
+    color: black;
+}
+
+.card.spades .rank,
+.card.spades .suit {
+    color: black;
+}
+#controls {
+    margin-top: 20px;
+    text-align: center;
+}
+
+#new-game-button,
+#hint-button {
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+#win-message {
+    margin-top: 20px;
+    font-size: 24px;
+    color: white;
+}
+
+.hidden {
+    display: none;
+}

Games/Single_Player_Solitaire/html/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Solitaire</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="game-board">
+        <div id="stock" class="card-pile"></div>
+        <div id="waste" class="card-pile"></div>
+        <div id="foundations">
+            <div class="foundation card-pile"></div>
+            <div class="foundation card-pile"></div>
+            <div class="foundation card-pile"></div>
+            <div class="foundation card-pile"></div>
+        </div>
+        <div id="tableau">
+            <div class="tableau-pile card-pile"></div>
+            <div class="tableau-pile card-pile"></div>
+            <div class="tableau-pile card-pile"></div>
+            <div class="tableau-pile card-pile"></div>
+            <div class="tableau-pile card-pile"></div>
+            <div class="tableau-pile card-pile"></div>
+            <div class="tableau-pile card-pile"></div>
+        </div>
+    </div>
+    <div id="controls">
+        <button id="new-game-button">New Game</button>
+        <button id="hint-button">Hint</button>
+        <div id="win-message" class="hidden">Congratulations, you won!</div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>