web-stamp
v1.0.4
Published
Stamp collecting for the web!
Downloads
18
Readme
web-stamp
Stamp collecting for the web!
This is a silly idea of mine to make visiting websites more fun! Visitors can bring their own stamp cards and collect stamps from websites that uses this library.
Usage for users
Depending on how the website implement the trigger, you should find a way to open the stamp card uploader, which looks like this:
Upload your own stamp card here! If you don't have one, you may click the "Give me a new stamp card!" button.
A stamp card and a stamp should appear. Both of them can be dragged separately (even with touch controls!)
Line them up and click on the stamp to STAMP!
The "Take Back" button will download the image as a PNG file. You now have the stamp of the website!
Usage for developers
Adding this feature to your own website is very easy!
This library is available as a minified script and an npm package.
Minified script
To use the minified script, you should include it in an HTML file like this:
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/web-stamp/dist/style.min.css" />
</head>
<body>
<button onclick="openUI()">Open Stamp UI</button>
<div web-stamp ws-src="link.to/stamp/image" ws-disabled></div>
<script src="https://cdn.jsdelivr.net/npm/web-stamp/dist/web-stamp.min.js"></script>
<script>
function openUI() {
document.querySelector("*[web-stamp]").removeAttribute("ws-disabled");
}
</script>
</body>
</html>The script will automatically convert the first element with web-stamp attribute into the stamper UI.
The element with web-stamp can hold more attributes to provide further options:
ws-src: A URL to the image to be stampedws-card-src: A URL to a custom stamp card image that will be provided for users who clicked the "Give me a new stamp card!" buttonws-disabled: Disable the stamp UI. You probably want to disable the UI at the startws-noise: Probability of a pixel being blank when stamping, between 0 and 1ws-lang: A JSON language map to use for text from this library
The default language map looks like this:
const defaultMap: LangMap = {
"main.new": "Give me a new stamp card!",
"main.upload": "Put your stamp card here!",
"main.exit": "Never mind",
"stamp.noTilt": "No Tilt",
"stamp.randomTilt": "Random Tilt",
"stamp.reset": "Reset View",
"stamp.change": "Change Card",
"stamp.done.take": "Take Back",
"stamp.done.change": "Throw Away",
"thank.main": "Thank you for using",
"thank.hint": "This component will close in 3 seconds"
};npm package
You can install web-stamp as an npm package if you want to integrate it directly into your React project.
npm i web-stampimport { useState } from "react";
import WebStamp from "web-stamp";
// Do this if you have css import set up
// Otherwise, link the stylesheet in the HTML file
import "web-stamp/dist/style.min.css";
export default function App() {
const [opened, setOpened] = useState(false);
return <>
<button onClick={() => setOpened(true)}>Open Stamp UI</button>
{opened && <WebStamp src="link.to/stamp/image" onClose={() => setOpened(false)} />}
</>;
return
}Styling
Check out the style.css file. It defines all the styles needed for this library.
However, they may not always suit the website. In those cases, you can modify the styles with your own CSS.
To override styles, simply put your styles in higher priority, for example:
div .ws-container {
background-color: #000a;
backdrop-filter: blur(1vmax);
}Known issues
preact-render-to-string error
When a WebStamp component is rendered under the element that is used to call renderToString from preact-render-to-string, an error will be thrown.
To workaround this, make WebStamp NOT render in the initial state. The code in Usage for developers is an example.
If you REALLY want the stmap UI to show up as soon as the website loads, consider using useEffect or static import of the script.