From b8a514f8f91d45bfdd6dff488e9ab6b0bee2eb1f Mon Sep 17 00:00:00 2001
From: Lars Martens <lars@martens.red>
Date: Sat, 14 Aug 2021 23:31:31 +0200
Subject: [PATCH] Add new properties, some style

---
 index.html         | 13 +++++----
 src/App.vue        | 66 +++++++++++++++++++++++++++++++---------------
 src/Scene.vue      |  6 ++---
 tailwind.config.js | 26 +++++++++++-------
 4 files changed, 73 insertions(+), 38 deletions(-)
diff --git a/index.html b/index.html
index 65f2444..a54d74d 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="icon.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Minecraft Armor Stand</title>
-  </head>
-  <body>
+</head>
+
+<body class="bg-gray-300">
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 8630bcb..2d6d005 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,27 +1,46 @@
 <template>
-    <div>
-        <div class="w-3/5 h-screen float-left">
+    <div class="box-border">
+        <div class="w-3/5 fixed h-screen">
             <Scene :armorstand="armorstand" />
         </div>
-        <div class="w-2/5 float-right">
-            <label><input v-model="armorstand.showArms" type="checkbox">Show Arms</label>
-            <label><input v-model="armorstand.small" type="checkbox">Small</label>
-            <label><input v-model="armorstand.noBasePlate" type="checkbox">No Base Plate</label>
-            <hr>
-            <table>
-                <tr>
-                    <td>Rotation</td>
-                    <td colspan="3">
-                        <input @dblclick="() => armorstand.rotation = 0" class="w-full" type="range" min="-180" max="180" v-model="armorstand.rotation" />
-                    </td>
-                </tr>
-                <RotationSliderRow label="Head" :rotation="armorstand.head" />
-                <RotationSliderRow label="Body" :rotation="armorstand.body" />
-                <RotationSliderRow label="Left Leg" :rotation="armorstand.legLeft" />
-                <RotationSliderRow label="Right Leg" :rotation="armorstand.legRight" />
-                <RotationSliderRow v-if="armorstand.showArms" label="Left Arm" :rotation="armorstand.armLeft" />
-                <RotationSliderRow v-if="armorstand.showArms" label="Right Arm" :rotation="armorstand.armRight" />
-            </table>
+        <div class="w-2/5 right-0 ml-60">
+            <div class="bg-white m-4 p-4 border border-gray-900">
+                <select v-model="mcVersion">
+                    <option value="1.16">Minecraft 1.16 and above</option>
+                    <option value="1.14">Minecraft 1.14 &amp; 1.15</option>
+                    <option value="1.13">Minecraft 1.13</option>
+                    <option value="1.11">Minecraft 1.11 &amp; 1.12</option>
+                    <option value="1.9">Minecraft 1.9 &amp; 1.10</option>
+                    <option value="1.8">Minecraft 1.8</option>
+                </select>
+                <label><input v-model="armorstand.noBasePlate" type="checkbox">No Base Plate</label>
+                <label><input v-model="armorstand.noGravity" type="checkbox">No Gravity</label>
+                <label><input v-model="armorstand.showArms" type="checkbox">Show Arms</label>
+                <label><input v-model="armorstand.small" type="checkbox">Small</label>
+                <details>
+                    <summary>Advanced</summary>
+                    <label><input v-model="armorstand.invisible" type="checkbox">Invisible</label>
+                    <label><input v-model="armorstand.invulnerable" type="checkbox">Invulnerable</label>
+                    <label><input v-model="armorstand.persistenceRequired" type="checkbox">Persistence Required</label>
+                    <label><input v-model="armorstand.marker" type="checkbox">Marker</label>
+                    <label><input v-model="armorstand.centerCorrected" type="checkbox">Center Corrected</label>
+                </details>
+                <hr>
+                <table>
+                    <tr>
+                        <td>Rotation</td>
+                        <td colspan="3">
+                            <input @dblclick="() => armorstand.rotation = 0" class="w-full" type="range" min="-180" max="180" v-model="armorstand.rotation" />
+                        </td>
+                    </tr>
+                    <RotationSliderRow label="Head" :rotation="armorstand.head" />
+                    <RotationSliderRow label="Body" :rotation="armorstand.body" />
+                    <RotationSliderRow label="Left Leg" :rotation="armorstand.legLeft" />
+                    <RotationSliderRow label="Right Leg" :rotation="armorstand.legRight" />
+                    <RotationSliderRow v-if="armorstand.showArms" label="Left Arm" :rotation="armorstand.armLeft" />
+                    <RotationSliderRow v-if="armorstand.showArms" label="Right Arm" :rotation="armorstand.armRight" />
+                </table>
+            </div>
         </div>
     </div>
 </template>
@@ -62,12 +81,17 @@ class Armorstand {
             return { x: 1, y: 1, z: 1 }
         }
     }
+    // Return the code to generate this armorstand
+    getCode(mcVersion) {
+        // TODO Handle different versions
+    }
 }
 
 export default {
     data() {
         return {
             armorstand: new Armorstand(),
+            mcVersion: "1.16",
         }
     },
     components: { Scene, RotationSliderRow },
diff --git a/src/Scene.vue b/src/Scene.vue
index 4fe4181..8335d19 100644
--- a/src/Scene.vue
+++ b/src/Scene.vue
@@ -1,12 +1,12 @@
 <template>
-    <Renderer ref="renderer" antialias :orbit-ctrl="{ enableDamping: false }" resize="true">
+    <Renderer ref="renderer" antialias resize alpha :orbit-ctrl="{ enableDamping: false, enablePan: false }">
         <Camera :position="{ z: 10 }" />
         <Scene>
             <AmbientLight :intensity="0.3" />
             <DirectionalLight :intensity="1" :position="{ x: 10, y: 9 }" />
 
             <!-- This group contains armorstand + base plate -->
-            <Group :position="{ y: -8 / 16 }">
+            <Group :position="{ y: -1 }">
                 <!--Baseplate-->
                 <Group :position="{ y: -0.5 / 16 }">
                     <Box :visible="!armorstand.noBasePlate" :scale="{ x: 12 / 16, y: 1 / 16, z: 12 / 16 }">
@@ -17,7 +17,7 @@
                     </Box>
                 </Group>
                 <!--Armorstand-->
-                <Group :scale="armorstand.getScale()">
+                <Group :scale="armorstand.getScale()" :rotation="{ y: armorstand.rotation / 180 * Math.PI }">
                     <!--Left Leg-->
                     <Group
                         :rotation="convertRotation(armorstand.legLeft)"
diff --git a/tailwind.config.js b/tailwind.config.js
index 3595b2f..aeb8856 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,11 +1,19 @@
 module.exports = {
-  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
-  darkMode: false, // or 'media' or 'class'
-  theme: {
-    extend: {},
-  },
-  variants: {
-    extend: {},
-  },
-  plugins: [],
+    purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+    darkMode: false, // or 'media' or 'class'
+    theme: {
+        extend: {
+            flex: {
+                "2": "2 2 0%",
+                "3": "3 3 0%",
+            },
+            margin: {
+                "60": "60%",
+            },
+        },
+    },
+    variants: {
+        extend: {},
+    },
+    plugins: [],
 }
