https://github.com/csingendonk/myshit

https://github.com/csingendonk/myshit

Last synced: 10 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/csingendonk/myshit
• Owner: CSingendonk
• Created: 2024-10-22T09:33:12.000Z (over 1 year ago)
• Default Branch: A
• Last Pushed: 2024-12-14T07:39:30.000Z (over 1 year ago)
• Last Synced: 2024-12-14T08:22:40.382Z (over 1 year ago)
• Language: JavaScript
• Homepage: https://csingendonk.github.io/htmlpanels/
• Size: 6.29 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🎮 **Slider Puzzle Web Component**

## **Overview**

The `` web component creates an interactive slider puzzle game that loads a random image each time it initializes. Additionally, you can **upload your own custom images** or **capture a new picture** using your device's camera to generate a unique puzzle.

---

## 🧩 **The Puzzle**

Once loaded, the puzzle is ready to play. Simply tap the **Puzzle** button to the left of the **About** and **Help** buttons to open the interface, where you can:

- 🟢 **Continue** a saved puzzle

- 🔄 **Replay** a solved puzzle

- 🖼️ **Create** a new puzzle using:

  - 📷 A **new random image**

  - 📁 **Your own uploaded image**

  - 💾 A **previously saved image**

- 🔧 **Set the complexity** and dimensions of a new puzzle

---

## 📺 **The Display**

On a desktop browser the entire element can be dragged and moved to another area on the page from the top left corner. You may also drag the bottom right corner to resize it.

On mobile we are limited to pinching to zoom in or out and cannot drag the elemebt.

## 🛠️ **Code Integration**

To include the slider puzzle on your webpage, use the `` custom element. The component is designed to generate a fully functional slider puzzle without any additional configuration.

  📜 Click to see how to integrate this component into your HTML page:

  

```html

```

The component uses the slider-puzzle.js script hosted on GitHub and written by © CSingendonk, to handle the game logic, image loading, and user interactions.

# 🎲 **3D Dice Web Component**

  ...

  |  ~      ~   |

     |  ,   |

  |____________|

     | | | |

      |_|_|

  No dice on the dice discription homie.