+
@if (modeService.getMode() === 'teacher') {
@@ -28,5 +28,14 @@
}
-
+
+ @for (obj of sceneObjects; track obj.id) {
+
![]()
+ }
+
+
+
diff --git a/src/app/components/scene/scene.component.ts b/src/app/components/scene/scene.component.ts
index e44623f..f1f340b 100644
--- a/src/app/components/scene/scene.component.ts
+++ b/src/app/components/scene/scene.component.ts
@@ -12,11 +12,13 @@ import {
import {SceneObject} from '../../models/scene-object';
import {ButtonComponent} from '../button/button.component';
import {ModeService} from '../../services/mode.service';
+import {NgClass} from '@angular/common';
@Component({
selector: 'blearn-scene',
imports: [
- ButtonComponent
+ ButtonComponent,
+ NgClass
],
templateUrl: './scene.component.html',
})
@@ -27,11 +29,15 @@ export class SceneComponent implements AfterViewInit {
@ViewChild('scene') scene!: ElementRef;
@Input() isRunning = signal
(false);
+ @Input() sceneObjects: SceneObject[] = [];
+ @Input() selectedObject = signal(undefined);
+
@Output() runCode = new EventEmitter();
- @Output() stopCode = new EventEmitter();
+ @Output() sceneObjectsChange = new EventEmitter();
+ @Output() objectAdded = new EventEmitter();
+ @Output() objectSelected = new EventEmitter();
private ctx: CanvasRenderingContext2D | null = null;
- protected sceneObjects: Array = [];
private draggingObject: SceneObject | null = null;
private offsetX: number = 0;
private offsetY: number = 0;
@@ -47,35 +53,32 @@ export class SceneComponent implements AfterViewInit {
this.canvas.nativeElement.width = this.scene.nativeElement.offsetWidth;
this.canvas.nativeElement.height = this.scene.nativeElement.offsetHeight;
- // Create an image object
- const img = new Image();
- img.src = 'https://avatars.githubusercontent.com/u/105555875?v=4'; // Replace with your image URL
- img.onload = () => {
- // Once the image is loaded, draw it to the canvas
- this.sceneObjects.push({img, x: 50, y: 50, rotation: 0, width: 100, height: 100});
- this.drawImages();
- };
+ const imageLoadPromises = this.sceneObjects.map(obj => {
+ return new Promise((resolve) => {
+ const img = new Image();
+ img.src = obj.imgSrc;
+ img.onload = () => {
+ obj.img = img;
+ resolve();
+ }
+ });
+ });
- // Set up mouse event listeners for dragging
+ Promise.all(imageLoadPromises).then(() => this.drawImages());
this.setupMouseEvents();
}
protected addObject() {
- const img = new Image();
- img.src = 'https://avatars.githubusercontent.com/u/105555875?v=4'; // Replace with your image URL
- img.onload = () => {
- // Once the image is loaded, draw it to the canvas
- this.sceneObjects.push({img, x: 50, y: 50, rotation: 0, width: 100, height: 100});
- this.drawImages();
- };
+ this.objectAdded.emit();
}
private setupMouseEvents() {
this.canvas.nativeElement.addEventListener('mousedown', (e: MouseEvent) => {
+ if (this.isRunning()) return;
+
const mouseX = e.offsetX;
const mouseY = e.offsetY;
- // Check if the mouse click is on one of the images
for (let sceneObj of this.sceneObjects) {
if (mouseX >= sceneObj.x && mouseX <= sceneObj.x + sceneObj.width && mouseY >= sceneObj.y && mouseY <= sceneObj.y + sceneObj.height) {
this.draggingObject = sceneObj;
@@ -86,6 +89,8 @@ export class SceneComponent implements AfterViewInit {
});
this.canvas.nativeElement.addEventListener('mousemove', (e: MouseEvent) => {
+ if (this.isRunning()) return;
+
if (this.draggingObject) {
const mouseX = e.offsetX;
const mouseY = e.offsetY;
@@ -99,50 +104,45 @@ export class SceneComponent implements AfterViewInit {
});
this.canvas.nativeElement.addEventListener('mouseup', () => {
+ if (this.isRunning()) return;
+
+ if (this.draggingObject !== null) this.sceneObjectsChange.emit();
this.draggingObject = null;
});
this.canvas.nativeElement.addEventListener('mouseleave', () => {
+ if (this.isRunning()) return;
+
this.draggingObject = null;
});
}
- private drawImages() {
+ public drawImages() {
if (!this.ctx) return;
- // Clear the canvas
this.ctx.clearRect(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);
- // Draw each image on the canvas
- for (let imgObj of this.sceneObjects) {
- this.ctx.drawImage(imgObj.img, imgObj.x, imgObj.y, imgObj.width, imgObj.height);
- }
- }
-
- moveTo(x: number, y: number) {
- if (this.sceneObjects.length > 0) {
- const obj = this.sceneObjects[0];
- obj.x = x;
- obj.y = y;
- this.drawImages();
- }
- }
-
- moveForward(steps: number) {
- const obj = this.sceneObjects[0];
- obj.x += steps;
- this.drawImages();
- }
-
- setDirection(angle: number) {
-
- }
+ for (let obj of this.sceneObjects) {
+ this.ctx.save();
- turnLeft(angle: number) {
-
- }
+ if (obj.id === this.selectedObject()) {
+ this.ctx.shadowColor = 'red';
+ this.ctx.shadowBlur = 20;
+ this.ctx.shadowOffsetX = 0;
+ this.ctx.shadowOffsetY = 0;
+ }
- turnRight(angle: number) {
+ if (!obj.img) {
+ const img = new Image();
+ img.src = obj.imgSrc;
+ img.onload = () => {
+ obj.img = img;
+ this.ctx?.drawImage(obj.img!, obj.x, obj.y, obj.width, obj.height);
+ }
+ } else
+ this.ctx.drawImage(obj.img!, obj.x, obj.y, obj.width, obj.height);
+ this.ctx.restore();
+ }
}
}
diff --git a/src/app/layout/header/header.component.html b/src/app/layout/header/header.component.html
index 0b30345..4b6dd3d 100644
--- a/src/app/layout/header/header.component.html
+++ b/src/app/layout/header/header.component.html
@@ -17,5 +17,6 @@
teacherStyle="bg-student text-white"
(click)="switchMode()"
data-testid="button"
+ routerLink=""
/>
diff --git a/src/app/models/activity.ts b/src/app/models/activity.ts
index bafd458..ef5d936 100644
--- a/src/app/models/activity.ts
+++ b/src/app/models/activity.ts
@@ -1,3 +1,5 @@
+import {SceneObject} from './scene-object';
+
export interface Activity {
id: string,
title: string,
@@ -7,5 +9,6 @@ export interface Activity {
toolboxInfo: {
BLOCK_LIMITS: { [key: string]: number },
toolboxDefinition: string,
- }
+ },
+ sceneObjects: SceneObject[]
}
diff --git a/src/app/models/scene-object.ts b/src/app/models/scene-object.ts
index 0fdd024..4a6dc8e 100644
--- a/src/app/models/scene-object.ts
+++ b/src/app/models/scene-object.ts
@@ -1,8 +1,34 @@
-export interface SceneObject {
- img: HTMLImageElement;
- x: number;
- y: number;
- rotation: number;
- width: number;
- height: number;
+export class SceneObject {
+ constructor(
+ public id: string,
+ public imgSrc: string,
+ public x: number,
+ public y: number,
+ public rotation: number,
+ public width: number,
+ public height: number,
+ public workspace: string,
+ public img?: HTMLImageElement,
+ ) {}
+
+ moveForward(steps: number) {
+ this.x += steps;
+ }
+
+ moveTo(x: number, y: number) {
+ this.x = x;
+ this.y = y;
+ }
+
+ setDirection(angle: number) {
+
+ }
+
+ turnLeft(angle: number) {
+
+ }
+
+ turnRight(angle: number) {
+
+ }
}
diff --git a/src/app/pages/activity-detail/activity-detail.component.html b/src/app/pages/activity-detail/activity-detail.component.html
index 924949a..bc04cc1 100644
--- a/src/app/pages/activity-detail/activity-detail.component.html
+++ b/src/app/pages/activity-detail/activity-detail.component.html
@@ -46,15 +46,19 @@
[workspaceJSON]="activity()!.workspace"
[BLOCKS_LIMITS]="BLOCK_LIMITS"
(openModal)="openBlocksModal()"
- (updateLimits)="updateToolboxLimits(workspace)"
+ (updateLimits)="updateToolboxLimits()"
(saveWorkspace)="saveWorkspace(false)"
/>