Ero sivun ”Järjestelmäviesti:Common.js” versioiden välillä

Nykyinen versio 8. heinäkuuta 2022 kello 18.02

function createItemDisplay(itemData) {
	
	if (!itemData || itemData.trim() == '') {
		return $('<div class="x-item"/>');
	}
	
	itemData = itemData.trim();
	
	const $it = $('<div class="x-item"/>');
	const dataParts = itemData.split(',');
	const animateImages = dataParts[0].split('!').filter(function(im){ return im.trim() != '' });
	
	const updateImage = function(currentImage){
		if (currentImage.indexOf('item:') == 0) {
			if (currentImage.indexOf('.png') == -1) currentImage += '.png';
			$it.css('background-image', 'url("https://cubisti.xeno.fi/' + currentImage.substring(5) + '")');
			if (currentImage.indexOf('vanilla/') != -1) {
				$it.attr('data-vanilla-item', 'true');
			}
		} else if (currentImage.indexOf('http') == 0) {
			$it.css('background-image', 'url("' + currentImage + '")');
		}
	};
	
	updateImage(animateImages[0]);
	if (animateImages.length > 1) {
		var n = 1;
		setInterval(function(){
			updateImage(animateImages[n++ % animateImages.length]);
		}, 1000*2);
	}
	
	if (dataParts.length > 1) {
		$it.attr('data-item-title', dataParts[1]);
	}
	
	if (dataParts.length > 2) {
		$it.append($('<span/>').text(''+dataParts[2]));
	}
	
	return $it;
	
}

function renderCubeStructure(blocks, images) {
        
    const cubeSideWidth = 91;
    const cubeSideHeight = 36;
    const cubeHeight = 192;
    const cubeLongHeight = 118;
    const scale = 0.5;
    
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    const drawCommands = [];
    
    for (var y = blocks.length-1; y >= 0; y--) {
        const layer = blocks[y];
        for (var z = layer.length-1; z >= 0; z--) {
            const row = layer[z];
            for (var x = 0; x < row.length; x++) {
                
                const tile = row[x];
                if (tile == '') continue;
                
                drawCommands.push([images[tile],
                    (x*cubeSideWidth + z*cubeSideWidth),
                    (y*cubeLongHeight + x*cubeSideHeight - z*cubeSideHeight),
                    images[tile].naturalWidth, images[tile].naturalHeight]);
                
            }
        }
    }
    
    var minX = 100000;
    var minY = 100000;
    var maxX = 0;
    var maxY = 0;
    for (var i = 0; i < drawCommands.length; i++) {
        var x = drawCommands[i][1]*scale;
        var y = drawCommands[i][2]*scale;
        var w = drawCommands[i][3]*scale;
        var h = drawCommands[i][4]*scale;
        if (x < minX) minX = x;
        if (x + w > maxX) maxX = x + w;
        if (y < minY) minY = y;
        if (y + h > maxY) maxY = y + h;
    }
    
    canvas.width = maxX-minX;
    canvas.height = maxY-minY;
    
    for (var i = 0; i < drawCommands.length; i++) {
        ctx.drawImage(
            drawCommands[i][0], // image
            -minX + (drawCommands[i][1])*scale, // x
            -minY + (drawCommands[i][2])*scale, // y
            (drawCommands[i][3])*scale, // width
            (drawCommands[i][4])*scale  // height
        );
    }
    
    ctx.font = '10px Arial';
    ctx.fillStyle = '#000000';
    ctx.globalAlpha = 0.1;
    ctx.textBaseline = 'top';
    ctx.fillText('Xeno ' + (new Date()).getFullYear(), 5, canvas.height - 10 - 5);
    
    return canvas;
    
}

$(function(){
	
	// hide the stupid navigation options under the title
	$('#mw-page-header-links').hide();
	$('#p-views li').each(function(){
		if (!$(this).is('#ca-more')) {
			$('#p-cactions ul').prepend($(this));
		}
	});
	
	// title-less pages
	if ($('[data-x-hide-title]').length > 0) {
		$('#firstHeading').hide();
		$('#bodyContentOuter').css('margin-top', '-1.5em');
	}
	
	const $itemOverlay = $('<div/>')
		.css({
			'position': 'fixed',
			'z-index': '1000',
			'padding': '5px 10px',
			'font-family': 'monospace',
			'color': '#ffffff',
			'background-color': '#2a114f',
			'border': '3px solid rgba(255, 255, 255, 0.2)',
			'border-radius': '5px',
			'box-shadow': '-2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black',
			'top': '0',
			'left': '0'
		});
	
	$('body').append($itemOverlay);
	$itemOverlay.hide();
	
	// crafting grids
	$('.x-crafting').each(function(){
		
		const craftItems = ($(this).attr('data-crafting-data') || '').split(';');
		const resultItem = craftItems[craftItems.length-1];
		
		const $grid = $('<div class="x-crafting-grid"/>');
		const $result = $('<div class="x-crafting-result"/>');
		$result.append(createItemDisplay(resultItem));
		
		$.each(craftItems.slice(0, -1), function(key, it){
			it = it.trim();
			$grid.append(createItemDisplay(it));
		});
		
		if ($(this).is('.furnace')) {
			$grid.append($('<div class="x-crafting-flame"/>'));
			$grid.append(createItemDisplay('item:vanilla/coal'));
		}
		
		$(this).append($grid);
		$(this).append($('<div class="x-crafting-arrow"/>'));
		$(this).append($result);
		
	});
	
	var isItemOverlay = false;
	
	$('body').on('mousemove', function(e){
		if (isItemOverlay) {
			$itemOverlay.css('left', (e.clientX+15)+'px');
			$itemOverlay.css('top', (e.clientY+15)+'px');
		}
	})
	
	$('.x-item[data-item-title]')
		.css('cursor', 'pointer')
		.on('mouseover', function(e){
			$itemOverlay.show();
			isItemOverlay = true;
			$itemOverlay.html('');
			$itemOverlay.append($('<div style="font-weight: bold;"/>').text($(this).attr('data-item-title') || '?'));
		})
		.on('mouseout', function(e){
			$itemOverlay.hide();
			isItemOverlay = false;
		})
		.on('mouseup', function(e){
			if ($(this).is('[data-vanilla-item]')) {
				window.open('https://www.google.com/search?q=' + encodeURIComponent('minecraft wiki ' + $(this).attr('data-item-title').toLowerCase()));
				return;
			}
			if (e.button == 1) {
				window.open('/index.php/' + $(this).attr('data-item-title'));
			} else {
				window.location.href = '/index.php/' + $(this).attr('data-item-title');
			}
		});
		
	
	// block structure rendering
	$('[data-block-structure]').each(function(){
        
        const $this = $(this);
        const blocks = $(this).attr('data-block-structure').split('!').map(function(r){ return r.trim().split(';').map(function(c){ return c.trim().split(','); }); });
        
        const images = {};
        const loadImages = [];
        $.each(blocks, function(key, layer){
        	$.each(layer, function(key, row){
        		$.each(row, function(key, tile){
        			
        			if (tile == '') return;
                    
                    if (!images[tile]) {
                        images[tile] = new Image();
                        loadImages.push(new Promise(function(resolve, reject){
                        	images[tile].onload = function() {
                                resolve();
                            }
                            images[tile].onerror = function(err) {
                            	console.error('image error:', err);
                                reject(err);
                            }
                            images[tile].src = 'https://cubisti.xeno.fi/' + tile + '.png';
                        }));
                    }
        			
        		})
        	})
        })
        
        Promise.all(loadImages)
            .then(function(){
                const canvas = renderCubeStructure(blocks, images);
                if ($this.is('[data-closest-image]') && $this.attr('data-closest-image') != '0') {
                	
                	const $toAttach = $this.parent().find('.thumb:contains("{' + $this.attr('data-closest-image') + '}")');
                	
                	$toAttach.find('a.image').attr('href', '#');
                	$toAttach.find('.thumbinner').css('width', '').css('text-align', 'center');
                	$toAttach.find('a.image img').replaceWith($(canvas).attr('style', $this.attr('data-style') || ''));
                	
                	$toAttach.find('.thumbcaption').html(function(i, html){
                		return html.replace('{' + $this.attr('data-closest-image') + '}', '');
                	})
                	
                	$this.remove();
                	
                } else {
                	$this.replaceWith($(canvas).attr('style', $this.attr('data-style') || ''));
                }
            })
            .catch(function(err){
            	console.error(err);
            	$this.css('max-width', '200px').append($('<span style="color: red;"/>').text(''+err));
            });
            
    });
	
	if ($('[data-x-hide-toc]').length > 0) {
		$('#toc').hide();
	}
	
});