update: プリロード処理を実装（テスト段階）

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)
+}

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',
+]

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 }%`
+}