<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>(4~6학년) 엔트리 기초를 아는 학생</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>
	<h3 class="pb-5">1. 신호 응용 - 럭키세븐 <a href="https://naver.me/Fsw1zdK6" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>순서를 차근차근 생각해봅시다.</h4>
		<h4>신호가 몇 개 필요할까요?</h4>
		<iframe id="iframe1" width="640" height="420" frameborder="0"></iframe>
		
	</p>
</section>
<section>
	<h3 class="pb-4">2. 신호와 복제 - 셰프의 식탁 <a href="https://naver.me/5DDWndqy" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>원본을 사용할 때 오류가 있나요?</h4>
		<h4>복제본을 왜 사용해야할까요?</h4>
		<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/FINFtbRX" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>복제본 하나의 움직임을 먼저 상상해봅시다.</h4>
		<iframe id="iframe3" width="640" height="420" frameborder="0"></iframe>

	</p>
</section>
<section>
	<h3 class="pb-4">4. 복제와 변수 - 대포게임 <a href="https://naver.me/GDLtI15M" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>변수를 만들어볼게요.</h4>
		<h4>엔트리봇은 1씩 증가하고, 판다는 점수가 2배가 돼요.</h4>
		<iframe id="iframe4" width="640" height="420" frameborder="0"></iframe>
	</p>
</section>
<section>
	<h3 class="pb-4">5. 변수 응용 - 계산기 <a href="https://naver.me/F9hT6TYB" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>숫자 2개와 연산자를 기억하려면 변수가 몇 개 필요할까요?</h4>
		<iframe id="iframe5" width="640" height="420" frameborder="0"></iframe>
		<h4>이어서 계산하려면..?</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">6. 변수 고급 - 클릭커게임 <a href="https://naver.me/5PlhGeO8" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>성장할 때마다 점수가 증가하는 숫자도 커지려면..?</h4>
		<h4>부스터로 점수를 펌핑시켜봅시다.</h4>
		<iframe id="iframe6" width="640" height="420" frameborder="0"></iframe>
		<h4>변수는 자유롭게 응용할 수 있어요.</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">7. 리스트 - 랜덤 닉네임 <a href="https://naver.me/FHV3B9ig" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>변수로 만들기 쉽나요? 리스트는 왜 필요할까요?</h4>
		<h4>리스트의 블럭들에 대해 알아봅시다. (추가, ~번째 항목, ~항목수)</h4>
		<iframe id="iframe7" width="640" height="420" frameborder="0"></iframe>
	</p>
</section>
<section>
	<h3 class="pb-4">8. 인공지능과 리스트 - 자동 단어장 <a href="https://naver.me/IFGRN5SS" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>인공지능의 번역과 읽어주기를 사용해볼게요.</h4>
		<h4>~번째 항목을 반복해서 작성하면 어떤 점이 불편할까요? </h4>
		<iframe id="iframe8" width="640" height="420" frameborder="0"></iframe>
		<h4>~번째를 변수로 바꾸면 편해요! </h4>
	</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 == 1){
				document.getElementById('iframe1').src = "https://playentry.org/iframe/684808a968af866cb4db1983";
			}
			if(event.indexh == 2){
				document.getElementById('iframe2').src = "https://playentry.org/iframe/684ac1d3e9151242524e3721";
			}
			if(event.indexh == 3){
				document.getElementById('iframe3').src = "https://playentry.org/iframe/68480c41b038bfd50b5c7128";
			}
			if(event.indexh == 4){
				document.getElementById('iframe4').src = "https://playentry.org/iframe/6848172834011033d8c1eb87";
			}
			if(event.indexh == 5){
				document.getElementById('iframe5').src = "https://playentry.org/iframe/684818af4ab8872bf02bdc6a";
			}
			if(event.indexh == 6){
				document.getElementById('iframe6').src = "https://playentry.org/iframe/6848224e7f120b9ea4a62580";
			}
			if(event.indexh == 7){
				document.getElementById('iframe7').src = "https://playentry.org/iframe/6848241abf35862140219366";
			}
			if(event.indexh == 8){
				document.getElementById('iframe8').src = "https://playentry.org/iframe/684825cb3dccb9b1c1a9410a";
			}

		});

	},
	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>