89 lines
2.2 KiB
JavaScript
89 lines
2.2 KiB
JavaScript
const load_view = document.getElementById('load-view')
|
|
const char_panel = document.querySelectorAll('.blocks .block')
|
|
const progress_bar = document.getElementById('progress-bar')
|
|
|
|
/**
|
|
* 画像のプリロード
|
|
* @param images : 画像パスの配列
|
|
* @param fn : コールバック関数
|
|
* @param progress : 読み込み状況取得用コールバック関数
|
|
*/
|
|
export const preload = (images, fn, progress) => {
|
|
const len = images.length
|
|
let load = 0
|
|
|
|
images.forEach((image, key) => {
|
|
const img = new Image()
|
|
img.src = image
|
|
img.onload = () => {
|
|
load += 1
|
|
progress({
|
|
size : len,
|
|
load : load,
|
|
per : load / len
|
|
})
|
|
|
|
if(load >= len) fn()
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* スマートフォンかどうかの真偽
|
|
* @return bool
|
|
*/
|
|
export const isSP = () => {
|
|
const useragent = navigator.userAgent.toLowerCase()
|
|
const reg = /(iphone|ipad|ipod|android|mobile)/
|
|
|
|
return reg.test(useragent)
|
|
}
|
|
|
|
/**
|
|
* PCかどうかの真偽
|
|
* return bool
|
|
*/
|
|
export const isPC = () => {
|
|
return !isSP()
|
|
}
|
|
|
|
/**
|
|
* 指定した時間に要素を非表示にする
|
|
* @param selector : セレクタ名
|
|
* @param time : 時間
|
|
*/
|
|
export const hiddenTimeout = (selector, time) => {
|
|
setTimeout(() => {
|
|
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 }%`
|
|
}
|
|
|
|
/**
|
|
* モーションパート
|
|
*/
|
|
export const finisheLoadView = () => {
|
|
load_view.setAttribute('data-state', 'fin')
|
|
}
|