Sleeping-Barber-Problem-Simulation/code.html at main · Mahi11Patel/Sleeping-Barber-Problem-Simulation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sleeping Barber Simulation</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1><i class="fas fa-store"></i> Sleeping Barber Problem</h1>

    <div class="simulation-area">
        <div class="shop-layout">
            <!-- Barber Section -->
            <div class="barber-section">
                <h2><i class="fas fa-user-tie"></i> The Barber</h2>
                <div class="status-display">
                    Status: <span id="barber-status-icon"><i class="fas fa-bed"></i></span>
                    <span id="barber-status-text">Sleeping</span>
                </div>
                <div class="barber-chair-area">
                    <h3>Barber Chair</h3>
                    <div id="barber-chair" class="chair-icon empty">
                        <i class="fas fa-chair"></i>
                        <span class="customer-id"></span>
                    </div>
                </div>
            </div>

            <!-- Waiting Room Section -->
            <div class="waiting-room-section">
                <h2><i class="fas fa-couch"></i> Waiting Room</h2>
                <div class="capacity">
                    (<span id="waiting-count">0</span>/<span id="max-chairs"></span> Chairs Occupied)
                </div>
                <div id="waiting-chairs" class="chairs-container">
                    <!-- Chair icons will be added by JS -->
                </div>
            </div>
        </div>

        <!-- Controls Section -->
        <div class="controls">
             <p>Simulate customer arrivals / Reset:</p>
             <div class="button-group">
                 <button id="addCustomerBtn" title="Simulate a new customer arriving">
                     <i class="fas fa-user-plus"></i> Add Customer
                 </button>
                 <button id="resetSimBtn" title="Reset the simulation to its initial state">
                     <i class="fas fa-sync-alt"></i> Reset Simulation
                 </button>
            </div>
        </div>

        <!-- Log Section -->
        <div class="log-section">
            <h2><i class="fas fa-clipboard-list"></i> Event Log</h2>
             <button id="clearLogBtn" title="Clear the event log">
                <i class="fas fa-trash-alt"></i> Clear Log
            </button>
            <div id="logContainer">
                <ul id="logList"></ul>
                 <!-- Log entries will be added here -->
            </div>
        </div>
    </div> <!-- Closing div for simulation-area -->

    <!-- Analogy Section -->
    <div class="analogy-section">
        <h2><i class="fas fa-project-diagram"></i> Operating System Analogy</h2>
        <p>
            The Sleeping Barber problem is a classic inter-process communication and synchronization problem used to illustrate concepts in Operating Systems. Here's how the simulation elements map to OS concepts:
        </p>
        <ul>
            <li><strong>The Barber:</strong> Represents a <strong>worker thread</strong> or process that performs a specific task (like accessing a shared resource or providing a service). When there's no work, it efficiently <strong>blocks</strong> (sleeps) instead of busy-waiting.</li>
            <li><strong>Customers:</strong> Represent multiple <strong>threads</strong> or processes that need the service provided by the barber (the worker thread).</li>
            <li><strong>The Barber Chair:</strong> Represents a <strong>shared resource</strong> or a <strong>critical section</strong> of code that only one thread/process can access at a time. Access must be mutually exclusive.</li>
            <li><strong>Waiting Room Chairs:</strong> Represent a <strong>bounded buffer</strong> or queue where requesting threads/processes can wait if the shared resource (barber chair) is currently busy.</li>
            <li><strong>Barber Sleeping/Waking:</strong> Illustrates the use of <strong>synchronization primitives</strong> like <strong>Semaphores</strong> or <strong>Condition Variables</strong>.
                <ul>
                    <li>The barber waits (sleeps) on a semaphore/condition variable when the queue is empty.</li>
                    <li>A arriving customer signals (wakes) the barber via the semaphore/condition variable if the barber is asleep.</li>
                    <li>The barber signals a waiting customer (if any) when the haircut is finished.</li>
                </ul>
            </li>
             <li><strong>Customer Checking Chairs / Leaving:</strong> Represents handling the condition where the bounded buffer (waiting room) is full. The arriving process might block, retry, or abandon the request.</li>
             <li><strong>Mutual Exclusion:</strong> The simulation implicitly requires mechanisms (like a <strong>Mutex</strong> or binary semaphore) to protect access to shared state, such as checking/modifying the number of waiting customers or changing the barber's status.</li>
        </ul>
        <p>
            This problem highlights the challenges of coordinating multiple concurrent processes/threads, preventing race conditions, avoiding deadlock (though less prominent in the basic version), and managing shared resources efficiently. It's a simplified model for many real-world producer-consumer scenarios in OS design.
        </p>
    </div>
    <!-- End Analogy Section -->

    <script src="script.js"></script>
</body>
</html>