|
2 | 2 |
|
3 | 3 | <script>
|
4 | 4 | // Code for the planet editor page. NEEDS CLEANING UP, SORRY
|
| 5 | + |
| 6 | +// If the page doesn't have a planetCanvas, its not the right page to be doing this JS on |
| 7 | +// (Hacky, I know, but it works...) |
5 | 8 | if (document.getElementById("planetCanvas")) {
|
6 |
| - // Get elements from the DOM |
| 9 | + // Get elements for later |
7 | 10 | const canvas = document.getElementById('planetCanvas');
|
8 | 11 | const ctx = canvas.getContext('2d');
|
9 | 12 | const addPlanetBtn = document.getElementById('addPlanetBtn');
|
|
13 | 16 | const deletePlanetBtn = document.getElementById('deletePlanetBtn');
|
14 | 17 | const planetProperties = document.querySelector('.planet-properties');
|
15 | 18 |
|
| 19 | + // The input boxes are in a hidden div by default I think, but the are always there |
16 | 20 | const xinput = document.getElementById("xinput")
|
17 | 21 | const yinput = document.getElementById("yinput")
|
18 | 22 | const zinput = document.getElementById("zinput")
|
|
43 | 47 | planetProperties.addEventListener("input", updatePlanet)
|
44 | 48 |
|
45 | 49 |
|
46 |
| - // Add a planet with Minecraft coordinates |
| 50 | + // Add a planet with Minecraft coordinates 0, 0, 0 |
47 | 51 | function addPlanet() {
|
48 | 52 | const newPlanet = {
|
49 | 53 | x: 0,
|
|
86 | 90 |
|
87 | 91 | console.log(planets, selectedPlanet)
|
88 | 92 |
|
89 |
| - |
| 93 | + // They clicked on a planet, so they are now dragging it |
90 | 94 | if (selectedPlanet) {
|
91 | 95 | openPropertiesMenu(selectedPlanet);
|
92 | 96 | updateProperties()
|
93 | 97 | isDraggingPlanet = true;
|
| 98 | + // Else, they are trying to drag the canvas |
94 | 99 | } else {
|
95 | 100 | planetProperties.style.display = 'none';
|
96 | 101 | // Start panning the canvas
|
|
108 | 113 | // Update planet Minecraft coordinates based on dragging
|
109 | 114 | selectedPlanet.x = mousePos.x - canvas.width / 2 + cameraOffsetX;
|
110 | 115 | selectedPlanet.z = mousePos.y - canvas.height / 2 + cameraOffsetY;
|
| 116 | + |
| 117 | + // To update the input boxes on the planets new position |
111 | 118 | updateProperties()
|
112 | 119 | drawPlanets();
|
113 | 120 | } else if (isPanning) {
|
|
126 | 133 | isPanning = false;
|
127 | 134 | }
|
128 | 135 |
|
129 |
| - // Check if the mouse click is inside the square (planet) |
| 136 | + // Check if the mouse click is inside one of the square planets |
130 | 137 | function isInsidePlanet(mousePos, planet) {
|
131 | 138 | const screenX = canvas.width / 2 + planet.x - cameraOffsetX;
|
132 | 139 | const screenY = canvas.height / 2 + planet.z - cameraOffsetY;
|
|
173 | 180 | }
|
174 | 181 | }
|
175 | 182 |
|
| 183 | + // Update menu inputs based on planet properties (for when planet is dragged or a new planet is selected) |
176 | 184 | function updateProperties() {
|
177 | 185 | if (selectedPlanet) {
|
178 | 186 | xinput.value = selectedPlanet.x
|
|
0 commit comments