46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
|
import Matter from 'matter-js'
|
||
|
|
import React from 'react'
|
||
|
|
import { ColorValue, View } from 'react-native'
|
||
|
|
|
||
|
|
import { Position2D, Size2D } from '@types'
|
||
|
|
|
||
|
|
const Wall = ({ body, color }: any) => {
|
||
|
|
const widthBody = body.bounds.max.x - body.bounds.min.x
|
||
|
|
const heightBody = body.bounds.max.y - body.bounds.min.y
|
||
|
|
|
||
|
|
const xBody = body.position.x - widthBody / 2
|
||
|
|
const yBody = body.position.y - heightBody / 2
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View style={{
|
||
|
|
backgroundColor: color,
|
||
|
|
position: 'absolute',
|
||
|
|
left: xBody,
|
||
|
|
top: yBody,
|
||
|
|
width: widthBody,
|
||
|
|
height: heightBody
|
||
|
|
}} />
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default (world: Matter.Composite, color: ColorValue, pos: Position2D, size: Size2D) => {
|
||
|
|
const body = Matter.Bodies.rectangle(
|
||
|
|
pos.x,
|
||
|
|
pos.y,
|
||
|
|
size.width,
|
||
|
|
size.height,
|
||
|
|
{
|
||
|
|
label: 'Wall',
|
||
|
|
isStatic: true
|
||
|
|
} as Matter.IChamferableBodyDefinition
|
||
|
|
)
|
||
|
|
Matter.Composite.add(world, body)
|
||
|
|
|
||
|
|
return {
|
||
|
|
body,
|
||
|
|
color,
|
||
|
|
pos,
|
||
|
|
renderer: Wall
|
||
|
|
}
|
||
|
|
}
|