<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~4학년) 엔트리 기초를 아는 학생</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(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>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(15-1)"></i>
			</div>
		</td>
	</tr>

  </tbody>
</table>

</section>
<section>
	<h2 class="pb-5">0. 엔트리 소개 </h2>
	<p>
		<h3>엔트리 화면 구성과 동작 블럭을 알아봅시다.</h3>
	</p>
</section>
<section>
	<h2 class="pb-3">0. 어썸봇 소개</h2>
	<p>
		<h3>어썸봇을 연결하고 실행해봅시다.</h3>
		<div class="row">
			<div class="col mx-4">
				<img src="/robot/AsomeBot/0_a_bot_switch.jpg" height="500px" />
			</div>
			<div class="col mx-4">
				<img src="/robot/AsomeBot/0_a_bot_body.jpg" height="500px" />
			</div>
		</div>
	</p>
</section>
<section>
	<h3 class="pb-4">1. 모터 위치 - 어썸봇 모터 <a href="https://naver.me/xhKEw26v" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>어썸봇은 어떻게 움직일 수 있을까요?</h4>
		<h4>직접 움직여서 각 모터의 번호와 각도를 살펴봅시다.</h4>
		<div class="row">
			<div class="col mx-4">
				<img src="/robot/AsomeBot/1_a_moter_cut.jpg" />
			</div>
			<div class="col mx-4">
				<video controls height="500" width="808">
				<source src="/robot/AsomeBot/1_1_a_moter.mp4" type="video/mp4">
				<strong>Your browser does not support the video tag.</strong>
				</video>
			</div>
		</div>
	</p>
</section>
<section>
	<h3 class="pb-4">2. 걷기 앉기 - 걷고 앉아보자 <a href="https://naver.me/GudgXec5" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>어썸봇을 앞 뒤로 움직여봅시다.</h4>
		<video controls height="500" width="808">
		<source src="/robot/AsomeBot/2_1_a_front_back.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
		<h4>어썸봇을 좌 우로 움직이도록 블럭을 추가해볼까요?</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">2. 걷기 앉기 - 걷고 앉아보자 <a href="https://naver.me/GudgXec5" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>어썸봇을 앉게 하려면 모터를 어떻게 움직여야할까요?</h4>
		<video controls height="500" width="808">
		<source src="/robot/AsomeBot/2_2_a_down.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">2. 걷기 앉기 - 걷고 앉아보자 <a href="https://naver.me/GudgXec5" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>어썸봇을 제자리에서 걷게 해볼게요.</h4>
		<video controls height="500" width="808">
		<source src="/robot/AsomeBot/2_3_a_walking.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">3. 합주하기 - 연주하는 어썸봇 <a href="https://naver.me/x3qa2env" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<div class="row">
			<div class="col mx-4">
				<video controls height="500" width="808">
				<source src="/robot/AsomeBot/3_1_a_buzzer.mp4" type="video/mp4">
				<strong>Your browser does not support the video tag.</strong>
				</video>
			</div>
			<div class="col mx-4">
				<img src="/robot/AsomeBot/3_a_scale_big.jpg" height="500px"/>
			</div>
		</div>
	</p>
</section>
<section>
	<h3 class="pb-4">3. 합주하기 - 우리 모두 다같이 <a href="https://naver.me/x3qa2env" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>악보를 보고 합주해봅시다.</h4>
		<img src="/robot/AsomeBot/3_a_small_star.jpg" height="550px"/>
	</p>
</section>
<section>
	<h3 class="pb-4">4. 음성따르기 - 음성인식 <a href="https://naver.me/F9zsXRjb" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>음성인식 블럭을 사용해봅시다.</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">4. 음성따르기 - 내 명령을 따라봐 <a href="https://naver.me/F9zsXRjb" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>말하는 대로 움직이게 해봐요.</h4>
		<video controls height="500" width="808">
		<source src="/robot/AsomeBot/4_1_a_voice.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
		<h4>다른 명령들도 추가해볼까요? 춤추거나 소리를 내게도 할 수 있을까요?</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">5. 초음파센서 - 초음파센서로 안전운행 <a href="https://naver.me/GqNwRpQJ" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>어썸봇의 눈에는 초음파 센서가 달려있어요.</h4>
		<h4>초음파 센서를 사용해봅시다.</h4>
		<h4>가까워질수록 수치가 어떻게 변하나요?</h4>
		<!-- <iframe width="640" height="420" src="https://playentry.org/iframe/65a8f3a92d5fed0037e25cf4" frameborder="0"></iframe> -->
	</p>
</section>
<section>
	<h3 class="pb-4">5. 초음파센서 - 초음파센서로 안전운행 <a href="https://naver.me/GqNwRpQJ" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>장애물을 만나면 멈춰볼까요?</h4>
		<video controls height="500" width="808">
		<source src="/robot/AsomeBot/5_1_a_avoid_block.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
		<h4>초음파센서는 어디에 활용할 수 있을까요?</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">5. 초음파센서 - 수신호로 움직이는 어썸봇 <a href="https://naver.me/GqNwRpQJ" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>인공지능 블럭을 사용하여 수신호를 보내봅시다.</h4>
		<video controls height="500" width="808">
		<source src="/robot/AsomeBot/5_2_a_hand_signal.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
		<h4>수신호에 맞춰 다른 동작들도 시켜볼까요?</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">6. 장기자랑 - 어썸봇 너의 춤을 보여줘! <a href="https://naver.me/xmtClxos" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<video controls height="500" width="808">
			<source src="/robot/AsomeBot/6_1_a_my_project.mp4" type="video/mp4">
			<strong>Your browser does not support the video tag.</strong>
		</video>
		<h4>각자 좋아하는 음악에 맞춰 춤 만들어볼까요?</h4>
		<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);
		});

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