The Old Way

Title: Old West Synchronization with The Old Way and Web Locks API

Description:

Inspired by Nicolas Cage’s rugged and determined role in The Old Way, this project uses the Web Locks API to create a web application that manages concurrent tasks, ensuring that critical sections of code are executed without conflict. The application captures the themes of discipline, control, and precision, enabling users to handle tasks sequentially and prevent race conditions. This project demonstrates the practical use of the Web Locks API to enhance user experience by ensuring synchronized access to shared resources.

Features:

• Task Synchronization: Use the Web Locks API to manage and synchronize concurrent tasks.
• Sequential Task Execution: Ensure that critical sections of code are executed sequentially to prevent conflicts.
• Thematic Design: Reflect the disciplined and controlled atmosphere of The Old Way through the application’s design and interactions.

Starting Code:

Beginner Hints:

• Create a single index.html file.
• Copy the full HTML code block into that file.
• Open index.html in your browser. If something doesn’t work, try a local server like python -m http.server.
• Open DevTools Console to spot errors and typos quickly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Old West Synchronization with The Old Way and Web Locks API</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #1d1d1d;
        color: #f0f0f0;
        text-align: center;
        padding: 50px;
    }
    .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: #2b2b2b;
        border: 1px solid #444;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    h1 {
        margin-bottom: 20px;
        color: #ff6347;
    }
    .controls {
        margin-top: 20px;
    }
    button {
        padding: 10px 20px;
        margin: 10px;
        border-radius: 5px;
        border: none;
        font-size: 16px;
        background-color: #007bff;
        color: white;
        cursor: pointer;
    }
    button:hover {
        background-color: #0056b3;
    }
    .log {
        margin-top: 20px;
        text-align: left;
        background-color: #3c3c3c;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #555;
        height: 200px;
        overflow-y: scroll;
    }
</style>
</head>
<body>
    <div class="container">
        <h1>Old West Synchronization</h1>
        <p>Manage concurrent tasks inspired by The Old Way.</p>

        <div class="controls">
            <button id="task1Button">Start Task 1</button>
            <button id="task2Button">Start Task 2</button>
        </div>
        <div class="log" id="log"></div>
    </div>
<script>
    const log = document.getElementById('log');

    function logMessage(message) {
        const time = new Date().toLocaleTimeString();
        log.innerHTML += `<p>[${time}] ${message}</p>`;
        log.scrollTop = log.scrollHeight;
    }

    async function executeTask(taskName, duration) {
        logMessage(`Requesting lock for ${taskName}`);
        await navigator.locks.request(taskName, async lock => {
            logMessage(`Lock acquired for ${taskName}`);
            logMessage(`Executing ${taskName}...`);
            await new Promise(resolve => setTimeout(resolve, duration));
            logMessage(`Task ${taskName} completed`);
        });
        logMessage(`Lock released for ${taskName}`);
    }

    document.getElementById('task1Button').addEventListener('click', () => {
        executeTask('Task 1', 3000);
    });

    document.getElementById('task2Button').addEventListener('click', () => {
        executeTask('Task 2', 2000);
    });
</script>
</body>
</html>

References:

• The Old Way (2023) - Wikipedia
• Web Locks API - MDN Web Docs

Project Overview:

This project captures the disciplined and controlled atmosphere of The Old Way using the Web Locks API to manage and synchronize concurrent tasks. Users can start tasks and see how the Web Locks API ensures that critical sections are executed sequentially, preventing conflicts. The application demonstrates the practical use of the Web Locks API for enhancing user experience through synchronized task management, reflecting the film’s themes of discipline and precision. Embrace the meticulous and determined spirit of Nicolas Cage’s character to master the use of the Web Locks API in web development. Praise Cage!