Sulagna-Dutta-Roy · Sulagna-Dutta-Roy · Jul 11, 2024 · Jul 11, 2024
diff --git a/Reversi/README.md b/Reversi/README.md
@@ -0,0 +1,35 @@
+# **ReverAI Chrome Extension**
+
+---
+
+<br>
+
+# **Description 📃**
+<!-- add your game description here  -->
+- The ReverAI Chrome extension is designed to enhance your browsing experience by providing personalized recommendations, content summaries, and easy Google login for seamless access. It leverages AI to understand your preferences and deliver tailored content.
+
+# **Functionalities 🎮**
+<!-- add functionalities over here -->
+- Google login for quick and easy access to the extension.
+- Personalized content recommendations based on your browsing history.
+- Summarization of articles and web pages to quickly grasp key information.
+- User-friendly interface with a clean and intuitive design.
+<br>
+
+# **How to Use? 🕹️**
+<!-- add the steps how to use extension -->
+- Install the ReverAI Chrome extension from the Chrome Web Store.
+- Click on the extension icon to open the popup.
+- Click the "Login with Google" button to sign in.
+- Once logged in, you will start receiving personalized content recommendations.
+- Browse the web as usual, and ReverAI will provide summaries and recommendations based on your preferences.
+- Use the extension popup to view and manage your recommended content.
+
+<br>
+
+
+
+
+
+
+
diff --git a/Reversi/manifest.json b/Reversi/manifest.json
@@ -0,0 +1,16 @@
+{
+    "manifest_version": 3,
+    "name": "Reversi Game",
+    "description": "Play Reversi (Othello) in your browser",
+    "version": "1.0",
+    "action": {
+      "default_popup": "popup.html",
+      "default_icon": {
+        "16": "icon.png",
+        "48": "icon.png",
+        "128": "icon.png"
+      }
+    },
+    "permissions": ["activeTab"]
+  }
+
diff --git a/Reversi/popup.html b/Reversi/popup.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reversi Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <h1>Reversi Game</h1>
+    <div id="board"></div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Reversi/script.js b/Reversi/script.js
@@ -0,0 +1,82 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const board = document.getElementById('board');
+    const SIZE = 8;
+    let currentPlayer = 'B';
+
+    const createBoard = () => {
+        board.innerHTML = '';
+        for (let i = 0; i < SIZE; i++) {
+            for (let j = 0; j < SIZE; j++) {
+                const square = document.createElement('div');
+                square.classList.add('square');
+                square.dataset.row = i;
+                square.dataset.col = j;
+
+                if ((i === 3 && j === 3) || (i === 4 && j === 4)) {
+                    square.classList.add('white');
+                } else if ((i === 3 && j === 4) || (i === 4 && j === 3)) {
+                    square.classList.add('black');
+                }
+
+                square.addEventListener('click', () => handleMove(square));
+                board.appendChild(square);
+            }
+        }
+    };
+
+    const handleMove = (square) => {
+        const row = parseInt(square.dataset.row);
+        const col = parseInt(square.dataset.col);
+
+        if (square.classList.contains('black') || square.classList.contains('white')) {
+            return;
+        }
+
+        const directions = [
+            [-1, 0], [1, 0], [0, -1], [0, 1], // vertical and horizontal
+            [-1, -1], [-1, 1], [1, -1], [1, 1] // diagonals
+        ];
+
+        let validMove = false;
+
+        directions.forEach(([dx, dy]) => {
+            let x = row + dx;
+            let y = col + dy;
+            let hasOpponentPiece = false;
+
+            while (x >= 0 && x < SIZE && y >= 0 && y < SIZE) {
+                const targetSquare = document.querySelector(`[data-row='${x}'][data-col='${y}']`);
+
+                if (targetSquare.classList.contains(currentPlayer === 'B' ? 'white' : 'black')) {
+                    hasOpponentPiece = true;
+                } else if ((targetSquare.classList.contains(currentPlayer === 'B' ? 'black' : 'white')) && hasOpponentPiece) {
+                    let flipX = row;
+                    let flipY = col;
+
+                    while (flipX !== x || flipY !== y) {
+                        const flipSquare = document.querySelector(`[data-row='${flipX}'][data-col='${flipY}']`);
+                        flipSquare.classList.remove('black', 'white');
+                        flipSquare.classList.add(currentPlayer === 'B' ? 'black' : 'white');
+                        flipX += dx;
+                        flipY += dy;
+                    }
+
+                    validMove = true;
+                    break;
+                } else {
+                    break;
+                }
+
+                x += dx;
+                y += dy;
+            }
+        });
+
+        if (validMove) {
+            square.classList.add(currentPlayer === 'B' ? 'black' : 'white');
+            currentPlayer = currentPlayer === 'B' ? 'W' : 'B';
+        }
+    };
+
+    createBoard();
+});
diff --git a/Reversi/styles.css b/Reversi/styles.css
@@ -0,0 +1,34 @@
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: Arial, sans-serif;
+}
+
+#board {
+    display: grid;
+    grid-template-columns: repeat(8, 50px);
+    grid-template-rows: repeat(8, 50px);
+    gap: 2px;
+    margin-top: 20px;
+}
+
+.square {
+    width: 50px;
+    height: 50px;
+    background-color: green;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 24px;
+    color: white;
+    cursor: pointer;
+}
+
+.square.black {
+    background-color: black;
+}
+
+.square.white {
+    background-color: white;
+}