From 8e5cc1bc440a66c7aa63e78953b73aa90971bad5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= Date: Thu, 20 Jul 2023 00:33:32 +0200 Subject: [PATCH] Added sliding to the partition but some issues --- .../PartitionVisualizer/PhaserCanvas.tsx | 24 ++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/front/components/PartitionVisualizer/PhaserCanvas.tsx b/front/components/PartitionVisualizer/PhaserCanvas.tsx index 1456c3f..6d65a10 100644 --- a/front/components/PartitionVisualizer/PhaserCanvas.tsx +++ b/front/components/PartitionVisualizer/PhaserCanvas.tsx @@ -3,13 +3,14 @@ import * as React from 'react'; import { useEffect, useRef } from 'react'; import Phaser from 'phaser'; +import useColorScheme from '../../hooks/colorScheme'; import { Asset, useAssets } from 'expo-asset'; import { use } from 'matter'; const b64data = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAGKDAGaAAAFgUlEQVRYw7WXa2wUVRTH/20p7fZBW0p5iAplaUELCqEFlUCMYKwJKMYgaEwIUpQYNCIWRYgvQtTS6AeiKEqIQDBIAEFAEEm1DUVUoIqPVqhCC/IoammhC9vt/vywM7szu7NLLfHMl7n3nP/533vuPefMSHap8wNIoG57pxIYSErZDyCgB8qogTYUeKT+v2C+SlLanqA3v4EBwSdAasAI4CUUcA7wRsiBMbDIjQDQd4M0ogimtkrbMWSgAVzibUIouTIwfc4kJaVIkpT+PTxLiGplkHCo6Wq+uSOydlrYl3jD1xOSAQ5zdzcA1CJJK/ygOEk91kIhAMsQmeMDq9MRg7ojGExIINkrOAm8D4DHSg9QwiQApiDmeQzFWaDE2LUQ4DXjedimsAQaShgbqXj4NM4ISZpmVeTbdt6vGISrWtElfs76Fuig9+9hij7qFjbTs6GecEnxSdKa4DjbK0nFrzWFTI4yE/jVsvDsMaauP0JxX0ARviBgOg0A3GnZaVpO4N3llZRYYZrez8dhC/KRxrBVYSt37TPVgSh6GQN8FFxSQPLOqbsBSP3Wy2gLwJIRQcC91mPIOGyaTaTKARBxbllH7EtqZkJsgCRlvrTbF21JQiS3KN7pkFNH/BMOiJ+nq8vQTTNI8ChZnZabXJs7bxzf9zjAO/8kTLfNxynXwTpze6PlnG8/o16B+fzTfqCRgq1W62nXtYff1X1orjRiqzn2M8TgySlqAFjNuqDxFdIRKpWeag/Vo7zfJWXXei1ep3AaKDYDWypNvhLQnETk1+kWf/hC3iUrdGil0i3lAE8iRM/r1cpm3g0aNzAdgB8sACnvm8Bo0AuSLgLwKMeBQjosTEuCAJu0BSPgjsjo5WS0KyUM4Amqf6aO2cFRPUKU0cLAOhvgsgUAUM4u/PQz9lAGwC5/75eDgFlhAHuxKzNmynGtMwDtvMWOmIBahEjbYAACBWYCzY6A18kx3jI2WXolQJvRKMLqb6g5bbO0AnMPlbwSFdBrpwMA4FkOOwJ6mw08q/J8jChZnhtCR9HdfTo2IP6JyGQrfKbVGZBeETWdB723PwzQ/ZISr1IDchs9IcCtnasbWWMvCC3SNUhm2ophJ2raq9pyjycvjbju1yTje/604IzHllMXmH0256BGRBoPTipaO/jv4ktTPaNaC+rd02I5dqUsdTdUXiaGfOYbdKbPi2bnLkjLO3cszGJx+00fRLoemXlg1qkLVDOOxVyM6v4MM4kLlpQh6cObI22OIcatNh0nJj3X/8S2S3aTFhZwJ9/Z5raTZ71npZKUOWVxhPtDuBD5jZI7c+8DJ8/Giga7GcObzCMxMkFKJWlUYm6ztU0cYbihH7lccbv3cw9z+Tuq+yrG8gptNDGHBEcCSXGDjz7NDG6zWQyYLylhTyDSl1nK7VRYHLfxKmOpjCDcaH5dR5T1obPddekel9f95/BPs/ubwa+wB76acTzPRJ6hOWbYGnkEEb/wqlc96eu2CHAJ1cznLg5Fdf8lBQjxBqv87qbcx2MQJFd5HAjMyrSD0bxN6ABbWUiSQ9f4jQnNA7epjwNBSvWVGATmrX+M+xjjUGbLbHbtLLvU7w/dYf/0OrCV0ZTjjUEQ/WOxzJYh+QiRut5GkP6dz/jBms0kartA0ByWIekbbQQ9DnXYHG2gkIJOE7gc5jK32AgyavwOZ/A504N/AjG/px2entvtxf5Hoh5yByspZMN/JMjZbQ/RwRrf1W5RLZMY3Pkd7Ii8q5N71y9rae/CLbI/PY5qfKyk7ttvy13nj3aBIN6XslwZnW2TcX1KMlre8vk7RZB6QsVd7ccD3dUPXTwVhSCuI+lD80fi2iQhb1H+X5ssBEmn9KD+B7k54yut0XX/HfgvpUkmTvPggOsAAAAASUVORK5CYII='; -const getPianoScene = (partitionB64: string) => { +const getPianoScene = (partitionB64: string, colorScheme: 'light' | 'dark') => { class PianoScene extends Phaser.Scene { async preload() { // this.load.setBaseURL('http://labs.phaser.io'); @@ -22,9 +23,24 @@ const getPianoScene = (partitionB64: string) => { this.textures.addBase64('cursor', b64data); this.textures.addBase64('raster', partitionB64); + //background color + this.cameras.main.setBackgroundColor(colorScheme === 'light' ? '#FFFFFF' : '#000000'); + // wait for the image to be loaded, then create the sprites this.textures.on('onload', () => { - const raster = this.add.image(300, 400, 'raster'); + //set the origin to the top-left of the sprite + const ras = this.add.image(0, 0, 'raster'); + ras.setOrigin(0, 0); + // add a sliding animation to the raster image + this.tweens.add({ + targets: ras, + x: ras.width * -1, + duration: 4000, + ease: 'Sine.easeInOut', + repeat: -1, + }); + + // const raster = this.add.image(0, 0, 'raster'); const group = this.add.group(); group.createMultiple({ key: 'cursor', repeat: 8 }); @@ -75,10 +91,11 @@ type PhaserCanvasProps = { }; const PhaserCanvas = ({ partitionB64 }: PhaserCanvasProps) => { + const colorScheme = useColorScheme(); const [game, setGame] = React.useState(null); useEffect(() => { - const PianoScene = getPianoScene(partitionB64); + const PianoScene = getPianoScene(partitionB64, colorScheme); const config = { type: Phaser.AUTO, @@ -90,6 +107,7 @@ const PhaserCanvas = ({ partitionB64 }: PhaserCanvasProps) => { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, + debugger: true, }; setGame(new Phaser.Game(config));