diff --git a/dist/img/modules/light_thruster.svg b/dist/img/modules/light_thruster.svg new file mode 100644 index 0000000..53f0088 --- /dev/null +++ b/dist/img/modules/light_thruster.svg @@ -0,0 +1,100 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + diff --git a/dist/img/modules/small_capsule.svg b/dist/img/modules/small_capsule.svg new file mode 100644 index 0000000..0c8c2e1 --- /dev/null +++ b/dist/img/modules/small_capsule.svg @@ -0,0 +1,99 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + diff --git a/dist/img/modules/small_fuel_tank.svg b/dist/img/modules/small_fuel_tank.svg new file mode 100644 index 0000000..a037131 --- /dev/null +++ b/dist/img/modules/small_fuel_tank.svg @@ -0,0 +1,105 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/js/assets.mjs b/js/assets.mjs index 2d4731f..313c893 100644 --- a/js/assets.mjs +++ b/js/assets.mjs @@ -2,6 +2,17 @@ export const images = { title: { logo: 'logo.png', logoSvg: 'logo2.svg' + }, + modules: { + capsule: { + small: 'modules/small_capsule.svg' + }, + fuel: { + small: 'modules/small_fuel_tank.svg' + }, + thruster: { + light: 'modules/light_thruster.svg' + } } }; diff --git a/js/graphics/ship.mjs b/js/graphics/ship.mjs index 0f9cbae..d0df59d 100644 --- a/js/graphics/ship.mjs +++ b/js/graphics/ship.mjs @@ -1,5 +1,5 @@ import {canvas, context} from './index.mjs'; -import * as assets from '../assets.mjs'; +import {images as assets} from '../assets.mjs'; import * as world from '../world/index.mjs'; export function render() { @@ -8,5 +8,12 @@ export function render() { function renderShip(ship) { context.fillStyle = 'red'; - context.fillRect(ship.x, ship.y, 10, 10); + //context.fillRect(ship.x, ship.y, 10, 10); + let size = 100; + context.drawImage(assets.modules.capsule.small, ship.x, ship.y, + size, size); + context.drawImage(assets.modules.fuel.small, ship.x, ship.y + size, + size, size); + context.drawImage(assets.modules.thruster.light, ship.x, + ship.y + size * 2, size, size); }