masth0 / scratchcard Goto Github PK
View Code? Open in Web Editor NEWScratchCard is a js lib to simulated a scratchcard in browser with html5 and canvas.
License: MIT License
ScratchCard is a js lib to simulated a scratchcard in browser with html5 and canvas.
License: MIT License
When I scratch the scratch card and change the screen orientation a few times, it returns to initial state and I can not scratch again
I noticed this error Could not find a declaration file for module 'scratchcard-js'. 'directory/node_modules/scratchcard-js/build/scratchcard.min.js' implicitly has an 'any' type.
This happens when trying to import { SCRATCH_TYPE, ScratchCard } from 'scratchcard-js'; in Angular 13, the only workaround I found was to add "noImplicitAny": false in my tsconfig.json file inside the compiler options. Why is this happening? All other libraries work without issues.
I recently implemented this library. I have an image in both the foreground and background. When I drag my mouse or finger through, it drags and clears as expected but the moment I'm no longer pressing down, the whole foreground image disappears, even if I've only cleared a portion of the foreground image.
My current code:
const scContainer = document.getElementById('js--sc--container')
const sc = new ScratchCard('#js--sc--container', {
scratchType: SCRATCH_TYPE.LINE,
containerWidth: scContainer.offsetWidth,
containerHeight: 300,
imageForwardSrc: '//foregroundImage.png',
imageBackgroundSrc: '//backgroundImage.png',
clearZoneRadius: 20,
callback: function () {
}
})
// Init
sc.init().then(() => {
sc.canvas.addEventListener('scratch.move', () => {
let percent = sc.getPercent()
console.log(percent)
})
}).catch((error) => {
// image not loaded
alert(error.message);
});
Great work! For more use cases, is it possible to put divs or other elements behind?
Thanks ๐
I'm trying to use the htmlBackground
property however the callback related to the percentToFinish
doesn't seem to be executed.
I am using version 1.4.4, and I have replicated it here: https://stackblitz.com/edit/js-sh6mv3?file=index.js
Guys please help...
I'm trying to add a scratching sound effect while scratching but the browser gives policy error:
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
var scratchsound = document.getElementById("scratching_audio");
$(".scratchcard_wrapper").on("touchmove", function () {
scratchsound.muted = false;
scratchsound.play();
});
I have to click second time and then it plays.
very strange, if I bind the touch or click event to anything other than the scratchcard container - it works instantly! What the problem?
It seems that the information on the "HTML background" section of the demo page is "out of sync" with the demo itself. Neither the Javascript nor the HTML layout mentions anything about the HTML background shown in the demo. Moreover, I could not get it to work based on the incomplete information from the Readme on GitHub.
BTW, I did manage to get it to work with the regular image background. Could you please revise and update the information about how to use an HTML background. This is a great js lib and I can foresee many use cases as far as I am concerned! Thank you a bunch!
Would be really nice if the foreground could be specfied as html as well!
brush type line does not show scratch nor callback. i wanted a line scratch but only spray and brush type working.
When working with ScratchCard.js I noticed that the scratch area is always a square so I decided to try to round the container so the scratch area would be round the issue I faced was that when scratching the round area part of it would not get scratched because the square corner would not be visible do to the way the CSS rounds corners.
Has anyone tried this before? Is it even possible with the way the scratchCard works?
Steps to Reproduce:
You will notice that the percentage will not match what was scratched while scratching.
Hi, I'm asking if this lib can be used with mobile frameworks like Cordova ionic, etc ..
This promise didn't resolve and the addEventListener
didn't work properly
// Init
sc.init().then(() => {
sc.canvas.addEventListener('scratch.move', () => {
let percent = sc.getPercent().toFixed(2)
console.log(percent)
})
}).catch((error) => {
// image not loaded
alert(error.message);
});
Except if I put the addEventListener
alone, out from the promise:
sc.canvas.addEventListener('scratch.move', () => {
let percent = sc.getPercent().toFixed(2)
console.log(percent)
})
How to set Pre cleared when opening page??
Hey Masth0!
I've run into a problem trying to init two scratchcards on the same page, both of the canvases are added to the first scratchard element.
Do you have any suggestions or solutions to this specific problem?
Thanks a lot,
David
Hello and first thank you for developing this custom script.
I really need to use something like this , but I want to get my api data and store the database ids with custom cards that eventually will get scratched. Like a scratch game , when all the cards are not equal and have different ids and values.
Can you somehow make this script generate different html templates with different ids , not only a single scratch card?
Thank you.
When the line brush type is initialised on mobile, the line is the default width regardless of the clearZoneRadius
Hello, @Masth0
I'm interested in using and modifying the code to create my own version of this library. However, I noticed there's no license information.
Could you please grant me permission to copy code from this repository for my use and consider adding an MIT License to the current repository for clarity and open-source collaboration?
If you don't want to add an MIT License may I use this license in my repo?
I want to use ScratchCard with Vue, but i find that if ScratchCard is used in vue child route, it can not be scratched
{ path: '/', component: index, children: [ { name: 'intro', path: '/intro', component: intro }, { name: 'question', path: '/question', component: question }, { name: 'result', path: '/result', component: result }, { name: 'cj', path: '/cj', component: cj } ] }
Can I have multiple ScratchCards without having to initialize one by one by the id?
Hi again :)
I'm with difficulties trying to turn the scratch-off responsive, always that I tried to handle the canvas element, it loses the visibility (hide) and displays the background/image.
I noted that this project demonstration, the Scratch-Off element is small, apparently to don't be necessary to handle the dimensions for responsive. so is it was purposeful?
Do you have the idea of how to handle the canvas keeping it over the background image?
I'm willing to help in the development of this feature, if you guide me I can implement and send the PR to you review :)
Merci
Hi, I have such a problem that a nice option would be to add the HTMLbackgroud not as a string, but as a node or htmlElement, is this possible?
Hi,
I have tried to add click function inside the html tag but it is not calling the function.....
It is required to copy the code given in scratch card. I have tried in IONIC.
Please check & let me know
Thanks
I'm currently running a vanilla JS setup (WordPress website, importing Babel-Core and ScratchCard.js in order to use this script), and I've currently hit a similar wall to #44 , however unlike their situation I cannot get my scratchcard to load at all. It responds with the error:
Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
at ScratchCard.generateCanvas (ScratchCard.ts:210:22)
at new ScratchCard (ScratchCard.ts:60:10)
at myscript.js
It seems that the offending function is all to do with generating a canvas, not being able to append anything to the canvas. Unsure of why this is creating so much of an issue. I believe I've imported all of my files properly too:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.26.3/browser.min.js?ver=11:10:34" id="babel-core-js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/build/scratchcard.min.js?ver=11:10:34" id="scratchcard-js"></script>
<script type="module" src="https://my.site/wp-content/themes/my-theme/js/myscript.js?ver=11:10:34"></script>
The code in myscript.js
is the following:
import 'https://cdn.jsdelivr.net/npm/[email protected]/build/scratchcard.js';
/* Scratchcard JS */
const scContainer = document.getElementById('js--sc-container');
const sc = new ScratchCard('#js--sc--container', {
scratchType: SCRATCH_TYPE.CIRCLE,
containerWidth: scContainer.offsetWidth,
containerHeight: scContainer.offsetHeight,
imageForwardSrc: 'https://geek.design/wp-content/uploads/2024/03/gluttony-scratchcard-front.png',
imageBackgroundSrc: 'https://geek.design/wp-content/uploads/2024/03/gluttony-scratchcard-back.png',
clearZoneRadius: 50,
nPoints: 30,
pointSize: 10,
callback: function () {
console.log('Scratch complete!');
}
});
sc.init().then(() => {
sc.canvas.addEventListener('scratch.move', function () {
console.log('Scratch move!');
});
}).catch((error) => {
console.error(error);
});
Any and all help is greatly appreciated.
Please remove the unnecessary console.log on line 128 in the ScratchCard.ts file. Thanks!
export interface SC_CONFIG {
...
htmlBackground: string;
percentToFinish: number;
brushSrc: string;
enabledPercentUpdate: boolean;
}
Hi.
I'm facing an issue that, when scratching, the canvas suddenly disappear and the scratch.move percent stop to be fired.
Its happening very offeten in this test link: scratch teste link
Can you help me, pls?
hi,
with the code of the examples no percentage is calculated but the value is not reflected inside sc__infos
<div class="sc__infos">
<p>0%</p>
</div>
there is some glue missing
Hi,
I use multiple sc in same page, and I would like to deactivate the scratch on multiple sc, but is not possible at the moment,
For further version, possible to add a sc.destroy() or sc.deactivate() who let the foreground image but deactivate the scratch ?
Big thank for your work.
How do i change the brush size?
Hello, there is no problem when I create the cards 1 time, but when I try to create them the 2nd time, I get this error. Is there any way to destroy or delete previously created cards? I searched the system a bit but I couldn't find a way
scratchcard.min.js:1 Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
at t.value (scratchcard.min.js:1:21987)
at new t (scratchcard.min.js:1:19107)
at Object. (script.js:421:14)
at Function.each (jquery.min.js:2:2777)
at createScratchCards (script.js:415:7)
at Object.success (script.js:235:17)
at c (jquery.min.js:2:27742)
at Object.fireWith [as resolveWith] (jquery.min.js:2:28487)
at l (jquery.min.js:2:78789)
at XMLHttpRequest. (jquery.min.js:2:81117)
Really a cool script. I would like to use this for a project. Is there any information about which license this script is released under (MIT?)? Can I use the script for commercial projects?
Is there a way to undo/refill/reset the scratched area in the callback function?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.