Minecraft Block Path Finder

PHOTO

Thu Apr 04 2024 12:25:29 GMT+0000 (Coordinated Universal Time)

Saved by @allanbennatt #html #css #javascript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minecraft Block Path Finder</title>
  <style>
      .minecraft-block-path-finder-main {
    background: none;
    display: block;
    padding: 0px 0px 0px 0px;
    font: bold 17px/30px Arial, Helvetica, sans-serif;
    min-width: 260px;
    margin: 50px auto 0px auto;
    border: none;
  }

  .minecraft-block-path-finder-main:after {
    content: "";
    clear: both;
  }

  .noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .minecraft-block-path-finder-card {
    padding: 1rem 2rem 1rem 2rem;
    height: 70px;
  }

  .minecraft-block-path-finder-cards {
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-gap: 0 1rem;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  }

  .minecraft-block-path-finder-card00 {
    padding: 1rem 2rem 1rem 2rem;
    height: 70px;
  }

  
  
  .minecraft-block-path-finder-cards00 {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-gap: 0 1rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .minecraft-block-path-finder-blocks {
    background: #24aded;
    background: -webkit-linear-gradient(to right, #24aded, #108dc7);
    background: linear-gradient(to right, #24aded, #108dc7);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    display: block;
    padding: 10px 10px 10px 10px;
    margin: 10px 0px;
    border: none;
    text-align: center;
    min-height: 50px;
  }

  .minecraft-block-path-finder-click-blocks {
    background: none;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    display: block;
    padding: 10px 10px 10px 10px;
    margin: 10px 0px;
    border-width: 2px;
    border-style: solid;
    border-color: #108dc7;
    text-align: center;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 250px;
    color: #108dc7;
    position: relative !important;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .minecraft-block-path-finder-click-blocks::-webkit-scrollbar {
    display: none;
  }

  .minecraft-block-path-finder-click-blocks:hover {
    background: #24aded;
    color: white;
    text-shadow: 0px 0px 8px rgb(255, 230, 186), 0px 0px 22px rgb(255, 255, 255),
      0px -1px 0px rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
  }

  .minecraft-block-path-finder-cmnd-button {
    transition: color 0.15s ease-in;
    font-size: 35px;
    text-align: center;
    text-decoration: none;
    line-height: 50px;
    color: white;
    cursor: pointer;
  }

  .minecraft-block-path-finder-reset-button:hover {
    color: #8d8c85;
    transition: color 0.3s ease-in;
    transition: color 0.3s ease-out;
  }

  .stepper_select {
    display: none;
  }
  
  .tool-input input[type="number"] {
    width: calc(100% - 2px); 
    height: 25px;
    border: none;
    border-radius: 0;
    box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.05);
    background: #24aded;
    background: -webkit-linear-gradient(to right, #24aded, #108dc7);
    background: linear-gradient(to right, #24aded, #108dc7);
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    line-height: 25px;
    outline: none;
}
  
.tool-input input[type="number"]::placeholder {
    color: #E6E6E6;
}


.tool-input input[type="number"]:focus {
    outline: none;
}

  .stepper-input {
    width: 100%;
    height: 25px;
    border: 0px;
    border-radius: 2px;
    box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin: 0px 0px 5px 0px;
  }

  .stepper-input input {
    display: none;
  }

  .stepper-input .input {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .stepper-input .input :active {
    background: #24aded;
  }

  .stepper-input .input .range {
    overflow: hidden;
    text-align: center;
    flex: 1;
  }

  .stepper-input .input .range .list span {
    display: block;
    width: 100%;
    height: 25px;
    color: #ffffff;
    font-size: 18px;
    line-height: 25px;
  }

  .stepper_btn {
    background: #24aded;
    background: -webkit-linear-gradient(to right, #24aded, #108dc7);
    background: linear-gradient(to right, #24aded, #108dc7);
    height: 100%;
    border-radius: 2px;
    color: #ffffff;
    font-size: 12px;
    line-height: 25px;
    cursor: pointer;
    border: none;
    transition: all 300ms ease-in-out;
    flex: 0.2;
    text-align: center;
  }

  .stepper_btn:active {
    transform: translateY(1px);
  }

  .disabledivclick {
    pointer-events: none;
  }

  .table-fixed {
    width: 100%;
    caption-side: bottom;
  }

  .table-fixed tbody {
    display: block;
    height: 100%;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .table-fixed tbody::-webkit-scrollbar {
    display: none;
  }

  .table-fixed thead,
  .table-fixed tbody tr {
    display: table;
    width: 100%;
  }

  .table-fixed td,
  th {
    text-align: center;
    vertical-align: middle;
    width: 33%;
  }

  .table-fixed caption {
    margin-top: 20px;
  }

  .divparenttable {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #startlocations::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px; 
    background-color: #108dc7; 
    z-index: 1;
    margin: -20px 0;
}
  #startlocations::after {
    content: "Start Location";
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #24aded;
    padding: 0 10px; 
    z-index: 2;
    margin: -20px 0;
}
  #endlocations::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px; 
    background-color: #108dc7; 
    z-index: 1;
    margin: -20px 0;
}
  #endlocations::after {
    content: "End Location";
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #24aded;
    padding: 0 10px; 
    z-index: 2;
    margin: -20px 0;
}
	#startlocations,
#endlocations {
  position: relative;
}
  </style>
</head>
<body>
  <div class="minecraft-block-path-finder-main noselect">
    <div style="margin-top:30px; margin-bottom:10px;">
     
      <div id="startlocations" class="minecraft-block-path-finder-cards00">
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
            <div class="tool-input">
              <input id="startX" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
          </div>
          <div style="margin-top:-5px; color : white;">X-Coordinate</div>
        </div>
  
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
  
            <div class="tool-input">
              <input id="startY" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
  
          </div>
          <div style="margin-top:-5px; color : white;">Y-Coordinate</div>
        </div>
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
  
            <div class="tool-input">
              <input id="startZ" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
  
          </div>
          <div style="margin-top:-5px; color : white;">Z-Coordinate</div>
        </div>
      </div>
      <div id="endlocations" class="minecraft-block-path-finder-cards00" style="margin: 50px 0px 0px 0px;">
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
            <div class="tool-input">
              <input id="endX" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
          </div>
          <div style="margin-top:-5px; color : white;">X-Coordinate</div>
        </div>
  
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
  
            <div class="tool-input">
              <input id="endY" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
  
          </div>
          <div style="margin-top:-5px; color : white;">Y-Coordinate</div>
        </div>
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
  
            <div class="tool-input">
              <input id="endZ" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
  
          </div>
          <div style="margin-top:-5px; color : white;">Z-Coordinate</div>
        </div>
      </div>
      <div class="minecraft-block-path-finder-cards00">
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
  
            <div class="tool-input">
              <input id="spacing" type="number" oninput="CalcUpdateOutput()" placeholder="enter value (set to 1 for solid walls/ramps)">
            </div>
  
          </div>
          <div style="margin-top:-5px; color : white;">Block Spacing</div>
        </div>
      </div>
    </div>
    <div id="calc-console" oncontextmenu="return false;" class="divparenttable minecraft-block-path-finder-click-blocks ">
    </div>
  </div>
  <script src="script.js">
  	    let startX = parseInt(document.getElementById("startX").value);
        let startY = parseInt(document.getElementById("startY").value);
        let startZ = parseInt(document.getElementById("startZ").value);
        let endX = parseInt(document.getElementById("endX").value);
        let endY = parseInt(document.getElementById("endY").value);
        let endZ = parseInt(document.getElementById("endZ").value);
        let spacing = parseInt(document.getElementById("spacing").value);

  let debounceTimer;

function debounce(func, delay) {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(func, delay);
}

function CalcUpdateOutput() {
    debounce(() => {
        let startX = parseInt(document.getElementById("startX").value);
        let startY = parseInt(document.getElementById("startY").value);
        let startZ = parseInt(document.getElementById("startZ").value);
        let endX = parseInt(document.getElementById("endX").value);
        let endY = parseInt(document.getElementById("endY").value);
        let endZ = parseInt(document.getElementById("endZ").value);
        let spacing = parseInt(document.getElementById("spacing").value);

        let calcConsole = document.getElementById("calc-console");
        let blockPositions = '';
        let hasMessage = false;

        if (isNaN(startX) || isNaN(startY) || isNaN(startZ) || isNaN(endX) || isNaN(endY) || isNaN(endZ) || isNaN(spacing)) {
            blockPositions = "Please enter all coordinates and spacing.";
            hasMessage = true;
        } else if (spacing < 1) {
            blockPositions = "Block spacing must be at least 1.";
            hasMessage = true;
        } else {
            let dx = Math.abs(endX - startX);
            let dy = Math.abs(endY - startY);
            let dz = Math.abs(endZ - startZ);
            let maxLength = Math.max(dx, dy, dz);
            let currentStep = 0;

            function calculateNextBlock() {
                if (currentStep <= maxLength) {
                    let x = Math.round(startX + currentStep * (endX - startX) / maxLength);
                    let y = Math.round(startY + currentStep * (endY - startY) / maxLength);
                    let z = Math.round(startZ + currentStep * (endZ - startZ) / maxLength);
                    blockPositions += `#${currentStep / spacing + 1}: ${x}, ${y}, ${z}<br>`;
                    calcConsole.innerHTML = blockPositions;
                    currentStep += spacing;
                    setTimeout(calculateNextBlock, 0);
                }
            }

            calculateNextBlock();
        }

        if (hasMessage) {
            calcConsole.innerHTML = blockPositions;
            calcConsole.classList.add("divparenttable");
        } else {
            calcConsole.classList.remove("divparenttable");
        }
    }, 300);
}

document.addEventListener("DOMContentLoaded", function(event) { CalcUpdateOutput(); });        
  </script>
</body>
</html>

COPY

# Minecraft Block Path Finder ## Description This HTML, CSS, and JavaScript snippet creates a Minecraft Block Path Finder tool. It allows users to input start and end coordinates along with a block spacing value to generate a path of blocks between the two points. ## Features - Responsive design for various screen sizes. - Input fields for X, Y, and Z coordinates for both start and end points. - Block spacing input to control the density of the path. - Dynamic calculation and display of block positions. - Error handling for missing or invalid inputs. ## How/Where it Worked I used this snippet in a personal project where I needed to visualize paths between different points in a Minecraft-like environment. By embedding this code into a webpage, I was able to quickly input start and end coordinates to generate a path of blocks. The tool's responsiveness made it convenient to use across different devices, and the auto-calculation feature provided instant feedback on the block positions. Additionally, the error handling ensured that I received prompt notifications if any input was missing or invalid.

https://github.com/iamnicolecurry/Minecraft-Block-Path-Finder

Save snippets that work from anywhere online with our extensions

Comments

More like this

#html #javascript #nodejs

How to Save HTML Form Data in JSON - Express

<form action="/new" method="post">
 
  <input name="title" type="text">
  <input name="description" type="text">
  <button type="submit">Submit Form</button>
 
</form>

> More steps

#javascript

Get URL and URL Parts in JavaScript

var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname + window.location.search

#javascript

Add event listener to multiple buttons with the same class

    btns = document.getElementsByClassName("saveBtn");
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function () {
			//Add function here
        });
    }

#javascript

Replace Textarea with Codemirror editor

<link rel="stylesheet" type="text/css" href="plugin/codemirror/lib/codemirror.css">

<body>
	<textarea class="codemirror-textarea"></textarea>
</body>

<script>

$(document).ready(function(){
    var codeText = $(".codemirror-textarea")[0];
    var editor = CodeMirror.fromTextArea(codeText, {
        lineNumbers : true
    });
});

</script>

<script type="text/javascript" src="plugin/codemirror/lib/codemirror.js"></script>

#javascript #nodejs #commandline

HTTPS Redirect in Nodejs

npm install heroku-ssl-redirect

> More steps

#css

A Modern CSS Reset - Piccalilli

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

#javascript #nodejs

Save to MongoDB without Duplicates Using Mongoose

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

const exampleSchema = new Schema({
    title: { type: String , required: true},
    content: [{type: String}]
});


var Example = mongoose.model('Example', exampleSchema);
module.exports = Example;

> More steps

#html #javascript #jsfunctions #dom #dommanipulation

getAttribute() - how to get the value of any attribute of HTML element

<html>

<input id="contact" name="address">

<script>

    var x = document.getElementById("contact").getAttribute('name');

</script>

</html>

#javascript

Full Stack Developer

function full_stack_developer() {
    full_stack_developer();
}

#javascript #javascript #functions #parameters

Required Parameters for Functions in JavaScript

 const isRequired = () => { throw new Error('param is required'); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

// These will throw errors
hello();
hello(undefined);

// These will not
hello(null);
hello('David');
The idea here is that it uses default parameters, like how the b parameter here has a default if you don’t send it anything:
function multiply(a, b = 1) {
  return a * b;
}

#javascript

3 Ways To Detect Selenium Bots Using Javascript - CodingTutz

if (navigator.webdriver) {
    document.body.innerHTML = "This is a Bot";
}

#html #jquery #css #navbar

Underline active navbar link

// in css:
/* Display line under clicked navbar link */
.active {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  color: rgb(20, 19, 19);
}

//in html: 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
      $(document).ready(function () {
        // Underline to remain in navbar after click using URL
        jQuery(function ($) {
          var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
          $('.nav-link').each(function () {
            if (this.href === path) {
              $(this).addClass('active');
            }
          });
        });
      });
    </script>

//Note class in link should be nav-link

#javascript

Copy Text to Clipboard with Line Breaks

function copyToClipboard(){

    var codeToBeCopied = document.getElementById('code-snippet').innerText;
    var emptyArea = document.createElement('TEXTAREA');
    emptyArea.innerHTML = codeToBeCopied;
    const parentElement = document.getElementById('post-title');
    parentElement.appendChild(emptyArea);

    emptyArea.select();
    document.execCommand('copy');

    parentElement.removeChild(emptyArea);
    M.toast({html: 'Code copied to clipboard'})

    }

#javascript #promises #howto

How to Get the Domain From A URL Using Javascript

var url = "http://scratch99.com/web-development/javascript/";
var urlParts = url.replace('http://','').replace('https://','').split(/[/?#]/);
var domain = urlParts[0];

#javascript

Mapping an Object

const object1 = {
  a: 'somestring',
  b: 42
};

for (let [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

Minecraft Block Path Finder

Save snippets that work from anywhere online with our extensions

Comments

More like this

Browse more snippets >>

Embed code snippet