<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>(2~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>
		</td>
		<td>
			<div class="p-2 icons">
				<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>
		</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(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">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(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">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(8-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(9-1)"></i>
			</div>
		</td>
	</tr>
	

  </tbody>
</table>

</section>
<section>
	<h2 class="pb-5">0. 엔트리 소개 </h2>
	<p>
		<h3>엔트리 화면 구성과 동작 블럭을 살펴봅시다.</h3>
		<img src="/pure/EntryGame/grid.png"/>
	</p>
</section>
<section>
	<h2 class="pb-5">1. 아기멍 키우기 <a href="https://naver.me/FK5frDZK" target="_blank"><i class="fa-solid fa-file-code"></i></a></h2>
	<p>
		<iframe id="iframe1" width="640" height="420" frameborder="0"></iframe>
		<h4>키우고 싶은 반려동물을 골라 발표해보아요!</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">2. 멍멍패션쇼 <a href="https://naver.me/xzxdRDVv" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<iframe id="iframe2" width="640" height="420" frameborder="0"></iframe>
		<h4>고양이는 옷을 안좋아해요. 강아지는 옷입는 것을 좋아할까요?</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">3. 나 잡아봐라! <a href="https://naver.me/IMyvfJWh" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>작동 순서를 잘 살펴 말해봅시다.</h4>
		<h4>가로로 움직이려면 x좌표가 필요해요!</h4>
		<iframe id="iframe3" width="640" height="420" frameborder="0"></iframe>
	</p>
</section>
<section>
	<h3 class="pb-4">4. 산책 좋아! <a href="https://naver.me/FZ2yvTqP" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>이동방향에 대해 알아보아요.</h4>
		<iframe id="iframe4" width="640" height="420" frameborder="0"></iframe>
	</p>
</section>
<section>
	<h3 class="pb-4">5. 간식먹을래? <a href="https://naver.me/GUwgI77x" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>무작위 수가 무엇일까요?</h4>
		<h4>'만일' 블럭은 언제 사용할까요?</h4>
		<iframe id="iframe5" width="640" height="420" frameborder="0"></iframe>
	</p>
</section>
<section>
	<h3 class="pb-4">6. 천재멍멍이 <a href="https://naver.me/FTX76PQR" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>묻고기다리기를 알아보아요.</h4>
		<iframe id="iframe6" width="640" height="420" frameborder="0"></iframe>
		<h4>세로로 움직이려면 y좌표가 필요해요!</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">7. 부지런한 주인 <a href="https://naver.me/xX7Mi5zS" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>만일~아니면 블럭을 사용해볼게요.</h4>
		<iframe id="iframe7" width="640" height="420" frameborder="0"></iframe>
	</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);
			if(event.indexh == 2){
				document.getElementById('iframe1').src = "https://playentry.org/iframe/67388a37815976d0bb7aad8a";
			}
			if(event.indexh == 3){
				document.getElementById('iframe2').src = "https://playentry.org/iframe/674af2753a60652ff66c1b2e";
			}
			if(event.indexh == 4){
				document.getElementById('iframe3').src = "https://playentry.org/iframe/674af2ca344d2670af097e12";
			}
			if(event.indexh == 5){
				document.getElementById('iframe4').src = "https://playentry.org/iframe/674af2ef8b9e66a306d50f74";
			}
			if(event.indexh == 6){
				document.getElementById('iframe5').src = "https://playentry.org/iframe/674af3119a72e167e91754b8";
			}
			if(event.indexh == 7){
				document.getElementById('iframe6').src = "https://playentry.org/iframe/674af32cb55ea985958b90cc";
			}
			if(event.indexh == 8){
				document.getElementById('iframe7').src = "https://playentry.org/iframe/674af34396515cff8c83fdac";
			}
			
		});
	  
	},
	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>