Skip to content

Commit

Permalink
feat(sandbox): remove use of @arancini/systems
Browse files Browse the repository at this point in the history
  • Loading branch information
isaac-mason committed Apr 22, 2024
1 parent 8af103b commit 5df450b
Show file tree
Hide file tree
Showing 37 changed files with 1,192 additions and 1,201 deletions.
5 changes: 0 additions & 5 deletions .changeset/brown-parrots-hear.md

This file was deleted.

2 changes: 1 addition & 1 deletion .changeset/cool-rocks-pump.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
"@p2-es/sandbox": patch
---

chore: update arancini to v6
chore: update arancini to v6, stop using @arancini/systems
4 changes: 2 additions & 2 deletions apps/p2-es-demos/src/concave.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<div id="app" style="width: 100%; height: 100vh;"></div>

<script type="module">
import { Sandbox, Tools } from '@p2-es/sandbox'
import { Sandbox, Tool } from '@p2-es/sandbox'
import * as p2 from 'p2-es'

new Sandbox(
Expand Down Expand Up @@ -73,7 +73,7 @@
world,
// Enable shape drawing
tools: {
default: Tools.POLYGON,
default: Tool.POLYGON,
},
}
},
Expand Down
3 changes: 2 additions & 1 deletion packages/p2-es-sandbox/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"styled-breakpoints": "^12.1.5",
"styled-components": "^6.0.2"
"styled-components": "^6.0.2",
"zustand": "^4.5.2"
},
"devDependencies": {
"@storybook/addon-actions": "^7.3.2",
Expand Down
54 changes: 22 additions & 32 deletions packages/p2-es-sandbox/src/controls.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { Leva, button, useControls } from 'leva'
import { ButtonInput } from 'leva/plugin'
import React, { Dispatch, SetStateAction, useEffect } from 'react'
import { SandboxSettings, Tool, Tools, useSingletonQuery } from './ecs'
import React, { useEffect } from 'react'
import { SandboxSettings, SandboxSettingsStore, usePhysicsWorldStore } from './state'
import { Tool } from './tools'
import { levaTheme } from './ui'

type ButtonGroupControlsProps = {
Expand All @@ -11,15 +12,7 @@ type ButtonGroupControlsProps = {
hidden?: boolean
}

const useButtonGroupControls = (
name: string,
{
options,
current,
onChange,
hidden,
}: ButtonGroupControlsProps
) => {
const useButtonGroupControls = (name: string, { options, current, onChange, hidden }: ButtonGroupControlsProps) => {
return useControls(
name,
() =>
Expand Down Expand Up @@ -49,14 +42,13 @@ export type ControlsProps = {
setScene: (scene: string) => void

settings: SandboxSettings
setSettings: Dispatch<SetStateAction<SandboxSettings>>
setSettings: SandboxSettingsStore['setSandboxSettings']

reset: () => void
}

export const Controls = ({ scene, scenes, setScene, tool, setTool, settings, setSettings, reset }: ControlsProps) => {
const appDomElement = useSingletonQuery('domElement')
const physicsWorld = useSingletonQuery('physicsWorld')
const { world: physics } = usePhysicsWorldStore()

useButtonGroupControls('Scene', {
options: scenes.map((s, idx) => ({
Expand All @@ -70,10 +62,10 @@ export const Controls = ({ scene, scenes, setScene, tool, setTool, settings, set

useButtonGroupControls('Tool', {
options: [
{ name: 'Pick/Pan [q]', value: Tools.PICK_PAN },
{ name: 'Polygon [d]', value: Tools.POLYGON },
{ name: 'Circle [a]', value: Tools.CIRCLE },
{ name: 'Rectangle [f]', value: Tools.RECTANGLE },
{ name: 'Pick/Pan [q]', value: Tool.PICK_PAN },
{ name: 'Polygon [d]', value: Tool.POLYGON },
{ name: 'Circle [a]', value: Tool.CIRCLE },
{ name: 'Rectangle [f]', value: Tool.RECTANGLE },
],
current: tool,
onChange: (value) => setTool(value as Tool),
Expand All @@ -82,7 +74,7 @@ export const Controls = ({ scene, scenes, setScene, tool, setTool, settings, set
const onChange = (value: unknown, propName: string, { initial }: { initial: boolean }) => {
if (initial) return

setSettings((current) => ({ ...current, [propName.split('.')[1]]: value }))
setSettings({ [propName.split('.')[1]]: value })
}

const [, setPhysics] = useControls('Physics', () => ({
Expand Down Expand Up @@ -112,12 +104,12 @@ export const Controls = ({ scene, scenes, setScene, tool, setTool, settings, set
}, [settings.paused, settings.physicsStepsPerSecond, settings.maxSubSteps])

const manualStep = () => {
if (!physicsWorld) return
if (!physics) return

setSettings((current) => ({ ...current, paused: true }))
setSettings({ paused: true })

const timeStep = 1 / settings.physicsStepsPerSecond
physicsWorld.step(timeStep, timeStep)
physics.step(timeStep, timeStep)
}

useControls(
Expand All @@ -130,7 +122,7 @@ export const Controls = ({ scene, scenes, setScene, tool, setTool, settings, set
reset()
}),
},
[physicsWorld, settings, reset]
[physics, settings, reset]
)

const [, setRendering] = useControls('Rendering', () => ({
Expand Down Expand Up @@ -185,8 +177,6 @@ export const Controls = ({ scene, scenes, setScene, tool, setTool, settings, set
])

useEffect(() => {
if (!appDomElement) return

const handler = (event: KeyboardEvent) => {
const target = event.target as HTMLElement | null

Expand All @@ -197,19 +187,19 @@ export const Controls = ({ scene, scenes, setScene, tool, setTool, settings, set
const key = event.key.toLowerCase()

if (key === 'q') {
return setTool(Tools.PICK_PAN)
return setTool(Tool.PICK_PAN)
}

if (key === 'd') {
return setTool(Tools.POLYGON)
return setTool(Tool.POLYGON)
}

if (key === 'a') {
return setTool(Tools.CIRCLE)
return setTool(Tool.CIRCLE)
}

if (key === 'f') {
return setTool(Tools.RECTANGLE)
return setTool(Tool.RECTANGLE)
}

if (key === 'p' || key === ' ') {
Expand Down Expand Up @@ -241,12 +231,12 @@ export const Controls = ({ scene, scenes, setScene, tool, setTool, settings, set
}
}

appDomElement.addEventListener('keydown', handler)
window.addEventListener('keydown', handler)

return () => {
appDomElement.removeEventListener('keydown', handler)
window.removeEventListener('keydown', handler)
}
}, [physicsWorld, settings, appDomElement, reset])
}, [physics, settings, reset])

return <Leva fill flat theme={levaTheme} titleBar={false} />
}
21 changes: 0 additions & 21 deletions packages/p2-es-sandbox/src/ecs/context.tsx

This file was deleted.

115 changes: 1 addition & 114 deletions packages/p2-es-sandbox/src/ecs/entity.ts
Original file line number Diff line number Diff line change
@@ -1,123 +1,10 @@
import * as p2 from 'p2-es'
import { Application, Container, FederatedMouseEvent, Graphics } from 'pixi.js'

export interface SandboxSettings {
physicsStepsPerSecond: number
maxSubSteps: number
paused: boolean
bodyIslandColors: boolean
bodySleepOpacity: boolean
debugPolygons: boolean
drawContacts: boolean
drawAABBs: boolean
renderInterpolatedPositions: boolean
newShapeCollisionGroup?: number
newShapeCollisionMask?: number
enablePanning?: boolean
enableZooming?: boolean
}

export const defaultSandboxSettings: SandboxSettings = {
physicsStepsPerSecond: 60,
maxSubSteps: 3,
paused: false,
bodyIslandColors: false,
bodySleepOpacity: false,
debugPolygons: false,
drawContacts: false,
drawAABBs: false,
renderInterpolatedPositions: true,
enablePanning: true,
enableZooming: true,
}

type PointerPositions = {
stagePosition: [number, number]
physicsPosition: [number, number]
}

type PointerTouches = {
[key: string]: PointerPositions
}

export type Pointer = {
primaryPointer: PointerPositions
touches: PointerTouches

pinching: boolean
pinchInitialLength?: number
pinchLength?: number
pinchATouch?: string
pinchBTouch?: string
onPinchStart: Set<() => void>
onPinchMove: Set<() => void>
onPinchEnd: Set<() => void>

onUp: Set<(e: FederatedMouseEvent) => void>
onDown: Set<(e: FederatedMouseEvent) => void>
onMove: Set<(e: FederatedMouseEvent) => void>
onWheel: Set<(delta: number) => void>
}

export const createPointer = (): Pointer => {
return {
primaryPointer: {
stagePosition: [0, 0],
physicsPosition: [0, 0],
},
touches: {},
pinching: false,
onPinchStart: new Set(),
onPinchMove: new Set(),
onPinchEnd: new Set(),
onUp: new Set(),
onDown: new Set(),
onMove: new Set(),
onWheel: new Set(),
}
}

export type Sprite = {
graphics: Graphics
drawnSleeping: boolean | null
drawnLineColor: number | null
drawnFillColor: number | null
dirty: boolean
}

export const createSprite = () => {
return {
graphics: new Graphics(),
drawnSleeping: null,
drawnLineColor: null,
drawnFillColor: null,
dirty: false,
}
}

export type Pixi = {
canvasElement: HTMLCanvasElement
application: Application
stage: Container
container: Container
background: Graphics
graphics: {
aabb: Graphics
contacts: Graphics
pick: Graphics
drawShape: Graphics
}
onResize: () => void
}
import { Sprite } from '../pixi/sprite'

export type Entity = {
sandboxSettings?: SandboxSettings
domElement?: HTMLElement
physicsBody?: p2.Body
physicsConstraint?: p2.Constraint
physicsSpring?: p2.Spring
physicsWorld?: p2.World
pixi?: Pixi
pointer?: Pointer
sprite?: Sprite
}
5 changes: 1 addition & 4 deletions packages/p2-es-sandbox/src/ecs/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
export * from './entity'
export * from './context'
export * from './pointer-system'
export * from './renderer-systems'
export * from './tool-systems'
export * from './utils'
export * from './world'
Loading

0 comments on commit 5df450b

Please sign in to comment.