Removed webpack for gulp again because its simpler for a project this size.

Css/main.css

@@ -39,7 +39,7 @@
 	src: url(../Fonts/Orbitron Medium.woff2) format('woff');
 }
 
-@font-face {
+/*@font-face {
 	font-family: PTSans;
 	src: url(../Fonts/PTSans.woff2) format('woff');
 }

Js/Audio.js

@@ -1,7 +1,5 @@
 //(Math.exp(x)-1)/(Math.E-1)
 
-import bgmLoopData from './BgmLoop.json';
-
 class bufferLoader {
 	constructor(context, soundMap, callback) {
 		this.context = context;
@@ -96,8 +94,8 @@ class audioController {
 		source.buffer = this.loader.bufferList[sound];
 		source.loop = false;
 		if(type === "bgm") {
-			if(bgmLoopData[this.utage.soundInfo[sound].origFileName]) {
-				let loop = bgmLoopData[this.utage.soundInfo[sound].origFileName];
+			if(this.utage.bgmLoopData[this.utage.soundInfo[sound].origFileName]) {
+				let loop = this.utage.bgmLoopData[this.utage.soundInfo[sound].origFileName];
 				source.loopStart = loop["loop_start"]["seconds"];
 				source.loopEnd = loop["loop_end"]["seconds"];
 				source.loop = true;
@@ -184,5 +182,3 @@ class audioController {
 		this.sources = {};
 	}
 }
-
-export { audioController };

Js/Common.js

@@ -334,10 +334,7 @@ class commonFunctions {
 				if(props[i] == " ") { break; }
 				retval.color += props[i];
 			}
-			//retval.color = retval.color;
 		}
 		return retval;
 	}
 }
-
-export { rootUrl, baseDimensions, screenRatio, commonFunctions };

Js/Main.js

@@ -1,17 +1,5 @@
 '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
@@ -227,9 +215,9 @@ function missionDropDownChanged(event) {
 			${chapterSelect}
 		</div>
 		<div id="modal-buttons">
-			<button onclick="XduPlayer.closeMissionModal(event, false)">Close</button>
+			<button onclick="closeMissionModal(event, false)">Close</button>
 			<span>MstId: ${mis.MstId}</span>
-			<button onclick="XduPlayer.missionChanged(${mis.MstId})">Play</button>
+			<button onclick="missionChanged(${mis.MstId})">Play</button>
 		</div>
 	</div>`;
 	document.getElementById("click-catcher").style.cssText = 'display: flex;';
@@ -436,7 +424,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="XduPlayer.closeModal(event)">Close</button>
+			<button onclick="closeModal(event)">Close</button>
 			<a href="https://git.poweris.moe/xduplayer.git/" target="_blank">Source</a>
 		</div>
 	</div>`;
@@ -511,24 +499,4 @@ function onWindowResize(event, delay = 400) {
 		player.updateResolution(res);
 		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,
-	closeModal
-};
+}

Js/Player.js

@@ -1,9 +1,5 @@
 'use strict';
 
-/* global PIXI */
-import 'Pixi';
-import { baseDimensions, commonFunctions } from './Common.js';
-
 class Player {
 	constructor(pixi, utage, text, audio, shaderscript) {
 		this.pixi = pixi;
@@ -1401,5 +1397,3 @@ class Player {
 		});
 	}
 }
-
-export { Player };

Js/Shaders.js

@@ -1,9 +1,5 @@
 //http://glslsandbox.com/e#39992.0
 
-/* global PIXI */
-import 'Pixi';
-import { baseDimensions } from './Common.js';
-
 class Shaders {
 	constructor() {
 		this.leftToRightFadeShader = `
@@ -205,5 +201,3 @@ class Shaders {
 		}
 	}
 }
-
-export { Shaders };

Js/TextFunctions.js

@@ -191,5 +191,3 @@ class TextFunctions {
 		this.lineHeight = -1;
 	}
 }
-
-export { TextFunctions };

Js/Translations

@@ -1 +1 @@
-Subproject commit dc15df970a33c34dd53654fb77ce775ee9e3f051
+Subproject commit c472de2e64186cbd4b802dafbdd171efb7985d78

Js/UtageParse.js

@@ -1,8 +1,6 @@
 //http://madnesslabo.net/utage/?page_id=4448&lang=en
 'use strict';
 
-import { commonFunctions } from './Common.js';
-
 class UtageInfo {
 	constructor() {
 		this.currentPlayingFile = [];
@@ -34,16 +32,16 @@ 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`),
-				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
-				commonFunctions.getFileText(`${this.rootDirectory}XDUData/Utage/Diva/Scenario/Macro.tsv`), //10
+				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.getFileText(`${this.rootDirectory}XDUData/Utage/Diva/Scenario/Macro.tsv`), //11
 			];
 			Promise.all(promises)
 			.then((success) => {
-				this.groupMissions(success[0], success[6]);
+				this.groupMissions(success[0], success[7]);
 				this.missionsList = Object.keys(this.groupedMissions).map((k) => {
 					return {Name: this.groupedMissions[k].Name, MstId: this.groupedMissions[k].MstId};
 				});
@@ -54,11 +52,11 @@ class UtageInfo {
 				//this.parseParamInfo(success[4]);
 				this.parseSoundInfo(success[4]);
 				this.parseTextureInfo(success[5]);
-				//this.bgmLoopData = success[6];
-				this.parseCharacterInfo(success[7], true);
-				this.parseSoundInfo(success[8], true);
-				this.parseTextureInfo(success[9], true);
-				this.parseMacroFile(success[10]);
+				this.bgmLoopData = success[6];
+				this.parseCharacterInfo(success[8], true);
+				this.parseSoundInfo(success[9], true);
+				this.parseTextureInfo(success[10], true);
+				this.parseMacroFile(success[11]);
 				resolve();
 			}, (failure) => {
 				reject(failure);
@@ -395,5 +393,3 @@ class UtageInfo {
 		this.translationsInner = {};
 	}
 }
-
-export { UtageInfo };

Player.html

@@ -5,19 +5,18 @@
 		<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="XduPlayer.onBodyLoaded()" onkeyup="XduPlayer.onBodyKey(event)">
+	<body onload="onBodyLoaded()" onkeyup="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.js"></script> -->
+		<script src="Js/Player.js"></script>-->
+		<script src="Js/XduPlayer.min.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 +25,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="XduPlayer.toggleMute(event)" id="mute-button">&#128266;</span> <!-- loud_sound -->
-					<input onchange="XduPlayer.onVolumeChange(event)" id="volume-range" value="50" type="range" min="0" max="100" step="1"/>
+					<span onclick="toggleMute(event)" id="mute-button">&#128266;</span> <!-- loud_sound -->
+					<input onchange="onVolumeChange(event)" id="volume-range" value="50" type="range" min="0" max="100" step="1"/>
 				</div>
-				<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>
+				<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>
 			</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="XduPlayer.onMainClick(event);">
+			<div id="app-container" onclick="onMainClick(event);">
 				<div id="text-container">
-					<div id="fullscreen-button" onclick="XduPlayer.toggleFullscreen(event)">&#10133;</div> <!-- heavy_plus_sign -->
+					<div id="fullscreen-button" onclick="toggleFullscreen(event)">&#10133;</div> <!-- heavy_plus_sign -->
 					<img id="main-ui-img" class="hidden" src="Images/newui_main.png"/>
-					<button id="play-from-query" onclick="XduPlayer.playFromQuery(event)" style="display: none;">Play</button>
+					<button id="play-from-query" onclick="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="XduPlayer.skipClicked(event)" id="skip-button"/>
-							<img class="ui-button" src="Images/hide_button.png" onclick="XduPlayer.hideUiClicked(event)"/>
+							<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)"/>
 						</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="XduPlayer.dialogScrollUp(event)"/>
-									<img src="Images/next_icon.png" onclick="XduPlayer.dialogScrollDown(event)"/>
+									<img id="dialog-scroll-up" src="Images/next_icon.png" onclick="dialogScrollUp(event)"/>
+									<img src="Images/next_icon.png" onclick="dialogScrollDown(event)"/>
 								</div>
 								<div id="dialog-next" class="hidden">
 									<img src="Images/next_icon.png"/>
@@ -64,7 +63,7 @@
 				</div>
 			</div>
 		</div>
-		<div id="click-catcher" style="display: none;" onclick="XduPlayer.closeMissionModal(event, false)"></div>
+		<div id="click-catcher" style="display: none;" onclick="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>

README.md

@@ -1,2 +1 @@
-run `npm install` then `npm start` to start a dev server or
-`npm run-script build` to build production files in the Dist folder.
+run `npm install` then `gulp dist` or `node(nodejs) node_modules/gulp/bin/gulp.js dist` to build files into Dist folder.

gulpfile.js

@@ -0,0 +1,130 @@
+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'));
+}

package.json

@@ -3,27 +3,16 @@
 	"version": "1.3.0",
 	"private": true,
 	"license": "MIT",
-	"scripts": {
-		"start": "webpack-dev-server --content-base Dist/",
-		"build": "NODE_ENV=production webpack",
-		"lint": "eslint"
-	},
 	"devDependencies": {
-		"@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"
+		"gulp": "~4.0.2",
+		"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",
+		"npm": "^6.9.0",
+		"eslint": "^5.16.0"
 	}
 }

webpack.config.js

@@ -1,117 +0,0 @@
-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
-		}
-	}
-};