update: トップページのリングのサイズを調整する処理を実装

src/scripts/app.js

@@ -6,6 +6,9 @@ import preload_json from './config/preload'
 // components
 import './components/app.tag'
 
+// init
+util.setRingSize()
+
 // loading
 util.startLoading(() => {
   util.preload(preload_json, () => {

src/scripts/lib/util.js

@@ -8,6 +8,8 @@ const calling = document.querySelector('.calling')
 const calling__end             = document.querySelector('.calling__end')
 const end_animation            = document.querySelector('.end-animation')
 const end_animation__end       = document.querySelector('.end-animation .window img')
+const top_page                 = document.querySelector('.top-page')
+const top_page__wrap           = document.querySelector('.top-page .wrap')
 
 /**
  * 画像のプリロード
@@ -54,6 +56,17 @@ export const isPC = () => {
   return !isSP()
 }
 
+/**
+ * top-page__ringのサイズを設定
+ */
+export const setRingSize = () => {
+  const default_size = 650
+  const window_size = top_page.clientHeight
+  const per = window_size / default_size
+  
+  top_page__wrap.style.transform = `scale(${ per })`
+}
+
 /**
  * ロードの開始タイミングを取得
  * @param fn : コールバック関数