diff --git a/package-lock.json b/package-lock.json
index 2d9d304..d72e724 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -56,6 +56,7 @@
       "dependencies": {
         "p5": "^1.4.1",
         "path": "^0.12.7",
+        "socket.io": "^4.7.5",
         "wollok-ts": "4.1.3"
       },
       "devDependencies": {
@@ -10815,6 +10816,7 @@
         "http-server": "^14.1.0",
         "p5": "^1.4.1",
         "path": "^0.12.7",
+        "socket.io": "^4.7.5",
         "ts-loader": "^9.2.6",
         "typescript": "^4.5.5",
         "webpack": "^5.69.1",
diff --git a/package.json b/package.json
index 9ec3c61..31e0bc4 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "lint": "eslint . ",
     "lint:fix": "eslint . --fix",
     "test:unit": "mocha --parallel -r ts-node/register/transpile-only test/**/*.test.ts --timeout 7000",
-    "build": "shx rm -rf build && shx mkdir ./build && shx cp -r ./public ./build/public && tsc -p ./tsconfig.build.json",
+    "build": "shx rm -rf build && shx mkdir ./build && shx cp -r ./public ./build/public && cp ./node_modules/wollok-game-web/dist/web/index.js ./build/public/game/lib && tsc -p ./tsconfig.build.json",
     "watch": "npm run build -- -w",
     "pack": "pkg .",
     "prepublishOnly": "npm run build && npm run test"
diff --git a/public/game/index.html b/public/game/index.html
index 4171cfb..41edfb6 100644
--- a/public/game/index.html
+++ b/public/game/index.html
@@ -4,13 +4,14 @@
     <meta charset="UTF-8" />
     <script src="./lib/p5.js"></script>
     <script src="./lib/p5.sound.js"></script>
+    <script src="./lib/index.js"></script>
     <title>Wollok Game</title>
 
-    <script
+    <!-- <script
       language="javascript"
       type="text/javascript"
       src="./sketch.js"
-    ></script>
+    ></script> -->
     <style>
         main {
             display: flex;
@@ -26,16 +27,26 @@
     <script>
       let socket = 1;
     </script>
+    <main>
+      <div id="game" class="game"></div>
+    </main>
     <script type="module">
       import { io } from "./lib/socket.io.esm.min.js";
 
       socket = io();
       socket.on("connect", function () {
-        console.log("conectado!");
-      });
+        console.log("conectado!")
+      })
       socket.on("disconnect", function () {
-        console.log("desconectado!");
-      });
+        console.log("desconectado!")
+      })
+
+      const parent = document.getElementById('game')
+      const game = new SocketGame(socket)
+
+      socket.on("start", function () {
+        game.start(parent)
+      })
     </script>
   </body>
 </html>
diff --git a/public/game/sketch.js b/public/game/sketch.js
deleted file mode 100644
index 21fee17..0000000
--- a/public/game/sketch.js
+++ /dev/null
@@ -1,273 +0,0 @@
-var wko
-var backgroundImage
-var messageError
-var gameWidth = 0
-var gameHeight = 0
-const sizeFactor = 50
-var cellPixelSize
-var images = new Array()
-var visuals = new Array()
-var sounds = new Map()
-
-function preload() {
-  loadAllImages()
-  wko = loadImage("./wko.png")
-  defaultBackground = loadImage("./background.jpg")
-  socket.on("sizeCanvasInic", (size) => {
-      gameWidth = size[0]
-      gameHeight = size[1]
-      resizeCanvas(gameWidth, gameHeight)
-  })
-  socket.on("cellPixelSize", (size) => {
-    cellPixelSize = size
-  })
-}
-
-function setup() {
-  createCanvas(windowWidth - 20, windowHeight - 20)
-  socket.on("updateSound", (data) => {
-    updateSound(data.soundInstances)
-  })
-  loadBackground()
-  loadVisuals()
-  socket.emit("ready")
-}
-
-function draw() {
-  clear()
-  if (backgroundImage) background(backgroundImage)
-  drawVisuals()
-  checkError()
-}
-
-function checkError() {
-  socket.on("errorDetected", (errorM) => {
-    messageError = errorM
-  })
-  if (messageError) {
-    noLoop()
-    clear()
-    let title = createDiv("Uh-oh... An error occurred during the run:")
-    title.style("font-size", "22px")
-    title.style("color", "red")
-    title.position(10, 0)
-    let div = createDiv(messageError)
-    div.style("font-size", "16px")
-    div.style("color", "red")
-    div.position(10, 30)
-  }
-}
-
-function loadBackground() {
-  socket.on("background", (fondo) => {
-    const imagen = images.find((img) => img.name == fondo)
-    backgroundImage =
-      fondo != "default" && imagen != null
-        ? imagen.url
-        : defaultBackground
-  })
-}
-
-function loadAllImages() {
-  socket.on("images", (img) => {
-    for (i = 0 ; i < img.length ; i++) {
-      images.push({ name: img[i].name, url: loadImage(`${img[i].url}`) })
-    }
-  })
-}
-
-function loadVisuals() {
-  socket.on("visuals", (visualsList) => {
-    visuals = visualsList
-  })
-}
-
-function drawVisuals() {
-  if (visuals) {
-    for (i = 0 ; i < visuals.length ; i++) {
-      var positionX = visuals[i].position.x * cellPixelSize
-      var y = gameHeight - visuals[i].position.y * cellPixelSize
-      var img = images.find((img) => img.name == visuals[i].image)
-      var positionY = img ? y - img.url.height : y - wko.height
-      if (img) image(img.url, positionX, positionY)
-      else {
-        image(wko, positionX, positionY)
-        drawNotFound("Image\n not \nfound", positionX, positionY)
-      }
-      if (visuals[i].message) {
-        drawMessage(visuals[i].message, positionX, positionY)
-      }
-    }
-  }
-}
-
-function drawNotFound(message, positionX, positionY) {
-  const limit = { x: sizeFactor, y: sizeFactor * 3 }
-  textSize(14)
-  textStyle("bold")
-  fill("black")
-  textAlign("center")
-  noStroke()
-  text(message, positionX - 1, positionY + 5, limit.x, limit.y)
-}
-
-function keyPressed() {
-  socket.emit("keyPressed", { key: key, keyCode: keyCode })
-}
-
-function drawMessage(message, positionX, positionY) {
-  const TEXT_STYLE = "bold"
-  const TEXT_SIZE = 14
-  var messagePosition = { x: positionX, y: positionY + 1 }
-  drawMessageBackground(message, messagePosition)
-  const position = messageTextPosition(messagePosition)
-  const limit = { x: sizeFactor * 3, y: sizeFactor * 3 }
-  textSize(TEXT_SIZE)
-  textStyle(TEXT_STYLE)
-  fill("black")
-  textAlign("left")
-  noStroke()
-  text(message, position.x, position.y, limit.x, limit.y)
-}
-
-//___________________________________________________________
-
-function drawMessageBackground(message, messagePosition) {
-  var size = messageSize(message)
-  const position = messageBackgroundPosition(messagePosition)
-  fill("white")
-  rect(position.x, position.y, size.x, size.y, 5, 15, 10, 0)
-}
-
-function messageSize(message) {
-  const sizeLimit = { x: sizeFactor * 3, y: sizeFactor * 3 }
-  const textWid = textWidth(message)
-  const xSize = Math.min(textWid, sizeLimit.x) + 10
-  const ySize =
-    Math.min(
-      ((sizeFactor - 15) * Math.ceil(textWid / sizeLimit.x)) / 2,
-      sizeLimit.y
-    ) + 10
-  return { x: xSize, y: ySize }
-}
-
-function messageBackgroundPosition(message) {
-  const xPosition = messageTextPosition(message).x - 5
-  const yPosition = messageTextPosition(message).y - 5
-  return { x: xPosition, y: yPosition }
-}
-
-function messageTextPosition(message) {
-  return { x: messageXPosition(message), y: messageYPosition(message) }
-}
-
-function messageXPosition(message) {
-  const xPos = message.x + sizeFactor
-  const width = messageSize(message).x
-  const inverseXPos = message.x - width
-
-  return xPositionIsOutOfCanvas(xPos, width) ? inverseXPos : xPos
-}
-
-function xPositionIsOutOfCanvas(xPosition, width) {
-  return xPosition + width > gameWidth
-}
-
-function yPositionIsOutOfCanvas(yPosition) {
-  return yPosition < 0
-}
-
-function messageYPosition(message) {
-  const messageSizeOffset = messageSize(message).y * 1.05
-  const yPos = message.y - messageSizeOffset
-  const inverseYPos = 1
-
-  return yPositionIsOutOfCanvas(yPos) ? inverseYPos : yPos
-}
-
-//___________________________________________________________
-
-function updateSound(soundInstances) {
-  soundInstances = soundInstances ?? []
-
-  for (const [id, sound] of sounds.entries()) {
-    if (!soundInstances.some((sound) => sound[0] === id)) {
-      sound.stopSound()
-      sounds.delete(id)
-    } else {
-      sound.playSound()
-    }
-  }
-
-  soundInstances.forEach((soundInstance) => {
-    const soundState = {
-      id: soundInstance[0],
-      file: soundInstance[1], //soundInstance.file,
-      status: soundInstance[2], //soundInstance.status,
-      volume: soundInstance[3], //audioMuted ? 0 : soundInstance.volume,
-      loop: soundInstance[4], //soundInstance.loop,
-    }
-
-    let sound = sounds.get(soundState.id)
-    if (!sound) {
-      const soundPath = soundState.file
-      sound = new GameSound(soundState, soundPath)
-      sounds.set(soundState.id, sound)
-    }
-
-    sound?.update(soundState)
-  })
-}
-
-class GameSound {
-  lastSoundState //: SoundState
-  soundFile //: SoundFile
-  started //: boolean
-  toBePlayed //: boolean
-
-  constructor(lastSoundState, soundPath) {
-    this.lastSoundState = lastSoundState
-    this.soundFile = loadSound(soundPath)
-    this.started = false
-    this.toBePlayed = false
-  }
-
-  isLoaded() {
-    return this.soundFile.isLoaded()
-  }
-
-  canBePlayed(newSoundState) {
-    return (
-      (this.lastSoundState.status !== newSoundState.status || !this.started) &&
-      this.isLoaded()
-    )
-  }
-
-  update(newSoundState) {
-    this.soundFile.setLoop(newSoundState.loop)
-    this.soundFile.setVolume(newSoundState.volume)
-    this.toBePlayed = this.canBePlayed(newSoundState)
-    this.lastSoundState = newSoundState
-  }
-
-  playSound() {
-    if (this.toBePlayed) {
-      this.started = true
-
-      switch (this.lastSoundState.status) {
-        case "played":
-          this.soundFile.play()
-          break
-        case "paused":
-          this.soundFile.pause()
-          break
-        case "stopped":
-          this.soundFile.stop()
-      }
-    }
-  }
-
-  stopSound() {
-    this.soundFile.stop()
-  }
-}
diff --git a/src/commands/run.ts b/src/commands/run.ts
index f1a0eb3..ef92211 100644
--- a/src/commands/run.ts
+++ b/src/commands/run.ts
@@ -6,11 +6,11 @@ import http from 'http'
 import logger from 'loglevel'
 import { join, relative } from 'path'
 import { Server, Socket } from 'socket.io'
-import { Image, VisualState, buildKeyPressEvent, canvasResolution, queueEvent, visualState, wKeyCode } from 'wollok-game-web/dist/utils'
+import { Asset, SoundState, VisualState, boardState, buildKeyPressEvent, queueEvent, soundState, visualState } from 'wollok-game-web/dist/utils'
 import { Environment, GAME_MODULE, Interpreter, Name, Package, RuntimeObject, WollokException, interpret, link, WRENatives as natives, parse } from 'wollok-ts'
 import { logger as fileLogger } from '../logger'
 import { getDataDiagram } from '../services/diagram-generator'
-import { ENTER, buildEnvironmentForProject, buildEnvironmentIcon, failureDescription, folderIcon, gameIcon, handleError, isImageFile, programIcon, publicPath, readPackageProperties, serverError, stackTrace, successDescription, validateEnvironment, valueDescription } from '../utils'
+import { ENTER, buildEnvironmentForProject, buildEnvironmentIcon, failureDescription, folderIcon, gameIcon, handleError, isValidAsset, isValidImage, isValidSound, programIcon, publicPath, readPackageProperties, serverError, stackTrace, successDescription, validateEnvironment, valueDescription } from '../utils'
 import { TimeMeasurer } from './../time-measurer'
 
 const { time, timeEnd } = console
@@ -91,17 +91,8 @@ export const getGameInterpreter = (environment: Environment, io: Server): Interp
             const game = interpreter?.object('wollok.game.game')
             const visuals = getVisuals(game, interpreter)
             io.emit('visuals', visuals)
-
-            const gameSounds = game.get('sounds')?.innerCollection ?? []
-            const mappedSounds = gameSounds.map(sound =>
-              [
-                sound.id,
-                sound.get('file')!.innerString!,
-                sound.get('status')!.innerString!,
-                sound.get('volume')!.innerNumber!,
-                sound.get('loop')!.innerBoolean!,
-              ])
-            io.emit('updateSound', { soundInstances: mappedSounds })
+            const sounds = getSounds(game)
+            io.emit('sounds', sounds)
           } catch (error: any) {
             logger.error(failureDescription(error instanceof WollokException ? error.message : 'Exception while executing the program'))
             const debug = logger.getLevel() <= logger.levels.DEBUG
@@ -149,7 +140,7 @@ export const initializeGameClient = ({ project, assets, host, port, game }: Opti
 }
 
 export async function initializeDynamicDiagram(programPackage: Package, options: Options, interpreter: Interpreter): Promise<DynamicDiagramClient> {
-  if (!options.startDiagram || !options.game) return { onReload: () => {} }
+  if (!options.startDiagram || !options.game) return { onReload: () => { } }
 
   const app = express()
   const server = http.createServer(app)
@@ -189,28 +180,31 @@ export async function initializeDynamicDiagram(programPackage: Package, options:
 
 export const eventsFor = (io: Server, interpreter: Interpreter, dynamicDiagramClient: DynamicDiagramClient, { game, project, assets }: Options): void => {
   if (!game) return
-  const sizeCanvas = canvasResolution(interpreter)
+  const baseFolder = join(project, assets)
+  if (!existsSync(baseFolder))
+    logger.warn(failureDescription(`Resource folder for images not found: ${assets}`))
+
+
+  const assetFiles = getAllAssets(project, assets)
 
   io.on('connection', socket => {
     logger.info(successDescription('Running game!'))
-    socket.on('keyPressed', key => {
-      queueEvent(interpreter, buildKeyPressEvent(interpreter, wKeyCode(key.key, key.keyCode)), buildKeyPressEvent(interpreter, 'ANY'))
+    socket.on('keyPressed', (events: string[]) => {
+      queueEvent(interpreter, ...events.map(code => buildKeyPressEvent(interpreter, code)))
     })
 
-    const gameSingleton = interpreter?.object('wollok.game.game')
-    const background = gameSingleton.get('boardGround') ? gameSingleton.get('boardGround')?.innerString : 'default'
-
-    const baseFolder = join(project, assets)
-    if (!existsSync(baseFolder))
-      logger.warn(failureDescription(`Resource folder for images not found: ${assets}`))
-
-    // send assets only when frontend is ready
+    const gameSingleton = interpreter.object('wollok.game.game')
+    // wait for client to be ready
     socket.on('ready', () => {
       logger.info(successDescription('Ready!'))
-      socket.emit('images', getImages(project, assets))
-      socket.emit('sizeCanvasInic', [sizeCanvas.width, sizeCanvas.height])
-      socket.emit('cellPixelSize', gameSingleton.get('cellSize')!.innerNumber!)
-      socket.emit('background', background)
+
+      // send static data
+      socket.emit('board', boardState(gameSingleton))
+      socket.emit('images', assetFiles.filter(isValidImage))
+      socket.emit('music', assetFiles.filter(isValidSound))
+
+      // then start the game
+      socket.emit('start')
     })
 
     const flushInterval = 100
@@ -239,31 +233,28 @@ export const eventsFor = (io: Server, interpreter: Interpreter, dynamicDiagramCl
   })
 }
 
-export const getImages = (projectPath: string, assetsFolder: string): Image[] => {
+export const getAllAssets = (projectPath: string, assetsFolder: string): Asset[] => {
   const baseFolder = join(projectPath, assetsFolder)
   if (!existsSync(baseFolder))
     throw `Folder image ${baseFolder} does not exist`
 
   const fileRelativeFor = (fileName: string) => ({ name: fileName, url: fileName })
 
-  const loadImagesIn = (basePath: string): Image[] =>
+  const loadImagesIn = (basePath: string): Asset[] =>
     fs.readdirSync(basePath, { withFileTypes: true })
       .flatMap((file: Dirent) =>
         file.isDirectory() ? loadImagesIn(join(basePath, file.name)) :
-        isImageFile(file) ? [fileRelativeFor(relative(baseFolder, join(basePath, file.name)))] : []
+          isValidAsset(file) ? [fileRelativeFor(relative(baseFolder, join(basePath, file.name)))] : []
       )
 
   return loadImagesIn(baseFolder)
 }
 
 export const getVisuals = (game: RuntimeObject, interpreter: Interpreter): VisualState[] =>
-  (game.get('visuals')?.innerCollection ?? []).map(visual => {
-    const { image, position, message } = visualState(interpreter, visual)
-    const messageTime = Number(visual.get('messageTime')?.innerValue)
-    const messageForVisual = message != undefined && messageTime > timer ? message : undefined
-    return { 'image': image, 'position': position, 'message': messageForVisual }
-  })
+  (game.get('visuals')?.innerCollection ?? []).map(visual => visualState(interpreter, visual))
 
+export const getSounds = (game: RuntimeObject): SoundState[] =>
+  (game.get('sounds')?.innerCollection ?? []).map(soundState)
 
 export const getSoundsFolder = (projectPath: string, assetsOptions: string | undefined): string =>
   fs.readdirSync(projectPath).includes('sounds') ? 'sounds' : assetsOptions ?? 'assets'
diff --git a/src/utils.ts b/src/utils.ts
index b2d6098..f80b36c 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -4,6 +4,7 @@ import { readFile } from 'fs/promises'
 import globby from 'globby'
 import logger from 'loglevel'
 import path, { join } from 'path'
+import { Asset, VALID_IMAGE_EXTENSIONS, VALID_SOUND_EXTENSIONS } from 'wollok-game-web/dist/utils'
 import { Environment, Problem, WOLLOK_EXTRA_STACK_TRACE_HEADER, buildEnvironment, validate } from 'wollok-ts'
 import { replNode } from './commands/repl'
 
@@ -132,8 +133,14 @@ export const readPackageProperties = (pathProject: string): any | undefined => {
   return JSON.parse(fs.readFileSync(packagePath, { encoding: 'utf-8' }))
 }
 
-const imageExtensions = ['png', 'jpg']
-export const isImageFile = (file: Dirent): boolean => imageExtensions.some(extension => file.name.endsWith(extension))
+interface Named {
+  name: string
+}
+
+const assetsExtensions = VALID_IMAGE_EXTENSIONS.concat(VALID_SOUND_EXTENSIONS)
+export const isValidAsset = (file: Named): boolean => assetsExtensions.some(extension => file.name.endsWith(extension))
+export const isValidImage = (file: Named): boolean => VALID_IMAGE_EXTENSIONS.some(extension => file.name.endsWith(extension))
+export const isValidSound = (file: Named): boolean => VALID_SOUND_EXTENSIONS.some(extension => file.name.endsWith(extension))
 
 // ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
 // WOLLOK AST
diff --git a/test/run.test.ts b/test/run.test.ts
index 9533ae7..0d88c42 100644
--- a/test/run.test.ts
+++ b/test/run.test.ts
@@ -2,7 +2,7 @@ import chai from 'chai'
 import { mkdirSync, rmdirSync } from 'fs'
 import { join } from 'path'
 import sinon from 'sinon'
-import run, { Options, buildEnvironmentForProgram, getAssetsFolder, getGameInterpreter, getImages, getSoundsFolder, getVisuals, initializeGameClient } from '../src/commands/run'
+import run, { Options, buildEnvironmentForProgram, getAssetsFolder, getGameInterpreter, getAllAssets, getSoundsFolder, getVisuals, initializeGameClient } from '../src/commands/run'
 import { spyCalledWithSubstring } from './assertions'
 import { logger as fileLogger } from '../src/logger'
 
@@ -95,7 +95,7 @@ describe('testing run', () => {
     const imageProject = join('examples', 'run-examples', 'asset-example')
 
     it('should return all images for a single assets folder', () => {
-      expect(getImages(project, 'assets')).to.deep.equal(
+      expect(getAllAssets(project, 'assets')).to.deep.equal(
         [
           {
             'name': join('pepita.png'),
@@ -106,7 +106,7 @@ describe('testing run', () => {
     })
 
     it('should return all images in assets folder recursively', () => {
-      expect(getImages(imageProject, 'assets')).to.deep.equal(
+      expect(getAllAssets(imageProject, 'assets')).to.deep.equal(
         [
           {
             'name': join('medium', '3.png'),
@@ -125,7 +125,7 @@ describe('testing run', () => {
     })
 
     it('should return all images even if assets folder is not present', () => {
-      expect(getImages(imageProject, '')).to.deep.equal(
+      expect(getAllAssets(imageProject, '')).to.deep.equal(
         [
           {
             'name': join('assets', 'medium', '3.png'),
@@ -144,7 +144,7 @@ describe('testing run', () => {
     })
 
     it('should throw error for unexistent folder', () => {
-      expect(() => { getImages(imageProject, 'unexistentFolder') }).to.throw(/does not exist/)
+      expect(() => { getAllAssets(imageProject, 'unexistentFolder') }).to.throw(/does not exist/)
     })
 
   })