Spaces:

flopro
/

Babel-Library-Locator

Running

App Files Files Community

flopro commited on Feb 6, 2024

Commit

4445260

verified ·

1 Parent(s): 4774509

Add 4 files

Browse files

Files changed (4) hide show

README.md +15 -6
index.html +1 -19
main.js +133 -0
style.css +70 -19

README.md CHANGED Viewed

@@ -1,11 +1,20 @@
 ---
 title: Babel Library Locator
-emoji: 📈
-colorFrom: red
-colorTo: pink
 sdk: static
-pinned: false
-license: mit
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+license: apache-2.0
 title: Babel Library Locator
 sdk: static
+emoji: 👨‍💻
+colorFrom: yellow
+colorTo: green
 ---
+# Babel Library Locator
+This app is a simple tool that converts the location of a book in the Babel library into a unique identifier that can be used to find the book. The app takes the location as input and returns the room number, wall number, shelf number, book number, and page number as output.
+## Usage
+Enter the location of the book in the input field and click the "Convert" button to see the result.
+## Development
+This app is built using Alpine.js, DaisyUI, and Tailwind CSS.

index.html CHANGED Viewed

@@ -1,19 +1 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>


1	+ <html><head><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>Babel Library Locator</title></head></html>

main.js ADDED Viewed

	@@ -0,0 +1,133 @@

+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");
+});

style.css CHANGED Viewed

@@ -1,28 +1,79 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+html {
+ font-family: '', sans-serif;
+ background-color: #f9f9f9 !important;
 }
+.prose {
+ background-color: rgb(255, 255, 255);
 }
+.container {
+ margin-left: 10px;
+ margin-right: 10px;
 }
+.books {
+ display: flex;
+ flex-wrap: wrap;
+ margin: 1rem;
+ justify-content: center;
 }
+.book {
+ width: 30%;
+ height: 10rem;
+ border: none;
+ border-radius: 10%;
+ margin: 1rem;
 }
+.book-title {
+ font-size: 1.2rem;
+ font-weight: bold;
+}
+.book-author {
+ font-size: 0.8rem;
+}
+.book-genre {
+ font-size: 0.8rem;
+}
+.book input {
+ width: 100%;
+ height: 2.5rem;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+button {
+ position: absolute;
+ bottom: 1rem;
+ right: 1rem;
+ z-index: 1;
+ border: none;
+ cursor: pointer;
+ outline: none;
+ padding: 1rem;
+ background-color: #4caf50;
+ color: #fff;
+ font-size: 1rem;
+ text-transform: uppercase;
+ border-radius: 50px;
+ height: 3rem;
+ transition: background-color 0.3s ease;
+}
+button:hover {
+ background-color: #4cb550;
+}
+.book {
+ background-color: rgb(255, 255, 255);
+}
+.book.selected {
+ box-shadow: 0 0 0 2px #4caf50;
+}