Invisible objects and objects with text

src/components/game/Sketch.tsx

@@ -10,7 +10,8 @@ import { GameSound, SoundState, SoundStatus } from './GameSound'
 import { buildKeyPressEvent, visualState, flushEvents, canvasResolution, queueEvent } from './SketchUtils'
 import { Button } from '@material-ui/core'
 import ReplayIcon from '@material-ui/icons/Replay'
-import { DrawableMessage, drawMessage } from './messages'
+import { DrawableMessage, drawMessage, TEXT_SIZE, TEXT_STYLE } from './messages'
+import { CenterFocusStrong } from '@material-ui/icons'
 
 const { round } = Math
 
@@ -41,6 +42,17 @@ function wKeyCode(key: string, keyCode: number): string {
   return '' //If an unknown key is pressed, a string should be returned
 }
 
+function textConfig(sketch: p5, textColor: undefined | string) {
+  const defaultTextColor = 'blue'
+  const grey = '#1c1c1c'
+  sketch.textSize(TEXT_SIZE)
+  sketch.textStyle(TEXT_STYLE)
+  sketch.textAlign('center')
+  sketch.stroke(grey)
+  const color = textColor && '#' + textColor
+  sketch.fill(color || defaultTextColor)
+}
+
 interface SketchProps {
   gameProject: GameProject
   evaluation: Evaluation
@@ -119,15 +131,26 @@ function render(interpreter: Interpreter, sketch: p5, images: Map<string, p5.Ima
 
   const messagesToDraw: DrawableMessage[] = []
   for (const visual of game.get('visuals')?.innerCollection ?? []) {
-    const { image: stateImage, position, message } = visualState(interpreter, visual)
-    const imageObject = image(stateImage)
-    const x = position.x * cellPixelSize
-    const y = sketch.height - position.y * cellPixelSize - imageObject.height
-
-    sketch.image(imageObject, x, y)
+    const { image: stateImage, position, message, text, textColor } = visualState(interpreter, visual)
+    const imageObject =  stateImage === undefined ? stateImage : image(stateImage)
+    let x = position.x * cellPixelSize
+    let y = sketch.height - (position.y + 1) * cellPixelSize
+
+    if (imageObject) {
+      x = position.x * cellPixelSize
+      y = sketch.height - position.y * cellPixelSize - imageObject.height
+      sketch.image(imageObject, x, y)
+    }
 
     if (message && visual.get('messageTime')!.innerNumber! > sketch.millis())
-      messagesToDraw.push({ message, x, y })
+    messagesToDraw.push({ message, x, y })
+
+    if (text) {
+      x = (position.x + 0.5) * cellPixelSize
+      y = sketch.height - (position.y + 0.5) * cellPixelSize
+      textConfig(sketch, textColor)
+      sketch.text(text, x, y)
+    }
   }
 
   messagesToDraw.forEach(drawMessage(sketch))

src/components/game/SketchUtils.ts

@@ -32,16 +32,23 @@ export interface VisualState {
   image?: string;
   position: { x: number; y: number };
   message?: string;
+  text?: string;
+  textColor?: string;
 }
 
 export function visualState(interpreter: Interpreter, visual: RuntimeObject): VisualState {
-  const image = interpreter.send('image', visual)!.innerString
+  const imageMethod = visual.module.lookupMethod('image', 0)
+  const image = imageMethod && interpreter.invoke(imageMethod, visual)!.innerString
   const position = interpreter.send('position', visual)!
   const roundedPosition = interpreter.send('round', position)!
   const x = roundedPosition.get('x')!.innerNumber!
   const y = roundedPosition.get('y')!.innerNumber!
   const message = visual.get('message')?.innerString
-  return { image, position: { x, y }, message }
+  const textMethod = visual.module.lookupMethod('text', 0)
+  const text = textMethod && interpreter.invoke(textMethod, visual)!.innerString
+  const textColorMethod = visual.module.lookupMethod('textColor', 0)
+  const textColor = textColorMethod && interpreter.invoke(textColorMethod, visual)!.innerString
+  return { image, position: { x, y }, message, text, textColor }
 }
 
 export function flushEvents(interpreter: Interpreter, ms: number): void {

src/components/game/messages.ts

@@ -10,8 +10,17 @@ export interface MessageDrawer {
   textWidth(message: string): number;
   rect(xPos: number, yPos: number, xSize: number, ySize: number, tl?: number, tr?: number, br?: number, bl?: number): void;
   text(message: string, xPos: number, yPos: number, xLimit: number, yLimit: number): void;
+  fill(color: string): void;
+  textAlign(alignment: string): void;
+  textSize(size: number): void;
+  textStyle(style: string): void;
+  stroke(color: string): void;
+  noStroke(): void;
 }
 
+export const TEXT_STYLE = 'bold'
+export const TEXT_SIZE = 14
+
 const sizeFactor = 50
 
 function messageSizeLimit() {
@@ -63,12 +72,18 @@ function messageBackgroundPosition(drawer: MessageDrawer, message: DrawableMessa
 function drawMessageBackground(drawer: MessageDrawer, message: DrawableMessage) {
   const size = messageSize(drawer, message)
   const position = messageBackgroundPosition(drawer, message)
+  drawer.fill('white')
   drawer.rect(position.x, position.y, size.x, size.y, 0, 15, 10, 5)
 }
 
 export const drawMessage = (drawer: MessageDrawer) => (message: DrawableMessage): void => {
   drawMessageBackground(drawer, message)
   const position = messageTextPosition(drawer, message)
   const limit = messageSizeLimit()
+  drawer.textSize(TEXT_SIZE)
+  drawer.textStyle(TEXT_STYLE)
+  drawer.fill('black')
+  drawer.textAlign('left')
+  drawer.noStroke()
   drawer.text(message.message, position.x, position.y, limit.x, limit.y)
 }

src/test/game.test.ts

@@ -25,19 +25,6 @@ const getVisualState = (interpreter: Interpreter, index = 0) => {
 }
 
 describe('game', () => {
-
-  gameTest('visualStates', 'pepita', ['games/pepita.wpgm'], function (interpreter) {
-    expect(getVisualState(interpreter)).toStrictEqual({
-      image: 'pepita.png',
-      position: { x: 1, y: 1 },
-      message: undefined,
-    })
-  })
-
-  gameTest('visualState should round a visuals position', 'visualStateTest', ['games/visualStateTest.wpgm'], function (interpreter) {
-    expect(getVisualState(interpreter).position).toStrictEqual({ x: 1, y: 2 })
-  })
-
   gameTest('a visual outside of the canvas should be drawn', 'gameTest', ['games/gameTest.wpgm'], function (interpreter) {
     expect(getVisualState(interpreter, 1)).toMatchObject({ image: 'out.png' })
   })
@@ -116,6 +103,12 @@ describe('messages', () => {
     textWidth: (text: string) => 5.5 * text.length,
     rect: () => { },
     text: () => { },
+    fill: () => { },
+    textAlign: () => { },
+    textSize: () => { },
+    textStyle: () => { },
+    stroke: () => { },
+    noStroke: () => { },
   }
 
   test('when a message is horizontally out of canvas, it should be inverted', () => {
@@ -135,6 +128,44 @@ describe('messages', () => {
   })
 })
 
+describe('VisualState', () => {
+  gameTest('visualStates', 'pepita', ['games/pepita.wpgm'], function (interpreter) {
+    expect(getVisualState(interpreter)).toStrictEqual({
+      image: 'pepita.png',
+      position: { x: 1, y: 1 },
+      message: undefined,
+      text: undefined,
+      textColor: undefined
+    })
+  })
+
+  gameTest('complete visual', 'visualStateTest', ['games/visualStateTest.wpgm'], function (interpreter) {
+    expect(getVisualState(interpreter, 2)).toStrictEqual({
+      image: 'anImage.png',
+      position: { x: 0, y: 0 },
+      message: undefined,
+      text: 'Sample text',
+      textColor: 'FF0000FF'
+    })
+  })
+
+  gameTest('visualState should round a visuals position', 'visualStateTest', ['games/visualStateTest.wpgm'], function (interpreter) {
+    expect(getVisualState(interpreter).position).toStrictEqual({ x: 1, y: 2 })
+  })
+
+  gameTest('image is optional', 'visualStateTest', ['games/visualStateTest.wpgm'], function (interpreter) {
+    expect(getVisualState(interpreter, 1).image).toBeUndefined()
+  })
+
+  gameTest('text is optional', 'visualStateTest', ['games/visualStateTest.wpgm'], function (interpreter) {
+    expect(getVisualState(interpreter, 1).text).toBeUndefined()
+  })
+
+  gameTest('textColor is optional', 'visualStateTest', ['games/visualStateTest.wpgm'], function (interpreter) {
+    expect(getVisualState(interpreter, 1).textColor).toBeUndefined()
+  })
+})
+
 /*
 describe('GameSound', () => {
 

src/test/games/visualStateTest.wpgm

@@ -1,12 +1,29 @@
 import wollok.game.*
 
-object myVisual{
+object myVisual {
   var property position = game.at(1.2, 1.8)
 
   method image() = "noImage.png"
 }
 
+object positionableVisual {
+  var property position = game.at(1.2, 1.8)
+}
+
+object completeVisual {
+
+  method position() = game.at(0, 0)
+
+  method image() = "anImage.png"
+
+  method text() = "Sample text"
+
+  method textColor() = "FF0000FF"
+}
+
 program mockGame {
   game.addVisual(myVisual)
+  game.addVisual(positionableVisual)
+  game.addVisual(completeVisual)
   game.start()
 }