사용자:Hsl0/마법의 MD-5 시뮬레이터.js 문서 원본 보기

/**
 * @name SimMD5
 * @author hsl0
 * @version 1.4
 * @desc 마법의 MD-5 시뮬레이터 게임에 사용되는 스크립트로, 인터페이스와 배틀시스템을 구현합니다.
 * @license GPL-2.0-or-later
**/
mw.loader.using('oojs-ui-widgets').done(function() {
	function prepare() {
		function responsible(event) {
			var button = $('#input-time .oo-ui-numberInputWidget-plusButton, #input-time .oo-ui-numberInputWidget-minusButton');
			
			if(event.matches) {
				button.css('display', 'none');
				input.time.$label.css('margin-right', null);
			} else {
				button.css('display', 'null');
				input.time.$label.css('margin-right', '30px');
			}
		}
		
		function encode(string) {
			return string
			.replace(/&/g, '&#38;')
			.replace(/</g, '&#60;')
			.replace(/>/g, '&#62;')
			.replace(/{/g, '&#123;')
			.replace(/\|/g, '&#124;')
			.replace(/=/g, '&#61;')
			.replace(/}/g, '&#125;')
			.replace(/\[/g, '&#91;')
			.replace(/\]/g, '&#93;')
			.replace(/_/g, '&#95;')
			.replace(/'/g, '&#39;')
			.replace(/\t/g, '&#09;')
			.replace(/\n/g, '&#10;')
			.replace(/ /g, '&#32;');
		}
		
		function cancel(btn) {
			if(stat.length) {
				battle.done = null;
				battle.turn = 0;
				battle.attack = null;
				battle.sequence = null;
				battle.combo = null;
				battle.temp = null;
				
				bar = [];
				bar[0] = new OO.ui.ProgressBarWidget({
					progress: 100
				});
				bar[1] = new OO.ui.ProgressBarWidget({
					progress: 100
				});
				
				bar[0].$bar.css({
					background: '#3366CC'
				});
				bar[0].$element.css({
					'border-right': 'none',
					'border-top-right-radius': 0,
					'border-bottom-right-radius': 0
				});
				bar[1].$bar.css({
					background: '#FF5500'
				});
				bar[1].$element.css({
					'border-left': 'none',
					'border-top-left-radius': 0,
					'border-bottom-left-radius': 0
				});
				
				input.start.setLabel('재시작');
				input.reset.setLabel('초기화');
				$('#stat-turn').text(0);
				$('.stat-0.stat-currentHP').data('value', stat[0].HP).text(stat[0].HP.toFixed(2)).css('color', '#3366CC');
				$('.stat-1.stat-currentHP').data('value', stat[1].HP).text(stat[1].HP.toFixed(2)).css('color', '#FF5500');
				$('.stat-0.stat-HPbar').html(bar[0].$element);
				$('.stat-1.stat-HPbar').html(bar[1].$element);
				if(btn) $('#log')[0].innerText += '\n다시 시작하려면 재시작 버튼을 눌러주세요.';
			}
		}
		
		function stop() {
			clearInterval(battle.work);
			
			$('#input-stop').hide();
			$('#input-start').show();
			input.reset.setDisabled(false);
			input[0].setDisabled(false);
			input[1].setDisabled(false);
			input.time.setDisabled(false);
			input.swap.setDisabled(false);
		}
		
		var input = {};
		input[0] = new OO.ui.TextInputWidget({
			placeholder: '선',
			title: '후',
			value: new URLSearchParams(location.search).get('p0') || ''
		});
		input.start = new OO.ui.ButtonInputWidget({
			type: 'submit',
			flags: ['primary', 'progressive'],
			label: '시작'
		});
		input.stop = new OO.ui.ButtonInputWidget({
			flags: ['primary', 'destructive'],
			label: '정지'
		});
		input[1] = new OO.ui.TextInputWidget({
			placeholder: '후',
			title: '후',
			value: new URLSearchParams(location.search).get('p1') || ''
		});
		input.time = new OO.ui.NumberInputWidget({
			value: 1,
			min: 0,
			label: '초 간격'
		});
		input.reset = new OO.ui.ButtonInputWidget({
			type: 'reset',
			flags: ['destructive'],
			label: '초기화'
		});
		input.swap = new OO.ui.ButtonInputWidget({
			label: $('<div />').css({
				height: '20px',
				width: '20px',
				'background-image': 'url("/wiki/Special:Redirect/file/Ambox_move_black.svg")',
				'background-size': 'cover'
			}),
			title: '교체',
			framed: false
		});
		input.table = new OO.ui.ToggleSwitchWidget({
			value: true
		});
		input.icon = new OO.ui.ButtonWidget({
			framed: false,
			icon: $('#mw-customcollapsible-input-option').hasClass('mw-collapsed')? 'expand' : 'collapse'
		});
		input.log = new OO.ui.ButtonWidget({
			label: '기록 복사'
		});
		input.url = new OO.ui.ButtonWidget({
			label: 'URL 복사'
		});
		input.box = new OO.ui.MultilineTextInputWidget();
		var media = matchMedia('(max-width: 800px)');
		var stat = [];
		var bar = [];
		var battle = {
			turn: 0,
			attack: null,
			done: null,
			work: null,
			sequence: null,
			combo: null,
			temp: null
		};
		
		$('#input').wrap('<form />');
		$('#input-0').html(input[0].$element);
		$('#input-start').html(input.start.$element);
		$('#input-stop').html(input.stop.$element);
		$('#input-1').html(input[1].$element);
		$('#input-time').html(input.time.$element);
		$('#input-reset').html(input.reset.$element);
		$('#input-swap').html(input.swap.$element);
		$('#input-table').html(input.table.$element).append(' 스탯');
		$('#input-icon').html(input.icon.$element);
		$('#stat-load').html(new OO.ui.ProgressBarWidget().$element);
		$('#log').text('시작하시려면 상단에 대결할 상대의 이름을 입력해 주세요. (1.4)');
		$('#share-log').html(input.log.$element);
		$('#share-url').html(input.url.$element);
		$('#share-cvbox').html(input.box.$element);
		
		input.box.$input.attr('readonly', '').css('height', '2.5em');
		
		$('#stat-bar').hide();
		$('#share').hide();
		
		responsible(media);
		media.addListener(responsible);
		
		new MutationObserver(function(mutation) {
			input.icon.setIcon($(mutation[0].target).hasClass('mw-collapsed')? 'expand' : 'collapse');
		}).observe($('#mw-customcollapsible-input-option')[0], {
			attributes: true,
			attributeFilter: ['class']
		});
		
		input.swap.$element.click(function() {
			if(!input.swap.disabled) {
				var val = [input[1].value, input[0].value];
				input[0].setValue(val[0]);
				input[1].setValue(val[1]);
				
				if(stat.length) {
					stat = [stat[1], stat[0]];
					
					$('#stat-turn').text(0);
					$('.stat-0').each(function() {
						if($(this).hasClass('stat-name')) $(this).text(stat[0].name);
						else if($(this).hasClass('stat-attack')) $(this).text(stat[0].attack);
						else if($(this).hasClass('stat-quick')) $(this).text(stat[0].quick);
						else if($(this).hasClass('stat-defense')) $(this).text(stat[0].defense);
						else if($(this).hasClass('stat-hit')) $(this).text(stat[0].hit);
						else if($(this).hasClass('stat-luck')) $(this).text(stat[0].luck);
						else if($(this).hasClass('stat-fullHP')) $(this).text(stat[0].HP);
						else if($(this).hasClass('stat-currentHP')) $(this).data('value', stat[0].HP).text(stat[0].HP.toFixed(2));
						else if($(this).hasClass('stat-HPbar')) $(this).html(bar[0].$element);
					});
					$('.stat-1').each(function() {
						if($(this).hasClass('stat-name')) $(this).text(stat[1].name);
						else if($(this).hasClass('stat-attack')) $(this).text(stat[1].attack);
						else if($(this).hasClass('stat-quick')) $(this).text(stat[1].quick);
						else if($(this).hasClass('stat-defense')) $(this).text(stat[1].defense);
						else if($(this).hasClass('stat-hit')) $(this).text(stat[1].hit);
						else if($(this).hasClass('stat-luck')) $(this).text(stat[1].luck);
						else if($(this).hasClass('stat-fullHP')) $(this).text(stat[1].HP);
						else if($(this).hasClass('stat-currentHP')) $(this).data('value', stat[1].HP).text(stat[1].HP.toFixed(2));
						else if($(this).hasClass('stat-HPbar')) $(this).html(bar[1].$element);
					});
					
					var url = new URL(location);
					url.searchParams.set('p0', input[0].value);
					url.searchParams.set('p1', input[1].value);
					history.replaceState(null, '', url);
					
					cancel();
					
					input.start.setLabel('시작');
				}
			}
		});
		input.table.$element.click(function() {
			if(input.table.value) {
				if($('#stat-turn').text()) $('#stat-table').show(500);
			} else {
				$('#stat-table').hide(500);
			}
		});
		input.reset.$button[0].form.addEventListener('reset', function(event) {
			event.preventDefault();
			
			if(!input.reset.disabled) {
				if(battle.done || battle.done === null) {
					var url = new URL(location);
					url.searchParams['delete']('p0');
					url.searchParams['delete']('p1');
					history.replaceState(null, '', url);
					stat = [];
					input[0].setValue();
					input[1].setValue();
					input.time.setValue(1);
					input.table.setValue(true);
					input.start.setLabel('시작');
					$('#share').hide();
					$('#share-cvbox').hide();
					$('#stat-table').hide(500);
					$('#stat-bar').hide(500);
					$('#stat-turn, .stat-0, .stat-1').text('');
					$('#log-time').hide();
					$('#log').show();
					$('#log').text('시작하시려면 상단에 대결할 상대의 이름을 입력해 주세요.');
					$('.stat-HPbar').html('');
				} else cancel(true);
			}
		});
		input.start.$button[0].form.addEventListener('submit', function(event) {
			function last() {
				$('#input-stop').show();
				$('#input-start').hide();
				input.reset.setLabel('취소');
				input[0].setDisabled(true);
				input[1].setDisabled(true);
				input.time.setDisabled(true);
				input.reset.setDisabled(true);
				input.swap.setDisabled(true);
				input.start.setLabel('재개');
				
				battle.work = start(battle, stat.map(function(obj, index) {
					return new Proxy(obj, {
						get: function(target, key, receiver) {
							if(key === 'HP') return +$('.stat-' + index + '.stat-currentHP').data('value');
							else return Reflect.get(target, key, receiver);
						},
						set: function(target, key, value) {
							if(key === 'HP') {
								if(value < 0) {
									value = 0;
									$('.stat-' + index + '.stat-currentHP').css('color', '#000000');
								}
								$('.stat-' + index + '.stat-currentHP').data('value', value).text(value.toFixed(2));
								bar[index].setProgress(value / target.HP * 100);
							}
						}
					});
				}), input.time.value * 1000, function(msg) {
					$('#log')[0].innerText += msg;
					$('#log').scrollTop($('#log')[0].scrollHeight);
					
					if(battle.sequence === 0) {
						$('#stat-turn').text(battle.turn);
						$('.stat-' + battle.attack + '.stat-name').css({
							background: battle.attack? '#FF5500' : '#3366CC',
							color: '#FFFFFF'
						});
						$('.stat-' + (battle.attack ^ 1) + '.stat-name').css({
							background: '#EAECF0',
							color: battle.attack? '#3366CC' : '#FF5500'
						});
					}
				}, function(msg) {
					$('#log')[0].innerText += msg;
					$('#log')[0].innerText += '\n\n백괴스러운 MD-5 시뮬레이터 [https://libertyga.me/wiki/마법의_MD-5_시뮬레이터]';
					$('#log').scrollTop($('#log')[0].scrollHeight);
					
					$('#share').show();
					
					stop();
					
					battle.done = true;
					battle.turn = 0;
					battle.attack = null;
					battle.sequence = null;
					battle.combo = null;
					battle.temp = null;
					
					input.start.setLabel('재시작');
					input.reset.setLabel('초기화');
				});
			}
			
			event.preventDefault();
			
			if(!input.start.disabled) {
				$('#share').hide();
				$('#share-cvbox').hide();
				
				if(input.time.value >= 0) {
					$('#log-time').hide();
					$('#log').show();
					
					if(!stat.length) $.get({
						url: '/api.php',
						data: {
							action: 'parse',
							format: 'json',
							title: '마법의 MD-5 시뮬레이터',
							text: '[{{#invoke:SimMD5|stat|' + encode(input[0].value) + '|AJAX}},{{#invoke:SimMD5|stat|' + encode(input[1].value) + '|AJAX}}]',
							prop: 'text',
							disablelimitreport: true,
							formatversion: 2
						},
						beforeSend: function() {
							if($('#stat-bar').html()) {
								$('#stat-bar').hide();
								$('#stat-load').show();
							} else $('#stat-load').show(500);
							$('#log').text('스탯 계산중입니다. 잠시만 기다려 주세요.');
							
							var url = new URL(location);
							url.searchParams.set('p0', input[0].value);
							url.searchParams.set('p1', input[1].value);
							history.replaceState(null, '', url);
						},
						success: function(callback) {
							stat = JSON.parse($(callback.parse.text).text());
							
							bar = [];
							bar[0] = new OO.ui.ProgressBarWidget({
								progress: 100
							});
							bar[1] = new OO.ui.ProgressBarWidget({
								progress: 100
							});
							
							bar[0].$bar.css({
								background: '#3366CC'
							});
							bar[0].$element.css({
								'border-right': 'none',
								'border-top-right-radius': 0,
								'border-bottom-right-radius': 0
							});
							bar[1].$bar.css({
								background: '#FF5500'
							});
							bar[1].$element.css({
								'border-left': 'none',
								'border-top-left-radius': 0,
								'border-bottom-left-radius': 0
							});
							
							$('#stat-turn').text(0);
							$('.stat-0').each(function() {
								if($(this).hasClass('stat-name')) $(this).text(stat[0].name);
								else if($(this).hasClass('stat-attack')) $(this).text(stat[0].attack);
								else if($(this).hasClass('stat-quick')) $(this).text(stat[0].quick);
								else if($(this).hasClass('stat-defense')) $(this).text(stat[0].defense);
								else if($(this).hasClass('stat-hit')) $(this).text(stat[0].hit);
								else if($(this).hasClass('stat-luck')) $(this).text(stat[0].luck);
								else if($(this).hasClass('stat-fullHP')) $(this).text(stat[0].HP);
								else if($(this).hasClass('stat-currentHP')) $(this).data('value', stat[0].HP).text(stat[0].HP.toFixed(2));
								else if($(this).hasClass('stat-HPbar')) $(this).html(bar[0].$element);
							});
							$('.stat-1').each(function() {
								if($(this).hasClass('stat-name')) $(this).text(stat[1].name);
								else if($(this).hasClass('stat-attack')) $(this).text(stat[1].attack);
								else if($(this).hasClass('stat-quick')) $(this).text(stat[1].quick);
								else if($(this).hasClass('stat-defense')) $(this).text(stat[1].defense);
								else if($(this).hasClass('stat-hit')) $(this).text(stat[1].hit);
								else if($(this).hasClass('stat-luck')) $(this).text(stat[1].luck);
								else if($(this).hasClass('stat-fullHP')) $(this).text(stat[1].HP);
								else if($(this).hasClass('stat-currentHP')) $(this).data('value', stat[1].HP).text(stat[1].HP.toFixed(2));
								else if($(this).hasClass('stat-HPbar')) $(this).html(bar[1].$element);
							});
							
							$('.stat-0.stat-currentHP').css('color', '#3366CC');
							$('.stat-1.stat-currentHP').css('color', '#FF5500');
							
							$('#stat-load').hide();
							if(input.table.value) $('#stat-table').show(500);
							$('#stat-bar').show();
							$('#log').text('');
							$('#log')[0].innerText += '[' + stat[0].name + '] 공격력: ' + stat[0].attack + ' / 방어력: ' + stat[0].defense + ' / 민첩: ' + stat[0].quick + ' / 명중: ' + stat[0].quick + ' / 운: ' + stat[0].luck + ' / HP: ' + stat[0].HP + '\n';
							$('#log')[0].innerText += '[' + stat[1].name + '] 공격력: ' + stat[1].attack + ' / 방어력: ' + stat[1].defense + ' / 민첩: ' + stat[1].quick + ' / 명중: ' + stat[1].quick + ' / 운: ' + stat[1].luck + ' / HP: ' + stat[1].HP + '\n';
							$('#log')[0].innerText += '\n';
							
							battle.turn = 1;
							battle.done = false;
							battle.attack = 0;
							battle.sequence = 0;
							battle.combo = [0, 0];
							battle.temp = {};
							
							last();
						},
						error: function(error) {
							$('#stat-load').hide(500);
							$('#log').text('스탯 계산에 오류가 발생하였습니다. 다시 시도해 주십시오. (' + error.status + ')');
						}
					});
					else if(battle.done || battle.done === null) {
						if(battle.done) cancel();
						
						$('#log').text('');
						$('#log')[0].innerText += '[' + stat[0].name + '] 공격력: ' + stat[0].attack + ' / 방어력: ' + stat[0].defense + ' / 민첩: ' + stat[0].quick + ' / 명중: ' + stat[0].hit + ' / 운: ' + stat[0].luck + ' / HP: ' + stat[0].HP + '\n';
						$('#log')[0].innerText += '[' + stat[1].name + '] 공격력: ' + stat[1].attack + ' / 방어력: ' + stat[1].defense + ' / 민첩: ' + stat[1].quick + ' / 명중: ' + stat[1].hit + ' / 운: ' + stat[1].luck + ' / HP: ' + stat[1].HP + '\n';
						$('#log')[0].innerText += '\n';
						
						battle.turn = 1;
						battle.done = false;
						battle.attack = 0;
						battle.sequence = 0;
						battle.combo = [0, 0];
						battle.temp = {};
						
						last();
					} else last();
				} else {
					$('#log-time').show();
					$('#log').hide();
				}
			}
		});
		input.stop.$element.click(function() {
			if(!input.stop.disabled) stop();
		});
		input[0].$input.focus(function() {
			cancel();
			stat = [];
			input.start.setLabel('시작');
			$(this).select();
		});
		input[1].$input.focus(function() {
			cancel();
			stat = [];
			input.start.setLabel('시작');
			$(this).select();
		});
		input.log.$button.click(function() {
			input.box.setValue(document.getElementById('log').innerText);
			$('#share-cvbox').show();
			input.box.$input.select();
			document.execCommand('copy');
		});
		input.url.$button.click(function() {
			var url = new URL('/wiki/마법의_MD-5_시뮬레이터', location);
			var search = new URLSearchParams(location.search);
			url.searchParams.set('p0', search.get('p0'));
			url.searchParams.set('p1', search.get('p1'));
			input.box.setValue(url);
			$('#share-cvbox').show();
			input.box.$input.select();
			document.execCommand('copy');
		});
		input.box.$input.click(function() {
			$(this).select();
		});
	}
	
	function start(battle, stat, time, each, last) {
		function rand(min, max) {
		    return Math.floor(Math.random() * (max - min + 1)) + min;
		}
		
		function range(weight) {
	        var range = [-0.5, -0.25, 0, 0.25, 0.5].map(function(ratio, index) {
	        	return 20 + (weight - 50) * ratio;
	        });
	        range.reduce(function(acc, current, index, prob) {
	        	return prob[index] += acc;
	        });
	        return range;
		}
		
	    function rank(range, val) {
	        return range.findIndex(function(current, index) {
	        	return (index === 0 || range[index - 1] < val) && val <= current;
	        });
	    }
	    
		function power(stat, rank) {
		    return stat * (((rank === 0)? 0 : rand(1 + 25 * (rank - 1), 25 * rank)) / 100);
		}
		
		function bonus(plus, minus, rank) {
			rank -= 2;
			if(rank === 0) return 0;
		    return ((rank > 0)? plus : minus) * (rand(1 + 50 * (rank - 1), 50 * rank) / 100);
		}
		
		function josa(text, exist, not, only) {
			text = text.normalize('NFD');
			var code = text.charCodeAt(text.length - 1);
			
			if(0x1161 <= code && code <= 0x11A7) return ((only)? '' : text) + not;
			else if(0x11A8 <= code && code <= 0x11FF) return ((only)? '' : text) + exist;
			else return ((only)? '' : text) + exist + '(' + not + ')';
		}
		
		return setInterval(function() {
			var attacker = battle.attack;
			var defender = attacker ^ 1;
			
			if(stat[0].HP > 0 && stat[1].HP > 0) {
				switch(battle.sequence) {
					case 0:
						var scale = range(stat[attacker].luck);
						var adv = bonus(stat[attacker].hit, stat[defender].quick, rank(range(50), 50 + ((battle.combo[defender])? 0 : battle.combo[defender]) - ((battle.combo[attacker])? 0: battle.combo[attacker])));
						var grade = {
							attack: rank(scale, rand(1, 100)),
							defense: rank(range(stat[defender].luck), rand(1, 100)),
						};
						var damage = power(stat[attacker].attack, grade.attack) - power(stat[defender].defense, grade.defense) + adv;
						battle.temp = {
							rank: rank(scale, damage),
							damage: (damage > 0)? damage : 0
						};
						
						if(battle.temp.damage > stat[attacker].attack) battle.temp.rank = 5;
						if(battle.temp.damage) {
							if(!battle.temp.rank) battle.temp.rank = 1;
							if(battle.combo[attacker] < 0) battle.combo[attacker] = 0;
							battle.combo[attacker]++;
						} else {
							battle.temp.rank = 0;
							if(battle.combo[attacker] > 0) battle.combo[attacker] = 0;
							battle.combo[attacker]--;
						}
						
						each('[' + stat[attacker].name + ']의 공격 ');
						battle.sequence++;
					break;
					case 1:
						var rankText = ['MISS', 'HIT', 'GOOD', 'NICE', 'PERFECT', 'CRITICAL'][battle.temp.rank];
						each(rankText + '! ');
						battle.sequence++;
					break;
					case 2:
						stat[defender].HP -= battle.temp.damage;
						var msg = (battle.temp.rank === 0)? '공격을 피했다. (' : (+battle.temp.damage.toFixed(2)) + '의 대미지를 받았다. (' + ((battle.combo[attacker] > 0)? battle.combo[attacker] : 0) + ' COMBO, ';
						each('[' + stat[defender].name + ']' + josa(stat[defender].name, '은', '는', true) + ' ' + msg + '남은 HP: ' + (+stat[defender].HP.toFixed(2)) + ')\n');
						if(attacker === 1) battle.turn++;
						battle.sequence = 0;
						battle.attack = defender;
					break;
				}
			} else if(stat[0].HP === stat[1].HP) {
				last('\n무승부! (' + battle.turn + '턴)');
				$('.stat-' + battle.attack + '.stat-name').css({
					color: battle.attack? '#FF5500' : '#3366CC'
				});
				$('.stat-' + (battle.attack ^ 1) + '.stat-name').css({
					background: '#EAECF0',
					color: battle.attack? '#3366CC' : '#FF5500'
				});
			} else last('\n[' + stat[defender].name + '] 승! (' + battle.turn + '턴)');
		}, time);
	}
	
	$(prepare);
});