main.js

const $ = (...params) => document.querySelector(...params);

/**
 * Take a string representing the location in the library
 * and return an object containing the following properties:
 *   room: the room number
 *   wall: the wall number
 *   shelf: the shelf number
 *   book: the book number
 *   page: the page number
 */
function getLocationDetails(location) {
 const parts = location.split(".");
 return {
    room: parseInt(parts[0], 36),
    wall: parseInt(parts[1]),
    shelf: parseInt(parts[2]),
    book: parseInt(parts[3]),
    page: parseInt(parts[4]),
 };
}

/**
 * Take an object containing the following properties:
 *   room: the room number
 *   wall: the wall number
 *   shelf: the shelf number
 *   book: the book number
 *   page: the page number
 * and return a string representing the unique identifier for the book.
 */
function getUniqueBookId(location) {
 const { room, wall, shelf, book, page } = location;
 return (room * 1000 + wall * 100 + shelf * 32 + book * 410) + page * 161;
}

/**
 * Given a book index (integer 1-100), return the page number (1-410)
 */
function getPageNumber(bookIndex) {
 return (bookIndex - 1) % 410 + 1;
}

/**
 * Given a book index (integer 1-100), return the book number (1-32)
 */
function getBookNumber(bookIndex) {
 return (bookIndex - 1) % 64 + 1;
}

/**
 * Given a book index (integer 1-100), return the shelf number (1-5)
 */
function getShelfNumber(bookIndex) {
 return (bookIndex - 1) % 32 + 1;
}

/**
 * Given a book index (integer 1-100), return the wall number (1-4)
 */
function getWallNumber(bookIndex) {
 return (bookIndex - 1) % 8 + 1;
}

/**
 * Given a book index (integer 1-100), return the room number (string containing a letter and an integer)
 */
function getRoomNumber(bookIndex) {
 return "Room " + ((bookIndex - 1) % 26 + 1).toUpperCase();
}

$(document).addEventListener("alpine:init", () => {
 const app = new Alpine.Component();
  
 app.define("location-details", {
    input: "",
    bookIndex: 0,
    uniqueId: "",
 });
  
 app.store({
    index: 1,
    inputs: [],
 });
  
 app.watch("Input", (value) => {
    const location = getLocationDetails(value);
    app.bookIndex = getUniqueBookId(location);
    app.uniqueId = getRoomNumber(app.bookIndex) + "." + getWallNumber(app.bookIndex) + "." + getShelfNumber(app.bookIndex) + "." + getBookNumber(app.bookIndex) + "." + getPageNumber(app.bookIndex);
 });
  
 app.watch("bookIndex", (value) => {
    app.uniqueId = getRoomNumber(value) + "." + getWallNumber(value) + "." + getShelfNumber(value) + "." + getBookNumber(value) + "." + getPageNumber(value);
 });
  
 app.mount("#app");
  
 // Update the input value with the unique identifier
 app.on("change:bookIndex", (e) => {
    const pagination = app.bookIndex;
    const otherBooks = app. books.map((book) => book.bookIndex);
    if (!otherBooks.includes(pagination)) {
      app.bookIndex = pagination;
      app.uniqueId = getRoomNumber(pagination) + "." + getWallNumber(pagination) + "." + getShelfNumber(pagination) + "." + getBookNumber(pagination) + "." + getPageNumber(pagination);
    }
 });
  
 // Update the button label with the unique identifier
 app.on("click", (e) => {
    const pagination = app.bookIndex;
    const otherBooks = app. books.map((book) => book.bookIndex);
    if (!otherBooks.includes(pagination)) {
      app.uniqueId = getRoomNumber(pagination) + "." + getWallNumber(pagination) + "." + getShelfNumber(pagination) + "." + getBookNumber(pagination) + "." + getPageNumber(pagination);
    }
 });
});

$(document).addEventListener("DOMContentLoaded", () => {
 const app = new Alpine.Component();
  
 app.define("library", {
    books: [],
    addBook: (title) => {
      return { bookIndex: app.books.length + 1, title };
    },
 });
  
 app.store({
    books: [],
 });
  
 app.mount("#app");
});