jbis9051 · April 18, 2019 12:47
diff --git a/loading.html b/loading.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8">
 		<title>Title</title>

 		<script>
 			const {ipcRenderer} = require('electron');
 			ipcRenderer.on('getPage', e => {
 				window.location.href = "http://localhost:3000";
 			});
 		</script>

 		<style>
 			* {
 				--animation-speed: 0.85s;
 			}
 		</style>

 		<style>
 			@keyframes a1 {
 				0% {
 					left: 0;
 				}
 				50% {
 					left: 3.75cm;
 				}
 				100% {
 					left: 0;
 				}
 			}

 			@keyframes a2 {
 				0% {
 					left: 0;
 				}
 				50% {
 					left: 1.25cm;
 				}
 				100% {
 					left: 0;
 				}
 			}

 			@keyframes a3 {
 				0% {
 					right: 0;
 				}
 				50% {
 					right: 1.25cm;
 				}
 				100% {
 					right: 0;
 				}
 			}

 			@keyframes a4 {
 				0% {
 					right: 0;
 				}
 				50% {
 					right: 3.75cm;
 				}
 				100% {
 					right: 0;
 				}
 			}

 			@keyframes rotate {
 				0% {
 					transform: rotate(0deg);
 				}
 				37.5% {
 					transform: rotate(180deg);
 				}
 				50% {
 					transform: rotate(180deg);
 				}
 				87.5% {
 					transform: rotate(360deg);
 				}
 				100% {
 					transform: rotate(360deg);
 				}
 			}

 			@keyframes pulse {
 				0% {

 					box-shadow: 0 0 5px 0 #181b1e;
 					padding: 0;
 				}
 				35% {

 					box-shadow: 0 0 5px 0 #181b1e;
 					padding: 0;
 				}
 				50% {

 					box-shadow: 0 0 10px 0 #181b1e;
 					padding: 8px;
 				}
 				65% {

 					box-shadow: 0 0 5px 0 #181b1e;
 					padding: 0;
 				}
 				100% {

 					box-shadow: 0 0 5px 0 #181b1e;
 					padding: 0;
 				}
 			}

 		</style>

 		<style>
 			* {
 				margin: 0;
 				padding: 0;
 			}
 			body {
 				background: #3c434b;
 				width: 100vw;
 				height: 100vh;
 				display: flex;
 				align-items: center;
 				justify-content: center;
 			}
 			.dot {
 				width: 0.25cm;
 				height: 0.25cm;
 				padding: 0;
 				background: aliceblue;
 				display: block;
 				border-radius: 100px;
 				animation-iteration-count: infinite !important;
 				position: fixed;

 				box-shadow: 0 0 5px 0 #181b1e;
 			}
 			.loading {
 				position: fixed;
 				transform-origin: 50% 50%;
 				animation: rotate calc(var(--animation-speed) * 2) ease;
 				animation-iteration-count: infinite !important;
 				left: 50%;
 				top: 50%;
 				transform: translate(-50%);
 			}

 			.dot1 {
 				animation: a1 var(--animation-speed) ease, pulse var(--animation-speed) ease;
 			}
 			.dot2 {
 				animation: a2 var(--animation-speed) ease, pulse var(--animation-speed) ease;
 			}
 			.dot3 {
 				animation: a3 var(--animation-speed) ease, pulse var(--animation-speed) ease;
 			}
 			.dot4 {
 				animation: a4 var(--animation-speed) ease, pulse var(--animation-speed) ease;
 			}
 		</style>
 	</head>
 	<body>
 		<div class="outline">
 			<div class="loading">
 				<span class="dot dot1"/>
 				<span class="dot dot2"/>
 				<span class="dot dot3"/>
 				<span class="dot dot4"/>
 			</div>
 		</div>

 		<script>
 			const { ping } = require('./ping.js');
 			const { exec } = require('child_process');

 			(async function() {
 				// server launch control

 				console.log('Server Launch Control');

 				let server;
 				let nextDatum = false; // when set to true, the next stdout item from the server will cause the loading phase to end.

 				ping({address: "localhost", port: 3000, attempts: 1}, (opts, result) => {
 					console.log(result);
 					if (isNaN(result.avg)) {
 						server = exec('npm start');
 						server.stdout.on('data', e => {
 							if (e.trim().indexOf(`Starting the development server...`) > -1)
 								nextDatum = true;

 							if (nextDatum)
 								nextDatum = load() || false;

 							process.stdout.write(e);
 						});
 						// start server
 					} else {
 						load();
 					}
 				});

 				const load = () => void (window.location.href = "http://localhost:3000");
 			})();
 		</script>
 	</body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>

	<script>
	const {ipcRenderer} = require('electron');
	ipcRenderer.on('getPage', e => {
	window.location.href = "http://localhost:3000";
	});
	</script>

	<style>
	* {
	--animation-speed: 0.85s;
	}
	</style>

	<style>
	@keyframes a1 {
	0% {
	left: 0;
	}
	50% {
	left: 3.75cm;
	}
	100% {
	left: 0;
	}
	}

	@keyframes a2 {
	0% {
	left: 0;
	}
	50% {
	left: 1.25cm;
	}
	100% {
	left: 0;
	}
	}

	@keyframes a3 {
	0% {
	right: 0;
	}
	50% {
	right: 1.25cm;
	}
	100% {
	right: 0;
	}
	}

	@keyframes a4 {
	0% {
	right: 0;
	}
	50% {
	right: 3.75cm;
	}
	100% {
	right: 0;
	}
	}

	@keyframes rotate {
	0% {
	transform: rotate(0deg);
	}
	37.5% {
	transform: rotate(180deg);
	}
	50% {
	transform: rotate(180deg);
	}
	87.5% {
	transform: rotate(360deg);
	}
	100% {
	transform: rotate(360deg);
	}
	}

	@keyframes pulse {
	0% {

	box-shadow: 0 0 5px 0 #181b1e;
	padding: 0;
	}
	35% {

	box-shadow: 0 0 5px 0 #181b1e;
	padding: 0;
	}
	50% {

	box-shadow: 0 0 10px 0 #181b1e;
	padding: 8px;
	}
	65% {

	box-shadow: 0 0 5px 0 #181b1e;
	padding: 0;
	}
	100% {

	box-shadow: 0 0 5px 0 #181b1e;
	padding: 0;
	}
	}

	</style>

	<style>
	* {
	margin: 0;
	padding: 0;
	}
	body {
	background: #3c434b;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	}
	.dot {
	width: 0.25cm;
	height: 0.25cm;
	padding: 0;
	background: aliceblue;
	display: block;
	border-radius: 100px;
	animation-iteration-count: infinite !important;
	position: fixed;

	box-shadow: 0 0 5px 0 #181b1e;
	}
	.loading {
	position: fixed;
	transform-origin: 50% 50%;
	animation: rotate calc(var(--animation-speed) * 2) ease;
	animation-iteration-count: infinite !important;
	left: 50%;
	top: 50%;
	transform: translate(-50%);
	}

	.dot1 {
	animation: a1 var(--animation-speed) ease, pulse var(--animation-speed) ease;
	}
	.dot2 {
	animation: a2 var(--animation-speed) ease, pulse var(--animation-speed) ease;
	}
	.dot3 {
	animation: a3 var(--animation-speed) ease, pulse var(--animation-speed) ease;
	}
	.dot4 {
	animation: a4 var(--animation-speed) ease, pulse var(--animation-speed) ease;
	}
	</style>
	</head>
	<body>
	<div class="outline">
	<div class="loading">
	<span class="dot dot1"/>
	<span class="dot dot2"/>
	<span class="dot dot3"/>
	<span class="dot dot4"/>
	</div>
	</div>

	<script>
	const { ping } = require('./ping.js');
	const { exec } = require('child_process');

	(async function() {
	// server launch control

	console.log('Server Launch Control');

	let server;
	let nextDatum = false; // when set to true, the next stdout item from the server will cause the loading phase to end.

	ping({address: "localhost", port: 3000, attempts: 1}, (opts, result) => {
	console.log(result);
	if (isNaN(result.avg)) {
	server = exec('npm start');
	server.stdout.on('data', e => {
	if (e.trim().indexOf(`Starting the development server...`) > -1)
	nextDatum = true;

	if (nextDatum)
	nextDatum = load() \|\| false;

	process.stdout.write(e);
	});
	// start server
	} else {
	load();
	}
	});

	const load = () => void (window.location.href = "http://localhost:3000");
	})();
	</script>
	</body>
	</html>