Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/losyoguis/149tresbandas/llms.txt

Use this file to discover all available pages before exploring further.

Entrenador de Carambola Guiada is a pure HTML/CSS/JavaScript application with no build pipeline, no package manager, and no runtime dependencies. This page covers how to run it locally on your machine and how to deploy it to GitHub Pages so it is publicly accessible and embeddable in Google Sites.

​
Local Setup

Because the trainer is a self-contained static app, setup is straightforward: clone the repository and open index.html. There is no npm install, no compilation step, and no server-side component.
1

Clone or download the repository

Clone the repository using Git:
git clone https://github.com/losyoguis/149tresbandas.git
cd 149tresbandas
Alternatively, download the ZIP from the GitHub repository page (Code → Download ZIP) and extract it to any folder on your machine.
2

Open index.html in a modern browser

Open index.html directly in Chrome, Firefox, Safari, or Edge. On most operating systems you can double-click the file or drag it onto an open browser window.The app launches immediately — all game logic, physics, styles, and play assets are loaded from relative paths within the same folder.
3

Play

The trainer is fully functional as soon as the page loads. Select a play from the dropdown, study the master guide, and shoot. No additional configuration is needed for the core billiards experience.
The Videotutorial feature loads a Google Drive iframe. Some browsers block cross-origin iframes when the page is served from a file:// URL, which may prevent the video from displaying. To avoid this, serve the app with a local static server instead:
# Serve locally on port 8080
python3 -m http.server 8080
Then open http://localhost:8080 in your browser. The video modal will load correctly, and the PWA service worker will also register properly (service workers require either localhost or HTTPS).

​
Project Structure

The repository uses a flat, predictable layout with no build output directories or generated files to manage. 
index.html                       # Main app entry point
css/styles.css                   # All styles (responsive, dark table theme)
js/app.js                        # Complete game logic and physics engine
manifest.webmanifest             # PWA manifest (name, icons, display mode)
sw.js                            # Service worker (offline caching)
.nojekyll                        # Prevents GitHub Pages Jekyll processing
icon-48.png … icon-512.png       # PWA icons (9 sizes)
assets/jugadas/                  # Play assets (flat folder, 148 plays)
  posicion_inicial_NNN.webp      # Initial ball positions per play
  recorrido_guia_NNN.webp        # Reference route images per play
  guia_referencia_NNN.png        # Extracted reference guide overlays
All 148 plays follow the same naming pattern where NNN is the zero-padded play number (e.g. 001, 042, 149). Play 080 is intentionally absent from the assets folder — no reference images exist for it, and the selector marks it as unavailable. The assets/jugadas/ folder is flat (no per-play subdirectories), which simplifies path resolution and avoids issues with GitHub Pages’ asset serving.

​
Deploy to GitHub Pages

Deploying to GitHub Pages requires no additional tooling. The repository is already structured for direct publication from the main branch root.
1

Push all files to the main branch

Commit and push the entire repository contents — including index.html, the css/, js/, and assets/ folders, manifest.webmanifest, sw.js, and all icon files — to the main branch of your GitHub repository.
git add .
git commit -m "Deploy Entrenador de Carambola Guiada"
git push origin main
2

Enable GitHub Pages

In your GitHub repository, go to Settings → Pages.Under Source, select:
  • Branch: main
  • Folder: / (root)
Click Save.
3

Open the published URL

GitHub Pages will build and publish the site within a minute or two. Your trainer will be live at:
https://<your-username>.github.io/<your-repo-name>/
Open this URL in any browser to verify the deployment. If you previously visited an older version, clear your browser cache or force-refresh (Ctrl+Shift+R / Cmd+Shift+R) to load the latest service worker.
A .nojekyll file is already included in the repository root. This file tells GitHub Pages to skip Jekyll processing entirely, which is important because Jekyll’s default behavior ignores folders that start with _ and may interfere with other asset paths. Without .nojekyll, some files under assets/ could be excluded from the published site.

​
Embedding in Google Sites

Once deployed to GitHub Pages, the trainer can be embedded directly in any Google Sites page:
  1. In Google Sites, open the page editor and click Insert → Embed → By URL.
  2. Paste the GitHub Pages URL (e.g. https://losyoguis.github.io/149tresbandas/).
  3. Resize the embed block — a height of 760 px at full width is recommended for desktop viewers.
The app handles fullscreen and responsive layout automatically, so it adapts to the embed dimensions on both desktop and mobile. For a complete walkthrough of deployment options, hosting configuration, and Google Sites integration, see the GitHub Pages deployment guide.

Build docs developers (and LLMs) love

Get started for freeTalk to us