<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>(3~5학년) 엔트리 기초를 아는 학생</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>
	<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(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">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>
		</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>

  </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/5PsAmAED" target="_blank"><i class="fa-solid fa-file-code"></i></a></h2>
	<p>
		<h4>음식을 랜덤한 위치로 이동해봅시다.</h4>
		<h4>변수는 무엇일까요? 변수를 사용해봐요.</h4>
		<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/5pH2ptyn" 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>
	</p>
</section>
<section>
	<h3 class="pb-4">3. 스무고개 <a href="https://naver.me/FfA3jrcL" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>변수에는 글자도 저장할 수 있어요.</h4>
		<h4>만일 '참' 이라면, 아니면 블록으로 </h4>
		<h4>정답일 때와 아닐 때를 알려주세요.</h4>
		<iframe id="iframe3" width="640" height="420" frameborder="0"></iframe>
		<h4>다른 친구들의 스무고개를 풀어볼까요?</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">4. 지뢰찾기 <a href="https://naver.me/xAV6zDG4" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>복제하기를 사용하여 '먹기게임'의 오류를 고쳐봅시다.</h4>
		<h4>원본은 복제본을 만드는 역할이예요.</h4>
		<h4>복제본은 '복제본이 처음 생성되었을때' 에 코딩한 블록을 실행해요.</h4>
		<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/5Zjmyudo" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>그동안 배운 복제하기와 변수를 사용해봅시다.</h4>
		<h4>탄환을 맞춰 해적선의 생명력을 줄여보세요!</h4>
		<h4>생명력이 0이 되면 게임을 멈추고 싶어요. 어떻게 할까요?</h4>
		<iframe id="iframe5" width="640" height="420" frameborder="0"></iframe>
	</p>
</section>
<section>
	<h3 class="pb-4">6. 선물맞추기 <a href="https://naver.me/FwSB492L" 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>
	</p>
</section>
<section>
	<h3 class="pb-4">7. 플래피게임 <a href="https://naver.me/II18RkHO" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>그동안 배운 복제하기와 변수를 활용해봅시다.</h4>
		<h4>플래피의 동작을 같이 이야기해 볼까요?</h4>
		<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/FjcvAHz8" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>변수는 여러 개 사용할 수 있어요.</h4>
		<h4>주사위 값을 세판 모두 더해봅시다.</h4>
		<h4>단어를 여러 개 합쳐서 말해봐요.</h4>
		<h4>조건 블럭 안에 또 조건 블럭을 넣을 수 있어요.</h4>
		<iframe id="iframe8" width="640" height="420" frameborder="0"></iframe>
	</p>
</section>
<section>
	<h3 class="pb-4">9. 엔트리 키우기 <a href="https://naver.me/xwWrQi8z" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>조건을 여러 개 사용해 봅시다. 블럭이 많아보여도 차근차근 만들면 돼요!</h4>
		<iframe id="iframe9" width="640" height="420" frameborder="0"></iframe>
		<h4>어떤 오류가 있는지 찾아볼까요?</h4>
		<h4>변수를 사용하여 오류를 고쳐볼게요.</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">10. 하늘에서 음식이 <a href="https://naver.me/FARI3Mcu" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>음식은 원본일까요? 복제본일까요?</h4>
		<h4>체중은 언제 증가하고 언제 빠지는지 이야기해봅시다.</h4>
		<h4>음식마다 증가하는 체중을 다르게 해볼까요?</h4>
		<h4>게임이 종료되면 엔트리도 안 움직이게 해볼게요.</h4>
		<iframe id="iframe10" width="640" height="420" frameborder="0"></iframe>
	</p>
</section>
<section>
	<h3 class="pb-4">11.좀비 사냥 <a href="https://naver.me/Fu683g4i" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>변수는 다양한 방식으로 다양한 곳에 사용할 수 있어요.</h4>
		<h4>버튼마다 회전각도의 숫자가 변하네요! 좀비후진 숫자도 변해요!</h4>
		<iframe id="iframe11" 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/659539094cd0a0001a669598";
			}
			if(event.indexh == 3){
				document.getElementById('iframe2').src = "https://playentry.org/iframe/656ef0b9bfe3190038279915";
			}
			if(event.indexh == 4){
				document.getElementById('iframe3').src = "https://playentry.org/iframe/65953786ca7897001a91ba1c";
			}
			if(event.indexh == 5){
				document.getElementById('iframe4').src = "https://playentry.org/iframe/65954b14fb531a001a9a5316";
			}
			if(event.indexh == 6){
				document.getElementById('iframe5').src = "https://playentry.org/iframe/656f1dcd1808fd001aa076de";
			}
			if(event.indexh == 7){
				document.getElementById('iframe6').src = "https://playentry.org/iframe/657038384bce3d0026b5047d";
			}
			if(event.indexh == 8){
				document.getElementById('iframe7').src = "https://playentry.org/iframe/65967b854ba982002505c856";
			}
			if(event.indexh == 9){
				document.getElementById('iframe8').src = "https://playentry.org/iframe/656ef71c5a46b60037cf1127";
			}
			if(event.indexh == 10){
				document.getElementById('iframe9').src = "https://playentry.org/iframe/659530644a10ba002c3d43eb";
			}
			if(event.indexh == 11){
				document.getElementById('iframe10').src = "https://playentry.org/iframe/656fb3984ca8630021a91460";
			}
			if(event.indexh == 12){
				document.getElementById('iframe11').src = "https://playentry.org/iframe/6595272e13c42c002c5ef30c";
			}

		});

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