not working yet

This commit is contained in:
koehr 2018-04-30 10:35:40 +02:00
parent f00990a3be
commit 2bd5838065
3 changed files with 201 additions and 194 deletions

254
package-lock.json generated
View file

@ -2710,8 +2710,8 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"co": "4.6.0", "co": "^4.6.0",
"json-stable-stringify": "1.0.1" "json-stable-stringify": "^1.0.1"
} }
}, },
"ansi-regex": { "ansi-regex": {
@ -2731,8 +2731,8 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"delegates": "1.0.0", "delegates": "^1.0.0",
"readable-stream": "2.2.9" "readable-stream": "^2.0.6"
} }
}, },
"asn1": { "asn1": {
@ -2776,7 +2776,7 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"tweetnacl": "0.14.5" "tweetnacl": "^0.14.3"
} }
}, },
"block-stream": { "block-stream": {
@ -2784,7 +2784,7 @@
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"requires": { "requires": {
"inherits": "2.0.3" "inherits": "~2.0.0"
} }
}, },
"boom": { "boom": {
@ -2792,7 +2792,7 @@
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"requires": { "requires": {
"hoek": "2.16.3" "hoek": "2.x.x"
} }
}, },
"brace-expansion": { "brace-expansion": {
@ -2800,7 +2800,7 @@
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"requires": { "requires": {
"balanced-match": "0.4.2", "balanced-match": "^0.4.1",
"concat-map": "0.0.1" "concat-map": "0.0.1"
} }
}, },
@ -2831,7 +2831,7 @@
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"requires": { "requires": {
"delayed-stream": "1.0.0" "delayed-stream": "~1.0.0"
} }
}, },
"concat-map": { "concat-map": {
@ -2854,7 +2854,7 @@
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"requires": { "requires": {
"boom": "2.10.1" "boom": "2.x.x"
} }
}, },
"dashdash": { "dashdash": {
@ -2863,7 +2863,7 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"assert-plus": "1.0.0" "assert-plus": "^1.0.0"
}, },
"dependencies": { "dependencies": {
"assert-plus": { "assert-plus": {
@ -2912,7 +2912,7 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"jsbn": "0.1.1" "jsbn": "~0.1.0"
} }
}, },
"extend": { "extend": {
@ -2953,10 +2953,10 @@
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"requires": { "requires": {
"graceful-fs": "4.1.11", "graceful-fs": "^4.1.2",
"inherits": "2.0.3", "inherits": "~2.0.0",
"mkdirp": "0.5.1", "mkdirp": ">=0.5 0",
"rimraf": "2.6.1" "rimraf": "2"
} }
}, },
"fstream-ignore": { "fstream-ignore": {
@ -2965,9 +2965,9 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"fstream": "1.0.11", "fstream": "^1.0.0",
"inherits": "2.0.3", "inherits": "2",
"minimatch": "3.0.4" "minimatch": "^3.0.0"
} }
}, },
"gauge": { "gauge": {
@ -2976,14 +2976,14 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"aproba": "1.1.1", "aproba": "^1.0.3",
"console-control-strings": "1.1.0", "console-control-strings": "^1.0.0",
"has-unicode": "2.0.1", "has-unicode": "^2.0.0",
"object-assign": "4.1.1", "object-assign": "^4.1.0",
"signal-exit": "3.0.2", "signal-exit": "^3.0.0",
"string-width": "1.0.2", "string-width": "^1.0.1",
"strip-ansi": "3.0.1", "strip-ansi": "^3.0.1",
"wide-align": "1.1.2" "wide-align": "^1.1.0"
} }
}, },
"getpass": { "getpass": {
@ -2992,7 +2992,7 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"assert-plus": "1.0.0" "assert-plus": "^1.0.0"
}, },
"dependencies": { "dependencies": {
"assert-plus": { "assert-plus": {
@ -3008,12 +3008,12 @@
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"requires": { "requires": {
"fs.realpath": "1.0.0", "fs.realpath": "^1.0.0",
"inflight": "1.0.6", "inflight": "^1.0.4",
"inherits": "2.0.3", "inherits": "2",
"minimatch": "3.0.4", "minimatch": "^3.0.4",
"once": "1.4.0", "once": "^1.3.0",
"path-is-absolute": "1.0.1" "path-is-absolute": "^1.0.0"
} }
}, },
"graceful-fs": { "graceful-fs": {
@ -3048,10 +3048,10 @@
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"requires": { "requires": {
"boom": "2.10.1", "boom": "2.x.x",
"cryptiles": "2.0.5", "cryptiles": "2.x.x",
"hoek": "2.16.3", "hoek": "2.x.x",
"sntp": "1.0.9" "sntp": "1.x.x"
} }
}, },
"hoek": { "hoek": {
@ -3065,9 +3065,9 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"assert-plus": "0.2.0", "assert-plus": "^0.2.0",
"jsprim": "1.4.0", "jsprim": "^1.2.2",
"sshpk": "1.13.0" "sshpk": "^1.7.0"
} }
}, },
"inflight": { "inflight": {
@ -3075,8 +3075,8 @@
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"requires": { "requires": {
"once": "1.4.0", "once": "^1.3.0",
"wrappy": "1.0.2" "wrappy": "1"
} }
}, },
"inherits": { "inherits": {
@ -3121,7 +3121,7 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"jsbn": "0.1.1" "jsbn": "~0.1.0"
} }
}, },
"jsbn": { "jsbn": {
@ -3142,7 +3142,7 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"jsonify": "0.0.0" "jsonify": "~0.0.0"
} }
}, },
"json-stringify-safe": { "json-stringify-safe": {
@ -3223,17 +3223,17 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"detect-libc": "1.0.2", "detect-libc": "^1.0.2",
"hawk": "3.1.3", "hawk": "3.1.3",
"mkdirp": "0.5.1", "mkdirp": "^0.5.1",
"nopt": "4.0.1", "nopt": "^4.0.1",
"npmlog": "4.1.0", "npmlog": "^4.0.2",
"rc": "1.2.1", "rc": "^1.1.7",
"request": "2.81.0", "request": "2.81.0",
"rimraf": "2.6.1", "rimraf": "^2.6.1",
"semver": "5.3.0", "semver": "^5.3.0",
"tar": "2.2.1", "tar": "^2.2.1",
"tar-pack": "3.4.0" "tar-pack": "^3.4.0"
} }
}, },
"nopt": { "nopt": {
@ -3242,8 +3242,8 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"abbrev": "1.1.0", "abbrev": "1",
"osenv": "0.1.4" "osenv": "^0.1.4"
} }
}, },
"npmlog": { "npmlog": {
@ -3252,10 +3252,10 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"are-we-there-yet": "1.1.4", "are-we-there-yet": "~1.1.2",
"console-control-strings": "1.1.0", "console-control-strings": "~1.1.0",
"gauge": "2.7.4", "gauge": "~2.7.3",
"set-blocking": "2.0.0" "set-blocking": "~2.0.0"
} }
}, },
"number-is-nan": { "number-is-nan": {
@ -3280,7 +3280,7 @@
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"requires": { "requires": {
"wrappy": "1.0.2" "wrappy": "1"
} }
}, },
"os-homedir": { "os-homedir": {
@ -3339,10 +3339,10 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"deep-extend": "0.4.2", "deep-extend": "~0.4.0",
"ini": "1.3.4", "ini": "~1.3.0",
"minimist": "1.2.0", "minimist": "^1.2.0",
"strip-json-comments": "2.0.1" "strip-json-comments": "~2.0.1"
}, },
"dependencies": { "dependencies": {
"minimist": { "minimist": {
@ -3358,13 +3358,13 @@
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"requires": { "requires": {
"buffer-shims": "1.0.0", "buffer-shims": "~1.0.0",
"core-util-is": "1.0.2", "core-util-is": "~1.0.0",
"inherits": "2.0.3", "inherits": "~2.0.1",
"isarray": "1.0.0", "isarray": "~1.0.0",
"process-nextick-args": "1.0.7", "process-nextick-args": "~1.0.6",
"string_decoder": "1.0.1", "string_decoder": "~1.0.0",
"util-deprecate": "1.0.2" "util-deprecate": "~1.0.1"
} }
}, },
"request": { "request": {
@ -3373,28 +3373,28 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"aws-sign2": "0.6.0", "aws-sign2": "~0.6.0",
"aws4": "1.6.0", "aws4": "^1.2.1",
"caseless": "0.12.0", "caseless": "~0.12.0",
"combined-stream": "1.0.5", "combined-stream": "~1.0.5",
"extend": "3.0.1", "extend": "~3.0.0",
"forever-agent": "0.6.1", "forever-agent": "~0.6.1",
"form-data": "2.1.4", "form-data": "~2.1.1",
"har-validator": "4.2.1", "har-validator": "~4.2.1",
"hawk": "3.1.3", "hawk": "~3.1.3",
"http-signature": "1.1.1", "http-signature": "~1.1.0",
"is-typedarray": "1.0.0", "is-typedarray": "~1.0.0",
"isstream": "0.1.2", "isstream": "~0.1.2",
"json-stringify-safe": "5.0.1", "json-stringify-safe": "~5.0.1",
"mime-types": "2.1.15", "mime-types": "~2.1.7",
"oauth-sign": "0.8.2", "oauth-sign": "~0.8.1",
"performance-now": "0.2.0", "performance-now": "^0.2.0",
"qs": "6.4.0", "qs": "~6.4.0",
"safe-buffer": "5.0.1", "safe-buffer": "^5.0.1",
"stringstream": "0.0.5", "stringstream": "~0.0.4",
"tough-cookie": "2.3.2", "tough-cookie": "~2.3.0",
"tunnel-agent": "0.6.0", "tunnel-agent": "^0.6.0",
"uuid": "3.0.1" "uuid": "^3.0.0"
} }
}, },
"rimraf": { "rimraf": {
@ -3402,7 +3402,7 @@
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"requires": { "requires": {
"glob": "7.1.2" "glob": "^7.0.5"
} }
}, },
"safe-buffer": { "safe-buffer": {
@ -3433,7 +3433,7 @@
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"requires": { "requires": {
"hoek": "2.16.3" "hoek": "2.x.x"
} }
}, },
"sshpk": { "sshpk": {
@ -3442,15 +3442,15 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"asn1": "0.2.3", "asn1": "~0.2.3",
"assert-plus": "1.0.0", "assert-plus": "^1.0.0",
"bcrypt-pbkdf": "1.0.1", "bcrypt-pbkdf": "^1.0.0",
"dashdash": "1.14.1", "dashdash": "^1.12.0",
"ecc-jsbn": "0.1.1", "ecc-jsbn": "~0.1.1",
"getpass": "0.1.7", "getpass": "^0.1.1",
"jodid25519": "1.0.2", "jodid25519": "^1.0.0",
"jsbn": "0.1.1", "jsbn": "~0.1.0",
"tweetnacl": "0.14.5" "tweetnacl": "~0.14.0"
}, },
"dependencies": { "dependencies": {
"assert-plus": { "assert-plus": {
@ -3466,9 +3466,9 @@
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"requires": { "requires": {
"code-point-at": "1.1.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "1.0.0", "is-fullwidth-code-point": "^1.0.0",
"strip-ansi": "3.0.1" "strip-ansi": "^3.0.0"
} }
}, },
"string_decoder": { "string_decoder": {
@ -3476,7 +3476,7 @@
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"requires": { "requires": {
"safe-buffer": "5.0.1" "safe-buffer": "^5.0.1"
} }
}, },
"stringstream": { "stringstream": {
@ -3490,7 +3490,7 @@
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"requires": { "requires": {
"ansi-regex": "2.1.1" "ansi-regex": "^2.0.0"
} }
}, },
"strip-json-comments": { "strip-json-comments": {
@ -3504,9 +3504,9 @@
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"requires": { "requires": {
"block-stream": "0.0.9", "block-stream": "*",
"fstream": "1.0.11", "fstream": "^1.0.2",
"inherits": "2.0.3" "inherits": "2"
} }
}, },
"tar-pack": { "tar-pack": {
@ -3515,14 +3515,14 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"debug": "2.6.8", "debug": "^2.2.0",
"fstream": "1.0.11", "fstream": "^1.0.10",
"fstream-ignore": "1.0.5", "fstream-ignore": "^1.0.5",
"once": "1.4.0", "once": "^1.3.3",
"readable-stream": "2.2.9", "readable-stream": "^2.1.4",
"rimraf": "2.6.1", "rimraf": "^2.5.1",
"tar": "2.2.1", "tar": "^2.2.1",
"uid-number": "0.0.6" "uid-number": "^0.0.6"
} }
}, },
"tough-cookie": { "tough-cookie": {
@ -3531,7 +3531,7 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"punycode": "1.4.1" "punycode": "^1.4.1"
} }
}, },
"tunnel-agent": { "tunnel-agent": {
@ -3540,7 +3540,7 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"safe-buffer": "5.0.1" "safe-buffer": "^5.0.1"
} }
}, },
"tweetnacl": { "tweetnacl": {
@ -3581,7 +3581,7 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"string-width": "1.0.2" "string-width": "^1.0.2"
} }
}, },
"wrappy": { "wrappy": {
@ -4640,9 +4640,9 @@
} }
}, },
"lodash": { "lodash": {
"version": "4.17.5", "version": "4.17.10",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
"integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==", "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==",
"dev": true "dev": true
}, },
"lodash.camelcase": { "lodash.camelcase": {

View file

@ -27,6 +27,7 @@
"css-loader": "^0.28.7", "css-loader": "^0.28.7",
"fast-simplex-noise": "^3.2.0", "fast-simplex-noise": "^3.2.0",
"file-loader": "^1.1.4", "file-loader": "^1.1.4",
"lodash": "^4.17.10",
"vue-loader": "^13.0.5", "vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4", "vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0", "webpack": "^3.6.0",

View file

@ -1,5 +1,5 @@
<template> <template>
<div id="field" @click="handleClick"> <div id="field">
<input v-keep-focussed type="text" <input v-keep-focussed type="text"
@keydown.down="goDown($event)" @keydown.down="goDown($event)"
@keydown.up="goUp($event)" @keydown.up="goUp($event)"
@ -8,7 +8,7 @@
@keydown.space="jump($event)" @keydown.space="jump($event)"
/> />
<mountain-background :x="x + 65536" /> <mountain-background :x="x + 65536" />
<div id="wrap"> <div id="wrap" :style="{transform: `translate(${translate_x}px, ${translate_y}px)`}">
<template v-for="(row, y) in rows"> <template v-for="(row, y) in rows">
<div v-for="(block, x) in row" class="block" :class="[block.type]" :data-x="x" :data-y="y" /> <div v-for="(block, x) in row" class="block" :class="[block.type]" :data-x="x" :data-y="y" />
</template> </template>
@ -19,14 +19,17 @@
</template> </template>
<script> <script>
import throttle from 'lodash/throttle'
import Level from './level' import Level from './level'
import MountainBackground from './Background' import MountainBackground from './Background'
const WIDTH = 32 + 2 const BLOCK_SIZE = 32
const HEIGHT = 32 + 2 const WIDTH = 32
const PLAYER_X = ~~(WIDTH / 2) - 1 const HEIGHT = 32
const PLAYER_Y = HEIGHT - 17 const PLAYER_X = ~~(WIDTH / 2) + 1
const level = new Level(WIDTH, HEIGHT) const PLAYER_Y = HEIGHT - 15
const PLAYER_MAX_VELOCITY = 32
const level = new Level(WIDTH + 2, HEIGHT + 2)
export default { export default {
name: 'field', name: 'field',
@ -35,16 +38,59 @@ export default {
return { return {
x: 0, x: 0,
y: 0, y: 0,
// transform: translate(x,y); max 32px, then this.x++ / this.y++
translate_x: 0,
translate_y: 0,
player_x: PLAYER_X, player_x: PLAYER_X,
player_y: PLAYER_Y, player_y: PLAYER_Y,
player_direction: 'left', player_direction: 'left',
walk_steps_x: 0, player_velocity_x: 0,
walk_steps_y: 0 player_velocity_y: 0,
drag: 1
} }
}, },
mounted () { mounted () {
this.mindTheGap() this.mindTheGap()
}, },
watch: {
player_velocity_x: throttle(function (v) {
if (!v) return // zero velocity is not interesting
// calculate with positive values but remember negative velocity
const sign = v < 0 ? -1 : 1
v *= sign
if (v > 8) v = 8
v -= this.drag
if (v < 0) v = 0
else v *= sign // back to original sign
this.player_velocity_x = v
this.translate_x += v
console.log(v)
}, 100),
translate_x (tx) {
this.x += Math.floor(tx / BLOCK_SIZE)
this.translate_x = tx % BLOCK_SIZE
},
player_velocity_y (velocity_y) {
//if (!velocity_y) return // zero velocity is not interesting
return // TODO
if (velocity_y < 0) {
if (!this.blockBelowPlayer.walkable) this.player_velocity_y = 0
else if (this.translate_y > -BLOCK_SIZE) this.translate_y += velocity_y
else {
this.translate_y = 0
this.y++
}
} else {
if (!this.blockAbovePlayer.walkable) this.player_velocity_y = 0
else if (this.translate_y < BLOCK_SIZE) this.translate_y += velocity_y
}
}
},
computed: { computed: {
rows () { rows () {
return level.grid(this.x, this.y) return level.grid(this.x, this.y)
@ -58,6 +104,9 @@ export default {
blockRightOfPlayer () { blockRightOfPlayer () {
return this.rows[PLAYER_Y][PLAYER_X + 1] return this.rows[PLAYER_Y][PLAYER_X + 1]
}, },
blockAbovePlayer () {
return this.rows[PLAYER_Y - 1][PLAYER_X]
},
blockBelowPlayer () { blockBelowPlayer () {
return this.rows[PLAYER_Y + 1][PLAYER_X] return this.rows[PLAYER_Y + 1][PLAYER_X]
} }
@ -65,76 +114,33 @@ export default {
methods: { methods: {
goDown (ev) { goDown (ev) {
// TODO: this.player_direction = 'down' // TODO: this.player_direction = 'down'
if (this.blockBelowPlayer.walkable) this.y++ if (this.blockBelowPlayer.walkable) this.player_velocity_y -= 8
this.mindTheGap() this.mindTheGap()
}, },
goUp (ev) { goUp (ev) {
// TODO: this.player_direction = 'up' // TODO: this.player_direction = 'up'
if (this.blockAtPlayer.climbable) this.y-- if (this.blockAtPlayer.climbable) this.player_velocity_y += 8
}, },
goRight (ev) { goRight: throttle(function (ev) {
if (this.player_direction !== 'right') { if (this.blockRightOfPlayer.walkable) {
this.player_direction = 'right' this.player_velocity_x -= 4
} else if (this.blockRightOfPlayer.walkable) {
this.x++
this.mindTheGap()
} }
}, }, 10),
goLeft (ev) { goLeft: throttle(function (ev) {
if (this.player_direction !== 'left') { if (this.blockLeftOfPlayer.walkable) {
this.player_direction = 'left' this.player_velocity_x += 4
} else if (this.blockLeftOfPlayer.walkable) {
this.x--
this.mindTheGap()
} }
}, }, 10),
jump (ev) { jump (ev) {
this.y-- if (this.blockAbovePlayer.walkable) {
if (this.player_direction === 'left' && this.blockLeftOfPlayer.walkable) { this.player_velocity_y += 64
this.x-- this.mindTheGap()
setTimeout(() => {
if (this.blockLeftOfPlayer.walkable) this.x--
if (this.blockBelowPlayer.walkable) this.y++
}, 50)
} else if (this.player_direction === 'right' && this.blockRightOfPlayer.walkable) {
this.x++
setTimeout(() => {
if (this.blockRightOfPlayer.walkable) this.x++
if (this.blockBelowPlayer.walkable) this.y++
}, 50)
} }
// just jump while facing the back
setTimeout(() => this.mindTheGap(), 100)
},
walkSteps () {
if (!this.walk_steps_x && !this.walk_steps_y) return
if (this.walk_steps_x > 0) {
this.goLeft()
this.walk_steps_x--
} else if (this.walk_steps_x < 0) {
this.goRight()
this.walk_steps_x++
} else if (this.walk_steps_y > 0) {
this.goUp()
this.walk_steps_y--
} else if (this.walk_steps_y < 0) {
this.goDown()
this.walk_steps_y++
}
setTimeout(() => this.walkSteps(), 100)
},
handleClick (ev) {
const coords = ev.target.dataset
this.walk_steps_x = this.player_x - parseInt(coords.x)
this.walk_steps_y = this.player_y - parseInt(coords.y)
this.walkSteps()
}, },
mindTheGap () { mindTheGap () {
const below = this.blockBelowPlayer const below = this.blockBelowPlayer
if (below.walkable && !below.climbable) { if (below.walkable && !below.climbable) {
this.y++ this.player_velocity_y -= 8
setTimeout(() => this.mindTheGap(), 50)
} }
} }
} }
@ -165,7 +171,7 @@ export default {
} }
#player { #player {
position: absolute; position: absolute;
left: calc(32px * 15); left: calc(32px * 16);
top: calc(32px * 16); top: calc(32px * 16);
background-image: url(./assets/dwarf_right.png); background-image: url(./assets/dwarf_right.png);
} }