From 28122c54a3c9b25b7ac9e139302284e7e83a8f58 Mon Sep 17 00:00:00 2001
From: Alexander Klingenbeck <alexander.klingenbeck@gmx.de>
Date: Tue, 6 Jun 2023 22:55:45 +0200
Subject: [PATCH] Add editor

---
 examples/ts_game/resources/tilemap_packed.png | Bin 0 -> 5471 bytes
 examples/ts_game/src/editor.ts                | 215 +++++++++++++-----
 examples/ts_game/src/entity.ts                |   8 +-
 examples/ts_game/src/game.ts                  |   6 +-
 examples/ts_game/src/index.ts                 |   2 +-
 5 files changed, 175 insertions(+), 56 deletions(-)
 create mode 100644 examples/ts_game/resources/tilemap_packed.png

diff --git a/examples/ts_game/resources/tilemap_packed.png b/examples/ts_game/resources/tilemap_packed.png
new file mode 100644
index 0000000000000000000000000000000000000000..67e255f5761f4a92dfd1da9b6c13aa32586ff28f
GIT binary patch
literal 5471
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

literal 0
HcmV?d00001

diff --git a/examples/ts_game/src/editor.ts b/examples/ts_game/src/editor.ts
index 8a87920..31e9109 100644
--- a/examples/ts_game/src/editor.ts
+++ b/examples/ts_game/src/editor.ts
@@ -1,13 +1,14 @@
-import { Behaviour, Builder, Creator, Entity, HasBoundingBox, HasMouseInteraction, HasPosition, HasSize, combine, hasDefault, hasDefaultFn, makeEntity, which, withBoundingBox, withComponent, withMouseInteraction, withPosition, withSize } from "./entity"
+import { Behaviour, Builder, Creator, Entity, HasBehaviour, HasBoundingBox, HasMouseInteraction, HasPosition, HasSize, combine, hasDefault, hasDefaultFn, makeEntity, which, withBehaviour, withBoundingBox, withComponent, withMouseInteraction, withPosition, withSize } from "./entity"
 import { entityAdd, gameRun, gameSetClearColor } from "./game"
+import { resourceUnload, textureLoad } from "./resource"
 import { HasText, withText } from "./text"
 
 const withGuiSize = withComponent<HasSize>(x => hasDefaultFn(x, 'size', () => new Vector2(100,20)))
 
 type UiControl = Entity & HasPosition & HasSize
-const makeControl = combine(makeEntity, withPosition, withSize)
+const makeControl = combine(makeEntity, withPosition, withGuiSize)
 
-type Button = Entity & HasPosition & HasSize & HasMouseInteraction & HasText
+type Button = UiControl & HasMouseInteraction & HasText
 const drawsButton: Behaviour<Button> = {
     draw: x => {
         x.isClicked = guiButton(new Rectangle(x.position.x,x.position.y,x.size.x, x.size.y), x.text)
@@ -15,9 +16,7 @@ const drawsButton: Behaviour<Button> = {
     }
 }
 const makeButton: Builder<Button> = combine(
-    makeEntity, 
-    withPosition,
-    withSize, 
+    makeControl, 
     withMouseInteraction, 
     withComponent<HasText>(x => hasDefault(x, 'text', 'Button')), 
     which(drawsButton))
@@ -30,7 +29,7 @@ interface HasChangedEvent {
     onChange?: () => void
 }
 const withChangedEvent = withComponent<HasChangedEvent>()
-type Textbox = Entity & HasPosition & HasSize & HasText & HasActive & HasChangedEvent
+type Textbox = UiControl & HasText & HasActive & HasChangedEvent
 const drawsTextbox: Behaviour<Textbox> = {
     draw: x => {
         if(guiTextBox(new Rectangle(x.position.x,x.position.y,x.size.x, x.size.y), x, x.active)){
@@ -39,64 +38,77 @@ const drawsTextbox: Behaviour<Textbox> = {
         } 
     }
 }
-const makeTextbox: Builder<Textbox> = combine(makeEntity, 
-    withGuiBounds, 
+const makeTextbox: Builder<Textbox> = combine(
+    makeControl,
     withText,
     withActive, 
     withChangedEvent, 
     which(drawsTextbox))
-type CheckBox = Entity & HasBoundingBox & HasText & HasActive & HasChangedEvent
+type CheckBox = UiControl & HasText & HasActive & HasChangedEvent
 const drawsCheckbox: Behaviour<CheckBox> = {
-    draw: c => {
-        const old = c.active
-        c.active = guiCheckBox(c.boundingBox, c.text, c.active)
-        if(old != c.active && c.onChange) c.onChange()
+    draw: x => {
+        const old = x.active
+        x.active = guiCheckBox(new Rectangle(x.position.x,x.position.y,x.size.x, x.size.y), x.text, x.active)
+        if(old != x.active && x.onChange) x.onChange()
     }
 }
-const makeCheckbox: Builder<CheckBox> = combine(makeEntity, 
-    withGuiBounds, 
+const makeCheckbox: Builder<CheckBox> = combine(
+    makeControl,
     withText,
     withActive, 
     withChangedEvent, 
     which(drawsCheckbox))
 
-type Label = Entity & HasBoundingBox & HasText
-const drawsLabel: Behaviour<Label> = { draw: c => guiLabel(c.boundingBox, c.text) }
-const makeLabel: Builder<Label> = combine(makeEntity, withGuiBounds, withText, which(drawsLabel))
+type Label = UiControl & HasText
+const drawsLabel: Behaviour<Label> = { draw: x => guiLabel(new Rectangle(x.position.x,x.position.y,x.size.x, x.size.y), x.text) }
+const makeLabel: Builder<Label> = combine(makeControl, withText, which(drawsLabel))
 
-type WindowBox = Entity & HasBoundingBox & HasText
-const drawsWindowBox: Behaviour<WindowBox> = { draw: c => guiWindowBox(c.boundingBox, c.text) }
-const builderWindowBox: Builder<WindowBox> = combine(makeEntity, withGuiBounds, withText, which(drawsWindowBox))
+type WindowBox = UiControl & HasText
+const drawsWindowBox: Behaviour<WindowBox> = { draw: x => guiWindowBox(new Rectangle(x.position.x,x.position.y,x.size.x, x.size.y), x.text) }
+const builderWindowBox: Builder<WindowBox> = combine(makeControl, withText, which(drawsWindowBox))
 
-type GroupBox = Entity & HasBoundingBox & HasText
-const drawsGroupBox: Behaviour<WindowBox> = { draw: c => guiGroupBox(c.boundingBox, c.text) }
-const makeGroupBox: Builder<GroupBox> = combine(makeEntity, withGuiBounds, withText, which(drawsGroupBox))
+type GroupBox = UiControl & HasText
+const drawsGroupBox: Behaviour<WindowBox> = { draw: x => guiGroupBox(new Rectangle(x.position.x,x.position.y,x.size.x, x.size.y), x.text) }
+const makeGroupBox: Builder<GroupBox> = combine(makeControl, withText, which(drawsGroupBox))
 
-type Line = Entity & HasBoundingBox & HasText
-const drawsLine: Behaviour<Line> = { draw: c => guiLine(c.boundingBox, c.text) }
-const makeLine: Builder<Line> = combine(makeEntity, withGuiBounds, withText, which(drawsLine))
+type Line = UiControl & HasText
+const drawsLine: Behaviour<Line> = { draw: x => guiLine(new Rectangle(x.position.x,x.position.y,x.size.x, x.size.y), x.text) }
+const makeLine: Builder<Line> = combine(makeControl, withText, which(drawsLine))
 
-type Panel = Entity & HasBoundingBox & HasText
-const drawsPanel: Behaviour<Panel> = { draw: c => guiPanel(c.boundingBox, c.text) }
-const makePanel: Builder<Panel> = combine(makeEntity, withGuiBounds, withText, which(drawsPanel))
+type Panel = UiControl & HasText
+const drawsPanel: Behaviour<Panel> = { draw: x => guiPanel(new Rectangle(x.position.x,x.position.y,x.size.x, x.size.y), x.text) }
+const makePanel: Builder<Panel> = combine(makeControl, withText, which(drawsPanel))
 
-interface HasScrollView {
-    contentArea: Rectangle,
-    scroll: Vector2,
-    viewArea: Rectangle
-}
-const withScrollView = withComponent<HasScrollView & HasBoundingBox>(x => {
-    hasDefaultFn(x, 'contentArea', () => new Rectangle(x.boundingBox!.x, x.boundingBox!.y, x.boundingBox!.width, x.boundingBox!.height))
-    hasDefaultFn(x, 'viewArea', () => new Rectangle(x.boundingBox!.x, x.boundingBox!.y, x.boundingBox!.width, x.boundingBox!.height))
-    hasDefaultFn(x, 'scroll', () => new Vector2(0,0))
-})
-type ScrollPanel = Entity & HasBoundingBox & Partial<HasText> & HasScrollView
-const drawsScrollView: Behaviour<ScrollPanel> = {
-    draw: s => {
-        s.viewArea = guiScrollPanel(s.boundingBox, s.text, s.contentArea, s.scroll)
-    }
-}
-const makeScollPanel: Builder<ScrollPanel>  = combine(makeEntity, withComponent<Partial<HasText>>(), withGuiBounds, withScrollView, )
+// interface HasScrollView {
+//     contentArea: Rectangle,
+//     scroll: Vector2,
+//     viewArea: Rectangle
+// }
+// const withScrollView = withComponent<HasScrollView & HasPosition & HasSize>(x => {
+//     hasDefaultFn(x, 'contentArea', () => new Rectangle(x.boundingBox!.x, x.boundingBox!.y, x.boundingBox!.width, x.boundingBox!.height))
+//     hasDefaultFn(x, 'viewArea', () => new Rectangle(x.boundingBox!.x, x.boundingBox!.y, x.boundingBox!.width, x.boundingBox!.height))
+//     hasDefaultFn(x, 'scroll', () => new Vector2(0,0))
+// })
+// type ScrollPanel = UiControl & Partial<HasText> & HasScrollView
+// const drawsScrollView: Behaviour<ScrollPanel> = {
+//     draw: s => {
+//         s.viewArea = guiScrollPanel(s.boundingBox, s.text, s.contentArea, s.scroll)
+//     }
+// }
+// const makeScollPanel: Builder<ScrollPanel>  = combine(makeEntity, withComponent<Partial<HasText>>(), withGuiBounds, withScrollView, )
+
+// interface HasChildControls {
+//     controls: UiControl[]
+// }
+// const withChildControls = withComponent<HasChildControls>(x => hasDefault(x, 'controls', []))
+
+// type StackPanel = UiControl & HasChildControls
+// const drawsStackLayout: Behaviour<StackPanel> = {
+//     update: x => {
+
+//     }
+// }
+// const makeStackPanel = combine(makeControl, withChildControls)
 
 interface HasGuiGlobalState {}
 type GuiGlobalState = Entity & HasGuiGlobalState
@@ -105,25 +117,122 @@ const appliesGuiGlobalState: Behaviour<GuiGlobalState> = {
 }
 const guiState: GuiGlobalState = combine(makeEntity,withComponent<HasGuiGlobalState>(), which(appliesGuiGlobalState))({})
 
+interface HasTexture {
+    texture: string,
+    textureResource: Texture
+}
+const loadsTexture: Behaviour<HasTexture> = {
+    load: x => x.textureResource = textureLoad(x.texture),
+    unload: x => resourceUnload(x.texture)
+}
+const withTexture: Builder<HasTexture> = withComponent<HasTexture>()
 
+interface HasTiles {
+    tileWidth: number,
+    tileHeight: number
+}
+const withTiles = withComponent<HasTiles>(x => {
+    hasDefault(x, 'tileWidth', 16)
+    hasDefault(x, 'tileHeight', 16)
+})
+
+interface HasTilemap {
+    width: number,
+    height: number,
+    tileData: number[]
+}
+const withTilemap = withComponent<HasTilemap>(x => {
+    hasDefault(x, 'width', 0)
+    hasDefault(x, 'height', 0)
+    hasDefaultFn(x, 'tileData', () => [])
+})
+type Tilemap = Entity & HasPosition & HasTexture & HasTiles & HasTilemap
+const drawsTilemap: Behaviour<Tilemap> = {
+    draw: map => {
+        const position = new Vector2(0,0)
+        const src = new Rectangle(0,0,map.tileWidth,map.tileHeight)
+        const tilesX = Math.floor(map.textureResource.width/map.tileWidth)
+        for (let y = 0; y < map.width; y++) {
+            for (let x = 0; x < map.height; x++) {
+                let tileId = map.tileData[y*map.width+x]
+                if(tileId === 0) continue
+                tileId--
+                position.x = map.position.x + x * map.tileWidth
+                position.y = map.position.y + y * map.tileHeight
+                src.x = (tileId % tilesX) * map.tileWidth
+                src.y = Math.floor(tileId / tilesX) * map.tileHeight
+                drawTextureRec(map.textureResource, src, position, WHITE)
+            }        
+        }
+    }
+}
+const makeTilemap: Builder<Tilemap> = combine(makeEntity, 
+    withPosition, 
+    withTexture, 
+    withTiles, 
+    withTilemap, 
+    which<Tilemap>(loadsTexture), 
+    which(drawsTilemap))
+
+interface HasChildren {
+    children: Entity[]
+}
+const withChildren = withComponent<HasChildren>(x => hasDefaultFn(x, 'children', () => []))
+type Container = Entity & HasChildren
+const processesChildren: Behaviour<Container> = {
+    load: x => x.children.forEach(y => y.behaviours.forEach(z => z.load ? z.load(y) : undefined)),
+    update: x => x.children.forEach(y => y.behaviours.forEach(z => z.update ? z.update(y) : undefined)),
+    draw: x => x.children.forEach(y => {
+        y.behaviours.forEach(z => z.beforeDraw ? z.beforeDraw(y) : undefined)
+        y.behaviours.forEach(z => z.draw ? z.draw(y) : undefined)
+        y.behaviours.forEach(z => z.afterDraw ? z.afterDraw(y) : undefined)
+    }),
+    unload: x => x.children.forEach(y => y.behaviours.forEach(z => z.unload ? z.unload(y) : undefined))
+}
+const makeContainer = combine(makeEntity, withChildren, which(processesChildren))
+
+interface HasCamera2D {
+    camera2D: Camera2D 
+}
+const withCamera2D = withComponent<HasCamera2D>(x => hasDefaultFn(x,'camera2D',() => new Camera2D(new Vector2(getScreenWidth()/2.0, getScreenHeight()/2.0),new Vector2(0,0), 0, 1)))
+type Space2D = Container & HasCamera2D
+const applies2dSpace: Behaviour<Space2D> = {
+    beforeDraw: x => beginMode2D(x.camera2D),
+    afterDraw: x => endMode2D()
+} 
+const makeSpace2D = combine(makeContainer, withCamera2D, which(applies2dSpace))
 
 gameRun({ width: 800, height: 600, title: 'My Editor', flags: FLAG_WINDOW_RESIZABLE }, async (quit) => {
+    const map = makeTilemap({
+        texture: "resources/tilemap_packed.png",
+        width: 16,
+        height: 16,
+        tileData: new Array(16*16).fill(13)
+    })
+    const space2d = makeSpace2D({})
+    space2d.children.push(map)
+    space2d.camera2D.zoom = 2
+    space2d.camera2D.target = new Vector2((map.width/2)*map.tileWidth,(map.height/2)*map.tileHeight)
+    entityAdd(space2d)
+
     const but = makeButton({
+        position: new Vector2(10,10),
         text: 'Click Me!',
-        onClick: () => but.boundingBox.x += 20
+        onClick: () => but.position.x += 20
     })
     const tb = makeTextbox({
         text: but.text,
-        boundingBox: new Rectangle(10, 50, 100, 20),
+        position: new Vector2(10,50),
         onChange: () => but.text = tb.text
     })
     const cb = makeCheckbox({
-        boundingBox: new Rectangle(10, 75, 20, 20),
+        position: new Vector2(10,75),
+        size: new Vector2(20,20),
         text: "Check Me!",
         onChange: () => cb.text = "Checkbox is "+ (cb.active ? "checked" : "not checked")
     })
     const l = makeLabel({
-        boundingBox: new Rectangle(10, 100, 100, 20),
+        position: new Vector2(10,100),
         text: "This is a label"
     })
     entityAdd(guiState)
@@ -131,4 +240,6 @@ gameRun({ width: 800, height: 600, title: 'My Editor', flags: FLAG_WINDOW_RESIZA
     entityAdd(tb)
     entityAdd(cb)
     entityAdd(l)
+
+
 })
diff --git a/examples/ts_game/src/entity.ts b/examples/ts_game/src/entity.ts
index e35b8c9..0fe7094 100644
--- a/examples/ts_game/src/entity.ts
+++ b/examples/ts_game/src/entity.ts
@@ -4,7 +4,9 @@ export interface Behaviour<T> {
     load?: (entity: T) => void,
     unload?: (entity: T) => void,
     update?: (entity: T) => void,
+    beforeDraw?: (entity: T) => void
     draw?: (entity: T) => void
+    afterDraw?: (entity: T) => void
 }
 
 export function addBehaviour<T extends HasBehaviour>(obj: T, behaviour: Behaviour<T>){
@@ -25,13 +27,15 @@ export function combine<A,B,C>(fn1: Builder<A>, fn2: Extender<A,B>, fn3: Extende
 export function combine<A,B,C,D>(fn1: Builder<A>, fn2: Extender<A,B>, fn3: Extender<A&B,C>, fn4: Extender<A&B&C,D>): Builder<A&B&C&D> 
 export function combine<A,B,C,D,E>(fn1: Builder<A>, fn2: Extender<A,B>, fn3: Extender<A&B,C>, fn4: Extender<A&B&C,D>, fn5: Extender<A&B&C&D,E>): Builder<A&B&C&D&E> 
 export function combine<A,B,C,D,E,F>(fn1: Builder<A>, fn2: Extender<A,B>, fn3: Extender<A&B,C>, fn4: Extender<A&B&C,D>, fn5: Extender<A&B&C&D,E>, fn6: Extender<A&B&C&D&E,F>): Builder<A&B&C&D&E&F> 
-export function combine<A,B,C,D,E,F>(fn1: Builder<A>, fn2?: Extender<A,B>, fn3?: Extender<A&B,C>, fn4?: Extender<A&B&C,D>, fn5?: Extender<A&B&C&D,E>, fn6?: Extender<A&B&C&D&E,F>): Builder<A> | Builder<A&B> | Builder<A&B&C> | Builder<A&B&C&D> | Builder<A&B&C&D&E> | Builder<A&B&C&D&E&F> 
+export function combine<A,B,C,D,E,F,G>(fn1: Builder<A>, fn2: Extender<A,B>, fn3: Extender<A&B,C>, fn4: Extender<A&B&C,D>, fn5: Extender<A&B&C&D,E>, fn6: Extender<A&B&C&D&E,F>, fn7: Extender<A&B&C&D&E&F,G>): Builder<A&B&C&D&E&F&G> 
+export function combine<A,B,C,D,E,F,G>(fn1: Builder<A>, fn2?: Extender<A,B>, fn3?: Extender<A&B,C>, fn4?: Extender<A&B&C,D>, fn5?: Extender<A&B&C&D,E>, fn6?: Extender<A&B&C&D&E,F>, fn7?: Extender<A&B&C&D&E&F,G>): Builder<A> | Builder<A&B> | Builder<A&B&C> | Builder<A&B&C&D> | Builder<A&B&C&D&E> | Builder<A&B&C&D&E&F> | Builder<A&B&C&D&E&F&G> 
 {
+    if(fn2 && fn3 && fn4 && fn5 && fn6 && fn7) return combine(combine(fn1, fn2, fn3, fn4, fn5, fn6), fn7)
     if(fn2 && fn3 && fn4 && fn5 && fn6) return combine(combine(fn1, fn2, fn3, fn4, fn5), fn6)
     if(fn2 && fn3 && fn4 && fn5) return combine(combine(fn1, fn2, fn3, fn4), fn5)
     if(fn2 && fn3 && fn4) return combine(combine(fn1, fn2, fn3), fn4)
     if(fn2 && fn3) return combine(combine(fn1, fn2), fn3)
-    if(fn2) return (objIn: Partial<A&B>) => <A&B>fn2(<A&Partial<B>>fn1(objIn))
+    if(fn2) return (objIn: Partial<A&B> = {}) => <A&B>fn2(<A&Partial<B>>fn1(objIn))
     return fn1
 }
 
diff --git a/examples/ts_game/src/game.ts b/examples/ts_game/src/game.ts
index e5693aa..aec5379 100644
--- a/examples/ts_game/src/game.ts
+++ b/examples/ts_game/src/game.ts
@@ -128,7 +128,11 @@ export const gameRun = (options: Partial<WindowConfig>, startupCallback: (quit:
         beginDrawing()
         clearBackground(gameClearColor)
         drawText("Active promises: "+ promiseUpdateList.length, 10,10, 8, RAYWHITE)
-        entitiyList.forEach(e => e.behaviours.forEach(b => b.draw ? b.draw(e) : undefined))
+        entitiyList.forEach(e => {
+            e.behaviours.forEach(b => b.beforeDraw ? b.beforeDraw(e) : undefined)
+            e.behaviours.forEach(b => b.draw ? b.draw(e) : undefined)
+            e.behaviours.forEach(b => b.afterDraw ? b.afterDraw(e) : undefined)
+        })
         endDrawing()
     }
     entitiyList.forEach(x => entityUnload(x))
diff --git a/examples/ts_game/src/index.ts b/examples/ts_game/src/index.ts
index 4f29e11..48d7c49 100644
--- a/examples/ts_game/src/index.ts
+++ b/examples/ts_game/src/index.ts
@@ -7,7 +7,7 @@ import { Compiler } from "inkjs";
 
 gameRun({ width: 800, height: 400, title: "The Intercept" }, async (quit) => {
     const source = loadFileText("resources/intercept.ink")
-    const c = new Compiler(source)
+    const c = new Compiler(source!)
     const story = c.Compile()
     traceLog(LOG_INFO, "[INK] Story loaded")