
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
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(){

	$('.column .photo1').click(function(){
		$('.pic-1').addClass('on')
	})
	$('.column .photo2').click(function(){
		$('.pic-2').addClass('on')
	})
	$('.photo').click(function(){
		$(this).removeClass('on')
	})

	
	if ( $(window).width() >= 480 ) desktopFlow();
	else mobileFlow();
}



function mobileFlow(){

	let time = 0
	$('.title').addClass('in')

	time += 6
	setTimeout(() => {
		$('.title').addClass('out')
		$('.text-1').addClass('in')
	}, time * 1000);

	time += 10
	setTimeout(() => {
		$('.text-1').addClass('out')
		$('.columns-A .col-1').addClass('in')
	}, time * 1000);

	time += 12
	setTimeout(() => {
		$('.columns-A .col-1').addClass('in2')
		$('.columns-A .col-2').addClass('in')
		$('.title').addClass('off')
		$('.text-1').addClass('off')
	}, time * 1000);

	time += 12
	setTimeout(() => {
		$('.columns-A .col-2').addClass('in2')
		$('.columns-A .col-3').addClass('in')
	}, time * 1000);



	time += 10
	setTimeout(() => {
		$('.columns-A .col-3').addClass('in2')
		$('.columns-A .col-1').addClass('step2')
	}, time * 1000);
	time += 2
	setTimeout(() => { $('.columns-A .col-2').addClass('step2') }, time * 1000);
	time += 2
	setTimeout(() => {
		$('.columns-A .col-3').addClass('step2')
		$('#game').attr('data-scene', 1)
	}, time * 1000);
	
	setTimeout(() => {
		for (n=1; n<=6; n++) {
			setTimeout((nn) => { 
				$('.columns-B .col-'+nn).addClass('in') 
			}, n * 400, n);
		}
		$('.text-2').addClass('in')
	}, time * 1000);




}
// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅

function desktopFlow(){

	let time = 0
	$('.title').addClass('in')

	time += 6
	setTimeout(() => {
		$('.title').addClass('out')
		$('.text-1').addClass('in')
	}, time * 1000);

	time += 10
	setTimeout(() => {
		$('.text-1').addClass('out')
		$('.columns-A .col-1').addClass('in')
	}, time * 1000);

	time += 10
	setTimeout(() => {
		$('.columns-A .col-2').addClass('in')
		$('.title').addClass('off')
		$('.text-1').addClass('off')
	}, time * 1000);

	time += 10
	setTimeout(() => {
		$('.columns-A .col-3').addClass('in')
	}, time * 1000);



	time += 8
	setTimeout(() => { $('.columns-A .col-1').addClass('step2') }, time * 1000);
	time += 2
	setTimeout(() => { $('.columns-A .col-2').addClass('step2') }, time * 1000);
	time += 2
	setTimeout(() => {
		$('.columns-A .col-3').addClass('step2')
		$('#game').attr('data-scene', 1)
	}, time * 1000);
	
	setTimeout(() => {
		for (n=1; n<=6; n++) {
			setTimeout((nn) => { 
				$('.columns-B .col-'+nn).addClass('in') 
			}, n * 400, n);
		}
		$('.text-2').addClass('in')
	}, time * 1000);




}
// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function createInfographic(){

	$paper = $('#info .paper')
	$('.prompt-1').fadeIn(1500)
	
}

// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
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 gameEvents(){
	
	// START
	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	$('button.start').click(function(){
		$('#intro').fadeOut(500)
		$('.intro-pic-1').css('opacity', 0)
		setTimeout(r=>{
			$('.intro-pic-1').hide()
			startGame()
		}, 1000)
	})
	
	
	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	$('Xmain').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 = -70;
		if ( scene == 1) { LL =  0; TT = -140; }
		if ( scene == 2) { LL =  0; TT = -200; }
		if ( scene == 3) { LL =  0; TT = -260; }
		
		if ( $(window).width() <= 1024 ) {
			if ( scene == 1) { TT = -160; }
			if ( scene == 2) { TT = -240; }
			if ( scene == 3) { TT = -330; }
		}
		if ( $(window).width() <= 800 ) {
			if ( scene == 1) { TT = -190; }
			if ( scene == 2) { TT = -310; }
			if ( scene == 3) { TT = -435; }
		}
		if ( $(window).width() <= 640 ) {
			if ( scene == 1) { TT = -230; }
			if ( scene == 2) { TT = -390; }
			if ( scene == 3) { TT = -550; }
		}
		if ( $(window).width() <= 480 ) {
			if ( scene == 1) { TT = -250; }
			if ( scene == 2) { TT = -415; }
			if ( scene == 3) { TT = -580; }
		}
		
		$('#info').css('transition', `3s all`)
		$('#info').css('transform',
					   `translate3d(${LL}vw,${TT}vw,0vw)`)
		
		

		if ( scene == 3) { $('.prompt-3').hide() }



		
		
		if ( scene > 3) {
			
			$('.node').removeClass('on')
			$('.outro').removeClass('on')
			TT = -250;
			//if ( $(window).width() <= 800 ) TT = 20;

			$('#game').attr('data-scene', 0)
			
			setTimeout(r=>{
				$('.prompt-1').fadeIn(1500)
			}, 2500)

			scene=0;
			return;
		}
		

		$('body').trigger('h-scene', [scene])
		
		
		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)`)
		
	})
	
}



$('body').on('h-scene', function(e, scene){
	console.log('SCENE', scene)

})






