memory/game.js at main · refschool/memory · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
	$(function () {

		let touched = 0 //max 2 carte à jouer
		let chrono = 0
		let handle
		let won = false;
		let frozen = false;
		const DEADLINE = 100
		const url = 'http://glottr.test/memory'
		//const url = 'http://localhost/JS/memory'

		function init() {

			fetch(url + '/api.php')
			.then(response => response.json())
			.then(fruits => {
				fruits.map((item) => {
					$('#board').append('<div class="cadre"><div class="carre flippable ' + item.fruit + '" logo="' + item.fruit + '"></div></div>')
				})

			}).then( () => {
				return fetch( url+ '/api.php?action=getscore')
			})
			.then( response => response.json())
			.then(data => {
				data.map( item => {
					$('#billboard').append('<div>'+item.temps+'</div>')
				})
			})
		}


		function checkGame() {
			const remainingFlippable = $('#board .flippable').length
			if (remainingFlippable == 0) {
				won = true
				return won
			}
		}

		function fillMeter(chrono, DEADLINE) {
			const green = 'rgb(43,194,83)'
			const orange = 'rgb(255,165,0)'
			const red = 'rgb(242,74,68)'

			const percent = Math.round(chrono / DEADLINE * 100)

			if (percent > 100) { return }

				if (percent < 85 && percent > 60) {
					bgcolor = orange
				} else if (percent <= 60) {
					bgcolor = green
				} else {
					bgcolor = red
				}

				$('.meter span').css('width', percent + '%').css('background-color', bgcolor).text(chrono)
			}


		//start game
		init()


		$('.start').on('click', function (e) {


			//hide overlay that prevents click before game start
			$('#boardoverlay').hide()

			let handle = setInterval(function () {
				chrono += 1

				fillMeter(chrono, DEADLINE)

				if (chrono == (DEADLINE + 1) && frozen == false) {
					frozen = true
					clearInterval(handle)
					alert('Vous avez perdu')
					// unbind event
					$('#board').off('click')
				}

				if (checkGame() && frozen == false) {
					frozen = true
					clearInterval(handle)
					alert('Vous avez gagné avec le temps de ' + chrono + ' secondes.')


					//send to backend the score
					fetch(url + '/api.php?action=savescore',{
					  method: "post",
					  headers: {
					    'Accept': 'application/json',
					    'Content-Type': 'application/json'
					  },
						body: JSON.stringify({
					    score: chrono,
					  })
					}).catch( error => console.log(error))


				}

			}, 1000)
		})


		$('#board').on('click', function (e) {
			let carte = $(e.target)
			let flippedCount = $('#board .flipped').length

			if (!$(e.target).hasClass('flippable')) {
				console.log('dans not flippable')
				return
			}


			if (carte.hasClass('flipped')) {
				if (touched != 1) {
					carte.css('opacity', '0').removeClass('flipped')
				}

				//refresh flipped count
				flippedCount = $('#board .flipped').length

				if (flippedCount == 0) {
					touched = 0
				}
				return
			}


			// we can only flip 2 cards
			if (touched < 2) {
				if (carte.css('opacity') == '0') {

					carte.css('opacity', '1').addClass('flipped')
					//add class flipped
					touched += 1
				}
			}

			//check if they are the same
			let flippedCards = $('#board .flipped')
			if (flippedCards.length == 2) {
				const name1 = $(flippedCards[0]).attr('logo')
				const name2 = $(flippedCards[1]).attr('logo')

				if (name1 == name2) {
					$(flippedCards[0]).removeClass('flippable').removeClass('flipped')
					$(flippedCards[1]).removeClass('flippable').removeClass('flipped')
					console.log('removed flippable')
					touched = 0
				}
			}
		})
	})