@@ -3,12 +3,15 @@ import { SC_CONFIG, SCRATCH_TYPE } from './ScratchCardConfig';
3
3
import { dispatchCustomEvent , getOffset , injectHTML , loadImage , throttle } from './utils'
4
4
5
5
class ScratchCard {
6
+ get canvas ( ) : HTMLCanvasElement {
7
+ return this . _canvas ;
8
+ }
6
9
readonly config : SC_CONFIG ;
7
10
readonly scratchType : SCRATCH_TYPE ;
8
11
readonly ctx : CanvasRenderingContext2D ;
9
12
readonly container : HTMLElement ;
10
13
private position : number [ ] ;
11
- private canvas : HTMLCanvasElement ;
14
+ private _canvas : HTMLCanvasElement ;
12
15
private readyToClear : Boolean ;
13
16
private brush : Brush ;
14
17
private callbackDone : Boolean ;
@@ -52,7 +55,7 @@ class ScratchCard {
52
55
// Create and add the canvas
53
56
this . generateCanvas ( ) ;
54
57
55
- this . ctx = this . canvas . getContext ( '2d' ) ;
58
+ this . ctx = this . _canvas . getContext ( '2d' ) ;
56
59
57
60
// Init the brush instance
58
61
this . brush = new Brush ( this . ctx , this . position [ 0 ] , this . position [ 1 ] ) ;
@@ -79,7 +82,7 @@ class ScratchCard {
79
82
} , 16 ) ;
80
83
81
84
/*---- Events -----------------------------------------------------------------------*/
82
- this . canvas . addEventListener ( 'mousedown' , function ( event ) {
85
+ this . _canvas . addEventListener ( 'mousedown' , function ( event ) {
83
86
event . preventDefault ( ) ;
84
87
self . _setScratchPosition ( ) ;
85
88
@@ -89,17 +92,17 @@ class ScratchCard {
89
92
self . brush . startLine ( self . config . clearZoneRadius ) ;
90
93
}
91
94
92
- self . canvas . addEventListener ( 'mousemove' , scratching ) ;
95
+ self . _canvas . addEventListener ( 'mousemove' , scratching ) ;
93
96
94
97
document . body . addEventListener ( 'mouseup' , function _func ( e ) {
95
- self . canvas . removeEventListener ( 'mousemove' , scratching ) ;
98
+ self . _canvas . removeEventListener ( 'mousemove' , scratching ) ;
96
99
self . finish ( ) ; // clear and callback
97
100
this . removeEventListener ( 'mouseup' , _func ) ;
98
101
} ) ;
99
102
} ) ;
100
103
101
104
// Mobile events
102
- this . canvas . addEventListener ( 'touchstart' , function ( event ) {
105
+ this . _canvas . addEventListener ( 'touchstart' , function ( event ) {
103
106
event . preventDefault ( ) ;
104
107
self . _setScratchPosition ( ) ;
105
108
@@ -109,9 +112,9 @@ class ScratchCard {
109
112
self . brush . startLine ( self . config . clearZoneRadius ) ;
110
113
}
111
114
112
- self . canvas . addEventListener ( 'touchmove' , scratching ) ;
115
+ self . _canvas . addEventListener ( 'touchmove' , scratching ) ;
113
116
document . body . addEventListener ( 'touchend' , function _func ( ) {
114
- self . canvas . removeEventListener ( 'touchmove' , scratching ) ;
117
+ self . _canvas . removeEventListener ( 'touchmove' , scratching ) ;
115
118
self . finish ( ) ; // clear and callback
116
119
this . removeEventListener ( 'touchend' , _func ) ;
117
120
} ) ;
@@ -151,14 +154,14 @@ class ScratchCard {
151
154
* @private
152
155
*/
153
156
private _setScratchPosition ( ) {
154
- this . zone = getOffset ( this . canvas ) ;
157
+ this . zone = getOffset ( this . _canvas ) ;
155
158
}
156
159
157
160
finish ( ) {
158
161
// Exec the callback once
159
162
if ( ! this . callbackDone && this . percent > this . config . percentToFinish ) {
160
163
this . clear ( ) ;
161
- this . canvas . style . pointerEvents = 'none' ;
164
+ this . _canvas . style . pointerEvents = 'none' ;
162
165
if ( this . config . callback !== undefined ) {
163
166
this . callbackDone = true ;
164
167
this . config . callback ( ) ;
@@ -172,14 +175,14 @@ class ScratchCard {
172
175
* @param {string } type
173
176
*/
174
177
dispatchEvent ( phase : string , type : string ) {
175
- dispatchCustomEvent ( this . canvas , `${ phase } .${ type } ` , { } ) ;
178
+ dispatchCustomEvent ( this . _canvas , `${ phase } .${ type } ` , { } ) ;
176
179
}
177
180
178
181
init ( ) : Promise < any > {
179
182
return new Promise ( ( resolve : any , reject : any ) => {
180
183
loadImage ( this . config . imageForwardSrc ) . then ( ( img : HTMLImageElement ) => {
181
184
this . scratchImage = img ;
182
- this . ctx . drawImage ( this . scratchImage , 0 , 0 , this . canvas . width , this . canvas . height ) ;
185
+ this . ctx . drawImage ( this . scratchImage , 0 , 0 , this . _canvas . width , this . _canvas . height ) ;
183
186
this . setBackground ( ) ;
184
187
// Resolve the promise init
185
188
resolve ( ) ;
@@ -192,13 +195,13 @@ class ScratchCard {
192
195
}
193
196
194
197
private generateCanvas ( ) : void {
195
- this . canvas = document . createElement ( 'canvas' ) ;
196
- this . canvas . classList . add ( 'sc__canvas' ) ;
198
+ this . _canvas = document . createElement ( 'canvas' ) ;
199
+ this . _canvas . classList . add ( 'sc__canvas' ) ;
197
200
198
201
// Add canvas into container
199
- this . canvas . width = this . config . containerWidth ;
200
- this . canvas . height = this . config . containerHeight ;
201
- this . container . appendChild ( this . canvas ) ;
202
+ this . _canvas . width = this . config . containerWidth ;
203
+ this . _canvas . height = this . config . containerHeight ;
204
+ this . container . appendChild ( this . _canvas ) ;
202
205
}
203
206
204
207
private setBackground ( ) : void {
@@ -208,7 +211,7 @@ class ScratchCard {
208
211
let image = document . createElement ( 'img' ) ;
209
212
loadImage ( this . config . imageBackgroundSrc ) . then ( ( img : HTMLImageElement ) => {
210
213
image . src = img . src ;
211
- this . container . insertBefore ( image , this . canvas ) ;
214
+ this . container . insertBefore ( image , this . _canvas ) ;
212
215
} , ( error : Error ) => {
213
216
// Stop all script here
214
217
console . log ( error . message ) ;
@@ -270,7 +273,7 @@ class ScratchCard {
270
273
* */
271
274
updatePercent ( ) : number {
272
275
let counter = 0 ; // number of pixels cleared
273
- let imageData = this . ctx . getImageData ( 0 , 0 , this . canvas . width , this . canvas . height ) ;
276
+ let imageData = this . ctx . getImageData ( 0 , 0 , this . _canvas . width , this . _canvas . height ) ;
274
277
let imageDataLength = imageData . data . length ;
275
278
276
279
// loop data image drop every 4 items [r, g, b, a, ...]
@@ -281,14 +284,14 @@ class ScratchCard {
281
284
}
282
285
}
283
286
284
- return ( counter >= 1 ) ? ( counter / ( this . canvas . width * this . canvas . height ) ) * 100 : 0 ;
287
+ return ( counter >= 1 ) ? ( counter / ( this . _canvas . width * this . _canvas . height ) ) * 100 : 0 ;
285
288
}
286
289
287
290
/**
288
291
* Just clear the canvas
289
292
*/
290
293
clear ( ) : void {
291
- this . ctx . clearRect ( 0 , 0 , this . canvas . width , this . canvas . height ) ;
294
+ this . ctx . clearRect ( 0 , 0 , this . _canvas . width , this . _canvas . height ) ;
292
295
}
293
296
294
297
}
0 commit comments