├── images
    ├── square.svg
    ├── triangle.svg
    ├── circle.svg
    ├── reddit.svg
    ├── pyramid.svg
    ├── github.svg
    ├── cylinder.svg
    ├── cone.svg
    ├── prism.svg
    ├── cube.svg
    └── sphere.svg
└── index.html


/images/square.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 404.4 404.4"><defs><style>.cls-2{display:none}</style></defs><path class="cls-1" d="M343.2 342.2h-282v-280h282v280Zm-272-10h262v-260h-262v260Z" id="square"/></svg>


--------------------------------------------------------------------------------
/images/triangle.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 404.4 404.4"><defs><style>.cls-2{display:none}</style></defs><path class="cls-1" d="M346.3 342.2H58.1L202.2 56.1l144.1 286.1Zm-272-10h255.8L202.2 78.3 74.3 332.2Z" id="triangle"/></svg>


--------------------------------------------------------------------------------
/images/circle.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 404.4 404.4"><defs><style>.cls-2{display:none}</style></defs><path class="cls-1" d="M202.2 342.2c-77.7 0-141-62.8-141-140s63.3-140 141-140 141 62.8 141 140-63.3 140-141 140Zm0-270c-72.2 0-131 58.3-131 130s58.8 130 131 130 131-58.3 131-130-58.8-130-131-130Z" id="circle"/></svg>


--------------------------------------------------------------------------------
/images/reddit.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ff4500" d="M0 256C0 114.6 114.6 0 256 0s256 114.6 256 256-114.6 256-256 256H37.1c-13.7 0-20.5-16.5-10.9-26.2L75 437C28.7 390.7 0 326.7 0 256zm349.6-102.4c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7c-20.6 0-37.8 14.6-41.8 34-34.5 3.7-61.4 33-61.4 68.4v.2c-37.5 1.6-71.8 12.3-99 29.1-10.1-7.8-22.8-12.5-36.5-12.5-33 0-59.8 26.8-59.8 59.8 0 24 14.1 44.6 34.4 54.1 2 69.4 77.6 125.2 170.6 125.2s168.7-55.9 170.6-125.3c20.2-9.6 34.1-30.2 34.1-54 0-33-26.8-59.8-59.8-59.8-13.7 0-26.3 4.6-36.4 12.4-27.4-17-62.1-27.7-100-29.1v-.2c0-25.4 18.9-46.5 43.4-49.9 4.4 18.8 21.3 32.8 41.5 32.8zm-172.5 93.3c16.7 0 29.5 17.6 28.5 39.3s-13.5 29.6-30.3 29.6-31.4-8.8-30.4-30.5S160.3 247 177 247zm190.1 38.3c1 21.7-13.7 30.5-30.4 30.5s-29.3-7.9-30.3-29.6c-1-21.7 11.8-39.3 28.5-39.3s31.2 16.6 32.1 38.3zm-48.1 56.7c-10.3 24.6-34.6 41.9-63 41.9s-52.7-17.3-63-41.9c-1.2-2.9.8-6.2 3.9-6.5 18.4-1.9 38.3-2.9 59.1-2.9s40.7 1 59.1 2.9c3.1.3 5.1 3.6 3.9 6.5z"/></svg>


--------------------------------------------------------------------------------
/images/pyramid.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 404.4 404.4"><defs><style>.cls-2{display:none}</style></defs><path class="cls-1" d="m86.1 307-22.3 7.9c-2.2.8-4.5.2-6.2-1.4-3.1-3.1-1.9-8.3 2.2-9.8l22.3-7.9c2.2-.8 4.5-.2 6.2 1.4 3.1 3.1 1.9 8.3-2.2 9.8Zm236.2-11.1 22.3 7.9c3.9 1.4 5.2 6.2 2.6 9.4a5.96 5.96 0 0 1-6.5 1.8l-22.3-7.9c-3.9-1.4-5.2-6.2-2.6-9.4 1.6-1.9 4.2-2.6 6.5-1.8Zm-55.9-19.8 22.3 7.9c3.9 1.4 5.2 6.2 2.6 9.4a5.96 5.96 0 0 1-6.5 1.8l-22.3-7.9c-3.9-1.4-5.2-6.2-2.6-9.4 1.6-1.9 4.2-2.6 6.5-1.8Zm-55.8-19.7 22.3 7.9c3.9 1.4 5.2 6.2 2.6 9.4a5.96 5.96 0 0 1-6.5 1.8l-20.8-7.4v122l172.6-61-6.6-2.3c-3.9-1.4-5.2-6.2-2.6-9.4 1.6-1.9 4.2-2.6 6.5-1.8l6.7 2.4L208.1 27v229c.8 0 1.6 0 2.4.3Zm192.6 69.1c1.6 2.1 1.7 5.1-.2 7.4-.8.9-1.8 1.6-2.9 1.9L204.5 404c-.7.3-1.5.5-2.3.5s-1.6-.2-2.3-.5L4.3 334.8c-.9-.3-1.8-.8-2.5-1.5-2.2-2.2-2.2-5.5-.6-7.7L196.9 3.3c.9-1.9 3-3.3 5.3-3.3s4.4 1.4 5.3 3.3l195.7 322.2Zm-261.3-38.2-22.3 7.9c-2.1.8-4.5.2-6.1-1.4-3.1-3.1-1.9-8.3 2.2-9.8l22.3-7.9c2.1-.8 4.5-.2 6.2 1.4 3.1 3.1 1.9 8.3-2.2 9.8Zm54.4-19.2-20.8 7.4c-2.2.8-4.5.2-6.2-1.4-3.1-3.1-1.9-8.3 2.2-9.8l22.3-7.9c.8-.3 1.6-.4 2.4-.3V27L19.6 318l6.7-2.4c2.1-.8 4.5-.2 6.2 1.4 3.1 3.1 1.9 8.3-2.2 9.8l-6.6 2.3 172.6 61v-122Z" id="pyramid"/></svg>


--------------------------------------------------------------------------------
/images/github.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>


--------------------------------------------------------------------------------
/images/cylinder.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 404.4 404.4"><defs><style>.cls-2{display:none}</style></defs><path class="cls-1" d="M196.3 66.8V54.9c0-2.3 1.3-4.3 3.3-5.3 4-1.9 8.5.9 8.6 5.3v11.9c0 2.3-1.3 4.3-3.3 5.3-3.9 1.9-8.5-.9-8.6-5.3Zm17.8 288.5h-11.6c-3.5 0-6.2-2.6-6.2-6.2v-11.6c0-2.3 1.3-4.3 3.3-5.3 4-1.9 8.5.9 8.6 5.3v5.9h5.9c2.3 0 4.3 1.3 5.3 3.3 1.9 3.9-.9 8.5-5.3 8.6Zm61.8 0h-24.7c-2.3 0-4.3-1.3-5.3-3.3-1.9-4 .9-8.5 5.3-8.6h24.7c2.3 0 4.3 1.3 5.3 3.3 1.9 3.9-.9 8.5-5.3 8.6Zm41.8 0c-4 0-8 .7-10-3.3-1.9-4 .9-8.5 5.3-8.6h4.7c-3.6-8.7-14.7-16.8-31-23.3-20.6-8.2-48.8-13.5-80.2-13.9-2.4 2.5-6.3 2.5-8.6 0-31.4.4-59.6 5.7-80.2 13.9-42.9 17.2-42.9 41.3 0 58.4 46.4 18.6 122.6 18.6 169.1 0 16.3-6.5 27.4-14.6 31-23.3Zm13.1-6.1v.6c-.2 16.1-15.3 30.1-39.7 39.8-49.3 19.7-128.5 19.7-177.9 0-24.5-9.8-39.7-24-39.7-40.2V55c0-16.2 15.2-30.4 39.7-40.2 49.4-19.7 128.5-19.7 177.9 0 24.5 9.8 39.7 23.9 39.7 40.2v294.2Zm-122.7-54.7c37.8.7 87.1 9.2 110.8 31.3V78.6c-23.7 22.1-73.1 30.6-110.8 31.3v15.8c0 2.3-1.3 4.3-3.3 5.3-3.9 1.9-8.5-.9-8.6-5.3v-15.8c-37.8-.7-87.1-9.2-110.8-31.3v247.1c23.7-22.1 73.1-30.6 110.8-31.3v-15.8c0-2.3 1.3-4.3 3.3-5.3 4-1.9 8.5.9 8.6 5.3v15.8ZM197.9 98.1c2.4-2.6 6.3-2.5 8.7 0 31.4-.4 59.6-5.7 80.2-13.9 42.9-17.2 42.9-41.3 0-58.4-46.5-18.6-122.7-18.6-169.1 0-42.9 17.2-42.9 41.3 0 58.4 20.6 8.2 48.8 13.5 80.2 13.9Zm-1.6 86.5V161c0-2.3 1.3-4.3 3.3-5.3 4-1.9 8.5.9 8.6 5.3v23.6c0 2.3-1.3 4.3-3.3 5.3-3.9 1.9-8.5-.9-8.6-5.3Zm0 58.8v-23.5c0-2.3 1.3-4.3 3.3-5.3 4-1.9 8.5.9 8.6 5.3v23.5c0 2.3-1.3 4.3-3.3 5.3-3.9 1.9-8.5-.9-8.6-5.3Z" id="cylinder"/></svg>


--------------------------------------------------------------------------------
/images/cone.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 404.4 404.4"><defs><style>.cls-2{display:none}</style></defs><path class="cls-1" d="M196.3 106V82.3c0-2.3 1.3-4.3 3.3-5.3 3.9-1.9 8.5.9 8.6 5.3V106c0 2.3-1.3 4.3-3.3 5.3-4 1.9-8.5-.9-8.6-5.3Zm88.9 243.1h-23.7c-2.3 0-4.3-1.3-5.3-3.3-1.9-4 .9-8.5 5.3-8.6h23.7c2.3 0 4.3 1.3 5.3 3.3 1.9 3.9-.9 8.5-5.3 8.6Zm48.3 0h-12.8c-2.3 0-4.3-1.3-5.3-3.3-1.9-4 .9-8.5 5.3-8.6h12.8c-.9-2.5-2.3-5-4.3-7.4-.4-.4-.8-.8-1.1-1.3-6.2-7.1-16.7-13.5-30.4-19-24.3-9.7-58.1-15.7-95.6-15.7s-71.2 6-95.5 15.7c-13.7 5.5-24.2 12-30.4 19-.3.5-.6.9-1.1 1.3-3.4 4.3-5.3 8.8-5.3 13.3 0 12.6 14.1 24.5 36.8 33.6 24.3 9.7 58.1 15.7 95.5 15.7s71.2-6 95.6-15.7c19.1-7.7 32.1-17.3 35.7-27.7Zm12.9-6.2v.6c-.2 17.8-17.1 33.4-44.2 44.2-25.7 10.3-61 16.6-100 16.6s-74.3-6.3-99.9-16.6c-27.3-10.9-44.2-26.6-44.2-44.6s2.8-14.3 8-20.7L196.7 3.7v-.1c.2-.5.5-.9.8-1.3V2l.1-.2h.1c.4-.3.8-.6 1.3-.8h.4c.3 0 .6-.1 1-.1h.7c.3 0 .6 0 1 .2h.4c.5.2.9.5 1.3.8v.2c.3.5.6.9.8 1.4v.1l130.7 318.9c5.1 6.3 7.9 13.2 8 20.4Zm-138.3-5.6h17.8c2.3 0 4.3 1.3 5.3 3.3 1.9 3.9-.9 8.5-5.3 8.6h-23.7c-2.3 0-4.3-1.3-5.3-3.3-.5-.9-.6-1.9-.6-2.9v-23.7c0-2.3 1.3-4.3 3.3-5.3 3.9-1.9 8.5.9 8.6 5.3v18Zm0-55.3c36.6.6 69.6 6.8 94 16.6 6.2 2.5 11.9 5.2 17 8.2l-111-270.9v10.8c0 2.3-1.3 4.3-3.3 5.3-4 1.9-8.5-.9-8.6-5.3V35.9l-111 270.9c5.1-3 10.7-5.7 17-8.2 24.4-9.7 57.5-16 94-16.6v-22c0-2.3 1.3-4.3 3.3-5.3 3.9-1.9 8.5.9 8.6 5.3v22Zm-11.8-116.7v-23.7c0-2.3 1.3-4.3 3.3-5.3 3.9-1.9 8.5.9 8.6 5.3v23.7c0 2.3-1.3 4.3-3.3 5.3-4 1.9-8.5-.9-8.6-5.3Zm0 59.2v-23.7c0-2.3 1.3-4.3 3.3-5.3 3.9-1.9 8.5.9 8.6 5.3v23.7c0 2.3-1.3 4.3-3.3 5.3-4 1.9-8.5-.9-8.6-5.3Z" id="cone"/></svg>


--------------------------------------------------------------------------------
/images/prism.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 404.4 404.4"><defs><style>.cls-2{display:none}</style></defs><path class="cls-1" d="M196.3 50.9c0-4.4 4.6-7.3 8.6-5.3 2 1 3.3 3 3.3 5.3v20.7c0 4.4-4.6 7.3-8.6 5.3-2-1-3.3-3-3.3-5.3V50.9ZM93.6 392.6h217.3l-9.5-13.3c-1.3-1.8-1.5-4-.6-5.9 1.9-4.1 7.5-4.7 10.2-1l7.2 10V181.8h-110v.3c0 4.4-4.6 7.3-8.6 5.3-2-1-3.3-3-3.3-5.3v-.3h-110v200.6l7.2-10c2.7-3.7 8.4-3.1 10.3 1.1.8 1.9.6 4.1-.6 5.8l-9.5 13.3Zm102.7-287.8c0-4.4 4.6-7.3 8.6-5.3 2 1 3.3 3 3.3 5.3v22.1c0 4.4-4.6 7.3-8.6 5.3-2-1-3.3-3-3.3-5.3v-22.1Zm0 55.2c0-4.4 4.6-7.3 8.6-5.3 2 1 3.3 3 3.3 5.3v9.9h104.4L202.2 16.1 91.9 170h104.4v-9.9Zm0 55.3c0-4.4 4.6-7.3 8.6-5.3 2 1 3.3 3 3.3 5.3v22.1c0 4.4-4.6 7.3-8.6 5.3-2-1-3.3-3-3.3-5.3v-22.1Zm87 138.8c2.6 3.7 8.3 3.2 10.2-1 .9-1.9.7-4.2-.6-5.9l-12-16.7c-2.6-3.7-8.3-3.2-10.2 1-.9 1.9-.7 4.2.6 5.9l12 16.7Zm-30-41.8c2.6 3.7 8.3 3.2 10.2-1 .9-1.9.7-4.2-.6-5.9l-12-16.7c-2.7-3.7-8.3-3.2-10.2 1-.9 1.9-.7 4.2.6 5.9l12 16.7Zm-30-41.9c2.7 3.7 8.3 3.2 10.2-1 .9-1.9.7-4.2-.6-5.9l-6.9-9.6c-2.6-3.7-8.3-3.2-10.2 1-.9 1.9-.7 4.2.6 5.9l6.9 9.6Zm-111.8 76.9c-1.2 1.7-1.5 3.9-.6 5.8 1.9 4.2 7.5 4.8 10.2 1.1l12-16.7c1.2-1.7 1.5-3.9.6-5.8-1.9-4.2-7.6-4.8-10.2-1.1l-12 16.7Zm30-41.9c-1.2 1.7-1.5 3.9-.6 5.8 1.9 4.2 7.5 4.8 10.2 1.1l12-16.7c1.2-1.7 1.5-3.9.6-5.8-1.9-4.2-7.5-4.8-10.2-1.1l-12 16.7Zm30-41.9c-1.2 1.7-1.5 3.9-.6 5.8 1.9 4.2 7.6 4.8 10.2 1.1l6.9-9.6c1.2-1.7 1.4-3.9.6-5.8-1.9-4.2-7.6-4.8-10.3-1.1l-6.9 9.6ZM198 1.8c.5-.5 1-.9 1.6-1.2h.1c.7-.4 1.5-.5 2.2-.5h.2c.7 0 1.5.2 2.2.5h.1c.6.3 1.1.7 1.6 1.1.2.4.5.6.7.9l121.6 169.7c.8 1 1.2 2.3 1.2 3.6v222.6c0 3.3-2.7 5.9-5.9 5.9H80.4c-3.3 0-5.9-2.7-5.9-5.9V175.9c0-1.3.5-2.6 1.2-3.6L197.3 2.6c.2-.3.4-.5.6-.8Z" id="prism"/></svg>


--------------------------------------------------------------------------------
/images/cube.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 404.4 404.4"><defs><style>.cls-2{display:none}</style></defs><path class="cls-1" d="M134.2 380.3h249.3c-.2-.9-.2-1.9 0-3 1.1-4 5.7-5.7 9.1-3.4V122H282.1v15.2c0 2.3-1.3 4.3-3.3 5.3-3.9 1.9-8.5-.9-8.6-5.3V122h-136v258.4ZM277.6 12.4c1 .3 2 .8 2.7 1.5L401.7 111c1.6 1.1 2.7 2.9 2.7 5v270.2c0 .4 0 .9-.1 1.3s0 .1 0 .1c-.2.8-.5 1.5-.9 2v.4c-.2.3-.6.6-.9.9h-.1c-.7.6-1.5 1-2.4 1.1H128.3c-1.6 0-3.1-.6-4.1-1.7L2.7 293.4c-.4-.3-.8-.6-1.2-1-.3-.3-.5-.7-.7-1.1v-.1c0-.2-.1-.2-.2-.4s0-.2 0-.2v-.1c-.3-.7-.4-1.5-.3-2.2V18.2c-.3-3.3 2.4-6 5.6-6h270c.6 0 1.2 0 1.7.2Zm-7.4 11.7H22.8l107.5 86h144.1c1.2-.4 2.4-.4 3.5 0h103.7L282 30.4c-.2 2.1-1.4 3.9-3.3 4.9-3.9 1.9-8.5-.9-8.6-5.3v-5.9ZM11.9 30.5v252h5.9c2.3 0 4.3 1.3 5.3 3.3 1.3 2.7.4 5.8-1.8 7.4l101 80.8v-79.7h-18.8c-2.3 0-4.3-1.3-5.3-3.3-1.9-4 .9-8.5 5.3-8.6h18.8V118.9L11.9 30.5Zm270.2 255v-9c0-4.4-4.6-7.3-8.6-5.3-2 1-3.3 3-3.3 5.3v5.9h-5.9c-4.4 0-7.3 4.6-5.3 8.6 1 2 3 3.3 5.3 3.3h9.8l7.6 6.1c3.4 2.7 8.4 1 9.4-3.2.6-2.3-.2-4.6-2-6.1l-7-5.6Zm-11.9-41.1c0 4.4 4.6 7.3 8.6 5.3 2-1 3.3-3 3.3-5.3V223c0-4.4-4.6-7.3-8.6-5.3-2 1-3.3 3-3.3 5.3v21.4Zm0-53.6c0 4.4 4.6 7.3 8.6 5.3 2-1 3.3-3 3.3-5.3v-21.4c0-4.4-4.6-7.3-8.6-5.3-2 1-3.3 3-3.3 5.3v21.4Zm0-107.2c0 4.4 4.6 7.3 8.6 5.3 2-1 3.3-3 3.3-5.3V62.2c0-4.4-4.6-7.3-8.6-5.3-2 1-3.3 3-3.3 5.3v21.4Zm-38.1 210.7c4.4 0 7.3-4.6 5.3-8.6-1-2-3-3.3-5.3-3.3h-21.4c-4.4 0-7.3 4.6-5.3 8.6 1 2 3 3.3 5.3 3.3h21.4Zm-53.5 0c4.4 0 7.3-4.6 5.3-8.6-1-2-3-3.3-5.3-3.3h-21.4c-4.4 0-7.3 4.6-5.3 8.6 1 2 3 3.3 5.3 3.3h21.4Zm-107.2 0c4.4 0 7.3-4.6 5.3-8.6-1-2-3-3.3-5.3-3.3H50c-4.4 0-7.3 4.6-5.3 8.6 1 2 3 3.3 5.3 3.3h21.4Zm290.2 70c3.4 2.7 8.3 1 9.4-3.2.6-2.3-.2-4.6-2-6.1l-16-12.8c-3.4-2.7-8.3-1-9.4 3.2-.6 2.3.2 4.6 2 6.1l16 12.8Zm-40-31.9c3.4 2.7 8.3 1 9.4-3.2.6-2.3-.2-4.6-2-6.1l-16-12.8c-3.4-2.7-8.3-1-9.4 3.2-.6 2.3.2 4.6 2 6.1l16 12.8Z" id="cube"/></svg>


--------------------------------------------------------------------------------
/images/sphere.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 404.4 404.4"><defs><style>.cls-2{display:none}</style></defs><path class="cls-1" d="M202.2 0c55.8 0 106.4 22.6 143 59.2 36.6 36.6 59.2 87.1 59.2 143s-22.6 106.4-59.2 143c-36.6 36.6-87.1 59.2-143 59.2s-106.4-22.6-143-59.2C22.6 308.6 0 258 0 202.2s22.6-106.4 59.2-143C95.8 22.6 146.4 0 202.2 0Zm71.9 349c-3.7 6.9-8.4 14.5-13.2 20.8-2.4 3-6.8 3.1-9.3.2-1.7-2.1-1.8-5.2-.1-7.4 4.6-6.1 8.6-12.5 12.2-19.2 2.2-4.1 8.1-4.1 10.4 0 1 1.8 1 3.9 0 5.7Zm63.8-224.2c7.4 3.4 14.6 7.3 21.5 11.6 3.8 2.4 3.6 7.9-.3 10.2-1.9 1.1-4.2 1-6.1-.2-6.5-4.1-13.2-7.7-20.2-10.9-3.9-1.8-4.6-7.1-1.3-9.9 1.8-1.5 4.2-1.8 6.3-.9Zm-57.4-18.7c7.9 1.7 15.7 3.7 23.4 5.9 1.9.6 3.3 1.9 3.9 3.8 1.5 4.5-2.7 8.9-7.3 7.6-.8-.2-1.7-.5-2.5-.7 1 4.7 2 9.5 2.8 14.4.4 2.3-.6 4.5-2.4 5.8-3.6 2.5-8.5.4-9.2-3.9-1.2-6.7-2.5-13.2-4.1-19.7-2.4-.6-4.7-1.1-7.1-1.6-2.7-.6-4.7-3-4.7-5.8s3.4-6.6 7.2-5.8Zm-59.7-7.5c8 .4 16 1 24 1.9 3 .3 5.2 2.8 5.3 5.8 0 3.6-3 6.4-6.6 6-7.7-.9-15.5-1.4-23.2-1.8-3-.2-5.5-2.6-5.6-5.6-.2-3.5 2.7-6.4 6.2-6.2Zm-60.1 1.7c8-.9 16-1.4 24-1.8 2 0 3.8.8 5 2.4 2.9 3.8.3 9.3-4.5 9.5-7.8.3-15.5.9-23.3 1.7-2.4.2-4.6-.9-5.8-3.1-2-3.7.4-8.3 4.6-8.7Zm-59.1 11.4c2.7-.7 5.3-1.5 7.9-2.1 4.7-18 10.8-34.5 18-48.8 9.4-18.7 20.6-33.9 33.2-44.4-35.9 8-68 26.1-93.1 51.2s-43.2 57.2-51.2 93.1c.2-.2.4-.4.6-.7 5.7-6.7 14.3 1.5 9.3 7.3-4.6 5.4-8.5 11.2-11.1 17.9-.7 1.7-1.7 2.9-2.8 3.5-.3 4.4-.5 8.9-.5 13.4 0 24.7 20.7 47.4 54.2 64.1 12 6 25.5 11.2 40.4 15.4-5.3-24.4-8.3-51.3-8.3-79.6s3-55.1 8.3-79.5l-1.5.4c-2.4.7-4.8-.1-6.4-2.1-2.5-3.3-1-8.1 3-9.3Zm21.1-5.3c.8-.2 1.6-.3 2.4-.5 2.2-.4 4.3.3 5.8 2 2.8 3.4 1 8.6-3.4 9.6-2.8.6-5.5 1.2-8.2 1.9-6 25.1-9.3 53.2-9.3 82.8s3.3 57.8 9.3 82.9c25.1 6 53.2 9.3 82.9 9.3 53.3 0 101.5-10.7 136.2-28.1 33.5-16.7 54.2-39.5 54.2-64.1s-.1-8.4-.4-12.6c-1-.6-1.9-1.6-2.4-3-2.2-6-5.4-11.4-9.4-16.5-1.8-2.3-4-4.3-2.6-7.9 1.6-4.3 7.2-5.2 10.1-1.7l.2.2c-8-35.9-26.1-68-51.2-93.1-25.2-25.2-57.4-43.3-93.4-51.3 3.2 2.6 6.2 5.3 8.4 7.7 2.1 2.2 4.2 4 3.5 7.4-1 4.8-6.9 6.4-10.2 2.8-5-5.6-14-12.8-20.4-16.8-1.7-1.1-2.6-2.7-2.7-4.4-6.5-.7-13.1-1-19.8-1-24.7 0-47.4 20.7-64.1 54.2-6 12-11.2 25.5-15.4 40.3Zm-76.8 29.4c6.9-4.3 14.2-8.2 21.6-11.5 1.8-.8 3.9-.7 5.6.4 4 2.5 3.6 8.5-.7 10.4-7 3.2-13.7 6.7-20.2 10.8-1.8 1.1-4.1 1.2-5.9.2-4-2.2-4.2-7.9-.3-10.3Zm249 159.1c-1.8 7-3.9 13.9-6.2 20.7-1.5 4.3-7.1 5.4-10.1 1.9-1.4-1.6-1.8-3.8-1.1-5.8 1.5-4.5 3-9.1 4.3-13.7-24.4 5.3-51.3 8.3-79.5 8.3s-55.1-3-79.5-8.3c4.2 14.8 9.4 28.4 15.4 40.3 16.7 33.5 39.4 54.2 64.1 54.2h4.1l1.2-.3c6.2-.8 11.7-2.6 17.2-5.6 2.8-1.5 5.1-3.5 8.6-1.6 1.7 1 2.7 2.7 3 4.4 38.9-7 73.7-25.9 100.6-52.7 25.1-25.1 43.3-57.2 51.2-93.2-10.5 12.6-25.7 23.9-44.4 33.2-14.3 7.2-30.7 13.2-48.8 18Zm10.2-61.9c-.6 8-1.5 16-2.6 23.9-.7 4.5-5.9 6.6-9.5 3.9-1.7-1.3-2.6-3.4-2.2-5.5 1.1-7.7 1.9-15.4 2.5-23.2.3-3.5 3.5-6 7-5.4 3 .6 5 3.3 4.8 6.3Zm.1-60.1c.6 8 .9 16 1.1 24 0 2.4-1.4 4.6-3.7 5.5-3.9 1.6-8.1-1.2-8.2-5.4 0-7.8-.4-15.5-1-23.3-.2-2.1.8-4 2.4-5.2 3.8-2.7 9-.2 9.4 4.4ZM274.8 56.7c3.8 7.2 7.1 14.6 10.1 22.1.8 2.1.4 4.5-1.1 6.1-3 3.3-8.3 2.3-9.9-1.8-2.8-7.1-6-14.2-9.6-20.9-1.1-2.2-.9-4.7.7-6.6 2.7-3.2 7.8-2.7 9.8 1.1ZM160.8 388c-12.6-10.5-23.8-25.7-33.2-44.4-7.1-14.3-13.2-30.7-18-48.8-18-4.7-34.5-10.8-48.8-18-18.7-9.4-33.9-20.6-44.4-33.2 8 35.9 26.1 68 51.2 93.2 25.1 25.1 57.2 43.3 93.1 51.2Z" id="sphere"/></svg>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 |     <head>
  3 |         <title>Verity</title>
  4 | 
  5 |         <script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
  6 |         <script
  7 |             defer
  8 |             src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
  9 |         ></script>
 10 |         <style>
 11 |             [x-cloak] {
 12 |                 display: none !important;
 13 |             }
 14 |             /* dark mode */
 15 |             @media (prefers-color-scheme: dark) {
 16 |                 body {
 17 |                     background-color: #2e323a;
 18 |                     color: #e2e8f0;
 19 |                 }
 20 |                 .bg-gray-100 {
 21 |                     background-color: #2d3748;
 22 |                 }
 23 |                 .border-gray-300 {
 24 |                     border-color: #4a5568;
 25 |                 }
 26 |                 .border-blue-800 {
 27 |                     border-color: #2b6cb0;
 28 |                 }
 29 |                 .bg-gray-300 {
 30 |                     background-color: #4a5568;
 31 |                 }
 32 |                 .text-purple-800 {
 33 |                     color: #6b46c1;
 34 |                 }
 35 |                 select,
 36 |                 input {
 37 |                     background-color: #383f4d;
 38 |                     border-color: #424c5a !important;
 39 |                 }
 40 |                 .border-dark {
 41 |                     border-color: #424c5a !important;
 42 |                 }
 43 |                 .img-bg {
 44 |                     background-color: #383f4d !important;
 45 |                 }
 46 |                 svg #circle,
 47 |                 svg #square,
 48 |                 svg #triangle,
 49 |                 svg #cube,
 50 |                 svg #sphere,
 51 |                 svg #pyramid,
 52 |                 svg #cylinder,
 53 |                 svg #cone,
 54 |                 svg #prism {
 55 |                     fill: white !important; /* Change this to your desired color */
 56 |                 }
 57 |             }
 58 |         </style>
 59 |     </head>
 60 |     <body
 61 |         x-data="{
 62 | 
 63 |         displayOptions: { 
 64 |             showinsideImages: true,
 65 |             showInsideSelect: true,
 66 |             showOutsideImages: true,
 67 |             showOutsideSelect: true, 
 68 |         },
 69 |       twoD: ['Circle', 'Square', 'Triangle'],
 70 |       twoDWithImages: [
 71 |         {name: 'Circle', image: './images/circle.svg', raw: ''},
 72 |         {name: 'Square', image: './images/square.svg', raw: ''},
 73 |         {name: 'Triangle', image: './images/triangle.svg', raw: ''},
 74 |       ],
 75 |       // map of inside shapes to the corresponding outside shape that guardian must be holding to exit inside rooms
 76 |       solutions: {
 77 |         Circle: 'Prism',
 78 |         Square: 'Cone',
 79 |         Triangle: 'Cylinder',
 80 |       },
 81 |       threeD: [
 82 |         {name: 'Cube', symbol1: 'Square', symbol2: 'Square', isPure: true, image: './images/cube.svg', raw: ''},
 83 |         {name: 'Sphere', symbol1: 'Circle', symbol2: 'Circle', isPure: true, image: './images/sphere.svg', raw: ''},
 84 |         {name: 'Pyramid', symbol1: 'Triangle', symbol2: 'Triangle', isPure: true, image: './images/pyramid.svg', raw: ''},
 85 |         {name: 'Cylinder', symbol1: 'Circle', symbol2: 'Square', isPure: false, image: './images/cylinder.svg', raw: ''},
 86 |         {name: 'Cone', symbol1: 'Circle', symbol2: 'Triangle', isPure: false, image: './images/cone.svg', raw: ''},
 87 |         {name: 'Prism', symbol1: 'Triangle', symbol2: 'Square', isPure: false, image: './images/prism.svg', raw: ''},
 88 |       ],
 89 |       insideCallouts: '',
 90 |       insideGuardianLeft: '',
 91 |       insideGuardianMiddle: '',
 92 |       insideGuardianRight: '',
 93 |       outsideGuardianLeft: '',
 94 |       outsideGuardianMiddle: '',
 95 |       outsideGuardianRight: '',
 96 | 
 97 |       resetForm: function(){
 98 |         this.insideCallouts = '';
 99 |         this.insideGuardianLeft = '';
100 |         this.insideGuardianMiddle = '';
101 |         this.insideGuardianRight = '';
102 |         this.outsideGuardianLeft = '';
103 |         this.outsideGuardianMiddle = '';
104 |         this.outsideGuardianRight = '';
105 |       },
106 | 
107 |       setInsideCallouts: function() {
108 |         if(this.insideCallouts.length === 3) {
109 |           let leftChar = this.insideCallouts[0].toLowerCase();
110 |           let middleChar = this.insideCallouts[1].toLowerCase();
111 |           let rightChar = this.insideCallouts[2].toLowerCase();
112 |           this.insideGuardianLeft = this.twoD.find(item => item[0].toLowerCase() === leftChar);
113 |           this.insideGuardianMiddle = this.twoD.find(item => item[0].toLowerCase() === middleChar);
114 |           this.insideGuardianRight = this.twoD.find(item => item[0].toLowerCase() === rightChar);
115 |         }
116 |       },
117 | 
118 |       setInsideCalloutsFromSelect: function() {
119 |         if(this.insideGuardianLeft && this.insideGuardianMiddle && this.insideGuardianRight) {
120 |           this.insideCallouts = this.insideGuardianLeft[0].toUpperCase() + this.insideGuardianMiddle[0].toUpperCase() + this.insideGuardianRight[0].toUpperCase();
121 |         }
122 |       },
123 | 
124 |       clickInsidePicture(guardian, imageUrlName){
125 |             if(guardian === 'left'){
126 |                 this.insideGuardianLeft = imageUrlName;
127 |                 
128 |             } 
129 |             if(guardian === 'middle'){
130 |                 this.insideGuardianMiddle = imageUrlName;
131 |             } 
132 |             if(guardian === 'right'){
133 |                 this.insideGuardianRight = imageUrlName;
134 |             }
135 |             //if two are selected, auto select third
136 |             if(this.insideGuardianLeft && this.insideGuardianMiddle && !this.insideGuardianRight){
137 |                 this.insideGuardianRight = this.twoD.find(item => item !== this.insideGuardianLeft && item !== this.insideGuardianMiddle);
138 |             }
139 |             if(this.insideGuardianLeft && !this.insideGuardianMiddle && this.insideGuardianRight){
140 |                 this.insideGuardianMiddle = this.twoD.find(item => item !== this.insideGuardianLeft && item !== this.insideGuardianRight);
141 |             }
142 |             if(!this.insideGuardianLeft && this.insideGuardianMiddle && this.insideGuardianRight){
143 |                 this.insideGuardianLeft = this.twoD.find(item => item !== this.insideGuardianMiddle && item !== this.insideGuardianRight);
144 |             }
145 |             //if all are selected, reset matching
146 |             
147 |       },
148 | 
149 |       neededThreeD: function() {
150 |         let retVal = [];
151 |         if(this.insideGuardianLeft && this.insideGuardianMiddle && this.insideGuardianRight) {
152 |           retVal = [
153 |             this.threeD.find(item => item.name === this.solutions[this.insideGuardianLeft]),
154 |             this.threeD.find(item => item.name === this.solutions[this.insideGuardianMiddle]),
155 |             this.threeD.find(item => item.name === this.solutions[this.insideGuardianRight]),
156 |           ]
157 |         }
158 |         return retVal;
159 |       },
160 | 
161 |       neededSwaps: function() {
162 |         let retVal = {};
163 | 
164 |         guardianNeededSymbols = function(shapes, inside, outside) {
165 |           mustSend = [];
166 |           const outsideObject = shapes.find(item => item.name === outside);
167 | 
168 |           if (outsideObject.symbol1 === inside) {
169 |             mustSend.push(outsideObject.symbol1);
170 |           }
171 | 
172 |           if (outsideObject.symbol2 === inside) {
173 |             mustSend.push(outsideObject.symbol2);
174 |           }
175 | 
176 |           if (mustSend.length === 0 && outsideObject.symbol1 === outsideObject.symbol2) {
177 |             mustSend.push(outsideObject.symbol1);
178 |           }
179 | 
180 |           return mustSend;
181 |         };
182 | 
183 |         if(this.insideGuardianLeft) {
184 |           if(this.outsideGuardianLeft) {
185 |             retVal.left = guardianNeededSymbols(this.threeD, this.insideGuardianLeft, this.outsideGuardianLeft);
186 |           }
187 |         }
188 |         if(this.insideGuardianMiddle) {
189 |           if(this.outsideGuardianMiddle) {
190 |             retVal.middle = guardianNeededSymbols(this.threeD, this.insideGuardianMiddle, this.outsideGuardianMiddle);
191 |           }
192 |         }
193 |         if(this.insideGuardianRight) {
194 |           if(this.outsideGuardianRight) {
195 |             retVal.right = guardianNeededSymbols(this.threeD, this.insideGuardianRight, this.outsideGuardianRight);
196 |           }
197 |         }
198 |         return retVal;
199 |       },
200 |       displayNeededSymbols: function(symbolText) {
201 |         return symbolText.join(' <br/> ');
202 |       },
203 |       // This is garbage code but it works. Redo this to make it more elegant
204 |       displayNeededSteps: function(neededSwaps) {
205 |         if(neededSwaps.left && neededSwaps.middle && neededSwaps.right) {
206 |             steps = [];
207 | 
208 |             while (neededSwaps.left.length > 0 || neededSwaps.middle.length > 0 || neededSwaps.right.length > 0) {
209 |                 if (neededSwaps.left.length) {
210 |                     toSwap = neededSwaps.left.pop();
211 |                     // knowing a shape to get away from a guardian, if anyone needs two swaps, this definitely has to go there.
212 |                     // otherwise, if there are no aisles needing two swaps, either:
213 |                     // * we have the two swaps and can trade with anywhere
214 |                     // * there is only one other shape out of place, and we should swap with it
215 |                     if (neededSwaps.middle.length == 2) {
216 |                         toFind = neededSwaps.middle.pop();
217 |                         steps.push([toSwap, 'left', toFind, 'middle']);
218 |                     } else if (neededSwaps.right.length == 2) {
219 |                         toFind = neededSwaps.right.pop();
220 |                         steps.push([toSwap, 'left', toFind, 'right']);
221 |                     } else if (neededSwaps.middle.length == 1) {
222 |                         // it's possible that we're handling 'all outside aisles must swap one' e.g. SCT/Cylinder+Cone+Prism
223 |                         // we've popped left, pop middle and see if right needs one swap. if so, we'll actually need to swap the retrieved symbol again.
224 |                         toFind = neededSwaps.middle.pop();
225 |                         steps.push([toSwap, 'left', toFind, 'middle']);
226 |                         if (neededSwaps.left.length === 0 && neededSwaps.middle.length === 0 && neededSwaps.right.length == 1) {
227 |                             neededSwaps.left.push(toFind);
228 |                         }
229 |                     } else if (neededSwaps.right.length == 1) {
230 |                         toFind = neededSwaps.right.pop();
231 |                         steps.push([toSwap, 'left', toFind, 'right']);
232 |                     } else {
233 |                         console.log('wanted to swap ' + toSwap + ' from left, but couldnt ??');
234 |                         steps.push([undefined, undefined, undefined, undefined]);
235 |                         break;
236 |                     }
237 |                 } else if (neededSwaps.middle.length) {
238 |                     toSwap = neededSwaps.middle.pop();
239 |                     if (neededSwaps.right.length) {
240 |                         toFind = neededSwaps.right.pop();
241 |                         steps.push([toSwap, 'middle', toFind, 'right']);
242 |                     } else {
243 |                         console.log('wanted to swap ' + toSwap + ' from middle, couldnt put it at right?? left should have taken this otherwise??');
244 |                         steps.push([undefined, undefined, undefined, undefined]);
245 |                         break;
246 |                     }
247 |                 } else {
248 |                     // left needs zero or two swaps,
249 |                     // middle needs zero or two swaps,
250 |                     // but if any aisle needs two swaps both others need at least one to match
251 |                     // so if we are here then either we are done (should have exited the loop) or all aisles need two swaps.
252 |                     // break the tie, at which point the loop can converge.
253 |                     toSwap = neededSwaps.middle.pop();
254 |                     toFind = neededSwaps.right.pop();
255 |                     steps.push([toSwap, 'middle', toFind, 'right']);
256 |                 }
257 |             }
258 | 
259 |             step_strings = [];
260 | 
261 |             for (i = 0; i < steps.length; i++) {
262 |                 if (steps[i].indexOf(undefined) >= 0) {
263 |                     return 'Unable to solve: inside or outside calls might be wrong';
264 |                 }
265 |                 step_strings.push(''.concat(i + 1, '. Place ', steps[i][0], ' on <b>', steps[i][1], '</b> and ', steps[i][2], ' on <b>', steps[i][3], '</b>'));
266 |             }
267 | 
268 |             return step_strings.join('<br>');
269 |         }
270 |         return 'None';
271 |       }
272 |     }"
273 |         x-init="() => {
274 |             $watch('displayOptions', (value) => {
275 |                 Object.keys(value).forEach((key) => {
276 |                     localStorage.setItem(key, value[key]);
277 |                 });
278 |             });
279 |             //watch for preference changes and write to localStorage
280 |             Object.keys(displayOptions).forEach((key) => {
281 |                 const value = localStorage.getItem(key);
282 |                 if (value) {
283 |                     displayOptions[key] = value === 'true';
284 |                 }
285 |             });
286 | 
287 |             twoDWithImages.forEach((item) => {
288 |                 fetch(item.image)
289 |                     .then((response) => {
290 |                         if (!response.ok) {
291 |                             throw new Error(`HTTP error! status: ${response.status}`);
292 |                         }
293 |                         return response.text();
294 |                     })
295 |                     .then((data) => {
296 |                         item.raw = data;
297 |                     })
298 |                     .catch((error) => {
299 |                         console.log('There was a problem with the fetch operation: ' + error.message);
300 |                     });
301 |             });
302 | 
303 |             threeD.forEach((item) => {
304 |                 fetch(item.image)
305 |                     .then((response) => {
306 |                         if (!response.ok) {
307 |                             throw new Error(`HTTP error! status: ${response.status}`);
308 |                         }
309 |                         return response.text();
310 |                     })
311 |                     .then((data) => {
312 |                         item.raw = data;
313 |                     })
314 |                     .catch((error) => {
315 |                         console.log('There was a problem with the fetch operation: ' + error.message);
316 |                     });
317 |             });
318 | 
319 |         }"
320 |         class="h-screen w-screen flex flex-col items-center justify-center"
321 |     >
322 |         <div class="w-full flex flex-col items-center pt-8">
323 |             <div class="flex flex-col max-w-[600px]">
324 |                 <div class="w-full flex flex-row justify-between"></div>
325 |                 <div class="input-group flex flex-col">
326 |                     <label class="whitespace-nowrap font-bold" for="nameField"
327 |                         >Inside Callouts</label
328 |                     >
329 |                     <input
330 |                         class="p-2 border-2 border-gray-300 rounded-md"
331 |                         type="text"
332 |                         placeholder="CST"
333 |                         id="nameField"
334 |                         x-model="insideCallouts"
335 |                         x-on:keyup="setInsideCallouts()"
336 |                     />
337 |                 </div>
338 |                 <div class="flex flex-row gap-4">
339 |                     <div class="w-1/3 flex flex-col gap-2">
340 |                         <label class="whitespace-nowrap" for="guard1"
341 |                             >Inside Left</label
342 |                         >
343 |                         <template x-if="displayOptions.showinsideImages">
344 |                             <div class="flex flex-row flex-wrap gap-2">
345 |                                 <template x-for="imageUrl in twoDWithImages">
346 |                                     <div
347 |                                         class="h-12 w-12 p-2 cursor-pointer img-bg items-center justify-center"
348 |                                         x-bind:class="insideGuardianLeft === imageUrl.name ? 'border-2 border-blue-800 p-1 bg-gray-300' : 'border-2 border-gray-300 p-1 border-dark'"
349 |                                         x-on:click="clickInsidePicture('left', imageUrl.name)"
350 |                                     >
351 |                                         <div
352 |                                             class="w-full h-full"
353 |                                             x-html="imageUrl.raw"
354 |                                         ></div>
355 |                                     </div>
356 |                                 </template>
357 |                             </div>
358 |                         </template>
359 | 
360 |                         <template x-if="displayOptions.showInsideSelect">
361 |                             <select
362 |                                 class="rounded-md border-2 border-gray-300 p-2"
363 |                                 x-on:change="setInsideCalloutsFromSelect()"
364 |                                 id="guard1"
365 |                                 x-model="insideGuardianLeft"
366 |                             >
367 |                                 <option value=""></option>
368 |                                 <template x-for="item in twoD" :key="item">
369 |                                     <option
370 |                                         x-bind:value="item"
371 |                                         x-text="item"
372 |                                     ></option>
373 |                                 </template>
374 |                             </select>
375 |                         </template>
376 |                     </div>
377 |                     <div class="w-1/3 flex flex-col gap-2">
378 |                         <label class="whitespace-nowrap" for="guard2"
379 |                             >Inside Middle</label
380 |                         >
381 |                         <template x-if="displayOptions.showinsideImages">
382 |                             <div class="flex flex-row flex-wrap gap-2">
383 |                                 <template x-for="imageUrl in twoDWithImages">
384 |                                     <div
385 |                                         class="h-12 w-12 p-2 cursor-pointer img-bg items-center justify-center"
386 |                                         x-bind:class="insideGuardianMiddle === imageUrl.name ? 'border-2 border-blue-800 p-1 bg-gray-300' : 'border-2 border-gray-300 p-1 border-dark'"
387 |                                         x-on:click="clickInsidePicture('middle', imageUrl.name)"
388 |                                     >
389 |                                         <div
390 |                                             x-html="imageUrl.raw"
391 |                                             class="w-full h-full"
392 |                                             x-bind:alt="imageUrl.name"
393 |                                         />
394 |                                     </div>
395 |                                 </template>
396 |                             </div>
397 |                         </template>
398 |                         <template x-if="displayOptions.showInsideSelect">
399 |                             <select
400 |                                 class="rounded-md border-2 border-gray-300 p-2"
401 |                                 x-on:change="setInsideCalloutsFromSelect()"
402 |                                 id="guard2"
403 |                                 x-model="insideGuardianMiddle"
404 |                             >
405 |                                 <option value=""></option>
406 |                                 <template x-for="item in twoD" :key="item">
407 |                                     <option
408 |                                         x-bind:value="item"
409 |                                         x-text="item"
410 |                                     ></option>
411 |                                 </template>
412 |                             </select>
413 |                         </template>
414 |                     </div>
415 |                     <div class="w-1/3 flex flex-col gap-2">
416 |                         <label class="whitespace-nowrap" for="guard3"
417 |                             >Inside Right</label
418 |                         >
419 |                         <template x-if="displayOptions.showinsideImages">
420 |                             <div class="flex flex-row flex-wrap gap-2">
421 |                                 <template x-for="imageUrl in twoDWithImages">
422 |                                     <div
423 |                                         class="h-12 w-12 p-2 cursor-pointer img-bg items-center justify-center"
424 |                                         x-bind:class="insideGuardianRight === imageUrl.name ? 'border-2 border-blue-800 p-1 bg-gray-300' : 'border-2 border-gray-300 p-1 border-dark'"
425 |                                         x-on:click="clickInsidePicture('right', imageUrl.name)"
426 |                                     >
427 |                                         <div
428 |                                             x-html="imageUrl.raw"
429 |                                             class="w-full h-full"
430 |                                             x-bind:src="imageUrl.image"
431 |                                             x-bind:alt="imageUrl.name"
432 |                                         />
433 |                                     </div>
434 |                                 </template>
435 |                             </div>
436 |                         </template>
437 |                         <template x-if="displayOptions.showInsideSelect">
438 |                             <select
439 |                                 class="rounded-md border-2 border-gray-300 p-2"
440 |                                 x-on:change="setInsideCalloutsFromSelect()"
441 |                                 id="guard3"
442 |                                 x-model="insideGuardianRight"
443 |                             >
444 |                                 <option value=""></option>
445 |                                 <template x-for="item in twoD" :key="item">
446 |                                     <option
447 |                                         x-bind:value="item"
448 |                                         x-text="item"
449 |                                     ></option>
450 |                                 </template>
451 |                             </select>
452 |                         </template>
453 |                     </div>
454 |                 </div>
455 |                 <label class="whitespace-nowrap font-bold pt-4" for="nameField">
456 |                     Outside Callouts
457 |                 </label>
458 | 
459 |                 <div class="flex flex-row gap-4">
460 |                     <div></div>
461 |                     <div class="flex flex-col w-1/3 gap-2">
462 |                         <label class="whitespace-nowrap" for="guard4"
463 |                             >Outside Left</label
464 |                         >
465 |                         <template x-if="displayOptions.showOutsideImages">
466 |                             <div class="flex flex-row flex-wrap gap-2">
467 |                                 <template x-for="imageUrl in threeD">
468 |                                     <div
469 |                                         class="h-12 w-12 p-2 cursor-pointer img-bg items-center justify-center"
470 |                                         x-bind:class="outsideGuardianLeft === imageUrl.name ? 'border-2 border-blue-800 bg-gray-300 p-1' : 'border-2 border-gray-300 p-1 border-dark'"
471 |                                         x-on:click="outsideGuardianLeft = imageUrl.name"
472 |                                     >
473 |                                         <div
474 |                                             x-html="imageUrl.raw"
475 |                                             class="w-full h-full"
476 |                                             x-bind:src="imageUrl.image"
477 |                                             x-bind:alt="imageUrl.name"
478 |                                         />
479 |                                     </div>
480 |                                 </template>
481 |                             </div>
482 |                         </template>
483 |                         <template x-if="displayOptions.showOutsideSelect">
484 |                             <select
485 |                                 class="rounded-md border-2 border-gray-300 p-2"
486 |                                 id="guard4"
487 |                                 x-model="outsideGuardianLeft"
488 |                             >
489 |                                 <option value=""></option>
490 |                                 <template
491 |                                     x-for="item in threeD"
492 |                                     :key="item.name"
493 |                                 >
494 |                                     <option
495 |                                         x-bind:value="item.name"
496 |                                         x-text="item.name"
497 |                                     ></option>
498 |                                 </template>
499 |                             </select>
500 |                         </template>
501 |                     </div>
502 |                     <div class="flex flex-col w-1/3 gap-2">
503 |                         <label class="whitespace-nowrap" for="guard5"
504 |                             >Outside Middle</label
505 |                         >
506 |                         <template x-if="displayOptions.showOutsideImages">
507 |                             <div class="flex flex-row flex-wrap gap-2">
508 |                                 <template x-for="imageUrl in threeD">
509 |                                     <div
510 |                                         class="h-12 w-12 p-2 cursor-pointer img-bg items-center justify-center"
511 |                                         x-bind:class="outsideGuardianMiddle === imageUrl.name ? 'border-2 border-blue-800 bg-gray-300 p-1' : 'border-2 border-gray-300 p-1 border-dark'"
512 |                                         x-on:click="outsideGuardianMiddle = imageUrl.name"
513 |                                     >
514 |                                         <div
515 |                                             x-html="imageUrl.raw"
516 |                                             class="w-full h-full"
517 |                                             x-bind:src="imageUrl.image"
518 |                                             x-bind:alt="imageUrl.name"
519 |                                         />
520 |                                     </div>
521 |                                 </template>
522 |                             </div>
523 |                         </template>
524 |                         <template x-if="displayOptions.showOutsideSelect">
525 |                             <select
526 |                                 class="rounded-md border-2 border-gray-300 p-2"
527 |                                 id="guard5"
528 |                                 x-model="outsideGuardianMiddle"
529 |                             >
530 |                                 <option value=""></option>
531 |                                 <template
532 |                                     x-for="item in threeD"
533 |                                     :key="item.name"
534 |                                 >
535 |                                     <option
536 |                                         x-bind:value="item.name"
537 |                                         x-text="item.name"
538 |                                     ></option>
539 |                                 </template>
540 |                             </select>
541 |                         </template>
542 |                     </div>
543 |                     <div class="flex flex-col w-1/3 gap-2">
544 |                         <label class="whitespace-nowrap" for="guard6"
545 |                             >Outside Right</label
546 |                         >
547 |                         <template x-if="displayOptions.showOutsideImages">
548 |                             <div class="flex flex-row flex-wrap gap-2">
549 |                                 <template x-for="imageUrl in threeD">
550 |                                     <div
551 |                                         class="h-12 w-12 p-2 cursor-pointer img-bg items-center justify-center"
552 |                                         x-bind:class="outsideGuardianRight === imageUrl.name ? 'border-2 border-blue-800 bg-gray-300 p-1' : 'border-2 border-gray-300 p-1 border-dark'"
553 |                                         x-on:click="outsideGuardianRight = imageUrl.name"
554 |                                     >
555 |                                         <div
556 |                                             x-html="imageUrl.raw"
557 |                                             class="w-full h-full"
558 |                                             x-bind:src="imageUrl.image"
559 |                                             x-bind:alt="imageUrl.name"
560 |                                         />
561 |                                     </div>
562 |                                 </template>
563 |                             </div>
564 |                         </template>
565 |                         <template x-if="displayOptions.showOutsideSelect">
566 |                             <select
567 |                                 class="rounded-md border-2 border-gray-300 p-2"
568 |                                 id="guard6"
569 |                                 x-model="outsideGuardianRight"
570 |                             >
571 |                                 <option value=""></option>
572 |                                 <template
573 |                                     x-for="item in threeD"
574 |                                     :key="item.name"
575 |                                 >
576 |                                     <option
577 |                                         x-bind:value="item.name"
578 |                                         x-text="item.name"
579 |                                     ></option>
580 |                                 </template>
581 |                             </select>
582 |                         </template>
583 |                     </div>
584 |                 </div>
585 |                 <div
586 |                     class="flex flex-col border-2 pt-2 pb-4 px-4 rounded-md w-full mt-4"
587 |                 >
588 |                     <div class="font-bold text-lg">Final Shapes</div>
589 |                     <div class="w-full flex flex-row">
590 |                         <div class="flex flex-col w-1/3">
591 |                             <span
592 |                                 class="text-purple-800 font-bold"
593 |                                 x-text="neededThreeD()[0]?.name"
594 |                             >
595 |                             </span>
596 |                         </div>
597 |                         <div class="flex flex-col gap-2 w-1/3">
598 |                             <span
599 |                                 class="text-purple-800 font-bold"
600 |                                 x-text="neededThreeD()[1]?.name"
601 |                             ></span>
602 |                         </div>
603 |                         <div class="flex flex-col gap-2 w-1/3">
604 |                             <span
605 |                                 class="text-purple-800 font-bold"
606 |                                 x-text="neededThreeD()[2]?.name"
607 |                             ></span>
608 |                         </div>
609 |                     </div>
610 |                     <div class="font-bold text-lg">Steps</div>
611 |                     <dtv>
612 |                         <span x-html="displayNeededSteps(neededSwaps())"></span>
613 |                     </dtv>
614 |                 </div>
615 |             </div>
616 | 
617 |             <div
618 |                 class="flex flex-col gap-2 mt-12 border-2 border-gray-300 rounded-md p-4 align-center text-center"
619 |             >
620 |                 <a
621 |                     class="flex flex-col justify-center"
622 |                     href="https://github.com/seratne/salvations-edge-verity"
623 |                 >
624 |                     <div
625 |                         class="flex flex-col items-center gap-2 justify-center"
626 |                     >
627 |                         <div>View Github Project</div>
628 |                         <img
629 |                             style="width: 3rem"
630 |                             src="./images/github.svg"
631 |                             alt="Github"
632 |                         />
633 |                     </div>
634 |                 </a>
635 |                 <div class="font-semibold">Contributors</div>
636 |                 <div class="flex flex-row items-center gap-2">
637 |                     seratne
638 |                     <a href="https://www.reddit.com/u/seratne/"
639 |                         ><img
640 |                             src="./images/reddit.svg"
641 |                             alt="Reddit"
642 |                             style="height: 1rem"
643 |                         />
644 |                     </a>
645 |                 </div>
646 |                 <div class="flex flex-row items-center gap-2">
647 |                     inertxenon
648 |                     <a href="https://www.reddit.com/u/inertxenon/"
649 |                         ><img
650 |                             src="./images/reddit.svg"
651 |                             alt="Reddit"
652 |                             style="height: 1rem"
653 |                         />
654 |                     </a>
655 |                 </div>
656 |             </div>
657 |         </div>
658 |     </body>
659 | </html>
660 | 


--------------------------------------------------------------------------------