sortie sim: nav bar, results screenshot copies to clipboard

sim: consts for balloon airstrike acc (WIP)

css/simulator-ui/main.css

@@ -349,13 +349,15 @@ div.overlayDark {
 	background-color: black;
 	opacity: .3;
 	cursor: pointer;
+	z-index: 200;
 }
 div.modalContent {
 	position: fixed;
 	top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+	left: 50%;
+	transform: translate(-50%, -50%);
 	outline: none;
+	z-index: 200;
 }
 
 #divDeckbuilderImporterMain {
@@ -530,4 +532,39 @@ span.autoBonusStatus.good {
 	font-weight: 600;
 	color: #ffffff;
 	background-color: #4EABF5;
+}
+
+#divNavBar {
+	position: fixed;
+	display: flex;
+	align-items: center;
+	background-color: #DDEEFF;
+	width: 100%;
+	left: 0;
+	top: 0;
+	z-index: 100;
+}
+#divNavBar span.title {
+	font-size: 24px;
+	font-weight: bold;
+}
+#divNavButtons {
+	display: flex;
+	align-items: center;
+	margin-left: 20px;
+}
+div.navButton {
+	cursor: pointer;
+	font-size: 20px;
+	margin: 0 10px;
+}
+div.navButton:hover {
+	color: blue;
+}
+div.scrollAnchor {
+	position: relative;
+}
+div.scrollAnchor > div {
+	position: absolute;
+	top: -20px;
 }

js/kcsim.js

@@ -274,6 +274,14 @@ var SIMCONSTS = {
 	overrideSupportChanceDayB: null,
 	overrideSupportChanceNightN: null,
 	overrideSupportChanceNightB: null,
+	balloonSelfAirMod: [1,1,1],
+	balloonSelfAirFlat: [0,0,0],
+	balloonSelfLBASMod: [1,1,1],
+	balloonSelfLBASFlat: [0,0,0],
+	balloonOppoAirMod: [1,1,1],
+	balloonOppoAirFlat: [0,0,0],
+	balloonOppoLBASMod: [1,1,1],
+	balloonOppoLBASFlat: [0,0,0],
 }
 SIMCONSTS.vanguardEvShellDDMod = SIMCONSTS.vanguardEvShellDDModNormal.slice();
 SIMCONSTS.vanguardEvTorpDDMod = SIMCONSTS.vanguardEvTorpDDModNormal.slice();
@@ -1852,19 +1860,30 @@ function airstrike(ship,target,slot,contactMod,issupport,isjetphase,isRaid) {
 			acc += (target.isescort ? (SIMCONSTS.airstrikeAccEE || 0) : (SIMCONSTS.airstrikeAccME || 0))/100;
 		}
 	}
-	if (ship.bonusSpecialAcc) acc *= getBonusAcc(ship,target,true);
 	if (SIMCONSTS.enableSkipTorpBonus && equip.isSkipBomber) {
 		if (['FBB','BB','BBV','CVL','CV'].includes(target.type)) acc += .28;
 		else if (['CA','CAV'].includes(target.type)) acc += .21;
 		else acc += .14;
 	}
+	if (ship.bonusSpecialAcc) acc *= getBonusAcc(ship,target,true);
 
 	let smokeType = ship.fleet.smokeType || target.fleet.smokeType;
 	if (smokeType) {
 		let smokeModAcc = ship.side == 0 ? SIMCONSTS.smokeModAirAccF : SIMCONSTS.smokeModAirAccE;
 		acc *= smokeModAcc[smokeType-1];
 	}
 
+	if (ship.fleet.useBalloon) {
+		let num = ship.fleet.getNumBalloons();
+		acc *= SIMCONSTS.balloonSelfAirMod[num-1] ?? 1;
+		acc += SIMCONSTS.balloonSelfAirFlat[num-1]/100 ?? 0;
+	}
+	if (target.fleet.useBalloon) {
+		let num = target.fleet.getNumBalloons();
+		acc *= SIMCONSTS.balloonOppoAirMod[num-1] ?? 1;
+		acc += SIMCONSTS.balloonOppoAirFlat[num-1]/100 ?? 0;
+	}
+
 	var res = rollHit(accuracyAndCrit(ship,target,acc,1,0,0,!issupport && 2),!issupport && ship.critdmgbonus);
 	var dmg = 0, realdmg = 0;
 	var planebase = (equip.isdivebomber && !equip.isLB)? (equip.DIVEBOMB || 0) : (target.isInstall)? 0 : (equip.TP || 0);
@@ -2980,6 +2999,18 @@ function airstrikeLBAS(lbas,target,slot,contactMod,contactModLB,isjetphase) {
 			for (let group in equip.bonusSpecialAccP) acc *= equip.bonusSpecialAccP[group];
 		}
 	}
+
+	if (FLEETS1[0] && FLEETS1[0].useBalloon) {
+		let num = FLEETS1[0].getNumBalloons();
+		acc *= SIMCONSTS.balloonSelfLBASMod[num-1] ?? 1;
+		acc += SIMCONSTS.balloonSelfLBASFlat[num-1]/100 ?? 0;
+	}
+	if (target.fleet.useBalloon) {
+		let num = target.fleet.getNumBalloons();
+		acc *= SIMCONSTS.balloonOppoLBASMod[num-1] ?? 1;
+		acc += SIMCONSTS.balloonOppoLBASFlat[num-1]/100 ?? 0;
+	}
+
 	lbas.critratebonus = critratebonus; lbas.ACCplane = ACCplane;
 	var res = rollHit(accuracyAndCrit(lbas,target,acc,1,0,0,true),critdmgbonus);
 	lbas.critratebonus = 0; lbas.ACCplane = 0;

js/simulator-ui/fleet-editor.js

@@ -594,6 +594,7 @@ var UI_FLEETEDITOR = Vue.createApp({
 			this.isDraggingShip = true;
 			this.selectedShipsProp = shipsProp;
 			this.selectedShipInd = ship.ind;
+			if (COMMON.UI_MAIN) COMMON.UI_MAIN.isDragging = true;
 		},
 		ondropShip: function(shipTo,shipsPropTo) {
 			if (!this.isDraggingShip) return;
@@ -606,6 +607,7 @@ var UI_FLEETEDITOR = Vue.createApp({
 		},
 		ondragendShip: function() {
 			this.isDraggingShip = false;
+			if (COMMON.UI_MAIN) COMMON.UI_MAIN.isDragging = false;
 		},
 
 		onclickEquip: METHODS_COMMON.methods.onclickEquip,

js/simulator-ui/ui-main.js

@@ -129,6 +129,14 @@ var UI_MAIN = Vue.createApp({
 			overrideSupportChanceDayB: SIMCONSTS.overrideSupportChanceDayB,
 			overrideSupportChanceNightN: SIMCONSTS.overrideSupportChanceNightN,
 			overrideSupportChanceNightB: SIMCONSTS.overrideSupportChanceNightB,
+			balloonSelfAirMod: SIMCONSTS.balloonSelfAirMod.slice(),
+			balloonSelfAirFlat: SIMCONSTS.balloonSelfAirFlat.slice(),
+			balloonSelfLBASMod: SIMCONSTS.balloonSelfLBASMod.slice(),
+			balloonSelfLBASFlat: SIMCONSTS.balloonSelfLBASFlat.slice(),
+			balloonOppoAirMod: SIMCONSTS.balloonOppoAirMod.slice(),
+			balloonOppoAirFlat: SIMCONSTS.balloonOppoAirFlat.slice(),
+			balloonOppoLBASMod: SIMCONSTS.balloonOppoLBASMod.slice(),
+			balloonOppoLBASFlat: SIMCONSTS.balloonOppoLBASFlat.slice(),
 		},
 		settingsFCF: {
 			los: null,
@@ -177,6 +185,8 @@ var UI_MAIN = Vue.createApp({
 		showNoticeCount: 0,
 		noticeTxt: '',
 		showMechanics: false,
+
+		isDragging: false,
 	}),
 	mounted: function() {
 		this.$i18n.locale = localStorage.sim2_lang || 'en';
@@ -611,6 +621,11 @@ ${t('results.buckets')}:	${this.results.bucketSunk}`;
 		},
 		onclickScreenShot: function() {
 			html2canvas(this.$refs.divResults).then(canvas => {
+				canvas.toBlob(blob => navigator.clipboard.write([new ClipboardItem({ 'image/png':blob })]));
+				this.noticeTxt = this.$i18n.t('copied_to_clipboard');
+				let n = ++this.showNoticeCount;
+				setTimeout(() => n == this.showNoticeCount && (this.showNoticeCount = 0), 1000);
+
 				let filename = 'KanColle_Sortie_Simulator_Statistics_' + (new Date).toISOString().slice(0,19).replace(/:/g,'-') + '.png';
 				let a = window.document.createElement('a');
 				a.href = canvas.toDataURL('image/png');
@@ -648,6 +663,13 @@ ${t('results.buckets')}:	${this.results.bucketSunk}`;
 		onclickSetFCF: function() {
 			UI_FCFSETTINGS.doOpen(this.settingsFCF);
 		},
+
+		onclickNavButton: function(ref,e) {
+			this.$refs[ref].scrollIntoView({ behavior: 'smooth' });
+			if (ref == 'divSimulationScroll' && e.ctrlKey) {
+				this.onclickGo();
+			}
+		},
 	},
 }).component('vbattle',{
 	props: ['battle','candelete','isboss'],

simulator.html

@@ -26,14 +26,22 @@
 </head>
 <body style="display:none">
 	<div id="divMain">
-		<h1 :title="$t('kancolle_sortie_simulator_sub')">KanColle Sortie Simulator</h1>
-
-		<div>
-			<label><input type="radio" value="en" v-model="$i18n.locale" @change="onchangeLang"/>EN</label> <label><input type="radio" value="ja" v-model="$i18n.locale" @change="onchangeLang"/>JP</label>
+		<div id="divNavBar" :style="{'pointer-events':isDragging?'none':''}">
+			<div><span class="title" :title="$t('kancolle_sortie_simulator_sub')">KanColle Sortie Simulator</span></div>
+			<div id="divNavButtons">
+				<div class="navButton" @click="onclickNavButton('divPlayerScroll')">{{$t('fleets')}}</div>
+				<div class="navButton" @click="onclickNavButton('divBattlesScroll')">{{$t('battles')}}</div>
+				<div class="navButton" @click="onclickNavButton('divSettingsScroll')">{{$t('settings')}}</div>
+				<div class="navButton" @click="onclickNavButton('divSimulationScroll',$event)">{{$t('simulation')}}</div>
+			</div>
 		</div>
+		<div class="scrollAnchor"><div ref="divPlayerScroll"></div></div>
+		<div style="height:10px"></div>
 
 		<div id="divPlayer">
 			<div class="fleetSection">
+				<label><input type="radio" value="en" v-model="$i18n.locale" @change="onchangeLang"/>EN</label> <label><input type="radio" value="ja" v-model="$i18n.locale" @change="onchangeLang"/>JP</label>
+				&nbsp;&nbsp;&nbsp;&nbsp;
 				<input type="button" :value="$t('save_load_simulator_backup')" @click="onclickBackup"/>&nbsp;
 				<input type="button" :value="$t('import_export_deckbuilder_format')" @click="onclickDeckbuilder"/>&nbsp;
 			</div>
@@ -77,6 +85,7 @@ <h2>{{$t('fleets')}}</h2>
 		</div>
 
 		<hr>
+		<div class="scrollAnchor"><div ref="divBattlesScroll"></div></div>
 		<div id="divBattles">
 			<h2>{{$t('battles')}}</h2>
 			<div class="battleNext">
@@ -91,6 +100,7 @@ <h2>{{$t('battles')}}</h2>
 		</div>
 
 		<hr>
+		<div class="scrollAnchor"><div ref="divSettingsScroll"></div></div>
 		<div id="divSettings">
 			<h2>{{$t('settings')}}</h2>
 			<div>
@@ -317,6 +327,7 @@ <h2>{{$t('settings')}}</h2>
 		</div>
 		<hr>
 
+		<div class="scrollAnchor"><div ref="divSimulationScroll"></div></div>
 		<h2>{{$t('simulation')}}</h2>
 		<div id="divSimWatch">
 			<input type="button" :value="$t('watch_sortie')" :disabled="!canSim" @click="onclickWatch"/> {{$t('opens_in_replayer')}}