<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">mblock 소개 및 할로코드 연결</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(5-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">LED조명 밝히기</span>
			</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(6-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>
		</td>
		<td>
			<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">4주차</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(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(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>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(18-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(19-1)"></i>
			</div>
		</td>
	</tr>

  </tbody>
</table>

</section>
<section>
	<h2 class="pb-5">0. mblock 소개 </h2>
	<p>
		<h3><a href="https://ide.makeblock.com/" target="_blank"><i class="fa fa-share"></i></a></h3>
		<h3>mblock의 화면 구성과 블럭들을 알아봅시다.</h3>
	</p>
</section>
<section>
	<h2 class="pb-5">0. 할로코드 소개</h2>
	<p>
		<h3><a href="https://happycreative.co.kr/manual/detail.php?idx=17" target="_blank"><i class="fa fa-share"></i></a></h3>
		<div class="row">
			<div class="col mx-6">
				<img src="/robot/HaloCode/halocode1.jpg" height="500px"/>
			</div>
			<div class="col mx-6">
				<img src="/robot/HaloCode/halocode2.png" height="500px"/>
			</div>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-5">0. 할로코드 연결</h2>
	<p>
		<h3>mlink로 할로코드를 연결해봅시다.</h3>
		<h3>어떤 블럭들이 생겼나요?</h3>
	</p>
</section>
<section>
	<h3 class="pb-4">1. 버튼과 조명 <a href="https://planet.mblock.cc/project/3495188" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>버튼을 눌러 조명을 켜봅시다.</h4>
		<video controls height="500" width="808">
		<source src="/robot/HaloCode/01_button_1_WithLight.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. LED 조명 밝히기 - 차례대로 <a href="https://planet.mblock.cc/project/3486210" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>조명의 번호를 알아봅시다.</h4>
		<h4>RGB는 무엇일까요?</h4>
		<h4>색을 조합해 다양한 색을 만들어보세요.</h4>
		<video controls height="500" width="808">
		<source src="/robot/HaloCode/02_light_1_InTurn.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://planet.mblock.cc/project/3486381" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>밤에는 켜지고, 낮에는 꺼지는 자동조명을 만들어봅시다.</h4>
		<h4>밤인지 낮인지 할로코드에게 어떻게 전달할까요?</h4>
		<video controls height="500" width="808">
		<source src="/robot/HaloCode/02_light_2_switch.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
		<h4>자동조명은 언제 사용될까요?</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">3. 터치센서로 게임만들기 - 동작확인 <a href="https://planet.mblock.cc/project/3486423" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>각 터치패드를 만지면 조명색을 바꿔볼게요.</h4>
		<video controls height="500" width="808">
		<source src="/robot/HaloCode/03_touch_1_WithLight.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">3. 터치센서로 게임만들기 - 퀴즈</h3>
	<p>
		<h4>각 터치패드마다 다음과 같이 조명을 밝힐 수 있나요?</h4>
		<div class="row">
			<div class="col mx-6">
				<img src="/robot/HaloCode/03_touch_quiz1.png" height="500px"/>
			</div>
			<div class="col mx-6">
				<img src="/robot/HaloCode/03_touch_quiz2.png" height="500px"/>
			</div>
		</div>
	</p>
</section>
<section>
	<h3 class="pb-4">3. 터치센서로 게임만들기 - 게임컨트롤러 <a href="https://planet.mblock.cc/project/3486456" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>게임 조작기를 만들어봐요!</h4>
		<h4>어떤 번호를 터치했는지 어떻게 전달할까요?</h4>
		<video controls height="500" width="808">
		<source src="/robot/HaloCode/03_touch_2_GameControl.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
		<h4>터치센서는 언제 사용될까요?</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">4. 기울기센서로 기울기울 - 동작확인 <a href="https://planet.mblock.cc/project/3490429" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>할로코드를 기울였을 때, 센서의 수치 변화를 확인해보세요.</h4>
		<video controls height="500" width="808">
		<source src="/robot/HaloCode/04_tilt_1_sample.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">4. 기울기센서로 기울기울 - 퀴즈 <a href="https://planet.mblock.cc/project/3490429" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>왼쪽 / 오른쪽 기울기에 따라 조명을 밝혀볼게요.</h4>
		<video controls height="500" width="808">
		<source src="/robot/HaloCode/04_tilt_1_WithLight.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
		<h4>앞, 뒤로 기울였을 때도 추가해볼까요?</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">4. 기울기센서로 기울기울 - 우주선 조종 <a href="https://planet.mblock.cc/project/3490580" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>비행기를 피해서 멋지게 비행해봅시다.</h4>
		<h4>기울기센서값을 전달하려면 변수가 필요해요.</h4>
		<video controls height="500" width="808">
		<source src="/robot/HaloCode/04_tilt_2_spaceship.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://planet.mblock.cc/project/3490650" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>할로코드를 흔들면서 센서의 수치변화를 확인해보세요.</h4>
		<video controls height="500" width="808">
		<source src="/robot/HaloCode/05_shake_1_sample.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://planet.mblock.cc/project/3490655" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>만약 너무 흔들리면 자동으로 멈추는 믹서기를 만들어봅시다.</h4>
		<h4>흔들림 센서값을 전달하려면 변수가 필요해요.</h4>
		<video controls height="500" width="808">
		<source src="/robot/HaloCode/05_shake_2_danger.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://planet.mblock.cc/project/3490759" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>마이크센서로 측정한 소리의 크기값을 확인해보세요.</h4>
		<video controls height="500" width="808">
		<source src="/robot/HaloCode/05_mike_1_sample.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://planet.mblock.cc/project/3490762" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>크기의 수치를 바탕으로 소음측정기를 만들어볼게요.</h4>
		<h4>마이크센서값을 전달하려면 변수가 필요해요.</h4>
		<h4>만약 ~아니면 블럭을 사용해봅시다.</h4>
		<video controls height="500" width="808">
		<source src="/robot/HaloCode/05_mike_2_NoiseMeter.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">6. 음성인식으로 명령하기 <a href="https://planet.mblock.cc/project/3490892" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>확장 탭에서 음성인식을 가져와 사용할게요.</h4>
		<video controls height="500" width="808">
		<source src="/robot/HaloCode/06_sound_1_WithLight.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
		<h4>다른 색들도 추가해볼까요?</h4>
		<h4>음성인식은 언제 사용될까요?</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">6. 모션인식 활용하기 <a href="https://planet.mblock.cc/project/3490946" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>확장 탭에서 모션인식을 가져와 사용할게요.</h4>
		<video controls height="500" width="808">
			<source src="/robot/HaloCode/06_motion_1_WithLight.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>