Mobile App, Scratch Card

Wappler General Need Help
1

Hello all!

How would you approach to create an scratch card mobile app? User would have a scratch card to scratch based on tests results…

Its important to have that “scratch” action, like the real scratch cards…I would like to use this kind of lib with dynamic data:

https://www.thewebtaylor.com/static/guides/demo/html5-javascript-scratchcard-script/

Is this possible with Wappler?

2

Hey Otavio,

I did a quick proof of concept using: https://masth0.github.io/ScratchCard/

and at least on Android, it works. Obviously your exact requirements might negate things, but it is a place to start!

Here’s a recording from a Samsung S8

scratch

6 Likes
3

Hey Ken!! Awesome!! Thanks!! Do you mind in send this POC to me or inform which steps you followed? I never developed mobile with Wappler :frowning:

This community rocks!

4

Sure.

Create a new mobile blank project in Wappler. Add the platform(s) you want to test (iOS, Android, Browser, etc.)

Download the scratchcard.min.js file from the link on the repository I linked to above and place that file in the www/js folder of your new project.

Add the following to the style.css file of the project and make sure it is added to index.html with <link rel="stylesheet" href="css/style.css" /> :

.sc__inner {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
.sc__wrapper {
   display: block;
   width: 100%;
   height: 300px;
   max-width: 300px;
   margin: 0 auto;
   border: 5px solid white;
}

.sc__container {
   position: relative;
   overflow: hidden;
   height: 300px;
   max-width: 300px;
}

.sc__container > img {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: auto;
}

.sc__container canvas {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: auto;
}

.sc__infos {
   text-align: center;
   height: 40px;
   line-height: 40px;
   margin-top: 5px;
   font-weight: bold;
   font-size: 18px;
}

Add the following to the index.html page:

<script src="js/scratchcard.min.js"></script>

In code view, add the following within the page-content div:

					<div class="sc__wrapper">
						<!-- scratchcard -->
						<div id="js--sc--container" class="sc__container">
							<!-- background image insert here by scratchcard-js -->
							<!-- canvas generate here -->
						</div>
						<!-- infos -->
						<div class="sc__infos">
							<!-- percent -->
						</div>
					</div>

Add the following immediately before tag:

<script>
		const scContainer = document.getElementById('js--sc--container')
		const scInfos = document.querySelector('.sc__infos');
		const sc = new ScratchCard('#js--sc--container', {
		scratchType: SCRATCH_TYPE.BRUSH,
		containerWidth: scContainer.offsetWidth,
		containerHeight: 300,
		brushSrc: 'assets/images/brush.png',
		imageForwardSrc: 'assets/images/wappler.jpg',
		imageBackgroundSrc: 'assets/images/homer.jpg',
		htmlBackground: '',
		clearZoneRadius: 0,
		nPoints: 30,
		pointSize: 4,
		callback: function () {
			alert('Now the window will reload !')
			window.location.reload()
		}
		})

		// Init
		sc.init().then(() => {
		sc.canvas.addEventListener('scratch.move', () => {
			let percent = sc.getPercent().toFixed(0);
			scInfos.innerHTML = percent + '%';
			console.log(percent)
		})
		}).catch((error) => {
		// image not loaded
		alert(error.message);
		});

		
	</script>

There are then 3 images you need to provide–one for the foreground, the background, and the brush. Place your desired images in the assets/images folder and change the script above to match those file names for brushSrc, imageForwardSrc and imageBackgroundSrc.

Build the project and view in the emulator or web browser.

All of the code was simply copied from the repository examples…nothing really fancy here.

3 Likes
5

Thank you very much, Ken!!

1 Like