1
0
Fork 0
mirror of https://github.com/haselkern/Minecraft-ArmorStand.git synced 2025-05-17 15:05:33 +00:00

Add new properties, some style

This commit is contained in:
Lars Martens 2021-08-14 23:31:31 +02:00
parent acbfe92a10
commit b8a514f8f9
4 changed files with 73 additions and 38 deletions

View file

@ -1,13 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/png" href="icon.png"> <link rel="icon" type="image/png" href="icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Minecraft Armor Stand</title> <title>Minecraft Armor Stand</title>
</head> </head>
<body>
<body class="bg-gray-300">
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

View file

@ -1,27 +1,46 @@
<template> <template>
<div> <div class="box-border">
<div class="w-3/5 h-screen float-left"> <div class="w-3/5 fixed h-screen">
<Scene :armorstand="armorstand" /> <Scene :armorstand="armorstand" />
</div> </div>
<div class="w-2/5 float-right"> <div class="w-2/5 right-0 ml-60">
<label><input v-model="armorstand.showArms" type="checkbox">Show Arms</label> <div class="bg-white m-4 p-4 border border-gray-900">
<label><input v-model="armorstand.small" type="checkbox">Small</label> <select v-model="mcVersion">
<label><input v-model="armorstand.noBasePlate" type="checkbox">No Base Plate</label> <option value="1.16">Minecraft 1.16 and above</option>
<hr> <option value="1.14">Minecraft 1.14 &amp; 1.15</option>
<table> <option value="1.13">Minecraft 1.13</option>
<tr> <option value="1.11">Minecraft 1.11 &amp; 1.12</option>
<td>Rotation</td> <option value="1.9">Minecraft 1.9 &amp; 1.10</option>
<td colspan="3"> <option value="1.8">Minecraft 1.8</option>
<input @dblclick="() => armorstand.rotation = 0" class="w-full" type="range" min="-180" max="180" v-model="armorstand.rotation" /> </select>
</td> <label><input v-model="armorstand.noBasePlate" type="checkbox">No Base Plate</label>
</tr> <label><input v-model="armorstand.noGravity" type="checkbox">No Gravity</label>
<RotationSliderRow label="Head" :rotation="armorstand.head" /> <label><input v-model="armorstand.showArms" type="checkbox">Show Arms</label>
<RotationSliderRow label="Body" :rotation="armorstand.body" /> <label><input v-model="armorstand.small" type="checkbox">Small</label>
<RotationSliderRow label="Left Leg" :rotation="armorstand.legLeft" /> <details>
<RotationSliderRow label="Right Leg" :rotation="armorstand.legRight" /> <summary>Advanced</summary>
<RotationSliderRow v-if="armorstand.showArms" label="Left Arm" :rotation="armorstand.armLeft" /> <label><input v-model="armorstand.invisible" type="checkbox">Invisible</label>
<RotationSliderRow v-if="armorstand.showArms" label="Right Arm" :rotation="armorstand.armRight" /> <label><input v-model="armorstand.invulnerable" type="checkbox">Invulnerable</label>
</table> <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>
</div> </div>
</template> </template>
@ -62,12 +81,17 @@ class Armorstand {
return { x: 1, y: 1, z: 1 } return { x: 1, y: 1, z: 1 }
} }
} }
// Return the code to generate this armorstand
getCode(mcVersion) {
// TODO Handle different versions
}
} }
export default { export default {
data() { data() {
return { return {
armorstand: new Armorstand(), armorstand: new Armorstand(),
mcVersion: "1.16",
} }
}, },
components: { Scene, RotationSliderRow }, components: { Scene, RotationSliderRow },

View file

@ -1,12 +1,12 @@
<template> <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 }" /> <Camera :position="{ z: 10 }" />
<Scene> <Scene>
<AmbientLight :intensity="0.3" /> <AmbientLight :intensity="0.3" />
<DirectionalLight :intensity="1" :position="{ x: 10, y: 9 }" /> <DirectionalLight :intensity="1" :position="{ x: 10, y: 9 }" />
<!-- This group contains armorstand + base plate --> <!-- This group contains armorstand + base plate -->
<Group :position="{ y: -8 / 16 }"> <Group :position="{ y: -1 }">
<!--Baseplate--> <!--Baseplate-->
<Group :position="{ y: -0.5 / 16 }"> <Group :position="{ y: -0.5 / 16 }">
<Box :visible="!armorstand.noBasePlate" :scale="{ x: 12 / 16, y: 1 / 16, z: 12 / 16 }"> <Box :visible="!armorstand.noBasePlate" :scale="{ x: 12 / 16, y: 1 / 16, z: 12 / 16 }">
@ -17,7 +17,7 @@
</Box> </Box>
</Group> </Group>
<!--Armorstand--> <!--Armorstand-->
<Group :scale="armorstand.getScale()"> <Group :scale="armorstand.getScale()" :rotation="{ y: armorstand.rotation / 180 * Math.PI }">
<!--Left Leg--> <!--Left Leg-->
<Group <Group
:rotation="convertRotation(armorstand.legLeft)" :rotation="convertRotation(armorstand.legLeft)"

View file

@ -1,11 +1,19 @@
module.exports = { module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class' darkMode: false, // or 'media' or 'class'
theme: { theme: {
extend: {}, extend: {
}, flex: {
variants: { "2": "2 2 0%",
extend: {}, "3": "3 3 0%",
}, },
plugins: [], margin: {
"60": "60%",
},
},
},
variants: {
extend: {},
},
plugins: [],
} }