github-samples · oneyashraj · May 21, 2025 · May 21, 2025
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
@@ -0,0 +1,46 @@
+# Code Guidelines for Static Sites
+
+## Required File Structure
+
+## HTML Standards
+- Use HTML5 doctype and specify language attribute
+- Include charset (UTF-8) and responsive viewport meta tags
+- Place scripts at bottom of body with appropriate defer/async attributes
+- Use semantic elements with proper ARIA attributes where needed
+- Ensure proper heading hierarchy (h1-h6)
+- Include meta description for SEO
+
+## CSS Organization
+Group styles in this order:
+1. Reset/Normalize
+2. CSS Custom Properties (variables)
+3. Base styles
+4. Layout/Grid
+5. Components
+6. Utilities
+7. Media queries
+8. Print styles
+
+## JavaScript Guidelines
+
+- Adhere to JSDoc standards, similar to the below example
+/**
+ * @description Clear description of purpose and behavior
+ * @param {type} name - Description with valid/invalid values
+ * @returns {type} Description of return value/state
+ * @throws {ErrorType} Description of error conditions
+ * @example
+ * // Include multiple examples showing edge cases
+ * functionName(validInput);
+ */
+
+## Code Quality Rules
+- Use consistent naming:
+  - camelCase: JavaScript variables/functions
+  - PascalCase: Classes/Components
+  - kebab-case: CSS classes, file names
+  - SCREAMING_SNAKE_CASE: Constants
+- Implement error boundaries and logging
+- Clean up event listeners and subscriptions
+- Maximum line length: 80 characters
+- Document breaking changes
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,43 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy to GitHub Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Pages
+        uses: actions/configure-pages@v4
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: '.'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/README.md b/README.md
@@ -1,100 +1,123 @@
-# Build Conway's Game of Life with GitHub Copilot
-
-This repository contains a companion walkthrough to the video on
-[Using GitHub Copilot to create Conway's Game of Life][youtube-video].
-You can follow the steps in this repository to achieve a similar result to the video.
-
-In this tutorial, we'll build Conway's Game of Life from scratch using GitHub Copilot
-as our pair programming assistant. This simulation demonstrates how complex patterns
-can emerge from simple rules, making it an interesting project for learning both
-programming concepts and GitHub Copilot's capabilities.
-
-## Getting Started
-
-Before you get started, make sure you have the following:
-
-- [A GitHub account][github-signup]
-- [A GitHub Copilot subscription (or trial)][github-copilot]
-- [Visual Studio Code][visual-studio-code] with the [GitHub Codespaces
-  extension][visual-studio-code-codespaces] installed
-
-### Create a New Repository
-
-To get started, you need to [create a fork of this repository][repo-fork].
-Follow these steps:
-
-1. Click the `Fork` button on this repository page.
-
-    ![Click the use this template button](docs/images/0-fork-repo-step-1.jpg)
-
-> [!NOTE]
-> This tutorial contains steps to publish your code to GitHub Pages. If you want
-> to follow along with this part, then you should either make your repository public
-> or make sure you have access to a plan that allows private repositories to be
-> published to GitHub Pages.
-
-1. Fill in the repository name and description, and click the `Create fork` button.
-
-    ![Create the repository](docs/images/0-fork-repo-step-2.jpg)
-
-### Set Up your Development Environment
-
-Now that you have your repository set up, you need to set up your development
-environment. We'll use [Visual Studio Code][visual-studio-code] and
-[GitHub Codespaces][visual-studio-code-codespaces] for this tutorial.
-
-1. Open Visual Studio Code and install the
-   [GitHub Codespaces extension][visual-studio-code-codespaces] if you haven't already.
-
-2. Sign in to your GitHub account in Visual Studio Code.
-
-3. Open the Command Palette:
-    - On Windows / Linux: <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>
-    - On macOS: <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>
-
-4. Type `> Codespaces: Create New Codespace`, and select that option. 
-
-    ![Create a new Codespace through the Visual Studio Code command palette](docs/images/0-codespace-step-1.jpg)
-
-5. Type in the name of your repository (e.g. `mona/game-of-life-walkthrough`) and
-   select it from the list. After that, you will be asked to select an instance
-   type for your Codespace.
-
-    ![Type in the name of your newly forked repository and select it](docs/images/0-codespace-step-2.jpg)
-
-6. This will create a new Codespace for you. It may take a few moments to set up,
-   but once it's ready, you'll be able to see the code in your editor.
-
-    ![Click the Create codespace on main button](docs/images/0-codespace-step-3.jpg)
-
-### Next Steps
-
-Now that you have your development environment set up, proceed to
-[Getting Started with GitHub Copilot Chat](docs/1-copilot-chat.md) to begin
-exploring GitHub Copilot's capabilities.
-
-## Table of Contents
-
-1. [Copilot Chat](docs/1-copilot-chat.md)
-2. [Copilot Edits](docs/2-copilot-edits.md)
-3. [Copilot Instructions](docs/3-copilot-instructions.md)
-4. [Using Inline Chat and Slash Commands](docs/4-slash-commands.md)
-5. [README and Copilot Extensions](docs/5-readme-and-extensions.md)
-6. [GitHub Actions and GitHub Pages](docs/6-actions-and-pages.md)
-
-## License
-
-This project is licensed under the MIT License - see 
-the [LICENSE](LICENSE) file for details.
+# Conway's Game of Life
+
+This project is an interactive, browser-based simulation of Conway's Game of Life, a cellular automaton devised by the British mathematician John Horton Conway in 1970. It's a zero-player game, meaning its evolution is determined by its initial state, requiring no further input. One interacts with the Game of Life by creating an initial configuration and observing how it evolves.
+
+## Implementation Summary
+
+This implementation is built purely with web technologies:
+-   **`index.html`**: Provides the basic structure of the web page, including the canvas element where the game is rendered.
+-   **`styles.css`**: Contains all the styling rules, making the simulation full-screen and defining the visual appearance of the cells and background.
+-   **`script.js`**: Houses all the logic for the Game of Life, including grid initialization, drawing, applying game rules, and handling responsiveness.
+
+### Key Features:
+-   **Responsive Design**: The simulation dynamically adjusts to the browser window size, reinitializing the grid to fit.
+-   **GitHub-Themed Colors**: Live cells are colored using a palette inspired by GitHub's contribution graph, with color intensity varying based on the number of live neighbors.
+-   **Toroidal Grid**: The grid boundaries wrap around (toroidal array), meaning cells on one edge of the grid consider cells on the opposite edge as their neighbors.
+-   **Dynamic Simulation**: The game state updates every 0.5 seconds, allowing observation of evolving patterns.
+-   **Standardized Code**: The codebase adheres to guidelines outlined in `.github/copilot-instructions.md`, including JSDoc commenting for JavaScript functions.
+
+## Running the Application
+
+To run the simulation:
+1.  Clone or download this repository to your local machine.
+2.  Navigate to the project's root directory.
+3.  Open the `index.html` file in any modern web browser (e.g., Chrome, Firefox, Safari, Edge).
+
+No build steps or external dependencies are required.
+
+## Code Structure Overview (Conceptual)
+
+The JavaScript code (`script.js`) is organized around several key functions and state variables. Here's a conceptual overview:
+
+```mermaid
+graph TD
+    subgraph "Setup & Configuration"
+        direction LR
+        CELL_SIZE["CELL_SIZE"]
+        NEIGHBOR_COLORS["NEIGHBOR_COLORS"]
+        DEAD_CELL_COLOR["DEAD_CELL_COLOR"]
+        SIMULATION_UPDATE_INTERVAL_MS["SIMULATION_UPDATE_INTERVAL_MS"]
+        RESIZE_DEBOUNCE_MS["RESIZE_DEBOUNCE_MS"]
+        INITIAL_LIVE_CELL_RATIO["INITIAL_LIVE_CELL_RATIO"]
+
+        canvas["canvas DOM Element"]
+        ctx["2D Rendering Context"]
+    end
+
+    subgraph "State Variables"
+        direction LR
+        gridWidth["gridWidth"]
+        gridHeight["gridHeight"]
+        grid["grid (2D Array)"]
+        animationId["animationId"]
+        resizeTimeoutId["resizeTimeoutId"]
+    end
+
+    subgraph "Core Logic & Control Flow"
+        direction TB
+        startSimulation["startSimulation()"]
+        gameLoop["gameLoop()"]
+        updateGrid["updateGrid()"]
+        drawGrid["drawGrid()"]
+        countLiveNeighbors["countLiveNeighbors(x, y)"]
+        initializeGrid["initializeGrid()"]
+        resizeCanvasAndGrid["resizeCanvasAndGrid()"]
+        handleResize["handleResize()"]
+    end
+
+    subgraph "Event Handling"
+        direction TB
+        eventResize["Window: 'resize'"]
+        eventDOMContentLoaded["Document: 'DOMContentLoaded'"]
+    end
+
+    startSimulation --> resizeCanvasAndGrid
+    startSimulation --> initializeGrid
+    startSimulation --> drawGrid 
+    startSimulation --> gameLoop
+
+    gameLoop --> updateGrid
+    gameLoop --> drawGrid
+
+    updateGrid --> countLiveNeighbors
+    drawGrid --> countLiveNeighbors
+
+    eventResize --> handleResize
+    handleResize --> startSimulation
+    eventDOMContentLoaded --> startSimulation
+
+    classDef config fill:#fdf,stroke:#333,stroke-width:2px,color:#333;
+    classDef state fill:#ebf,stroke:#333,stroke-width:2px,color:#333;
+    classDef logic fill:#ccf,stroke:#333,stroke-width:2px,color:#333;
+    classDef eventh fill:#cfc,stroke:#333,stroke-width:2px,color:#333;
+
+    class CELL_SIZE,NEIGHBOR_COLORS,DEAD_CELL_COLOR,SIMULATION_UPDATE_INTERVAL_MS,RESIZE_DEBOUNCE_MS,INITIAL_LIVE_CELL_RATIO,canvas,ctx config;
+    class gridWidth,gridHeight,grid,animationId,resizeTimeoutId state;
+    class startSimulation,gameLoop,updateGrid,drawGrid,countLiveNeighbors,initializeGrid,resizeCanvasAndGrid,handleResize logic;
+    class eventResize,eventDOMContentLoaded eventh;
+```
+
+**Explanation of Diagram:**
+-   **Setup & Configuration**: Global constants and references to DOM elements defining core parameters and rendering context.
+-   **State Variables**: Mutable variables holding the grid dimensions, the grid data structure, and IDs for managing animation and timeouts.
+-   **Core Logic & Control Flow**: Functions responsible for the simulation's mechanics, initialization, and dynamic updates.
+    -   `startSimulation()`: Orchestrates the setup and initiation of the game loop.
+    -   `gameLoop()`: The recurring cycle that updates and redraws the grid.
+    -   `updateGrid()`: Applies Conway's rules to determine the next cell states.
+    -   `drawGrid()`: Renders the current state of the grid onto the canvas.
+    -   `countLiveNeighbors()`: Calculates live neighbors for a cell using toroidal logic.
+    -   `initializeGrid()`: Populates the grid with an initial random configuration of cells.
+    -   `resizeCanvasAndGrid()`: Adjusts canvas dimensions and grid parameters upon window resize.
+    -   `handleResize()`: Manages window resize events, typically debouncing `startSimulation`.
+-   **Event Handling**: Listeners for browser/document events that trigger core logic.
 
 ## Contributing
 
-Found a mistake or want to suggest an improvement? Contributions are welcome!
-Submit a Pull Request.
+Contributions are welcome! If you'd like to improve the simulation or add new features:
+1.  Fork the repository.
+2.  Create a new branch for your changes.
+3.  Make your modifications, ensuring they align with the coding standards outlined in `.github/copilot-instructions.md`.
+4.  Submit a pull request with a clear description of your changes.
 
-[github-copilot]: https://github.com/features/copilot
-[github-signup]: https://github.com/join
-[repo-fork]: https://github.com/github-samples/game-of-life-walkthrough/fork
-[visual-studio-code]: https://code.visualstudio.com
-[visual-studio-code-codespaces]: https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces
-[youtube-video]: https://youtu.be/pGV_T6g1hcU
+---
+*This Conway's Game of Life simulation was developed as part of a guided project and has been progressively refined.*
diff --git a/index.html b/index.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">
+    <meta name="description" content="A browser-based implementation of Conway's Game of Life with a GitHub-themed cell design. Watch cellular automata evolve in real-time.">
+    <title>Conway's Game of Life</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <canvas id="gameCanvas"></canvas>
+    <script src="script.js" defer></script>
+</body>
+</html>