Created
November 29, 2022 11:40
-
-
Save SpiffGreen/49abf7895160b56a4376e7d34c862a5a to your computer and use it in GitHub Desktop.
Sample code to illustrate creating shapes based on land sizes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Shape Maker</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body, | |
| html { | |
| min-height: 100vh; | |
| background-color: rgba(18, 18, 48, 0.964); | |
| color: lightgray; | |
| } | |
| .app { | |
| min-height: 100vh; | |
| width: 100%; | |
| } | |
| .shape { | |
| background: grey; | |
| border-radius: 4px; | |
| padding: 3px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app" class="app"> | |
| <div id="actions"></div> | |
| <div class="shape"></div> | |
| </div> | |
| <script> | |
| // constants | |
| const testValues = { | |
| "<<": { | |
| width1: 400, | |
| width2: 420, | |
| height1: 400, | |
| height2: 420, | |
| }, | |
| ">>": { | |
| width1: 420, | |
| width2: 400, | |
| height1: 420, | |
| height2: 400, | |
| }, | |
| "><": { | |
| width1: 420, | |
| width2: 400, | |
| height1: 400, | |
| height2: 420, | |
| }, | |
| "<>": { | |
| width1: 400, | |
| width2: 420, | |
| height1: 420, | |
| height2: 400, | |
| }, | |
| }; | |
| let width1 = 400; | |
| let width2 = 300; | |
| let height1 = 400; | |
| let height2 = 420; | |
| const shape = document.querySelector(".shape"); | |
| function toggleMode(shapeType) { | |
| width1 = testValues[shapeType].width1; | |
| width2 = testValues[shapeType].width2; | |
| height1 = testValues[shapeType].height1; | |
| height2 = testValues[shapeType].height2; | |
| // Add shape size | |
| shape.style.height = height1 + "px"; | |
| shape.style.width = width1 + "px"; | |
| // Add clip-path | |
| if (width1 < width2 && height1 > height2) { | |
| const percentage = ((width2 - width1) * 100) / width2; | |
| shape.style.clipPath = `polygon(${percentage}% 0, 100% 0, 100% 100%, 0 100%)`; | |
| } | |
| if (width1 > width2 && height1 < height2) { | |
| const percentage = 100 - ((width1 - width2) * 100) / width1; | |
| shape.style.clipPath = `polygon(0 0, 100% 0, ${percentage}% 100%, 0 100%)`; | |
| } | |
| if (width1 < width2 && height1 < height2) { | |
| const percentage = 100 - ((width2 - width1) * 100) / width2; | |
| shape.style.clipPath = `polygon(0 0, ${percentage}% 0, 100% 100%, 0 100%)`; | |
| } | |
| if (width1 > width2 && height1 > height2) { | |
| const percentage = ((width1 - width2) * 100) / width1; | |
| shape.style.clipPath = `polygon(0 0, 100% 0, 100% 100%, ${percentage}% 100%)`; | |
| } | |
| } | |
| const app = document.getElementById("actions"); | |
| app.innerHTML = Object.keys(testValues).map(key => `<button onclick="toggleMode('${key}')">${key}</button>`).join(" "); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment