New: some UI

css/simulator-ui/main.css

@@ -64,7 +64,14 @@ div.fleet div.iconForm {
 div.fleet div.iconForm img {
 	height: 40px;
 }
+img.copyIcons {
+	cursor: pointer;
+}
 
+#divMain {
+	width: 1086px;
+	margin: auto;
+}
 #divBattles {
 	width: fit-content;
 }
@@ -193,6 +200,9 @@ div.fleetCompAdd > div {
 input.changed {
 	background-color: yellow;
 }
+input[type="button"] {
+	cursor: pointer;
+}
 
 #divSimStatsButtons {
 	margin-top: 10px;
@@ -238,6 +248,8 @@ div.progressBarInner {
 	display: flex;
 }
 #divResultColsWrap div.resultCol {
+	padding-left: 5px;
+	border-left: 1px solid #e3e3e3;
 	margin-right: 20px;
 }
 #divResultColsWrap div.resultCol > div {
@@ -302,13 +314,17 @@ div.progressBarInner {
 }
 
 #divChangeLog {
+	width: 1086px;
+	margin: auto;
 	margin-top: 20px;
 	font-size: 14px;
 }
 #divChangeLog span.header {
 	font-weight: bold;
 }
 #divFooter {
+	width: 1086px;
+	margin: auto;
 	margin-top: 20px;
 	font-size: 14px;
 }
@@ -467,6 +483,23 @@ span.tooltip {
 #divAutoBonus div.autoBonusMainFoot > div:last-child {
 	margin-left: auto;
 }
+#notice {
+	position: fixed;
+	bottom: 30px;
+	right: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 190px;
+	height: 65px;
+	border: 2px solid #6ae3ff;
+	border-right: none;
+	font-size: 15px;
+	font-weight: 600;
+	color: #ffffff;
+	background-color: #4EABF5;
+	opacity: 0;
+}
 span.autoBonusStatus {
 	font-weight: bold;
 }
@@ -475,4 +508,4 @@ span.autoBonusStatus.good {
 }
 .invisible {
 	visibility: hidden;
-}
+}

css/simulator-ui/selector.css

@@ -1,15 +1,19 @@
 #divShipSelMain, #divEquipSelMain {
 	background-color: #EDE6D8;
 	width: 720px;
-	height: 560px;
+	height: 760px;
 	border: 1px solid transparent;
 	box-shadow: 0 0 5px black;
 }
+#divEquipSelMain {
+	width: 1200px;
+}
 #divShipSelSearch, #divEquipSelSearch {
 	margin-left: 30px;
 	margin-top: 15px;
 }
 #divShipSelResults, #divEquipSelResults {
+	overscroll-behavior: none;
 	overflow-y: scroll;
 	height: 504px;
 }
@@ -75,15 +79,16 @@ div.selButtonBack > :last-child {
 }
 
 #divShipSelButtonsShip {
-	max-height: 500px;
+	max-height: 700px;
+	overscroll-behavior: none;
 	overflow-y: scroll;
 	margin-left: 30px;
 	margin-top: 15px;
 	display: flex;
 	flex-basis: 0;
 	flex-wrap: wrap;
 	font-family: Verdana,Arial,sans-serif;
-    font-size: 1.1em;
+  font-size: 1.1em;
 }
 #divShipSelButtonsShip div.remodelButtonWrap {
 	display: flex;
@@ -102,36 +107,44 @@ div.selButtonBack > :last-child {
 }
 
 #divEquipSelButtonsEquip {
-	max-height: 500px;
+	overscroll-behavior: none;
+	max-height: 700px;
 	overflow-y: scroll;
 	margin: 15px 30px;
 	font-family: Verdana,Arial,sans-serif;
-    font-size: 1.1em;
+  font-size: 1.1em;
 }
 #divEquipSelButtonsEquip div.equipButtonWrap {
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
+	flex-wrap: wrap;
 	flex-basis: 0;
 	margin-bottom: 30px;
 	font-size: 14px;
 }
 #divEquipSelButtonsEquip div.equipButton {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	width: calc(25% - 20px);
 	display: flex;
 	border: 1px solid black;
-	margin: 1px;
+	margin: 2px;
 	padding-bottom: 2px;
 	background-color: white;
+	border-right: none;
+	border-bottom: none;
+	font-size: 13px;
 }
 #divEquipSelButtonsEquip div.equipButton:hover {
 	background-color: #78BEB5;
 	cursor: pointer;
 }
 #divEquipSelButtonsEquip div.equipButton img {
 	vertical-align: middle;
-	margin-left: 12px;
+	margin-left: 2px;
 	margin-right: 2px;
 }
 #divEquipSelButtonsEquip div.equipButton span {
 	vertical-align: middle;
 }
-

js/simulator-ui/cmp.js

@@ -190,4 +190,4 @@ COMMON.i18n = VueI18n.createI18n({
 	messages,
 });
 
-})();
+})();

js/simulator-ui/fleet-editor.js

@@ -789,6 +789,10 @@ var UI_FLEETEDITOR = Vue.createApp({
 		receiveCloseEquip: function() {
 			UI_FLEETEDITOR.refocusEquip();
 		},
+		// c.One click on the text area for importing deck builder data will select all the data.
+		onclickSelectAll: function(event) {
+			event.target.select();
+		}
 	},
 }).component('vmodal',COMMON.CMP_MODAL).use(COMMON.i18n).mount('#divFleetEditor');
 
@@ -1141,4 +1145,4 @@ COMMON.global.fleetEditorMoveTemp = function(elFrom) {
 	}
 }
 
-})();
+})();

js/simulator-ui/selector.js

@@ -473,4 +473,4 @@ COMMON.global.equipSelectorClose = function() {
 }
 
 
-})();
+})();

js/simulator-ui/sim-interface.js

@@ -943,4 +943,4 @@ var SIM = {
 
 window.SIM = SIM;
 
-})()
+})()

js/simulator-ui/ui-main.js

@@ -547,6 +547,49 @@ var UI_MAIN = Vue.createApp({
 		onclickSetFCF: function() {
 			UI_FCFSETTINGS.doOpen(this.settingsFCF);
 		},
+
+		// a. Clipboard copy function on results screen (a'. and simple notification function)
+		onclickCopyResults: function(typeString) {
+			let isJP = document.querySelector('#divMain input[value="ja"]').checked;
+			let text = '';
+
+			const results = this.results;
+			const retreat_rate = Math.floor(results.retreat * 1000) / 10;
+			const s_rate = Math.floor(results.rankS * 1000) / 10;
+			const flagSunk_rate = Math.floor(results.flagSunk * 1000) / 10;
+			if(typeString === 'S') {
+				if(isJP) {
+					text = `撤退率: ${retreat_rate}%, S率: ${s_rate}%\nS勝利あたり\n燃料:   ${results.fuelS}\n弾薬:   ${results.ammoS}\n鋼材:   ${results.steelS}\nボーキ: ${results.bauxS}\nバケツ: ${results.bucketS}`;
+				} else {
+					text = `retreat: ${retreat_rate}%, S rate: ${s_rate}%\nAvg Resource Per S\nfuel:   ${results.fuelS}\nammo:   ${results.ammoS}\nsteel:  ${results.steelS}\nbauX:   ${results.bauxS}\nbucket: ${results.bucketS}`;
+				}
+			} else if(typeString === 'Flag') {
+				if(isJP) {
+					text = `撤退率: ${retreat_rate}%, 旗艦撃沈率: ${flagSunk_rate}%\n旗艦撃沈あたり\n燃料:   ${results.fuelSunk}\n弾薬:   ${results.ammoSunk}\n鋼材:   ${results.steelSunk}\nボーキ: ${results.bauxSunk}\nバケツ: ${results.bucketSunk}`;
+				} else {
+					text = `retreat: ${retreat_rate}%, Flagship Sunk rate: ${flagSunk_rate}%\nAvg Resource Per Flagship Sunk\nfuel:   ${results.fuelSunk}\nammo:   ${results.ammoSunk}\nsteel:  ${results.steelSunk}\nbauX:   ${results.bauxSunk}\nbucket: ${results.bucketSunk}`;
+				}
+			}
+			let textarea = document.createElement('textarea');
+      textarea.style.position = 'fixed';
+      textarea.style.opacity = 0;
+      textarea.value = text;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('Copy');
+      document.body.removeChild(textarea);
+			this.displayNotice('copied');
+		},
+
+		// a'. and simple notification function
+		displayNotice: function(text) {
+			const notice = document.getElementById('notice');
+			notice.textContent = text;
+			notice.style.opacity = '1';
+      setTimeout(function() {
+          notice.style.opacity = '0';
+      }, 1000);
+		}
 	},
 }).component('vbattle',{
 	props: ['battle','candelete','isboss'],
@@ -1672,7 +1715,19 @@ var UI_AUTOBONUS = Vue.createApp({
 	},
 }).component('vmodal',COMMON.CMP_MODAL).component('vloading',COMMON.CMP_LOADING).mount('#divAutoBonus');
 
-
+// b.Keyboard shortcuts (for now, for the start of calculation)
+window.addEventListener('keydown', function(event) {
+  const key = event.key.toLowerCase();
+  switch(key) {
+		case 'enter':
+			const focusedElement = document.activeElement;
+			if(focusedElement.tagName !== 'INPUT' && !focusedElement.tagName !== 'TEXTAREA') {
+				UI_MAIN.onclickGo();
+				scrollTo(0, document.querySelector('#divSimStatsButtons input[value="Go"]').getBoundingClientRect().top + window.pageYOffset);
+			}
+			break;
+	}
+});
 
 document.body.onunload = function() {
 	if (UI_MAIN.canSave) {
@@ -1682,4 +1737,4 @@ document.body.onunload = function() {
 
 COMMON.UI_MAIN = UI_MAIN; //debug
 
-})();
+})();

simulator.html

@@ -1,8 +1,9 @@
 <html>
-<head>
+<head lang="en">
 	<title>KanColle Sortie Simulator</title>
 	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
 	<meta content="utf-8" http-equiv="encoding">
+
 
 	<link rel="stylesheet" href="css/simulator-ui/main.css"/>
 	<link rel="stylesheet" href="css/simulator-ui/fleet-editor.css"/>
@@ -400,7 +401,7 @@ <h3>Statistics</h3>
 							</table>
 						</div>
 						<div>
-							<div>Avg Resource Per <img src="assets/stats/S.png" alt="S"/>:</div>
+							<div>Avg Resource Per <img src="assets/stats/S.png" alt="S"/>:<img @click="onclickCopyResults('S')" src="assets/commons/content-copy-custom.png" class="copyIcons"></div>
 							<table>
 							<tr><th><img src="assets/stats/fuel.png" alt="Fuel"/></th><td><span class="resultBold">{{results.fuelS}}</span></td></tr>
 							<tr><th><img src="assets/stats/ammo.png" alt="Ammo"/></th><td><span class="resultBold">{{results.ammoS}}</span></td></tr>
@@ -411,7 +412,7 @@ <h3>Statistics</h3>
 							</table>
 						</div>
 						<div>
-							<div>Avg Resource Per <img src="assets/stats/flagsunk.png" alt="Flagship Sunk"/>:</div>
+							<div>Avg Resource Per <img src="assets/stats/flagsunk.png" alt="Flagship Sunk"/>:<img @click="onclickCopyResults('Flag')" src="assets/commons/content-copy-custom.png" class="copyIcons"></div>
 							<table>
 							<tr><th><img src="assets/stats/fuel.png" alt="Fuel"/></th><td><span class="resultBold">{{results.fuelSunk}}</span></td></tr>
 							<tr><th><img src="assets/stats/ammo.png" alt="Ammo"/></th><td><span class="resultBold">{{results.ammoSunk}}</span></td></tr>
@@ -474,6 +475,9 @@ <h3>Statistics</h3>
 		<div>2017-03-23 - Fifth slot, separate plane improvement and proficiency, changed save/load code, day soft-cap option</div>
 		<div>2016-10-25 - Major reworking and improving of calculations. Added calculations explanations.</div>
 	</div>
+	<div id="notice">
+		テスト
+	</div>
 	<div id="divFooter">
 		<div>Bug reports/feature requests: <a href="https://github.com/KC3Kai/kancolle-replay/issues">Github</a></div>
 	</div>
@@ -623,7 +627,7 @@ <h3>Statistics</h3>
 			<div class="headerImport">Load options:</div>
 			<div>
 				<div class="headerSubImport">From text:</div>
-				<div><textarea cols="20" rows="2" autocomplete="off" v-model="loadCode" @focus="onfocusCode" title="Can use: Simulator's default JSON, Deckbuilder JSON, KC3 Replay JSON"></textarea></div>
+				<div><textarea cols="20" rows="2" autocomplete="off" v-model="loadCode" @click="onclickSelectAll" @focus="onfocusCode" title="Can use: Simulator's default JSON, Deckbuilder JSON, KC3 Replay JSON"></textarea></div>
 				<div>
 					<input type="button" value="Load" @click="onclickLoadCode"/>
 					<span v-show="codeIsDeckbuilder"> Fleet: <select v-model.number="loadCodeFleet">
@@ -1071,7 +1075,7 @@ <h3>Statistics</h3>
 			</div>
 			<div class="sectionWrap">
 				<div class="sectionLeft">
-					<div><textarea ref="textImport" cols="30" rows="2" autocomplete="off" v-model="textImport"></textarea></div>
+					<div><textarea ref="textImport" cols="30" rows="2" autocomplete="off" @click="onclickSelectAll" v-model="textImport"></textarea></div>
 					<div>
 						<div><input type="button" value="Import" @click="onclickImport"/></div>
 						<div class="sectionWrap">
@@ -1087,7 +1091,7 @@ <h3>Statistics</h3>
 					</div>
 				</div>
 				<div>
-					<div><textarea ref="textExport" cols="30" rows="2" autocomplete="off" v-model="textExport"></textarea></div>
+					<div><textarea ref="textExport" cols="30" rows="2" autocomplete="off" @click="onclickSelectAll" v-model="textExport"></textarea></div>
 					<div><input type="button" value="Export Text" @click="onclickExport"/></div>
 					<div><input type="button" value="Open in DeckBuilder" @click="onclickOpenDb"/><input type="button" value="Open in LBAS Sim" @click="onclickOpenLBASSim"/></div>
 				</div>
@@ -1394,4 +1398,4 @@ <h3>Statistics</h3>
 	<script src="js/simulator-ui/sim-interface.js"></script>
 	<script src="js/simulator-ui/ui-main.js"></script>
 </body>
-</html>
+</html>