selectable inventory items
parent
c486c12283
commit
e4e3953734
@ -0,0 +1,9 @@
|
||||
.item.tool-shovel-bronze {
|
||||
background-image: url("/Items/shovel_bronze.png");
|
||||
}
|
||||
.item.weapon-sword-bronze {
|
||||
background-image: url("/Items/sword_bronze.png");
|
||||
}
|
||||
.item.tool-pick-bronze {
|
||||
background-image: url("/Items/pick_bronze.png");
|
||||
}
|
@ -0,0 +1,80 @@
|
||||
#player {
|
||||
--player-width: 64px;
|
||||
--player-height: 76px;
|
||||
position: absolute;
|
||||
left: calc(var(--field-width) / 2);
|
||||
top: calc(var(--field-height) / 2 - 10px);
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
width: var(--player-width);
|
||||
height: var(--player-height);
|
||||
}
|
||||
#player > div {
|
||||
margin: auto;
|
||||
background: transparent center no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
#player.right {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
#player > .head {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
background-image: url(/Characters/Alien/alien_head.png);
|
||||
z-index: 1;
|
||||
}
|
||||
#player > .body {
|
||||
width: 22px;
|
||||
height: 24px;
|
||||
margin-top: -8px;
|
||||
background-image: url(/Characters/Alien/alien_body.png);
|
||||
}
|
||||
#player > .legs {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 18px;
|
||||
}
|
||||
#player > .legs > div {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 18px;
|
||||
background-image: url(/Characters/Alien/alien_leg.png);
|
||||
transform-origin: top center;
|
||||
}
|
||||
#player.walking > .legs > div.right {
|
||||
animation: dingle .3s linear infinite alternate;
|
||||
}
|
||||
#player.walking > .legs > div.left {
|
||||
animation: dangle .3s linear infinite alternate;
|
||||
}
|
||||
#player > .arms {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
top: 48px;
|
||||
left: 30px;
|
||||
background-image: url(/Characters/Alien/alien_arm.png);
|
||||
transform-origin: top center;
|
||||
}
|
||||
#player.walking > .arms {
|
||||
animation: dangle .3s linear infinite alternate;
|
||||
}
|
||||
#player > .arms > .item {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: -10px 0 0 -25px;
|
||||
background-color: transparent;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
@keyframes dingle {
|
||||
from { transform: rotate(20deg); }
|
||||
to { transform: rotate(-20deg); }
|
||||
}
|
||||
@keyframes dangle {
|
||||
from { transform: rotate(-20deg); }
|
||||
to { transform: rotate(20deg); }
|
||||
}
|
@ -1,5 +1,7 @@
|
||||
import { createApp } from "vue";
|
||||
import "./assets/field.css";
|
||||
import "./assets/player.css";
|
||||
import "./assets/items.css";
|
||||
import App from "./App.vue";
|
||||
|
||||
createApp(App).mount("#app");
|
||||
|
Loading…
Reference in New Issue