From d5d5c0919177c63505132212afb933c82ce94c82 Mon Sep 17 00:00:00 2001
From: yuki540 <tabletennis540@gmail.com>
Date: Wed, 21 Feb 2018 14:19:10 +0900
Subject: [PATCH] =?UTF-8?q?update:=20=E3=83=97=E3=83=AA=E3=83=AD=E3=83=BC?=
 =?UTF-8?q?=E3=83=89=E5=87=A6=E7=90=86=E3=82=92=E5=AE=9F=E8=A3=85=EF=BC=88?=
 =?UTF-8?q?=E3=83=86=E3=82=B9=E3=83=88=E6=AE=B5=E9=9A=8E=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/scripts/app.js            | 27 +++++++++++++++++++++++++++
 src/scripts/config/preload.js |  9 +++++++++
 src/scripts/lib/util.js       | 25 +++++++++++++++++++++++++
 3 files changed, 61 insertions(+)
 create mode 100644 src/scripts/config/preload.js

diff --git a/src/scripts/app.js b/src/scripts/app.js
index eb1de83..cca38b2 100644
--- a/src/scripts/app.js
+++ b/src/scripts/app.js
@@ -4,3 +4,30 @@ console.log(' そんなにこのサイトの仕組みが知りたいの？')
 console.log(' ↓ ここにコードがあるから、Starつけてよね❤️')
 console.log(' https://github.com/yuki540net/DropOut')
 console.log('##############################################')
+
+import * as util from './lib/util'
+import preload_json from './config/preload'
+
+setTimeout(() => {
+  testPreload(() => {
+    
+  }, (per) => {
+    util.updateCharPanel(per)
+    util.updateProgressBar(per)
+  })
+}, 1200)
+
+/**
+ * プリロードのテスト
+ */
+function testPreload(fn, progress) {
+  let per = 0
+  let timer = setInterval(() => {
+    per += 0.04
+    progress(per)
+    if(per >= 1) {
+      clearInterval(timer)
+      fn()
+    }
+  }, 200)
+}
diff --git a/src/scripts/config/preload.js b/src/scripts/config/preload.js
new file mode 100644
index 0000000..c15678d
--- /dev/null
+++ b/src/scripts/config/preload.js
@@ -0,0 +1,9 @@
+export default [
+  './images/load-view/charcters/char-1.png',
+  './images/load-view/charcters/char-2.png',
+  './images/load-view/charcters/char-3.png',
+  './images/load-view/charcters/char-4.png',
+  './images/load-view/charcters/char-5.png',
+  './images/load-view/charcters/char-6.png',
+  './images/load-view/charcters/char-7.png',
+]
diff --git a/src/scripts/lib/util.js b/src/scripts/lib/util.js
index 2e84d3f..b006d43 100644
--- a/src/scripts/lib/util.js
+++ b/src/scripts/lib/util.js
@@ -1,3 +1,6 @@
+const char_panel = document.querySelectorAll('.blocks .block')
+const progress_bar = document.getElementById('progress-bar')
+
 /**
  * 画像のプリロード
  * @param images   : 画像パスの配列
@@ -53,3 +56,25 @@ export const hiddenTimeout = (selector, time) => {
     document.querySelector(selector).style.display = 'none'
   }, time)
 }
+
+/**
+ * キャラクターパネルの更新
+ * @param per : 割合
+ */
+export const updateCharPanel = (per) => {
+  if(per >= 0.14) char_panel[0].setAttribute('data-state', 'true')
+  if(per >= 0.28) char_panel[1].setAttribute('data-state', 'true')
+  if(per >= 0.42) char_panel[2].setAttribute('data-state', 'true')
+  if(per >= 0.57) char_panel[3].setAttribute('data-state', 'true')
+  if(per >= 0.71) char_panel[4].setAttribute('data-state', 'true')
+  if(per >= 0.85) char_panel[5].setAttribute('data-state', 'true')
+  if(per >= 1.00) char_panel[6].setAttribute('data-state', 'true')
+}
+
+/**
+ * プログレスバーの更新
+ * @param per : 割合
+ */
+export const updateProgressBar = (per) => {
+  progress_bar.children[0].style.width = `${ per * 100 }%`
+}