Selecting objects image and background

src/app/components/activity-list/activity-list.component.html

@@ -7,7 +7,7 @@
     studentStyle="{{style}} text-student border-student"
     teacherStyle="{{style}} text-teacher border-teacher"
   />
-  <div class="my-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 justify-items-center">
+  <div class="my-8 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 gap-6 justify-items-center">
     @for (activity of activityList(); track activity.id) {
       <blearn-activity
         [activity]="activity"

src/app/components/activity/activity.component.html

@@ -1,9 +1,12 @@
 <div class="min-h-52 min-w-80 relative">
-  <div
-    class="bg-gray-400 rounded-lg shadow-md w-90 h-52 transition-transform hover:scale-105 hover:cursor-pointer active:scale-95 duration-150"
-    routerLink="/activity/{{activity.id}}">
+  @if (activity.thumbnail) {
+    <img [src]="activity.thumbnail" [alt]="activity.id" routerLink="/activity/{{activity.id}}" class="rounded-lg shadow-md w-90 h-52 transition-transform hover:scale-105 hover:cursor-pointer active:scale-95 duration-150">
+  } @else {
+    <div
+      class="bg-gray-400 rounded-lg shadow-md w-90 h-52 clickable"
+      routerLink="/activity/{{activity.id}}"></div>
+  }
 
-  </div>
   <div class="py-2 px-4">
     <div class="flex justify-between items-center relative">
       <div>

src/app/components/activity/activity.component.spec.ts

@@ -23,7 +23,9 @@ describe('ActivityComponent', () => {
     toolboxInfo: {
       toolboxDefinition: '',
       BLOCK_LIMITS: {}
-    }
+    },
+    sceneObjects: [],
+    thumbnail: ''
   };
 
   it('should toggle the menu when clicking the button', async () => {

src/app/components/blocks-modal/blocks-modal.component.ts

@@ -1,5 +1,5 @@
 import {AfterViewInit, Component, EventEmitter, Input, Output, signal} from '@angular/core';
-import {ButtonComponent} from '../button/button.component';
+import {ButtonComponent} from '../../layout/button/button.component';
 import * as Blockly from 'blockly';
 
 @Component({

src/app/components/description-modal/description-modal.component.ts

@@ -1,5 +1,5 @@
 import {Component, EventEmitter, inject, Input, Output, signal} from '@angular/core';
-import {ButtonComponent} from '../button/button.component';
+import {ButtonComponent} from '../../layout/button/button.component';
 import {Activity} from '../../models/activity';
 import {FormsModule} from '@angular/forms';
 import {ModeService} from '../../services/mode.service';

src/app/components/images-modal/images-modal.component.html

@@ -0,0 +1,20 @@
+<div class="fixed inset-0 flex justify-center items-center bg-black bg-opacity-50 z-50">
+  <div class="bg-white rounded-lg shadow-xl w-[50rem] max-h-[100vh]">
+    <div class="flex flex-row p-6 justify-between shadow-md">
+      <h2 class="text-4xl">{{ backgrounds ? 'Select the new background' : 'Select the new character' }}</h2>
+      <blearn-button
+        icon="xmark"
+        teacherStyle="bg-red-500 text-white"
+        (click)="close.emit()"
+      />
+    </div>
+
+    <div class="grid grid-cols-3 justify-items-center">
+      @let paths = backgrounds ? backgroundPaths : charactersPaths;
+      @for (path of paths; track path) {
+        <img [src]="path" [ngClass]="[backgrounds ? 'w-[14rem] h-40' : 'w-40 h-40', 'm-4 rounded-md clickable']"
+             [alt]="path" (click)="imageSelected.emit(path)">
+      }
+    </div>
+  </div>
+</div>

src/app/components/images-modal/images-modal.component.ts

@@ -0,0 +1,32 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {ButtonComponent} from "../../layout/button/button.component";
+import {NgClass} from '@angular/common';
+
+@Component({
+  selector: 'blearn-images-modal',
+  imports: [
+    ButtonComponent,
+    NgClass
+  ],
+  templateUrl: './images-modal.component.html',
+})
+export class ImagesModalComponent {
+  @Input() backgrounds = false;
+  @Output() imageSelected = new EventEmitter<string>();
+  @Output() close = new EventEmitter<void>();
+
+  protected backgroundPaths = [
+    '/backgrounds/desert.webp',
+    '/backgrounds/forest.webp',
+    '/backgrounds/winter.webp',
+    '/backgrounds/underwater.webp',
+  ];
+
+  protected charactersPaths = [
+    '/characters/cat.webp',
+    '/characters/dog.png',
+    '/characters/bird.png',
+    '/characters/turtle.png',
+    '/characters/fish.png',
+  ];
+}

src/app/components/scene-input/scene-input.component.html

@@ -0,0 +1,11 @@
+<label class="flex flex-row items-center space-x-2">
+  <span>{{ label }}</span>
+  <input
+    class="border-2 p-2 w-14 text-center rounded-full"
+    type="number"
+    [placeholder]="label"
+    [value]="value"
+    (input)="onChange($event)"
+    [disabled]="modeService.getMode() === 'student'"
+  >
+</label>

src/app/components/scene-input/scene-input.component.ts

@@ -0,0 +1,26 @@
+import {Component, EventEmitter, inject, Input, Output} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {ModeService} from '../../services/mode.service';
+
+@Component({
+  selector: 'blearn-scene-input',
+  imports: [
+    FormsModule
+  ],
+  templateUrl: './scene-input.component.html',
+})
+export class SceneInputComponent {
+  protected modeService = inject(ModeService);
+
+  @Input() label!: string;
+  @Input() value!: number;
+
+  @Output() valueChange = new EventEmitter<number>();
+
+  onChange(event: Event) {
+    const inputElement = event.target as HTMLInputElement;
+
+    const parsed = parseFloat(inputElement.value);
+    if (!isNaN(parsed)) this.valueChange.emit(parsed);
+  }
+}

src/app/components/scene/scene.component.html

@@ -1,11 +1,11 @@
-<div #scene class="flex flex-col h-full w-full">
-  <div class="flex flex-row justify-center">
+<main #scene class="flex flex-col h-full w-full px-4 py-2">
+  <div class="flex flex-row justify-center space-x-2 pb-2">
     <blearn-button
       icon="play"
       studentText="Run"
       teacherText="Run"
-      studentStyle="bg-green-500 text-white"
-      teacherStyle="bg-green-500 text-white"
+      studentStyle="bg-green-500 text-white py-2"
+      teacherStyle="bg-green-500 text-white py-2"
       (clicked)="runCode.emit()"
       [disabled]="isRunning()"
     />
@@ -20,22 +20,81 @@
     />
     @if (modeService.getMode() === 'teacher') {
       <blearn-button
-        icon="plus"
-        teacherText="Add"
+        icon="image"
+        teacherText="Change background"
         teacherStyle="bg-gray-500 text-white"
-        (clicked)="addObject()"
+        (clicked)="backgroundChange.emit()"
+        [disabled]="isRunning()"
       />
     }
   </div>
 
-  <div class="flex flex-row space-x-4">
-    @for (obj of sceneObjects; track obj.id) {
-      <img [src]="obj.imgSrc"
-           [alt]="obj.id"
-           [ngClass]="['w-24 h-24 rounded', selectedObject() === obj.id ? 'border-4 border-red-500' : '']"
-           (click)="objectSelected.emit(obj.id)">
+  <canvas #canvas class="w-[40rem] h-[26rem] border-transparent rounded-lg"></canvas>
+
+  <aside class="pt-4">
+    @let obj = selectedObject();
+    @if (obj) {
+      <div class="flex flex-row space-x-8 justify-center">
+        <blearn-scene-input
+          [value]="obj.x"
+          label="x"
+          (valueChange)="obj.x = $event; drawImages();"
+        />
+
+        <blearn-scene-input
+          [value]="obj.y"
+          label="y"
+          (valueChange)="obj.y = $event; drawImages();"
+        />
+
+        <blearn-scene-input
+          [value]="obj.size"
+          label="size"
+          (valueChange)="obj.size = $event; drawImages();"
+        />
+
+        <blearn-scene-input
+          [value]="obj.rotation"
+          label="rotation"
+          (valueChange)="obj.rotation = $event; drawImages();"
+        />
+      </div>
     }
-  </div>
 
-  <canvas #canvas class="w-full h-screen bg-gray-300"></canvas>
-</div>
+    <div>
+      <h3 class="text-2xl py-4"><strong>Scene Objects</strong></h3>
+
+      <div class="grid grid-cols-5 gap-4 justify-items-center">
+        @for (obj of sceneObjects; track obj.id) {
+          <img [src]="obj.imgSrc"
+               [alt]="obj.id"
+               [ngClass]="['w-24 h-24 rounded clickable', selectedObjectId() === obj.id ? 'border-4 border-red-500' : '']"
+               (click)="objectSelected.emit(obj.id)"
+               (contextmenu)="onRightClick($event, obj)"
+          >
+        }
+
+        @if (modeService.getMode() === 'teacher') {
+          <div
+            class="flex w-24 h-24 text-white border-2 border-gray-500 rounded clickable"
+            (click)="objectAdded.emit()">
+            <span class="fas fa-plus w-8 h-8 bg-gray-500 p-2 rounded-full m-auto"></span>
+          </div>
+        }
+      </div>
+    </div>
+
+    @if (contextMenuVisible && modeService.getMode() === 'teacher') {
+      <div
+        class="absolute z-50 bg-white border border-gray-300 shadow-lg rounded p-2 w-40"
+        [style.left.px]="contextMenuX"
+        [style.top.px]="contextMenuY"
+      >
+        <button class="w-full text-left px-2 py-1 hover:bg-gray-100" (click)="objectDuplicated.emit(contextMenuObject!.id)">Duplicate</button>
+        <button class="w-full text-left px-2 py-1 hover:bg-gray-100 text-red-600"
+                (click)="objectDeleted.emit(contextMenuObject!.id)">Delete
+        </button>
+      </div>
+    }
+  </aside>
+</main>