Merge pull request #121 from illionillion/feature-import-title

タイトル画面の取り込み

.eslintrc.js

@@ -2,29 +2,32 @@ module.exports = {
   env: {
     browser: true,
     es2021: true,
-    node: true
+    node: true,
   },
   // extends: 'standard',
   overrides: [
     {
       env: {
-        node: true
+        node: true,
       },
-      files: [
-        '.eslintrc.{js,cjs}'
-      ],
-    }
+      files: ['.eslintrc.{js,cjs}'],
+    },
   ],
+  plugins: ['unused-imports'],
   parserOptions: {
     sourceType: 'module',
-    ecmaVersion: 'latest'
+    ecmaVersion: 'latest',
   },
   rules: {
     quotes: ['error', 'single'],
     semi: ['error', 'always'],
     // no-mixed-spaces-and-tabsルールをoffに設定する
     'no-mixed-spaces-and-tabs': 'off',
     // // インデントはスペースで統一
-    indent: ['error', 2, { SwitchCase: 1 }]
-  }
+    indent: ['error', 2, { SwitchCase: 1 }],
+    /**
+     * 未使用のimport削除
+     */
+    'unused-imports/no-unused-imports': 'warn',
+  },
 };

local_build/css/title.css

@@ -0,0 +1,62 @@
+#title-flex {
+    display: flex;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: none;
+    background-size: cover;
+}
+
+#title-background-video {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+#title-logo {
+    flex: 6;
+    position: relative;
+}
+
+#title-logo img {
+    position: absolute;
+    width: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+#title-list {
+    position: relative;
+    flex: 4;
+}
+
+#title-list ul{
+    position: absolute;
+    width: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin: 0;
+    padding-left: 0;
+}
+
+#title-list ul li{
+    list-style: none;
+    font-size: 2vw;
+    font-weight: 100;
+    margin: 10px;
+    text-align: center;
+    justify-content: center;
+}
+
+#title-list ul li.on-cursor{
+    background-image: url(../images/title/cursor.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position-x: 40%;
+}

local_build/index.html

@@ -7,6 +7,7 @@
     <title>ラグナロクアップルズ</title>
     <link rel="shortcut icon" href="../app.png" type="image/x-icon" />
     <link rel="stylesheet" href="css/style.css" />
+    <link rel="stylesheet" href="css/title.css" />
     <link rel="stylesheet" href="css/map.css" />
     <link rel="stylesheet" href="css/text.css" />
     <link rel="stylesheet" href="css/menu.css" />
@@ -18,7 +19,7 @@
     <main>
       <div id="frame">
         <div id="screen">
-          <div id="game-data-screen">
+          <div id="game-data-screen" class="none">
             <div id="game-data-header">
               <div id="game-data-title">タイトル</div>
               <div id="game-data-close"></div>
@@ -156,7 +157,7 @@
               </ul>
             </div>
           </div>
-          <section id="mapScreen">
+          <section id="mapScreen" class="none">
             <div id="mapWrapper" class="none">
               <div id="mapSelectFloat">
                 <!-- マップアイテムクリック時の確認画面 -->
@@ -282,6 +283,26 @@
             <div id="FloatCheck" class="op0 none"><p>ON</p></div>
             <div id="map-menu-btn"></div>
           </section>
+          <!-- タイトル -->
+          <section id="title-screen">
+            <video id="title-background-video" poster="./images/title/titleanimation.gif" autoplay loop muted>
+              <source src="./images/title/titlemp4.mp4" type="video/mp4">
+            </video>
+            <div id="title-flex">
+              <div id="title-logo">
+                <img src="./images/title/logokiri.png" alt="" srcset="" />
+              </div>
+              <div id="title-list">
+                <ul>
+                  <li data-nav="start">はじめから</li>
+                  <!-- <li data-nav="continue">つづきから</li> -->
+                  <li data-nav="load">中断データ</li>
+                  <!-- <li data-nav="gallery">ギャラリー</li> -->
+                  <!-- <li data-nav="setting">設定</li> -->
+                </ul>
+              </div>
+            </div>
+          </section>
         </div>
       </div>
     </main>

local_build/js/lib/GameData.js

@@ -2,6 +2,7 @@ import ScenarioPlayer from './ScenarioPlayer.js';
 import { closeConfirm, openConfirm } from './confirm.js';
 import { CreateMap } from './map.js';
 import { closeMenuScreen, initMenu } from './menu.js';
+import { TitleClose, TitleInit } from './title.js';
 import toDarking from './toDarking.js';
 
 /**
@@ -197,10 +198,12 @@ const dataConformYes = async (type, no, op, prevType) => {
       const data = JSON.parse(await loadData('data-' + no));
       gameData = data;
       initMenu(gameData); // menu.js内のgameDataの同期
+      TitleInit(gameData); // menu.js内のgameDataの同期
       await toDarking(async (e) => {
         closeConfirm();
         closeGameDataScreen();
         closeMenuScreen();
+        TitleClose();
         await CreateMap(gameData);
         ScenarioPlayer.screenReset();
       }, gameData);

local_build/js/lib/ScenarioPlayer.js

@@ -662,7 +662,7 @@ export default class ScenarioPlayer {
   /**
    * シナリオ画面からマップ画面へ戻る
    */
-  toMap = async () => {
+  toMap = async (isTitle = false) => {
     this.AudioStop();
     console.log('end');
     this.state.eventState = 'map';
@@ -686,7 +686,7 @@ export default class ScenarioPlayer {
         'images/character/transparent_background.png';
       document.querySelector('#menu-screen .menu-title span').textContent =
         'MENU';
-      this.TextCover.classList.remove('none');
+      if(!isTitle) this.TextCover.classList.remove('none');
       this.FloatCheck.classList.add('op0');
       this.TextFloat.classList.add('op0');
       this.dialogueEle.classList.remove('op0');
@@ -712,9 +712,8 @@ export default class ScenarioPlayer {
       });
 
       this.state.nowPart = this.state.nextPart;
-
       // ここに新マップ描画処理
-      await CreateMap(this.state);
+      if(!isTitle) await CreateMap(this.state);
     }, this.state);
   };
 
@@ -1081,7 +1080,7 @@ export default class ScenarioPlayer {
     //     return
     // }
     const text = e.target.textContent;
-    // console.log(text + ' click');
+    console.log(text + ' click');
 
     if (!['day', 'place'].includes(e.target.dataset.menubutton)) {
       document.querySelector('#menu-screen .menu-title span').textContent =
@@ -1116,6 +1115,11 @@ export default class ScenarioPlayer {
         case 'load':
           // openGameDataScreen("load");
           break;
+        case 'title':
+          // ここでタイトル画面に戻す
+          // console.log('to title');
+          this.toMap(true);
+          break;
 
         default:
           break;

local_build/js/lib/defaultGameState.js

@@ -0,0 +1,23 @@
+import { initGameData } from './GameData.js';
+import { initMenu } from './menu.js';
+import { TitleInit } from './title.js';
+
+export const defaultGameState = {
+  charName: 'タウ',
+  nowPart: 'init', // マップのinitを取得する
+  nextPart: 'init',
+  FloatCheck: true,
+  nowDate: '0日目',
+  nowPlace: undefined,
+  eventState: 'title',
+  autoPlayingFlag: false, // いらない
+  TextPlayer: undefined, // いらない
+  screenDarking: false, // 暗転中か
+  menuFlag: false
+};
+
+export const dataReset = () => {
+  initGameData(defaultGameState);
+  initMenu(defaultGameState);
+  TitleInit(defaultGameState);
+};

local_build/js/lib/map.js

@@ -25,6 +25,8 @@ let mapItemsJson;
  * @param {object} gameState
  */
 export async function CreateMap (gameState) {
+  document.getElementById('mapScreen').classList.remove('none'); // mapの表示
+  document.getElementById('mapTextCover').classList.remove('none');
   /*
     データ取得
     ここのURLを.envで隠したい
@@ -84,13 +86,7 @@ export async function CreateMap (gameState) {
         for (const i in mapCharacterListImgs) {
           if (Object.hasOwnProperty.call(mapCharacterListImgs, i)) {
             const ele = mapCharacterListImgs[i];
-            // if (
-            // ["app.png", "tau-sample.jpg"].includes(item["characterIcons"][i])
-            // ) {
-            // ele.src = `images/map-screen/map3-default-icon.png`;
-            // } else {
             ele.src = `images/character/icon/${item.characterIcons[i]}`;
-            // }
           }
         }
 
@@ -123,10 +119,7 @@ export async function CreateMap (gameState) {
 
               console.log(TextData[partKey]); // 選択されたシナリオ
 
-              // gameState.nextPart = gameState.nowPart;
               gameState.nextPart = partKey; // 次のパートを設定、マップに再遷移時にこれをnowPartへ
-              // gameState.nowPart = partKey;
-              // gameState.nowDate = mapData["day"];
               gameState.nowPlace = item.place;
               new ScenarioPlayer(
                 TextData[partKey],
@@ -191,13 +184,6 @@ export async function CreateMap (gameState) {
     })()
   );
 
-  // const mapImg = document.getElementById("mapBackground");
-  // const imgSrc = mapData
-  //   ? `images/background/${mapData["backgroundImage"]}`
-  //   : "images/background/map.png";
-  // const imgSrc = "images/map-screen/map2_background.png";
-  // console.log(imgSrc);
-  // mapImg.setAttribute("src", imgSrc);
   // 日付
   document.querySelector('#map2TextDate').innerHTML = mapData
     ? mapData.day

local_build/js/lib/menu.js

@@ -1,4 +1,5 @@
 import { openGameDataScreen } from './GameData.js';
+import { TitleOpen } from './title.js';
 
 let gameData = {};
 
@@ -14,8 +15,22 @@ export const initMenu = (gameState) => {
     menuOpenButton.addEventListener('click', openMenuScreen);
     menuCloseButton.addEventListener('click', closeMenuScreen);
     // ログ以外はここから発火
-    menuFrame.querySelector('#menu-list li[data-menubutton="load"]').addEventListener('click', () => openGameDataScreen('load'));
-    menuFrame.querySelector('#menu-list li[data-menubutton="save"]').addEventListener('click', () => openGameDataScreen('save'));
+    menuFrame
+      .querySelector('#menu-list li[data-menubutton="load"]')
+      .addEventListener('click', () => openGameDataScreen('load'));
+    menuFrame
+      .querySelector('#menu-list li[data-menubutton="save"]')
+      .addEventListener('click', () => openGameDataScreen('save'));
+    menuFrame
+      .querySelector('#menu-list li[data-menubutton="title"]')
+      .addEventListener('click', () => {
+        // マップ画面も元に戻す必要あり
+        document
+          .querySelectorAll('.map-touch')
+          .forEach((ele) => ele.classList.add('none'));
+        closeMenuScreen();
+        TitleOpen();
+      });
   }
 
   gameData = gameState;
@@ -27,11 +42,19 @@ export const initMenu = (gameState) => {
 export const openMenuScreen = () => {
   menuFrame.classList.remove('hide');
   if (gameData.eventState === 'ScenarioPlayer') {
-    menuFrame.querySelector('#menu-list li[data-menubutton="place"]').classList.remove('none');
-    menuFrame.querySelector('#menu-list li[data-menubutton="log"]').classList.remove('none');
+    menuFrame
+      .querySelector('#menu-list li[data-menubutton="place"]')
+      .classList.remove('none');
+    menuFrame
+      .querySelector('#menu-list li[data-menubutton="log"]')
+      .classList.remove('none');
   } else {
-    menuFrame.querySelector('#menu-list li[data-menubutton="place"]').classList.add('none');
-    menuFrame.querySelector('#menu-list li[data-menubutton="log"]').classList.add('none');
+    menuFrame
+      .querySelector('#menu-list li[data-menubutton="place"]')
+      .classList.add('none');
+    menuFrame
+      .querySelector('#menu-list li[data-menubutton="log"]')
+      .classList.add('none');
   }
   setMenuDay();
 };