
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
let $paper;


game()
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
function game(){
	//gameIntro()
	gameEvents()
	
	startGame()
}


// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function gameIntro(){
	let rnd = 1 + Math.floor(Math.random() * 3);
	$('.intro-pic-1').attr('src', `img/intro-${rnd}.png`)
	setTimeout(r=>{
		$('.intro-pic-1').css('opacity', 1)
	}, 300)
	
}
// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function startGame(){

	createInfographic()

	//actusSlider('#actus-slider');
	
}
// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function createInfographic(){

	$paper = $('#info .paper')
	$('.prompt-1').fadeIn(1500)
	
}
// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function dragNdrop(){

	$('.word').pep({
		droppable : '#info .node.empty',
		activeClass : 'dragged',
		droppableActiveClass : 'hovered',
		initiate : function(){
			let firstTop = $(this.el).css('top')
			let firstLeft = $(this.el).css('left') || '0px'
			//let firstTop = $(this.el).offset().top
			//let firstLeft = $(this.el).offset().left || '0px'
			if ( ! $(this.el).attr('data-top') ) {
				$(this.el).attr('data-top', firstTop)
				$(this.el).attr('data-left', firstLeft)
			}

			
			//$(this.el).css('left', $(this.el).offset().left)
			//$(this.el).css('top', $(this.el).offset().top)

		},
		start : function(){ 
			let offL = $(this.el).offset().left
			let offT = $(this.el).offset().top - 96

			$(this.el).css({
				'left': offL,
				'top': offT,
				'z-index': 39,
			}).removeClass('fixed')
				.appendTo('#game')
			$hovered = this.activeDropRegions[0] || false
			
			let firstTop = $(this.el).attr('data-top')
			let firstLeft = $(this.el).attr('data-left')
			let thisTop  = $(this.el).css('top')
			let thisLeft  = $(this.el).css('left')
			if ( firstTop != thisTop ){
				//$(this.el).css('top', firstTop)
			}
			if ( firstLeft != thisLeft ){
				//$(this.el).css('left', firstLeft)
			}
			
			
			let socket = $(this.el).attr('data-socket')
			$(`#info .node[data-idx="${socket}"]`)
				.removeClass('full')
				.addClass('empty');
			$(this.el).attr('data-socket', null)
				
		},
		stop  : function(){
			$(this.el).removeClass('dragged')

			$hovered = this.activeDropRegions[0] || false
			$(this.el)
				.attr('data-socket', null)
				.removeClass('fixed')

			if ( $hovered ){
				let socket = $hovered.attr('data-idx')
				fixWordToSocket( $(this.el), socket)

			} else {
				$(this.el).appendTo('#words')
				$(this.el).css('top', $(this.el).attr('data-top'))
				$(this.el).css('left', $(this.el).attr('data-left'))
				$(this.el).css('transform', 'unset')
			}
			$('#info .node').removeClass('hovered')
			
		},
	})
}

// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function successA(){
	$('#game').addClass('stage-b')
	$('#words').css('right', '-26%')
	$('#intro').html('ΣΥΓΧΑΡΗΤΗΡΙΑ! Ο εννοιολογικός χάρτης που σχημάτισες σου προσφέρει μια εικόνα της περίπλοκης οργάνωσης της οθωμανικής κοινωνίας.<br>').fadeIn(500)
	$('<button>').html('OK').appendTo('#intro')
		.click(function(){
			$('#intro').fadeOut(500);
		})
}
// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function svgLine( line, i ){
	let id = 'ar-'+i
	let H = ``
	let refX = 40
	let size = 30
	if ( $(window).width() < 640 ) { refX = 30; size = 15; }
	if ( $(window).width() < 480 ) { refX = 25; size = 10; }
	if ( line[2] === true )
		H += `
		<defs>
		  <marker id="${id}" markerWidth="${size}" markerHeight="${size}" refx="${refX}" refy="6" orient="auto" >
			  <path d="M2,1 L2,10 L10,6 L2,2" />
		  </marker>
		</defs>
		`

	H += `
  	<polyline
		vector-effect="non-scaling-stroke"
    	points="0,0 50,50 100,100"
		style="fill: none;
		marker-end: url(#${id});" />
	`
	let H2 = `
	<line x1="0" y1="0" x2="100" y2="0"
		absoluteStrokeWidth="true"
		vector-effect="non-scaling-stroke"
		markerUnits="strokeWidth"
		style="fill: none;
		marker-end: url(#${id});" />
    `
	
	let $svg = $('<svg class="svg-line" viewBox="0 0 100 100">')
		//.attr('preserveAspectRatio', 'none')
		.html( H )
					  
	return $svg			  
}









// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function act_shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
	return array
}
// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function gameEvents(){
	
	// START
	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	$('button.start').click(function(){
		$('#intro').fadeOut(500)
		$('.intro-pic-1').css('opacity', 0)
		setTimeout(r=>{
			$('.intro-pic-1').hide()
			startGame()
		}, 1000)
	})
	
	
	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	$('main').click(function(e){
		let scene = parseInt( $('#game').attr('data-scene') )
		scene++
		$('#game').attr('data-scene', scene)
		
		$(`.node-${scene-2}`).addClass('out2')
		$(`.node-${scene-1}`).addClass('out')
		$(`.node-${scene}`).addClass('on')
		
		let LL = 0;
		let TT = 45;
		if ( scene == 1) { LL =  0; TT = -30; }
		if ( scene == 2) { LL =  0; TT = -90; }
		if ( scene == 3) { LL =  0; TT = -140; }
		if ( scene == 4) { LL = -40; TT = -140; }
		if ( scene == 5) { LL = 40; TT = -140; }
		
		if ( $(window).width() <= 800 ) {
			if ( scene == 1) { TT = -75; }
			if ( scene == 2) { TT = -155; }
			if ( scene == 3) { TT = -240; }
			if ( scene == 4) { TT = -320; }
			if ( scene == 5) { TT = -400; }
		}
		if ( $(window).width() <= 640 ) {
			if ( scene == 1) { TT = -135; }
			if ( scene == 2) { TT = -245; }
			if ( scene == 3) { TT = -355; }
			if ( scene == 4) { TT = -470; }
			if ( scene == 5) { TT = -575; }
		}
		if ( $(window).width() <= 480 ) {
			if ( scene == 1) { TT = -200; }
			if ( scene == 2) { TT = -365; }
			if ( scene == 3) { TT = -530; }
			if ( scene == 4) { TT = -690; }
			if ( scene == 5) { TT = -840; }
		}
		
		
		$('#info').css('transform',
					   `translate3d(${LL}vw,${TT}vw,0vw)`)
		
		
		if ( scene == 6) {
			LL = 0; TT = -80;
			if ( $(window).width() <= 800 ) TT = -200;
			$('#info').css('transform',
						   `translate3d(0vw,${TT}vw,0vw) scale(0.6)`)
			
			setTimeout(r=>{
				$('.outro').addClass('on')
			}, 3000)
			
			setTimeout(r=>{
				TT = -30;
				if ( $(window).width() <= 800 ) TT = -50;
				$('#info').css('transform',
						`translate3d(0vw,${TT}vw,0vw) scale(0.6)`)
					  .css('transition', '12s all')
			}, 2000)
			
			/*
			setTimeout(r=>{
				TT = 45;
				if ( $(window).width() <= 800 ) TT = 35;
				$('#info')
						.css('transform',
						`translate3d(0vw,${TT}vw,0vw) scale(1)`)
					  .css('transition', '2s all')
				$('#game').attr('data-scene', 0)
				$('.prompt-1').fadeIn(1500)
			}, 8000)
			*/
		}
		
		
		
		if ( scene > 6) {
			
			$('.outro').removeClass('on')
			TT = 45;
			if ( $(window).width() <= 800 ) TT = 35;
			$('#info')
					.css('transform',
					`translate3d(0vw,${TT}vw,0vw) scale(1)`)
				  .css('transition', '2s all')
			$('#game').attr('data-scene', 0)
			$('.prompt-1').fadeIn(1500)
			scene=0;
			return;
		}
		
		
		
		setTimeout(r=>{ $('.drag-prompt').fadeOut(1500) })
		setTimeout(r=>{ $('.prompt-'+(scene+1)).fadeIn(1500) }, 2000)
		
	})

	
}
// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function paperDrag(){
	
	
	// DRAG INFOGRAPHIC
	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	let infoL = 40;
	let infoT = -30;
	
	if ( $(window).width() <= 800 ) infoT = -25;
	
	let L1,T1,L2,T2;
	$('main').mousedown(function(e){
		L1 = e.pageX
		T1 = e.pageY
	})
	$('main').mouseup(function(e){
		
		let limitL = -50
		let limitR = 50
		if ( $(window).width() < 800 ) {
			limitL = -50
			limitR = 50
		}
		
		L2 = e.pageX
		T2 = e.pageY
		let offsX = (L2 - L1) / 10;
		let offsY = (T2 - T1) / 10;
		infoL += offsX
		infoT += offsY
		if ( infoL < limitL ) infoL = limitL
		if ( infoL > limitR )  infoL = limitR
		if ( infoT > 50 )   infoT = 50
		if ( infoT < -260 ) infoT = -260
console.log('---', infoL, infoT)
		
		$('#info').css('transform', `translate3d(${infoL.toFixed(2)}vw,${infoT.toFixed(2)}vw,0vw)`)
		
	})
	
}
