'use strict';

								import * as sound from './sound.js';
								
								const CARROT_SIZE = 80
								const FIELD_TOP_PADDING = 50
								
								export const ItemType = Object.freeze({
										carrot: 'carrot',
										bug: 'bug',
								});
								
								export class Field {
										constructor(carrotCount, bugCount) {
										this.carrotCount = carrotCount;
										this.bugCount = bugCount;
										this.field = document.querySelector('.game__field');
										this.fieldRect = this.field.getBoundingClientRect();
										this.onFieldClickListener = this.onFieldClickListener.bind(this);
										this.field.addEventListener('click', this.onFieldClickListener);
										}
								
										init() {
										this.field.innerHTML = '';
										this.addItem(this.carrotCount, 'img/carrot.png', 'carrot');
										this.addItem(this.bugCount, 'img/bug.png', 'bug');
										}
								
										setItemClickListener(onItemClick) {
										this.onItemClick = onItemClick;
										}
								
										addItem(count, imgPath, className) {
										const x1 = 0;
										const x2 = this.fieldRect.width - CARROT_SIZE;
										const y1 = this.field.offsetTop + FIELD_TOP_PADDING;
										const y2 = this.field.offsetTop + this.fieldRect.height - CARROT_SIZE;
										for (let i = 0; i < count; i++) {
												const item = document.createElement('img');
												item.setAttribute('class', className);
												item.setAttribute('src', imgPath);
												item.style.position = 'absolute';
												const x = randomNumber(x1, x2);
												const y = randomNumber(y1, y2);
												item.style.left = `${x}px`;
												item.style.top = `${y}px`;
												item.style.userDrag = 'none';
												this.field.appendChild(item);
										}
										}
								
										onFieldClickListener(event) {
										const target = event.target;
										if (target.matches('.carrot')) {
												sound.playCarrot();
												target.remove();
												this.onItemClick && this.onItemClick(ItemType.carrot);
										} else if (target.matches('.bug')) {
												this.onItemClick && this.onItemClick(ItemType.bug);
										}
										}
								}
								
								function randomNumber(min, max) {
										return Math.random() * (max - min) + min;
								}
										
									

										'use strict';
										import { Field, ItemType } from './field.js';
										import * as sound from './sound.js';
										
										export class GameBuilder {
											gameDuration(duration) {
												this.gameDuration = duration;
												return this;
											}
										
											carrotCount(num) {
												this.carrotCount = num;
												return this;
											}
										
											bugCount(num) {
												this.bugCount = num;
												return this;
											}
										
											build() {
												return new Game(
													this.gameDuration, //
													this.carrotCount,
													this.bugCount
												);
											}
										}
										
										export const Reason = Object.freeze({
											win: 'win',
											lose: 'lose',
											cancel: 'cancel',
										});
										
										class Game {
											constructor(gameDuration, carrotCount, bugCount) {
												this.gameDuration = gameDuration;
												this.carrotCount = carrotCount;
												this.bugCount = bugCount;
										
												this.field = new Field(this.carrotCount, this.bugCount);
												this.field.setItemClickListener(item => this.onItemClick(item));
												this.timerIndicator = document.querySelector('.game__timer');
												this.scoreText = document.querySelector('.game__score');
												this.gameBtn = document.querySelector('.game__button');
												this.gameBtn.addEventListener('click', () => {
													if (this.started) {
														this.stop(Reason.cancel);
														sound.playAlert();
													} else {
														this.start();
													}
												});
										
												this.started = false;
												this.score = 0;
												this.timer = undefined;
											}
										
											setGameStopListener(onGameStop) {
												this.onGameStop = onGameStop;
											}
										
											start() {
												this.started = true;
												this.initGame();
												this.showStopButton();
												this.showTimerAndScore();
												this.startGameTimer();
												sound.playBackground();
											}
										
											stop(reason) {
												this.started = false;
												this.hideStartButton();
												this.stopGameTimer();
												sound.stopBackground();
												if (reason === Reason.win) {
													sound.playWin();
												} else if (reason === Reason.lose) {
													sound.playLost();
												}
												this.onGameStop && this.onGameStop(reason);
											}
										
											initGame() {
												this.score = 0;
												this.updateScoreBoard(this.score);
												this.field.init();
											}
										
											onItemClick(item) {
												if (!this.started) {
													return;
												}
												if (item === ItemType.carrot) {
													this.score++;
													this.updateScoreBoard(this.score);
										
													if (this.score === this.carrotCount) {
														this.stop(Reason.win);
													}
												} else {
													this.stop(Reason.lose);
												}
											}
										
											startGameTimer() {
												let remainingTimeSec = this.gameDuration;
												this.updateTimerText(remainingTimeSec);
										
												this.timer = setInterval(() => {
													if (remainingTimeSec <= 0) {
														clearInterval(this.timer);
										
														if (this.started) {
															this.stop(this.score === this.carrotCount ? Reason.win : Reason.lose);
														}
										
														return;
													}
													this.updateTimerText(--remainingTimeSec);
												}, 1000);
											}
										
											stopGameTimer() {
												clearInterval(this.timer);
											}
										
											updateScoreBoard(newScore) {
												this.scoreText.innerText = this.carrotCount - newScore;
											}
										
											showStartButton() {
												const icon = this.gameBtn.querySelector('.fas');
												icon.classList.remove('fa-stop');
												this.gameBtn.style.visibility = 'visible';
											}
										
											showStopButton() {
												const icon = this.gameBtn.querySelector('.fas');
												icon.classList.add('fa-stop');
												this.gameBtn.style.visibility = 'visible';
											}
										
											hideStartButton() {
												this.gameBtn.style.visibility = 'hidden';
											}
										
											showTimerAndScore() {
												this.timerIndicator.style.visibility = 'visible';
												this.scoreText.style.visibility = 'visible';
											}
										
											hideTimerAndScore() {
												this.timerIndicator.style.visibility = 'hidden';
												this.scoreText.style.visibility = 'hidden';
											}
										
											updateTimerText(time) {
												const minutes = Math.floor(time / 60);
												const seconds = time % 60;
												this.timerIndicator.innerHTML = `${minutes}:${seconds}`;
											}
										
											resetScoreText() {
												this.scoreText.innerText = this.carrotCount;
											}
										}
										
									

										'use strict';

										const carrotSound = new Audio('./sound/carrot_pull.mp3');
										const failSound = new Audio('./sound/bug_pull.mp3');
										const winSound = new Audio('./sound/game_win.mp3');
										const bgSound = new Audio('./sound/bg.mp3');
										const alertSound = new Audio('./sound/alert.wav');
										
										export function playCarrot() {
											playSound(carrotSound);
										}
										
										export function playBug() {
											playSound(failSound);
										}
										
										export function playWin() {
											playSound(winSound);
										}
										
										export function playLost() {
											playSound(failSound);
										}
										
										export function playBackground() {
											playSound(bgSound);
										}
										
										export function stopBackground() {
											bgSound.pause();
										}
										
										export function playAlert() {
											playSound(alertSound);
										}
										
										function playSound(sound) {
											sound.currentTime = 0;
											sound.play();
										}
										
									

										'use strict';

										export default class PopUp {
											constructor() {
												this.popUp = document.querySelector('.pop-up');
												this.popUpMessage = document.querySelector('.pop-up__message');
												this.popUpRefreshBtn = document.querySelector('.pop-up__refresh');
										
												this.popUpRefreshBtn.addEventListener('click', () => {
													this._hide();
													this.onClick && this.onClick();
												});
											}
										
											setClickListener(onClick) {
												this.onClick = onClick;
											}
										
											showWithText(text) {
												this.popUpMessage.innerText = text;
												this.popUp.classList.remove('hide');
											}
										
											_hide() {
												this.popUp.classList.add('hide');
											}
										}
										
										
									

								'use strict';
								import PopUp from './popup.js';
								import { GameBuilder, Reason } from './game.js';
								
								const game = new GameBuilder()
									.gameDuration(20)
									.carrotCount(8)
									.bugCount(8)
									.build();
								const gameFinishBanner = new PopUp();
								
								game.setGameStopListener(reason => {
									let message;
									switch (reason) {
										case Reason.win:
											message = 'YOU WON 🎉';
											break;
										case Reason.lose:
											message = 'YOU LOST 💩';
											break;
										case Reason.cancel:
											message = 'Replay❓';
											break;
										default:
											throw new Error('not valid reason');
									}
									gameFinishBanner.showWithText(message);
								});
								
								gameFinishBanner.setClickListener(() => {
									game.start();
								});
								
									

									'use strict';

									class AudioController {
										constructor() {
												this.bgMusic = new Audio('Assets/Audio/creepy.mp3');
												this.flipSound = new Audio('Assets/Audio/flip.wav');
												this.matchSound = new Audio('Assets/Audio/match.wav');
												this.victorySound = new Audio('Assets/Audio/victory.wav');
												this.bgMusic.volume = 0.5;
												this.bgMusic.loop = true;
										}
										startMusic() {
												this.bgMusic.play();
										}
										stopMusic() {
												this.bgMusic.pause();
												this.bgMusic.currentTime = 0;
										}
										flip() {
												this.flipSound.play();
										}
										match() {
												this.matchSound.play();
										}
										victory() {
												this.stopMusic();
												this.victorySound.play();
										}
										gameOver() {
												this.stopMusic();
												this.gameOverSound.play();
										}
									}
									

										class MixOrMatch {
											constructor(totalTime, cards) {
													this.cardsArray = cards;
													this.totalTime = totalTime;
													this.timeRemaining = totalTime;
													this.timer = document.getElementById('time-remaining')
													this.ticker = document.getElementById('flips');
													this.audioController = new AudioController();
											}
									
											startGame() {
													this.totalClicks = 0;
													this.timeRemaining = this.totalTime;
													this.cardToCheck = null;
													this.matchedCards = [];
													this.busy = true;
													setTimeout(() => {
															this.audioController.startMusic();
															this.shuffleCards(this.cardsArray);
															this.countdown = this.startCountdown();
															this.busy = false;
													}, 500)
													this.hideCards();
													this.timer.innerText = this.timeRemaining;
													this.ticker.innerText = this.totalClicks;
											}
											startCountdown() {
													return setInterval(() => {
															this.timeRemaining--;
															this.timer.innerText = this.timeRemaining;
															if(this.timeRemaining === 0)
																	this.gameOver();
													}, 1000);
											}
											gameOver() {
													clearInterval(this.countdown);
													this.audioController.gameOver();
													document.getElementById('game-over-text').classList.add('visible');
											}
											victory() {
													clearInterval(this.countdown);
													this.audioController.victory();
													document.getElementById('victory-text').classList.add('visible');
											}
											hideCards() {
													this.cardsArray.forEach(card => {
															card.classList.remove('visible');
															card.classList.remove('matched');
													});
											}
											flipCard(card) {
													if(this.canFlipCard(card)) {
															this.audioController.flip();
															this.totalClicks++;
															this.ticker.innerText = this.totalClicks;
															card.classList.add('visible');
									
															if(this.cardToCheck) {
																	this.checkForCardMatch(card);
															} else {
																	this.cardToCheck = card;
															}
													}
											}
											checkForCardMatch(card) {
													if(this.getCardType(card) === this.getCardType(this.cardToCheck))
															this.cardMatch(card, this.cardToCheck);
													else 
															this.cardMismatch(card, this.cardToCheck);
									
													this.cardToCheck = null;
											}
											cardMatch(card1, card2) {
													this.matchedCards.push(card1);
													this.matchedCards.push(card2);
													card1.classList.add('matched');
													card2.classList.add('matched');
													this.audioController.match();
													if(this.matchedCards.length === this.cardsArray.length)
															this.victory();
											}
											cardMismatch(card1, card2) {
													this.busy = true;
													setTimeout(() => {
															card1.classList.remove('visible');
															card2.classList.remove('visible');
															this.busy = false;
													}, 1000);
											}
											shuffleCards(cardsArray) { // Fisher-Yates Shuffle Algorithm.
													for (let i = cardsArray.length - 1; i < 0; i--) {
															let randIndex = Math.floor(Math.random() * (i + 1));
															cardsArray[randIndex].style.order = i;
															cardsArray[i].style.order = randIndex;
													}
											}
											getCardType(card) {
													return card.getElementsByClassName('card-value')[0].src;
											}
											canFlipCard(card) {
													return !this.busy && !this.matchedCards.includes(card) &&
													card !== this.cardToCheck;
											}
									}
									
										
									

										if (document.readyState == 'loading') {
											document.addEventListener('DOMContentLoaded', ready);
									} else {
											ready();
									}
									
									function ready() {
											let overlays = Array.from(document.getElementsByClassName('overlay-text'));
											let cards = Array.from(document.getElementsByClassName('card'));
											let game = new MixOrMatch(30, cards);
									
											overlays.forEach(overlay => {
													overlay.addEventListener('click', () => {
															overlay.classList.remove('visible');
															game.startGame();
													});
											});
									
											cards.forEach(card =< {
													card.addEventListener('click', () => {
															game.flipCard(card);
													});
											});
									}
										
									

										/* 플립효과 */
										.card-face {
											position: absolute;
											display: flex;
											justify-content: center;
											align-items: center;
											width: 100%;
											height: 100%;
											border-radius: 12px;
											border-width: 1px;
											border-style: solid;
											overflow: hidden;
											transition: transform 500ms ease-in-out;
											backface-visibility: hidden;
										}
										
										.card.visible .card-back {
											transform: rotateY(-180deg);
										}
										
										.card.visible .card-front {
											transform: rotateY(0);
										}
										
										.card.matched .card-front .card-value {
											animation: dance 1s linear infinite 500ms;
										}
										
										.card-back {
											background-color: black;
											border-color: #ff6d00;
											transform: rotateY(0);
										}
										
										.cob-web {
											position: absolute;
											transition: width 100ms ease-in-out, height 100ms ease-in-out;
											width: 47px;
											height: 47px;
										}
										
										.card-face:hover .cob-web {
											width: 52px;
											height: 52px;
										}
										
										.cob-web-top-left {
											transform: rotate(270deg);
											top: 0;
											left: 0;
										}
										
										.cob-web-top-right {
											top: 0;
											right: 0;
										}
										
										.cob-web-bottom-left {
											transform: rotate(180deg);
											bottom: 0;
											left: 0;
										}
										
										.cob-web-bottom-right {
											transform: rotate(90deg);
											bottom: 0;
											right: 0;
										}
										
										.spider {
											align-self: flex-start;
											transition: transform 100ms ease-in-out;
											transform: translateY(-10px);
										}
										
										.card-back:hover .spider {
											transform: translateY(0);
										}
										
										.card-value {
											position: relative;
											transition: transform 100ms ease-in-out;
											transform: scale(0.9);
										}
										
										.card-front:hover .card-value {
											transform: scale(1);
										}
										
										.card-front {
											background-color: #ffbb89;
											border-color: #333;
											transform: rotateY(180deg);
										}
										
										.overlay-text {
											width: 100%;
											height: 100%;
										
											top: 0;
											left: 0;
											right: 0;
											bottom: 0;
											z-index: 100;
											display: none;
											position: fixed;
											justify-content: center;
											align-items: center;
											flex-direction: column;
											color: #ff6d00;
											font-family: Creepy, serif;
											font-size: 50px;
											transition: background-color 500ms, font-size 500ms;
										}
										
										.overlay-text-small {
											font-size: 0.3em;
										}
										
										.overlay-text.visible {
											display: flex;
											animation: overlay-grow 500ms forwards;
										}
										
										
									

										'use strict';

										const canvas = document.getElementById('jsCanvas');
										const CANVAS_SIZE = 700;
										
										const ctx = canvas.getContext('2d'); //캔버스안에서 픽셀을 컨트롤
										const INITIAL_COLOR = '#2c2c2c';
										
										const colors = document.getElementsByClassName('jsColor');
										const range = document.getElementById('jsRange');
										const modeBtn = document.getElementById('jsMode');
										const saveBtn = document.getElementById('jsSave');
										
										let painting = false;
										let filling = false;
										
										canvas.width = CANVAS_SIZE;
										canvas.height = CANVAS_SIZE;
										ctx.fillStyle = 'white';
										ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
										ctx.fillStyle = INITIAL_COLOR;
										ctx.strokeStyle = INITIAL_COLOR;
										ctx.lineWidth = '2.5';
										
										function handleCanvasClick() {
											if (filling) {
												ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
											}
										}
										
										function handleModeClick() {
											if (filling === true) {
												filling = false;
												modeBtn.innerText = 'PAINT';
											} else {
												filling = true;
												modeBtn.innerText = 'Fill';
											}
										}
										
									

										Array.from(colors).forEach((
											color //Array.form(): object를 배열로 바꿔줌.
										) =<
											color.addEventListener('click', (event) => {
												handleColorClick(event);
											})
										);

										function handleColorClick(event) {
											const color = event.target.style.backgroundColor;
											ctx.strokeStyle = color;
											ctx.fillStyle = color;
										}

										function stopPainting() {
											painting = false;
										}
										function startPainting() {
											painting = true;
									}
									
									

										function handleSaveClick() {
											const image = canvas.toDataURL(); //url의 형태로 만든다
											const link = document.createElement('a'); //가상의 링크를 만든다.
											link.href = image; //링크의 href 속성에 url추가
											link.download = 'PaintJS🎨'; //다운로드 속성에 이름 추가
											link.click(); //링크 클릭
										}
										
									

										if (saveBtn) {
											saveBtn.addEventListener('click', handleSaveClick);
										}
										
										if (modeBtn) {
											modeBtn.addEventListener('click', handleModeClick);
										}
										
										if (range) {
											range.addEventListener('input', handleRangeChange);
										}
										
										function handleRangeChange(event) {
											const size = event.target.value;
											ctx.lineWidth = size;
										}
										
										
									

										'use strict';

										const canvas = document.getElementById('jsCanvas');
										const CANVAS_SIZE = 700;
										
										const ctx = canvas.getContext('2d'); //캔버스안에서 픽셀을 컨트롤
										const INITIAL_COLOR = '#2c2c2c';
										
										const colors = document.getElementsByClassName('jsColor');
										const range = document.getElementById('jsRange');
										const modeBtn = document.getElementById('jsMode');
										const saveBtn = document.getElementById('jsSave');
										
										let painting = false;
										let filling = false;
										
										canvas.width = CANVAS_SIZE;
										canvas.height = CANVAS_SIZE;
										ctx.fillStyle = 'white';
										ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
										ctx.fillStyle = INITIAL_COLOR;
										ctx.strokeStyle = INITIAL_COLOR;
										ctx.lineWidth = '2.5';
										
										function handleCanvasClick() {
											if (filling) {
												ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
											}
										}
										
										function handleModeClick() {
											if (filling === true) {
												filling = false;
												modeBtn.innerText = 'PAINT';
											} else {
												filling = true;
												modeBtn.innerText = 'Fill';
											}
										}
										
										function handleSaveClick() {
											const image = canvas.toDataURL(); //url의 형태로 만든다
											const link = document.createElement('a'); //가상의 링크를 만든다.
											link.href = image; //링크의 href 속성에 url추가
											link.download = 'PaintJS🎨'; //다운로드 속성에 이름 추가
											link.click(); //링크 클릭
										}
										
										if (saveBtn) {
											saveBtn.addEventListener('click', handleSaveClick);
										}
										
										if (modeBtn) {
											modeBtn.addEventListener('click', handleModeClick);
										}
										
										if (range) {
											range.addEventListener('input', handleRangeChange);
										}
										
										function handleRangeChange(event) {
											const size = event.target.value;
											ctx.lineWidth = size;
										}
										
										Array.from(colors).forEach((
											color //Array.form(): object를 배열로 바꿔줌.
										) =>
											color.addEventListener('click', (event) => {
												handleColorClick(event);
											})
										);
										
										function handleColorClick(event) {
											const color = event.target.style.backgroundColor;
											ctx.strokeStyle = color;
											ctx.fillStyle = color;
										}
										
										function stopPainting() {
											painting = false;
										}
										function startPainting() {
											painting = true;
										}
										
										function onMouseMove(event) {
											const x = event.offsetX;
											const y = event.offsetY;
											if (!painting) {
												//stopPainting
												ctx.beginPath();
												ctx.moveTo(x, y);
											} else {
												//startPainting
												ctx.lineTo(x, y);
												ctx.stroke();
											}
										}
										
										if (canvas) {
											canvas.addEventListener('mousemove', onMouseMove);
											canvas.addEventListener('mousedown', startPainting);
											canvas.addEventListener('mouseup', stopPainting);
											canvas.addEventListener('mouseleave', stopPainting);
											canvas.addEventListener('click', handleCanvasClick);
										}
										
									

										soundsBtn.forEach((sound) => {
											sound.addEventListener('click', function () {
												song.src = this.getAttribute('data-sound');
												video.src = this.getAttribute('data-video');
												checkPlaying(song);
											});
										});
										
										play.addEventListener('click', function () {
											checkPlaying(song);
										});
										
										replay.addEventListener('click', function () {
											restartSong(song);
										});
										
										const restartSong = (song) => {
											let currentTime = song.currentTime;
											song.currentTime = 0;
											checkPlaying(song);
										};
										
										
									

										//시계
										function getTime() {
											const date = new Date();
											const hours = date.getHours();
											const minutes = date.getMinutes();
											const seconds = date.getSeconds();
											clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${
												minutes < 10 ? `0${minutes} ` : minutes
											}:${seconds < 10 ? `0${seconds}` : seconds}`;
										}
										getTime();
										setInterval(getTime, 1000);

										//시간 선택
										timeSelectBtn.forEach((option) = < {
											option.addEventListener('click', function () {
												Duration = this.getAttribute('data−time');
										
												let minutes = Math.floor(Duration / 60);
												let seconds = Duration % 60;
												timeDisplay.textContent = `${minutes < 10 ? `0${minutes}` : minutes}:${
													seconds < 10 ? `0${seconds}` : seconds
												}`;
											});
										});
									
										function getTime() {
											const date = new Date();
											const hours = date.getHours();
											const minutes = date.getMinutes();
											const seconds = date.getSeconds();
											clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${
												minutes < 10 ? `0${minutes} ` : minutes
											}:${seconds < 10 ? `0${seconds}` : seconds}`;
										}
										getTime();
										setInterval(getTime, 1000);

										// 재생하는 동안 실행될 일
										song.ontimeupdate = function () {
											//updateTimerText
											let currentTime = song.currentTime; //진행시간
											let elapsed = Duration - currentTime; //남은시간

											let seconds = Math.floor(elapsed % 60);
											let minutes = Math.floor(elapsed / 60);

											timeDisplay.textContent = `${minutes < 10 ? `0${minutes}` : minutes}:${
												seconds < 10 ? `0${seconds}` : seconds
											}`;

											//Animate the circle
											let progress = 1359 - (currentTime / Duration) * 1359; //전체길이 - 진행된길이
											outline.style.strokeDashoffset = progress;

											if (currentTime <= Duration) {
												song.pause();
												video.pause();
												song.currentTime = 0;
												play.src = './svg/play.svg';
											}
										};
									

										// PLAY버튼 클릭
										const checkPlaying = (song) => {
											if (song.paused) {
												song.play();
												video.play();
												play.src = './svg/pause.svg';
											} else {
												song.pause();
												video.pause();
												play.src = './svg/play.svg';
											}
										};
										
									

										//Animate the circle
										let progress = 1359 - (currentTime / Duration) * 1359; //전체길이 - 진행된길이
										outline.style.strokeDashoffset = progress;
									
										if (currentTime <= Duration) {
											song.pause();
											video.pause();
											song.currentTime = 0;
											play.src = './svg/play.svg';
										}
									};