<template>
	
	<!-- Start Header/Navigation -->
    <HomeButton />
    <!-- End Header/Navigation -->

	<div class="reveal" ref="revealRef">
      <div class="slides">
  
  
  
<section>
	<!-- <p class="pb-5 mb-5"> -->
		<h1>💻 엔트리 왕초보</h1>
	<!-- </p> -->
	
	<table class="table caption-top table-borderless table-responsive card-1 p-4">
		<caption>(1~3학년) 엔트리를 처음 접해보는 학생</caption>
  <thead>
    <tr class="border-bottom">
      <th>
          <span class="ml-2"># 주차</span>
      </th>
      <th>
          <span class="ml-2">주제</span>
      </th>
      <th>
          <span class="ml-4">Action</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">1주차</span>
				<small>~월 ~일 ~시</small>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">엔트리 들어가기</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">엔트리 소개</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">통통통 - 회전방식</span>
        	</div>
			<div class="p-2">
				<span class="font-weight-bold">통통통 - 이동방향</span>
			</div>
		</td>
		<td>
			<div class="p-2 icons">
				<!-- <i class="fa fa-phone text-danger"></i>
				<i class="fa fa-adjust text-danger"></i> -->
				<i class="fa fa-share" @click="goSlide(2-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(3-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(4-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(5-1)"></i>
			</div>
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">2주차</span>
				<small>~월 ~일 ~시</small>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">흔들흔들</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">주사위 굴리기</span>
        	</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(6-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(7-1)"></i>
			</div>
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">3주차</span>
				<small>~월 ~일 ~시</small>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">도장 꽝!</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">신호등</span>
        	</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(8-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(9-1)"></i>
			</div>
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">4주차</span>
				<small>~월 ~일 ~시</small>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">가로세로</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">데굴데굴</span>
        	</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(10-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(11-1)"></i>
			</div>
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">5주차</span>
				<small>~월 ~일 ~시</small>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">이야기 만들기</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">피아노치기</span>
        	</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(12-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(13-1)"></i>
			</div>
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">6주차</span>
				<small>~월 ~일 ~시</small>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">꿀꿀꿀</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">그대로 멈춰라</span>
        	</div>
			<div class="p-2">
				<span class="font-weight-bold">부록</span>
        	</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(14-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(15-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(16-1)"></i>
			</div>
		</td>
	</tr>

  </tbody>
</table>

</section>
<section>
	<section>
		<h2>0. 엔트리 들어가기 </h2>
		<img src="/pure/EntryKingBasic/intro_01.PNG" height="500px"/>
	</section>
	<section>
		<img src="/pure/EntryKingBasic/intro_02.PNG" height="500px"/>
	</section>
	<section>
		<img src="/pure/EntryKingBasic/intro_03.PNG" height="500px"/>
	</section>
	
</section>
<section>
	<h2>0. 엔트리 소개 </h2>
	<p>
		<video controls>
		<source src="/pure/EntryKingBasic/왕초보_0_기본조작.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<section>
	<h2>1-1. 통통통 - 회전방식 <a href="https://naver.me/5chMKZPs" target="_blank"><i class="fa-solid fa-file-code"></i></a></h2>
	<p>
		<iframe id="iframe1" width="940" height="620" frameborder="0"></iframe>
	</p>
	</section>
	<section>
	<p>
		<video controls>
		<source src="/pure/EntryKingBasic/왕초보_1_1_회전방식.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
	</section>
</section>
<section>
	<section>
	<h2>1-2. 통통통 - 이동방향 <a href="https://naver.me/GQ1dSgNe" target="_blank"><i class="fa-solid fa-file-code"></i></a></h2>
	<p>
		<iframe id="iframe2" width="940" height="620" frameborder="0"></iframe>
	</p>
	</section>
	<section>
	<p>
		<video controls>
		<source src="/pure/EntryKingBasic/왕초보_1_2_이동방향.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
	</section>
</section>
<section>
	<section>
	<h2>2-1. 흔들흔들 <a href="https://naver.me/5gFlY1EB" target="_blank"><i class="fa-solid fa-file-code"></i></a></h2>
	<p>
		<iframe id="iframe3" width="940" height="620" frameborder="0"></iframe>
	</p>
	</section>
	<section>
	<p>
		<video controls>
		<source src="/pure/EntryKingBasic/왕초보_2_1_흔들흔들.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
	</section>
</section>

<section>
	<section>
	<h2>2-2. 주사위 굴리기 <a href="https://naver.me/xZVLjpkN" target="_blank"><i class="fa-solid fa-file-code"></i></a></h2>
	<p>
		<iframe id="iframe4" width="940" height="620" frameborder="0"></iframe>
	</p>
	</section>
	<section>
	<p>
		<video controls>
		<source src="/pure/EntryKingBasic/왕초보_2_2_주사위굴리기.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
		<h4>오늘 배운 내용으로 퀴즈도 풀어보아요!</h4>
	</p>
	</section>
</section>

<section>
	<section>
	<h2>3-1. 도장 꽝! <a href="https://naver.me/53lhQ862" target="_blank"><i class="fa-solid fa-file-code"></i></a></h2>
	<p>
		<iframe id="iframe5" width="940" height="620" frameborder="0"></iframe>
	</p>
	</section>
	<section>
		<div class="row">
			<div class="col">
				<video controls>
				<source src="/pure/EntryKingBasic/왕초보_3_1_도장꽝1.mp4" type="video/mp4">
				<strong>Your browser does not support the video tag.</strong>
				</video>
			</div>
			<div class="col">
				<video controls>
				<source src="/pure/EntryKingBasic/왕초보_3_1_도장꽝2.mp4" type="video/mp4">
				<strong>Your browser does not support the video tag.</strong>
				</video>
			</div>
		</div>
	</section>
</section>

<section>
	<h2>3-2. 신호등 <a href="https://naver.me/GpColR3L" target="_blank"><i class="fa-solid fa-file-code"></i></a></h2>
	<p>
		<iframe id="iframe6" width="940" height="620" frameborder="0"></iframe>
	</p>
</section>

<section>
	<section>
		<h2>4-1. 가로세로</h2>
		<img src="/pure/EntryBasic/grid.png" width="960"/>
	</section>
	<section>
		<h2>4-1. 가로세로 <a href="https://naver.me/5RhzoY6G" target="_blank"><i class="fa-solid fa-file-code"></i></a></h2>
		<iframe id="iframe7" width="940" height="620" frameborder="0"></iframe>		
	</section>
</section>

<section>
	<h2>4-2. 데굴데굴 <a href="https://naver.me/5k7cxSDY" target="_blank"><i class="fa-solid fa-file-code"></i></a></h2>
	<p>
		<iframe id="iframe8" width="940" height="620" frameborder="0"></iframe>
		<h4>오늘 배운 내용으로 퀴즈도 풀어보아요!</h4>
	</p>
</section>

<section>
	<section>
	<h2>5-1. 이야기 만들기 <a href="https://naver.me/5l7c8O3h" target="_blank"><i class="fa-solid fa-file-code"></i></a></h2>
	<p>
		<iframe id="iframe9" width="940" height="620" frameborder="0"></iframe>
	</p>
	</section>
	<section>
	<p>
		<video controls>
		<source src="/pure/EntryKingBasic/왕초보_5_1_이야기.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
	</section>
</section>

<section>
	<section>
	<h2>5-2. 피아노치기 <a href="https://naver.me/FZ2w8AHv" target="_blank"><i class="fa-solid fa-file-code"></i></a></h2>
	<p>
		<iframe id="iframe10" width="940" height="620" frameborder="0"></iframe>
	</p>
	</section>
	<section>
	<p>
		<video controls>
		<source src="/pure/EntryKingBasic/왕초보_5_2_피아노.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
	</section>
</section>

<section>
	<section>
	<h2>6-1. 꿀꿀꿀 <a href="https://naver.me/xCByj3db" target="_blank"><i class="fa-solid fa-file-code"></i></a></h2>
	<p>
		<iframe id="iframe11" width="940" height="620" frameborder="0"></iframe>
	</p>
	</section>
	<section>
	<p>
		<video controls>
		<source src="/pure/EntryKingBasic/왕초보_6_1_꿀꿀꿀.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
	</section>
</section>
<section>
	<section>
	<h2>6-2. 그대로 멈춰라 <a href="https://naver.me/FTXvUD47" target="_blank"><i class="fa-solid fa-file-code"></i></a></h2>
	<p>
		<iframe id="iframe12" width="940" height="620" frameborder="0"></iframe>
	</p>
	</section>
	<section>
	<p>
		<video controls>
		<source src="/pure/EntryKingBasic/왕초보_6_2_멈춰라.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
	</section>
</section>

<section>
	<h2>부록</h2><br><br>
	<p>
		<h3>스도쿠사이트 <a href="https://sudoku.com/ko/swium/" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	</p><br>
	<p>
		<h3>6*6스도쿠 <a href="http://www.sudoku99.co.kr/sudoku6x6/" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	</p><br>
	<p>
		<h3>수학규칙찾기 <a href="https://m.blog.naver.com/yangskim2000/220506137860" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	</p>
</section>

<section>
	<h1 id="toc_30">👏🏽</h1>
	<h2 id="수고하셨어요-o">수고하셨어요 ^o^</h2>
</section>


</div>
</div>


</template>


<script>
import HomeButton from "@/components/HomeButton.vue";

import Reveal from "reveal.js/dist/reveal.js";
import "reveal.js/dist/reveal.css";
import initializeReveal from "@/assets/js/revealSetup.js";

export default {
	components: {
		HomeButton: HomeButton,
	},
	data() {
		return {
			
		};
	},
	methods: {
		goSlide(number) {
			if (this.deck) {
				this.deck.slide(number);
			} else {
				console.error("Reveal 인스턴스가 초기화되지 않았습니다.");
			}
		},
	},
  	mounted() {
		// ✅ 3. ref로 지정한 DOM 엘리먼트를 넘겨주고, 인스턴스를 this.deck에 저장합니다.
        this.deck = initializeReveal(this.$refs.revealRef, false);

		// ✅ 4. 전역 Reveal.addEventListener 대신 인스턴스의 on 메서드 사용
        this.deck.on('slidechanged', (event) => {
			console.log("Slide is now " + event.indexh + " " + event.indexv);
			if(event.indexh == 3 && event.indexv == 0){
				document.getElementById('iframe1').src = "https://playentry.org/iframe/678b8b81ea48ba92aaef903b";
			}
			if(event.indexh == 4 && event.indexv == 0){
				document.getElementById('iframe2').src = "https://playentry.org/iframe/678cc478dfa33c1a6c77bee5";
			}
			if(event.indexh == 5 && event.indexv == 0){
				document.getElementById('iframe3').src = "https://playentry.org/iframe/678cca65ea48ba92aa499763";
			}
			if(event.indexh == 6 && event.indexv == 0){
				document.getElementById('iframe4').src = "https://playentry.org/iframe/678ccd57d946ffa63a5403ec";
			}
			if(event.indexh == 7 && event.indexv == 0){
				document.getElementById('iframe5').src = "https://playentry.org/iframe/678b8fbfccf1ebf11689a6a1";
			}
			if(event.indexh == 8 && event.indexv == 0){
				document.getElementById('iframe6').src = "https://playentry.org/iframe/678ccffd133715065e98de2b";
			}
			if(event.indexh == 9 && event.indexv == 1){
				document.getElementById('iframe7').src = "https://playentry.org/iframe/678b91b9dfa33c1a6c28e061";
			}
			if(event.indexh == 10 && event.indexv == 0){
				document.getElementById('iframe8').src = "https://playentry.org/iframe/678cd21eea48ba92aa4bde42";
			}
			if(event.indexh == 11 && event.indexv == 0){
				document.getElementById('iframe9').src = "https://playentry.org/iframe/678b9637d946ffa63a04d0a7";
			}
			if(event.indexh == 12 && event.indexv == 0){
				document.getElementById('iframe10').src = "https://playentry.org/iframe/678cd7aaea48ba92aa4ec4c5";
			}
			if(event.indexh == 13 && event.indexv == 0){
				document.getElementById('iframe11').src = "https://playentry.org/iframe/678ce52f6aba7410e14500cc";
			}
			if(event.indexh == 14 && event.indexv == 0){
				document.getElementById('iframe12').src = "https://playentry.org/iframe/678b98280fa8f29892b04855";
			}

		});
	  
	},
	unmounted() {
        // ✅ 5. 여기가 핵심! 페이지를 벗어날 때 Reveal 객체를 메모리에서 완전히 파괴합니다.
        if (this.deck) {
            this.deck.destroy();
        }
    }
};
</script>

<style scoped>
/* @import url('@/assets/js/plugins/reveal-js/css/reset.css'); */
@import url('@/assets/js/plugins/reveal-js/css/reveal.css');
@import url('@/assets/js/plugins/reveal-js/css/theme/white.css');
@import url('@/assets/js/plugins/reveal-js/plugin/highlight/monokai.css');
@import url('@/assets/js/plugins/reveal-js/plugin/chalkboard/style.css');
@import url('@/assets/js/plugins/reveal-js/plugin/customcontrols/style.css');
@import url('@/assets/js/plugins/reveal-js/plugin/menu/menu.css');
@import url('@/assets/css/reveal-lecture.css');
</style>