webpack, eslint
javascript didn't have proper modules until es6 what the fuck bingo's code scares me so i hope i didn't break it when fixing the linting errors
このコミットが含まれているのは:
コミット
1d469d4f3e
1
.eslintignore
ノーマルファイル
1
.eslintignore
ノーマルファイル
@ -0,0 +1 @@
|
||||
Js/Pixi.min.js
|
20
.eslintrc.json
ノーマルファイル
20
.eslintrc.json
ノーマルファイル
@ -0,0 +1,20 @@
|
||||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es6": true
|
||||
},
|
||||
"extends": "eslint:recommended",
|
||||
"globals": {
|
||||
"Atomics": "readonly",
|
||||
"SharedArrayBuffer": "readonly"
|
||||
},
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2018,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
"no-console": "off",
|
||||
"no-unused-vars": [2, { "argsIgnorePattern": "^(success|event|resource|delta|reject)$"}],
|
||||
"no-empty": ["error", { "allowEmptyCatch": true }]
|
||||
}
|
||||
}
|
@ -1,5 +1,7 @@
|
||||
//(Math.exp(x)-1)/(Math.E-1)
|
||||
|
||||
import bgmLoopData from './BgmLoop.json';
|
||||
|
||||
class bufferLoader {
|
||||
constructor(context, soundMap, callback) {
|
||||
this.context = context;
|
||||
@ -94,8 +96,8 @@ class audioController {
|
||||
source.buffer = this.loader.bufferList[sound];
|
||||
source.loop = false;
|
||||
if(type === "bgm") {
|
||||
if(this.utage.bgmLoopData[this.utage.soundInfo[sound].origFileName]) {
|
||||
let loop = this.utage.bgmLoopData[this.utage.soundInfo[sound].origFileName];
|
||||
if(bgmLoopData[this.utage.soundInfo[sound].origFileName]) {
|
||||
let loop = bgmLoopData[this.utage.soundInfo[sound].origFileName];
|
||||
source.loopStart = loop["loop_start"]["seconds"];
|
||||
source.loopEnd = loop["loop_end"]["seconds"];
|
||||
source.loop = true;
|
||||
@ -182,3 +184,5 @@ class audioController {
|
||||
this.sources = {};
|
||||
}
|
||||
}
|
||||
|
||||
export { audioController };
|
||||
|
@ -334,8 +334,10 @@ class commonFunctions {
|
||||
if(props[i] == " ") { break; }
|
||||
retval.color += props[i];
|
||||
}
|
||||
retval.color = retval.color;
|
||||
//retval.color = retval.color;
|
||||
}
|
||||
return retval;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { rootUrl, baseDimensions, screenRatio, commonFunctions };
|
||||
|
37
Js/Main.js
37
Js/Main.js
@ -1,5 +1,17 @@
|
||||
'use strict';
|
||||
|
||||
/* global PIXI */
|
||||
import 'Pixi';
|
||||
import { Player } from './Player.js';
|
||||
import { audioController } from './Audio.js';
|
||||
import { baseDimensions, commonFunctions } from './Common.js';
|
||||
import { UtageInfo } from './UtageParse.js';
|
||||
import { TextFunctions } from './TextFunctions.js';
|
||||
import { Shaders } from './Shaders.js';
|
||||
|
||||
import '../Css/generic.min.css';
|
||||
import '../Css/main.css';
|
||||
|
||||
const pixiApp = {
|
||||
app: new PIXI.Application(baseDimensions),
|
||||
loader: PIXI.loader
|
||||
@ -215,9 +227,9 @@ function missionDropDownChanged(event) {
|
||||
${chapterSelect}
|
||||
</div>
|
||||
<div id="modal-buttons">
|
||||
<button onclick="closeMissionModal(event, false)">Close</button>
|
||||
<button onclick="XduPlayer.closeMissionModal(event, false)">Close</button>
|
||||
<span>MstId: ${mis.MstId}</span>
|
||||
<button onclick="missionChanged(${mis.MstId})">Play</button>
|
||||
<button onclick="XduPlayer.missionChanged(${mis.MstId})">Play</button>
|
||||
</div>
|
||||
</div>`;
|
||||
document.getElementById("click-catcher").style.cssText = 'display: flex;';
|
||||
@ -424,7 +436,7 @@ function openHelpModal(event) {
|
||||
<a style="margin-top: auto; text-align: center; "href="https://discord.gg/fpQZQ8g">YameteTomete Discord</a>
|
||||
<div style="margin-top: auto; text-align: center;">All Symphogear content belongs to its respective owners</div>
|
||||
<div id="modal-buttons">
|
||||
<button onclick="closeModal(event)">Close</button>
|
||||
<button onclick="XduPlayer.closeModal(event)">Close</button>
|
||||
<a href="https://git.poweris.moe/xduplayer.git/" target="_blank">Source</a>
|
||||
</div>
|
||||
</div>`;
|
||||
@ -500,3 +512,22 @@ function onWindowResize(event, delay = 400) {
|
||||
document.getElementById('app-container').style.cssText = `width: ${res.width}px; height: ${res.height}px;`;
|
||||
}, delay);
|
||||
}
|
||||
|
||||
export {
|
||||
onBodyLoaded,
|
||||
onBodyKey,
|
||||
toggleMute,
|
||||
onVolumeChange,
|
||||
missionDropDownChanged,
|
||||
languageChanged,
|
||||
toggleFullscreen,
|
||||
onMainClick,
|
||||
openHelpModal,
|
||||
playFromQuery,
|
||||
skipClicked,
|
||||
hideUiClicked,
|
||||
dialogScrollUp,
|
||||
dialogScrollDown,
|
||||
closeMissionModal,
|
||||
missionChanged
|
||||
};
|
||||
|
49
Js/Player.js
49
Js/Player.js
@ -1,5 +1,9 @@
|
||||
'use strict';
|
||||
|
||||
/* global PIXI */
|
||||
import 'Pixi';
|
||||
import { baseDimensions, commonFunctions } from './Common.js';
|
||||
|
||||
class Player {
|
||||
constructor(pixi, utage, text, audio, shaderscript) {
|
||||
this.pixi = pixi;
|
||||
@ -7,7 +11,7 @@ class Player {
|
||||
this.utage = utage;
|
||||
this.text = text;
|
||||
this.audio = audio;
|
||||
this.shaders = shaders;
|
||||
this.shaders = shaderscript;
|
||||
//consts
|
||||
this.resolutionScale = 1; //I created this thinking that I would need to handle changing offset when resolution changes. But lucikly I can just scale the parent container and it works without needing this.
|
||||
this.baseFps = 60; //I am assuming that PIXI is going to stay as keeping 60fps = delta1.
|
||||
@ -51,9 +55,9 @@ class Player {
|
||||
return new Promise((resolve, reject) => {
|
||||
let toLoadBgm = {};
|
||||
let toLoadSe = {};
|
||||
for(let i = 0; i < utage.currentPlayingFile.length; ++i) {
|
||||
for(let i = 0; i < this.utage.currentPlayingFile.length; ++i) {
|
||||
try {
|
||||
let c = utage.currentPlayingFile[i];
|
||||
let c = this.utage.currentPlayingFile[i];
|
||||
if(c.comment) { continue; }
|
||||
//They use this to set the sprite set for a charater but have an alternate name displayed
|
||||
if(c.Arg2 && c.Arg2.toLowerCase().includes("<character=")) {
|
||||
@ -254,6 +258,7 @@ class Player {
|
||||
break;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "attachit02":
|
||||
case "attachit03":
|
||||
@ -269,6 +274,7 @@ class Player {
|
||||
} else {
|
||||
console.log(`Failed to get attacshot SE: se_ガトリング音`);
|
||||
}
|
||||
break;
|
||||
case "attacshot11":
|
||||
case "attacshot12":
|
||||
if(this.utage.soundInfo['se_ガトリング音']) {
|
||||
@ -295,8 +301,7 @@ class Player {
|
||||
console.log(`Failed to get attaclaser SE: se_レーザーが放たれる音`);
|
||||
}
|
||||
break;
|
||||
case "":
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
} catch (error) {
|
||||
@ -497,7 +502,7 @@ class Player {
|
||||
try {
|
||||
l.object.filters[0].uniforms.time = pos;
|
||||
l.object.filters[0].apply();
|
||||
} catch(error) {}
|
||||
} catch(error) { }
|
||||
break;
|
||||
}
|
||||
case "tint": {
|
||||
@ -585,13 +590,13 @@ class Player {
|
||||
this.lerpTargets.push({type: 'alpha', object: sprite, curTime: 0, time: 300, finalV: 1, initV: 0});
|
||||
this.lerpTargets.push({type: 'alpha', object: sprite, curTime: -(this.waitTime+500), time: 300, finalV: 0, initV: 1, post: "destroy"});
|
||||
} catch (error) { }
|
||||
let text = cur.English ? (utage.translations[cur.English] || cur.Text) : cur.Text;
|
||||
let text = cur.English ? (this.utage.translations[cur.English] || cur.Text) : cur.Text;
|
||||
this.text.titleText(true, text);
|
||||
break;
|
||||
}
|
||||
case "divaeffect": {
|
||||
this.waitTime = Number(cur.Arg5) * 1000;
|
||||
let text = cur.English ? (utage.translations[cur.English] || cur.Text) : cur.Text;
|
||||
let text = cur.English ? (this.utage.translations[cur.English] || cur.Text) : cur.Text;
|
||||
this.text.divaText(true, text);
|
||||
break;
|
||||
}
|
||||
@ -749,7 +754,7 @@ class Player {
|
||||
}
|
||||
case "characteroff": {
|
||||
if(cur.Text) {
|
||||
checkPutText(cur);
|
||||
this.checkPutText(cur);
|
||||
} else {
|
||||
this.text.dialogText(false, "");
|
||||
this.text.characterName(false, "");
|
||||
@ -953,6 +958,7 @@ class Player {
|
||||
this.lerpTargets.push({type: 'alpha', object: c3.sprite, curTime: (0 - (this.waitTime/2)), time: 200, finalV: 0, initV: 1, post: "destroy" });
|
||||
this.currentCharacters['キャラ中央'] = undefined;
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "noise_disappearance11": //103500341
|
||||
this.waitTime = Number(cur.Arg1) * 1000;
|
||||
@ -984,8 +990,6 @@ class Player {
|
||||
this.checkPutCharacterScreen(customCommand, false, true);
|
||||
break;
|
||||
}
|
||||
case "continue01":
|
||||
break;
|
||||
}
|
||||
} catch(error) {
|
||||
console.log(error);
|
||||
@ -1198,13 +1202,12 @@ class Player {
|
||||
}
|
||||
if(!cur.Command && cur.Arg1 && cur.Text) {
|
||||
//If its chracter off screen text
|
||||
let text = cur.English ? (utage.translations[cur.English] || cur.Text) : cur.Text;
|
||||
let text = cur.English ? (this.utage.translations[cur.English] || cur.Text) : cur.Text;
|
||||
text = commonFunctions.convertUtageTextTags(text);
|
||||
if(cur.Arg2 && cur.Arg2.toLowerCase() === "<off>") {
|
||||
this.text.characterName(true, utage.charTranslations[cur.Arg1] || cur.Arg1);
|
||||
this.text.characterName(true, this.utage.charTranslations[cur.Arg1] || cur.Arg1);
|
||||
this.text.dialogText(true, commonFunctions.convertUtageTextTags(text));
|
||||
} else {
|
||||
let charName = "";
|
||||
let found = false;
|
||||
//Look for the character that is saying the text to get their name
|
||||
//future note: This might be better to just look for the character in character info if this start failing.
|
||||
@ -1216,7 +1219,7 @@ class Player {
|
||||
if(cur.Character) {
|
||||
nameToUse = cur.Arg1;
|
||||
}
|
||||
this.text.characterName(true, utage.charTranslations[nameToUse] || nameToUse);
|
||||
this.text.characterName(true, this.utage.charTranslations[nameToUse] || nameToUse);
|
||||
this.text.dialogText(true, text);
|
||||
this.currentCharacters[c].sprite.tint = 0xFFFFFF;
|
||||
found = true;
|
||||
@ -1229,14 +1232,14 @@ class Player {
|
||||
}
|
||||
//If we didnt find the character just dump the text anyways with Arg1 as the name
|
||||
if(!found) {
|
||||
this.text.characterName(true, utage.charTranslations[cur.Arg1] || cur.Arg1);
|
||||
this.text.characterName(true, this.utage.charTranslations[cur.Arg1] || cur.Arg1);
|
||||
this.text.dialogText(true, text);
|
||||
}
|
||||
}
|
||||
this.manualNext = true;
|
||||
//Sometimes they don't give a Arg1 for the text.
|
||||
} else if(!cur.Command && cur.Arg2.toLowerCase() === "<off>" && cur.Text) {
|
||||
let text = cur.English ? (utage.translations[cur.English] || cur.Text) : cur.Text;
|
||||
let text = cur.English ? (this.utage.translations[cur.English] || cur.Text) : cur.Text;
|
||||
this.text.characterName(true, "");
|
||||
this.text.dialogText(true, commonFunctions.convertUtageTextTags(text));
|
||||
this.manualNext = true;
|
||||
@ -1324,6 +1327,7 @@ class Player {
|
||||
this.lerpTargets.push({type: 'scale.y', object: curChar.sprite, curTime: 0 - (props.delay || 0), time: props.time,
|
||||
finalV: curChar.sprite.scale.y * props.y, initV: curChar.sprite.scale.y });
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "colorto": {
|
||||
let props = commonFunctions.getPropertiesFromTweenCommand(cur.Arg3);
|
||||
@ -1347,6 +1351,7 @@ class Player {
|
||||
curChar.sprite.tint = color.color;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1485,8 +1490,8 @@ class Player {
|
||||
}
|
||||
|
||||
getNextCommand() {
|
||||
let command = utage.currentPlayingFile.pop();
|
||||
if(!utage.currentPlayingFile || utage.currentPlayingFile.length === 0) {
|
||||
let command = this.utage.currentPlayingFile.pop();
|
||||
if(!this.utage.currentPlayingFile || this.utage.currentPlayingFile.length === 0) {
|
||||
this.onEndFile();
|
||||
return;
|
||||
}
|
||||
@ -1514,7 +1519,7 @@ class Player {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
this.pixi.app.ticker.remove(this.onPixiTick, this);
|
||||
utage.currentPlayingFile.length = 0;
|
||||
this.utage.currentPlayingFile.length = 0;
|
||||
this.currentCharacters = {};
|
||||
this.layers = {};
|
||||
this.currentCommand = undefined;
|
||||
@ -1548,4 +1553,6 @@ class Player {
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { Player };
|
||||
|
@ -1,4 +1,9 @@
|
||||
//http://glslsandbox.com/e#39992.0
|
||||
|
||||
/* global PIXI */
|
||||
import 'Pixi';
|
||||
import { baseDimensions } from './Common.js';
|
||||
|
||||
class Shaders {
|
||||
constructor() {
|
||||
this.leftToRightFadeShader = `
|
||||
@ -199,4 +204,6 @@ class Shaders {
|
||||
filterManager.applyFilter(this, input, output);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { Shaders };
|
||||
|
@ -84,7 +84,6 @@ class TextFunctions {
|
||||
function putText() {
|
||||
// skip over any HTML chars
|
||||
this.dialogToDisplay.curPos = this.typeHtmlChars(this.dialogToDisplay.text, this.dialogToDisplay.curPos);
|
||||
let substr = this.dialogToDisplay.text.substr(this.dialogToDisplay.curPos);
|
||||
if (this.dialogToDisplay.curPos === this.dialogToDisplay.text.length) {
|
||||
this.showNextIndicator(true);
|
||||
this.scrollingText = false;
|
||||
@ -191,4 +190,6 @@ class TextFunctions {
|
||||
this.scrollingText = false;
|
||||
this.lineHeight = -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { TextFunctions };
|
||||
|
@ -1,6 +1,8 @@
|
||||
//http://madnesslabo.net/utage/?page_id=4448&lang=en
|
||||
'use strict';
|
||||
|
||||
import { commonFunctions } from './Common.js';
|
||||
|
||||
class UtageInfo {
|
||||
constructor() {
|
||||
this.currentPlayingFile = [];
|
||||
@ -31,15 +33,15 @@ class UtageInfo {
|
||||
//commonFunctions.getFileText(`${this.rootDirectory}XDUData/Utage/Diva/Settings/Scenario.tsv`),
|
||||
commonFunctions.getFileText(`${this.rootDirectory}XDUData/Utage/Diva/Settings/Sound.tsv`), //4
|
||||
commonFunctions.getFileText(`${this.rootDirectory}XDUData/Utage/Diva/Settings/Texture.tsv`), //5
|
||||
commonFunctions.getFileJson(`${this.rootDirectory}Js/BgmLoop.json`), //6
|
||||
commonFunctions.getFileJson(`${this.rootDirectory}Js/Translations/XduMissionsCustom.json`), //7
|
||||
commonFunctions.getFileText(`${this.rootDirectory}CustomData/Utage/Diva/Settings/CustomCharacter.tsv`), //8
|
||||
commonFunctions.getFileText(`${this.rootDirectory}CustomData/Utage/Diva/Settings/CustomSound.tsv`), //9
|
||||
commonFunctions.getFileText(`${this.rootDirectory}CustomData/Utage/Diva/Settings/CustomTexture.tsv`), //10
|
||||
//commonFunctions.getFileJson(`${this.rootDirectory}Js/BgmLoop.json`),
|
||||
commonFunctions.getFileJson(`${this.rootDirectory}Js/Translations/XduMissionsCustom.json`), //6
|
||||
commonFunctions.getFileText(`${this.rootDirectory}CustomData/Utage/Diva/Settings/CustomCharacter.tsv`), //7
|
||||
commonFunctions.getFileText(`${this.rootDirectory}CustomData/Utage/Diva/Settings/CustomSound.tsv`), //8
|
||||
commonFunctions.getFileText(`${this.rootDirectory}CustomData/Utage/Diva/Settings/CustomTexture.tsv`), //9
|
||||
];
|
||||
Promise.all(promises)
|
||||
.then((success) => {
|
||||
this.groupMissions(success[0], success[7]);
|
||||
this.groupMissions(success[0], success[6]);
|
||||
this.missionsList = Object.keys(this.groupedMissions).map((k) => {
|
||||
return {Name: this.groupedMissions[k].Name, MstId: this.groupedMissions[k].MstId};
|
||||
});
|
||||
@ -50,10 +52,10 @@ class UtageInfo {
|
||||
//this.parseParamInfo(success[4]);
|
||||
this.parseSoundInfo(success[4]);
|
||||
this.parseTextureInfo(success[5]);
|
||||
this.bgmLoopData = success[6];
|
||||
this.parseCharacterInfo(success[8], true);
|
||||
this.parseSoundInfo(success[9], true);
|
||||
this.parseTextureInfo(success[10], true);
|
||||
//this.bgmLoopData = success[6];
|
||||
this.parseCharacterInfo(success[7], true);
|
||||
this.parseSoundInfo(success[8], true);
|
||||
this.parseTextureInfo(success[9], true);
|
||||
resolve();
|
||||
}, (failure) => {
|
||||
reject(failure);
|
||||
@ -173,7 +175,7 @@ class UtageInfo {
|
||||
if(this.charTranslationsInner[this.currentTranslation]) {
|
||||
resolve();
|
||||
} else {
|
||||
commonFunctions.getFileJson(`${utage.rootDirectory}Js/Translations/nametranslations_${this.currentTranslation}.json`)
|
||||
commonFunctions.getFileJson(`${this.rootDirectory}Js/Translations/nametranslations_${this.currentTranslation}.json`)
|
||||
.then((success) => {
|
||||
this.charTranslationsInner[this.currentTranslation] = success;
|
||||
resolve();
|
||||
@ -191,8 +193,8 @@ class UtageInfo {
|
||||
resolve();
|
||||
} else {
|
||||
var promises = [
|
||||
commonFunctions.getFileJson(`${utage.rootDirectory}Js/Translations/XduMissionsNames_${this.currentTranslation}.json`),
|
||||
commonFunctions.getFileJson(`${utage.rootDirectory}Js/Translations/XduMissionsNamesCustom_${this.currentTranslation}.json`)
|
||||
commonFunctions.getFileJson(`${this.rootDirectory}Js/Translations/XduMissionsNames_${this.currentTranslation}.json`),
|
||||
commonFunctions.getFileJson(`${this.rootDirectory}Js/Translations/XduMissionsNamesCustom_${this.currentTranslation}.json`)
|
||||
];
|
||||
Promise.all(promises)
|
||||
.then((success) => {
|
||||
@ -362,4 +364,6 @@ class UtageInfo {
|
||||
resetTranslations() {
|
||||
this.translationsInner = {};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { UtageInfo };
|
||||
|
34
Player.html
34
Player.html
@ -5,19 +5,19 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
|
||||
<meta name="theme-color" content="#393939"/>
|
||||
<title id="title-tag"></title>
|
||||
<link rel="stylesheet" type="text/css" href="Css/generic.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="Css/main.min.css">
|
||||
<!-- <link rel="stylesheet" type="text/css" href="Css/generic.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="Css/main.min.css">-->
|
||||
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script> -->
|
||||
<script src="Js/Pixi.min.js"></script>
|
||||
</head>
|
||||
<body onload="onBodyLoaded()" onkeyup="onBodyKey(event)">
|
||||
<body onload="XduPlayer.onBodyLoaded()" onkeyup="XduPlayer.onBodyKey(event)">
|
||||
<!-- <script src="Js/Common.js"></script>
|
||||
<script src="Js/TextFunctions.js"></script>
|
||||
<script src="Js/UtageParse.js"></script>
|
||||
<script src="Js/Audio.js"></script>
|
||||
<script src="Js/Player.js"></script>
|
||||
<script src="Js/Main.js"></script> -->
|
||||
<script src="Js/XduPlayer.min.js"></script>
|
||||
<!-- <script src="Js/XduPlayer.js"></script> -->
|
||||
<div id="loading-container" class="centered" style="z-index: 20;">
|
||||
<h2 id="loading-utage">Loading Utage Data...</h2>
|
||||
<h2 id="loading-font">Loading Page Data...</h2>
|
||||
@ -26,33 +26,33 @@
|
||||
<div id="title-container"><span>Now Playing: </span><span id="playing-title">None</span></div>
|
||||
<div id="other-controls-container">
|
||||
<div id="volume-control">
|
||||
<span onclick="toggleMute(event)" id="mute-button">🔊</span> <!-- loud_sound -->
|
||||
<input onchange="onVolumeChange(event)" id="volume-range" value="50" type="range" min="0" max="100" step="1"/>
|
||||
<span onclick="XduPlayer.toggleMute(event)" id="mute-button">🔊</span> <!-- loud_sound -->
|
||||
<input onchange="XduPlayer.onVolumeChange(event)" id="volume-range" value="50" type="range" min="0" max="100" step="1"/>
|
||||
</div>
|
||||
<select id="select-mission" onchange="missionDropDownChanged(event);"></select>
|
||||
<select id="select-language" onchange="languageChanged(event);"></select>
|
||||
<a style="font-size: 20px; margin-left: 5px;" title="info/help" onclick="openHelpModal(event)">?</a>
|
||||
<select id="select-mission" onchange="XduPlayer.missionDropDownChanged(event);"></select>
|
||||
<select id="select-language" onchange="XduPlayer.languageChanged(event);"></select>
|
||||
<a style="font-size: 20px; margin-left: 5px;" title="info/help" onclick="XduPlayer.openHelpModal(event)">?</a>
|
||||
</div>
|
||||
<!-- Im doing weird shit so that text container is always the base resolution of XDU (1334, 750).
|
||||
The canvas then resizes as the canvas does and the text-container uses transform scale based off this resolution -->
|
||||
<div id="app-container" onclick="onMainClick(event);">
|
||||
<div id="app-container" onclick="XduPlayer.onMainClick(event);">
|
||||
<div id="text-container">
|
||||
<div id="fullscreen-button" onclick="toggleFullscreen(event)">➕</div> <!-- heavy_plus_sign -->
|
||||
<div id="fullscreen-button" onclick="XduPlayer.toggleFullscreen(event)">➕</div> <!-- heavy_plus_sign -->
|
||||
<img id="main-ui-img" class="hidden" src="Images/newui_main.png"/>
|
||||
<button id="play-from-query" onclick="playFromQuery(event)" style="display: none;">Play</button>
|
||||
<button id="play-from-query" onclick="XduPlayer.playFromQuery(event)" style="display: none;">Play</button>
|
||||
<div id="title" class="hidden">Title Text</div>
|
||||
<div id="diva" class="hidden">Diva Text</div>
|
||||
<div id="dialog-box" class="hidden">
|
||||
<div id="ui-buttons">
|
||||
<img class="ui-button" src="Images/skip_button.png" onclick="skipClicked(event)" id="skip-button"/>
|
||||
<img class="ui-button" src="Images/hide_button.png" onclick="hideUiClicked(event)"/>
|
||||
<img class="ui-button" src="Images/skip_button.png" onclick="XduPlayer.skipClicked(event)" id="skip-button"/>
|
||||
<img class="ui-button" src="Images/hide_button.png" onclick="XduPlayer.hideUiClicked(event)"/>
|
||||
</div>
|
||||
<div id="character"></div>
|
||||
<div id="dialog">
|
||||
<div id="dialog-controls">
|
||||
<div id="dialog-scroll" class="hidden">
|
||||
<img id="dialog-scroll-up" src="Images/next_icon.png" onclick="dialogScrollUp(event)"/>
|
||||
<img src="Images/next_icon.png" onclick="dialogScrollDown(event)"/>
|
||||
<img id="dialog-scroll-up" src="Images/next_icon.png" onclick="XduPlayer.dialogScrollUp(event)"/>
|
||||
<img src="Images/next_icon.png" onclick="XduPlayer.dialogScrollDown(event)"/>
|
||||
</div>
|
||||
<div id="dialog-next" class="hidden">
|
||||
<img src="Images/next_icon.png"/>
|
||||
@ -64,7 +64,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="click-catcher" style="display: none;" onclick="closeMissionModal(event, false)"></div>
|
||||
<div id="click-catcher" style="display: none;" onclick="XduPlayer.closeMissionModal(event, false)"></div>
|
||||
<div id="modal-container" style="display: none;"></div>
|
||||
<div style="opacity: 0; position: fixed; top: -2000;">
|
||||
<!-- <span style="font-family: 'FOT-RodinNTLGPro-B_0'">test</span>
|
||||
|
@ -1 +1,2 @@
|
||||
run `npm install` then `gulp dist` or `node(nodejs) node_modules/gulp/bin/gulp.js dist` to build files into Dist folder.
|
||||
run `npm install` then `npm start` to start a dev server or
|
||||
`npm run-script build` to build production files in the Dist folder.
|
||||
|
130
gulpfile.js
130
gulpfile.js
@ -1,130 +0,0 @@
|
||||
const gulp = require('gulp');
|
||||
const concat = require('gulp-concat');
|
||||
const rename = require('gulp-rename');
|
||||
const uglify = require('gulp-uglify-es').default;
|
||||
const sourcemaps = require('gulp-sourcemaps');
|
||||
const cssmin = require('gulp-cssmin');
|
||||
const jsonmin = require('gulp-jsonminify');
|
||||
|
||||
const jsFiles = [
|
||||
"Js/Common.js",
|
||||
"Js/Shaders.js",
|
||||
"Js/TextFunctions.js",
|
||||
"Js/UtageParse.js",
|
||||
"Js/Audio.js",
|
||||
"Js/Player.js",
|
||||
"Js/Main.js"
|
||||
];
|
||||
const jsToCopy = [
|
||||
"Js/XduPlayer.min.js",
|
||||
"Js/Pixi.min.js"
|
||||
];
|
||||
const cssFiles = [
|
||||
"Css/main.css"
|
||||
];
|
||||
const cssToCopy = [
|
||||
"Css/main.min.css",
|
||||
"Css/generic.min.css"
|
||||
];
|
||||
const jsonFiles = [
|
||||
"Js/BgmLoop.json",
|
||||
];
|
||||
const translations = [
|
||||
"Js/Translations/**"
|
||||
];
|
||||
|
||||
const jsDest = "Js";
|
||||
gulp.task('dev', gulp.series(
|
||||
buildJsDev,
|
||||
buildCss,
|
||||
)
|
||||
);
|
||||
|
||||
gulp.task('dist', gulp.series(
|
||||
gulp.parallel(
|
||||
gulp.series(
|
||||
buildJs,
|
||||
copyJs
|
||||
),
|
||||
gulp.series(
|
||||
buildCss,
|
||||
copyCss
|
||||
),
|
||||
buildJson,
|
||||
buildJsonTranslations,
|
||||
copyHtml,
|
||||
copyImages,
|
||||
copyCustomData
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
gulp.task('watch', () => {
|
||||
gulp.watch(cssFiles, {ignoreInitial: false}, gulp.series(buildCss)),
|
||||
gulp.watch(jsFiles, {ignoreInitial: false}, gulp.series(buildJsDev));
|
||||
});
|
||||
|
||||
function buildJs() {
|
||||
return gulp.src(jsFiles)
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(concat('XduPlayer.js'))
|
||||
.pipe(gulp.dest(jsDest))
|
||||
.pipe(rename('XduPlayer.min.js'))
|
||||
.pipe(uglify())
|
||||
.pipe(sourcemaps.write(''))
|
||||
.pipe(gulp.dest(jsDest));
|
||||
}
|
||||
|
||||
function buildJsDev() {
|
||||
return gulp.src(jsFiles)
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(concat('XduPlayer.js'))
|
||||
.pipe(gulp.dest(jsDest))
|
||||
.pipe(rename('XduPlayer.min.js'))
|
||||
.pipe(sourcemaps.write(''))
|
||||
.pipe(gulp.dest(jsDest));
|
||||
}
|
||||
|
||||
function copyJs() {
|
||||
return gulp.src(jsToCopy)
|
||||
.pipe(gulp.dest('Dist/Js'));
|
||||
}
|
||||
|
||||
function buildCss() {
|
||||
return gulp.src('Css/main.css')
|
||||
.pipe(cssmin())
|
||||
.pipe(rename({suffix: '.min'}))
|
||||
.pipe(gulp.dest('Css'));
|
||||
}
|
||||
|
||||
function copyCss() {
|
||||
return gulp.src(cssToCopy)
|
||||
.pipe(gulp.dest('Dist/Css'));
|
||||
}
|
||||
|
||||
function copyHtml() {
|
||||
return gulp.src('Player.html')
|
||||
.pipe(gulp.dest('Dist'));
|
||||
}
|
||||
|
||||
function copyImages() {
|
||||
return gulp.src('Images/**')
|
||||
.pipe(gulp.dest('Dist/Images'));
|
||||
}
|
||||
|
||||
function copyCustomData() {
|
||||
return gulp.src('CustomData/**')
|
||||
.pipe(gulp.dest('Dist/CustomData'));
|
||||
}
|
||||
|
||||
function buildJson() {
|
||||
return gulp.src(jsonFiles)
|
||||
.pipe(jsonmin())
|
||||
.pipe(gulp.dest('Dist/Js'));
|
||||
}
|
||||
|
||||
function buildJsonTranslations() {
|
||||
return gulp.src(translations)
|
||||
.pipe(jsonmin())
|
||||
.pipe(gulp.dest('Dist/Js/Translations'));
|
||||
}
|
10495
package-lock.json
generated
10495
package-lock.json
generated
ファイル差分が大きすぎるため省略します
差分を読み込み
29
package.json
29
package.json
@ -3,14 +3,27 @@
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server --content-base Dist/",
|
||||
"build": "NODE_ENV=production webpack",
|
||||
"lint": "eslint"
|
||||
},
|
||||
"devDependencies": {
|
||||
"gulp": "github:gulpjs/gulp#4.0",
|
||||
"gulp-concat": "~2.6.1",
|
||||
"gulp-cssmin": "~0.2.0",
|
||||
"gulp-jsonminify": "^1.1.0",
|
||||
"gulp-rename": "~1.2.2",
|
||||
"gulp-sourcemaps": "~2.6.4",
|
||||
"gulp-uglify": "~3.0.0",
|
||||
"gulp-uglify-es": "~1.0.1"
|
||||
"@babel/core": "^7.4.4",
|
||||
"@babel/preset-env": "^7.4.4",
|
||||
"babel-loader": "^8.0.6",
|
||||
"babel-plugin-syntax-dynamic-import": "^6.18.0",
|
||||
"copy-webpack-plugin": "^5.0.3",
|
||||
"css-loader": "^2.1.1",
|
||||
"eslint": "^5.16.0",
|
||||
"file-loader": "^3.0.1",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"jsonminify": "^0.4.1",
|
||||
"mini-css-extract-plugin": "^0.6.0",
|
||||
"style-loader": "^0.23.1",
|
||||
"uglifyjs-webpack-plugin": "^2.1.2",
|
||||
"webpack": "^4.31.0",
|
||||
"webpack-cli": "^3.3.2",
|
||||
"webpack-dev-server": "^3.3.1"
|
||||
}
|
||||
}
|
||||
|
117
webpack.config.js
ノーマルファイル
117
webpack.config.js
ノーマルファイル
@ -0,0 +1,117 @@
|
||||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
|
||||
const HtmlWebPackPlugin = require('html-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const jsonminify = require('jsonminify');
|
||||
|
||||
const devMode = process.env.NODE_ENV !== 'production';
|
||||
|
||||
module.exports = {
|
||||
entry: "./Js/Main.js",
|
||||
externals: {
|
||||
Pixi: "PIXI"
|
||||
},
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({
|
||||
filename: "./Css/[name].css",
|
||||
chunkFilename: "[id].css"
|
||||
}),
|
||||
new CopyWebpackPlugin([{
|
||||
from: './Js/Translations/**/*json',
|
||||
to: '.',
|
||||
transform: (fileContent, path) => {
|
||||
if (!devMode) {
|
||||
return Promise.resolve(jsonminify(fileContent.toString()))
|
||||
}
|
||||
return Promise.resolve(fileContent);
|
||||
}
|
||||
},
|
||||
{
|
||||
from: './Js/Pixi.min.js',
|
||||
to: './Js/',
|
||||
},
|
||||
{
|
||||
from: './Images/',
|
||||
to: './Images/'
|
||||
}]),
|
||||
new HtmlWebPackPlugin({
|
||||
template: './Player.html',
|
||||
filename: './Player.html',
|
||||
minify: devMode ? false : {
|
||||
collapseWhitespace: true,
|
||||
removeComments: true,
|
||||
removeRedundantAttributes: true,
|
||||
removeScriptTypeAttributes: true,
|
||||
removeStyleLinkTypeAttributes: true,
|
||||
useShortDoctype: true
|
||||
}
|
||||
})
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
include: [path.resolve(__dirname, 'Js')],
|
||||
loader: 'babel-loader',
|
||||
|
||||
options: {
|
||||
plugins: ['syntax-dynamic-import'],
|
||||
|
||||
presets: [
|
||||
[
|
||||
'@babel/preset-env',
|
||||
{
|
||||
modules: false
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
|
||||
test: /\.js$/
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [MiniCssExtractPlugin.loader, "css-loader"],
|
||||
},
|
||||
{ test: /\.woff2$/,
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
outputPath: './Fonts/',
|
||||
publicPath: '/Fonts/',
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
output: {
|
||||
chunkFilename: '[name].[chunkhash].js',
|
||||
filename: 'Js/XduPlayer.js',
|
||||
path: path.resolve(__dirname, 'Dist'),
|
||||
libraryTarget: 'var',
|
||||
library: 'XduPlayer'
|
||||
},
|
||||
|
||||
devServer: {
|
||||
index: 'Player.html'
|
||||
},
|
||||
|
||||
mode: devMode ? 'development' : 'production',
|
||||
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
cacheGroups: {
|
||||
vendors: {
|
||||
priority: -10,
|
||||
test: /[\\/]node_modules[\\/]/
|
||||
}
|
||||
},
|
||||
|
||||
chunks: 'async',
|
||||
minChunks: 1,
|
||||
minSize: 30000,
|
||||
name: true
|
||||
}
|
||||
}
|
||||
};
|
読み込み中…
x
新しいイシューから参照
ユーザーをブロックする