<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~2학년)</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(6-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(8-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(9-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(10-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(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">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(14-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(16-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(19-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(20-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(21-1)"></i>
			</div>
		</td>
	</tr>

  </tbody>
</table>

</section>
<section>
	<h2 class="pb-5">0. 엔트리 소개 </h2>
	<p>
		<h3>엔트리 화면 구성과 동작 블럭을 알아봅시다. </h3>
		<h3>(시작 탭과 흐름 탭만 살펴볼게요.)</h3>
	</p>
</section>
<section>
	<h2 class="pb-5">0. 햄스터봇 소개</h2>
	<p>
		<h3>햄스터봇을 연결하고 사용해봅시다.</h3>
		<div class="row">
			<div class="col mx-4">
				<img src="/robot/HamsterBot/0_1_h_switch_on.jpg" height="500px"/>
			</div>
			<div class="col mx-4">
				<img src="/robot/HamsterBot/0_2_h_connect.jpg" height="500px"/>
			</div>
			<div class="col mx-4">
				<img src="/robot/HamsterBot/0_3_h_right_left.jpg" height="500px"/>
			</div>
		</div>
	</p>
</section>
<section>
	<h3 class="pb-4">1. 이동과 회전 - 햄스터봇 움직이기 <a href="https://naver.me/G7ZPqyqe" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>앞뒤로 움직여볼까요?</h4>
		<video controls height="500" width="808">
		<source src="/robot/HamsterBot/1_1_h_move.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">1. 이동과 회전 - 햄스터봇 움직이기 <a href="https://naver.me/G7ZPqyqe" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>방향키를 눌러 회전해볼까요?</h4>
		<video controls height="500" width="808">
		<source src="/robot/HamsterBot/1_2_h_move_rotate.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">2. 속도과 LED - 빠르게 느리게 빛나게 <a href="https://naver.me/F5C0lshj" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>햄스터봇의 속도를 조절해볼게요.</h4>
		<video controls height="500" width="808">
		<source src="/robot/HamsterBot/2_1_h_speed.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">2. 속도과 LED - 빠르게 느리게 빛나게 <a href="https://naver.me/F5C0lshj" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>LED블럭을 사용하여 불빛을 내볼까요?</h4>
		<h4>속도에 따라 LED 불빛을 바꿔봅시다.</h4>
		<div class="row">
			<div class="col">
				<video controls height="300" width="808">
				<source src="/robot/HamsterBot/2_2_h_LEDon.mp4" type="video/mp4">
				<strong>Your browser does not support the video tag.</strong>
				</video>
			</div>
			<div class="col">
				<img src="/robot/HamsterBot/2_h_speed_image.png"/>
			</div>
		</div>
	</p>
</section>
<section>
	<h3 class="pb-4">2. 속도과 LED -  도로주행 <a href="https://naver.me/F5C0lshj" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>도로를 달려볼까요?</h4>
		<img src="/robot/HamsterBot/2_h_road_driving_1.png"/>
		<img src="/robot/HamsterBot/2_h_road_driving_2.png"/>
	</p>
</section>
<section>
	<h3 class="pb-4">3. 소리 - 따르릉 비켜나세요 <a href="https://naver.me/Fx9rEKpD" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>앞뒤로 움직이며 다양한 소리를 내봅시다.</h4>
		<video controls height="500" width="808">
		<source src="/robot/HamsterBot/3_1_h_sound_on.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/Fx9rEKpD" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>자동연주 햄스터봇을 만들어봐요!</h4>
		<div class="row">
			<div class="col">
				<video controls height="500" width="808">
				<source src="/robot/HamsterBot/3_2_h_autoplayin.mp4" type="video/mp4">
				<strong>Your browser does not support the video tag.</strong>
				</video>
			</div>
			<div class="col">
				<img src="/robot/HamsterBot/3_h_schoolbell_cut.jpg"/>
			</div>
		</div>
	</p>
</section>
<section>
	<h3 class="pb-4">3. 소리 - 연주하기 <a href="https://naver.me/Fx9rEKpD" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<div class="row">
			<div class="col mx-4">
				<h4>키마다 음을 지정할 수도 있어요.</h4>
			</div>
			<div class="col mx-4">
				<h4>다같이 합주해볼까요?</h4>
			</div>
		</div>
		<div class="row">
			<div class="col mx-4">
				<video controls height="500" width="808">
				<source src="/robot/HamsterBot/3_3_h_write_song.mp4" type="video/mp4">
				<strong>Your browser does not support the video tag.</strong>
				</video>
			</div>
			<div class="col mx-4">
				<img src="/robot/HamsterBot/3_h_3bears_cut.png"/>
			</div>
		</div>
	</p>
</section>
<section>
	<h3 class="pb-4">4. 술래잡기 <a href="https://naver.me/xdfKzc2t" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>햄스터봇을 자유롭게 움직여봅시다.</h4>
		<div class="row">
			<div class="col mx-4">
				<img src="/robot/HamsterBot/4_h_rotation_direction_left.png"/>
			</div>
			<div class="col mx-4">
				<img src="/robot/HamsterBot/4_h_rotation_direction_right.png"/>
			</div>
		</div>
		<br>
		<h4>한 사람이 술래가 되어 술래잡기를 해볼까요?</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">4. 기울기 - 기울어지면 <a href="https://naver.me/57rbW3jo" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>왼쪽 오른쪽으로 기울이면 어떤 일이 생기나요?</h4>
		<video controls height="500" width="808">
		<source src="/robot/HamsterBot/4_1_h_inclination.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/FawClyYa" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>손을 찾으면 소리내봅시다.</h4>
		<video controls height="500" width="808">
		<source src="/robot/HamsterBot/5_1_h_find_hand1.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">5. 손찾음과 근접센서 - 손이 어디있게? <a href="https://naver.me/FawClyYa" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>손을 찾으면 멈춰봅시다.</h4>
		<video controls height="500" width="808">
		<source src="/robot/HamsterBot/5_2_h_find_hand2.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/FawClyYa" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>근접센서의 수치를 확인해볼까요?</h4>
		<h4>센서에 가까워질 때와 멀어질 때의 숫자가 어떻게 달라지나요?</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">5. 손찾음과 근접센서 - 장애물 피하기 <a href="https://naver.me/FawClyYa" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>왼쪽 센서와 오른쪽 센서를 따로 사용해봅시다.</h4>
		<video controls height="500" width="808">
		<source src="/robot/HamsterBot/5_3_h_proximity sensor.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">5. 손찾음과 근접센서 - 장애물 피하기 <a href="https://naver.me/FawClyYa" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<div class="row">
			<div class="col">
				<img src="/robot/HamsterBot/5_h_avoid_block_left.png"/>
			</div>
			<div class="col">
				<img src="/robot/HamsterBot/5_h_avoid_block_right.png"/>
			</div>
			<div class="col">
				<img src="/robot/HamsterBot/5_h_avoid_block_stop.png"/>
			</div>
		</div>
		<h4>센서는 어디에 사용할 수 있을까요?</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">6. 음성인식 - 내 말이 들리니? <a href="https://naver.me/5qahpDs5" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>인공지능 - 음성인식 블럭을 사용해볼게요.</h4>
		<h4>어떤 원리로 음성을 인식할까요?</h4>
		<h4>음성인식이 필요한 경우를 말해봅시다.</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">6. 음성인식 - 말하는 대로 <a href="https://naver.me/5qahpDs5" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>인공지능 햄스터봇을 만들어봐요.</h4>
		<video controls height="500" width="808">
		<source src="/robot/HamsterBot/6_1_h_AI.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. 손인식 1 - 오른손 왼손 <a href="https://naver.me/53l3vzOM" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>인공지능 햄스터봇을 만들어봐요.</h4>
		<video controls height="500" width="808">
		<source src="/robot/HamsterBot/6_2_left_right_hand.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. 손인식 2 - 손모양에 따라 <a href="https://naver.me/53l3vzOM" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>인공지능 햄스터봇을 만들어봐요.</h4>
		<video controls height="500" width="808">
		<source src="/robot/HamsterBot/6_3_h_hand_shape.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
		<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>