<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>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(2-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>
			<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>
			<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>
			<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(7-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">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(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">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(11-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(12-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(13-1)"></i>
			</div>
		</td>
	</tr>

  </tbody>
</table>
</section>
<section>
	<h2 class="pb-5">0. 팅커캐드 소개</h2>
	<p>
		<h3>팅커캐드의 작업공간과 단축키를 알아봅시다.</h3>
		<h3>설정을 눌러 화면을 넓혀볼게요.</h3>
	</p>
</section>
<section>
	<h3 class="pb-4">1. 심랩 살펴보기</h3>
	<p>
		<h4>심랩을 사용해볼게요.</h4>
		<h4>좌측 하단 플레이 버튼을 누른 후 화면을 클릭해보세요.</h4>
		<h4>원하는 도형들을 가져온 후 화면 밖으로 떨어뜨려보세요!</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">2. 맞추기 게임</h3>
	<p>
		<h4>책상은 움직이지 않게 하고 물체를 던져 맞춰보세요.</h4>
		<video controls height="500" width="808">
		<source src="/steam/TinkerSimLab/simlab_0201_throw.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">2. 과녁 맞추기</h3>
	<p>
		<h4>누가 가장 높은 점수를 얻었나요?</h4>
		<video controls height="500" width="808">
		<source src="/steam/TinkerSimLab/simlab_0202_arrow.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">2.알까기게임</h3>
	<p>
		<h4>규칙 1. 서로 색을 정해 5개씩 돌 올리기</h4>
		<h4>규칙 2. 한 턴에 한 번만 클릭!</h4>
		<h4>규칙 3. 알의 갯수가 가장 적게 남은 사람이 승리!</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">3. 볼링장</h3>
	<p>
		<h4>볼링대를 어떻게 만들면 좋을까요?</h4>
		<video controls height="500" width="808">
		<source src="/steam/TinkerSimLab/simlab_0301_boaling.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>ctrl + d를 사용하면 이전 작업을 반복해요.</h4>
		<div class="row">
			<div class="col">
				<video controls height="500" width="808">
				<source src="/steam/TinkerSimLab/simlab_0302_domino.mp4" type="video/mp4">
				<strong>Your browser does not support the video tag.</strong>
				</video>
			</div>
			<div class="col">
				<video controls height="500" width="808">
				<source src="/steam/TinkerSimLab/simlab_0302_rainbowdomino.mp4" type="video/mp4">
				<strong>Your browser does not support the video tag.</strong>
				</video>
			</div>
		</div>
	</p>
</section>
<section>
	<h3 class="pb-4">4. 태양계 만들기</h3>
	<p>
		<h4>심랩엔 커넥터가 있어요.</h4>
		<h4>엑셀 커넥터로 태양계를 만들어볼까요?</h4>
		<video controls height="500" width="808">
		<source src="/steam/TinkerSimLab/simlab_0401_earth.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">4. 자동차 움직이기</h3>
	<p>
		<h4>엑셀커넥터로 자동차를 움직여봅시다.</h4>
		<video controls height="500" width="808">
		<source src="/steam/TinkerSimLab/simlab_0402_car.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">5. 케이블카 만들기</h3>
	<p>
		<h4>슬라이더 커넥터를 사용해봅시다.</h4>
		<video controls height="500" width="808">
		<source src="/steam/TinkerSimLab/simlab_0501_cablecar.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">5. 모빌 만들기</h3>
	<p>
		<h4>피봇 커넥터를 사용해봅시다.</h4>
		<video controls height="500" width="808">
		<source src="/steam/TinkerSimLab/simlab_0502_mobill.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">6. 나만의 작품 만들기</h3>
	<p>
		<h4>그동안 배운 커넥터를 사용하여 작품을 만들어보세요!</h4>
		<video controls height="500" width="808">
		<source src="/steam/TinkerSimLab/simlab_0601_project.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</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>