Feat/ multi language

2D/js/main.js

@@ -24,12 +24,12 @@ class MainApp {
       duplicate: new Image(),
       trash: new Image(),
     };
-    const as = '../assets/';
-    this.icons.flip.src = as + 'ic_flip.png';
-    this.icons.rotateLeft.src = as + 'ic_rotate_left.png';
-    this.icons.rotateRight.src = as + 'ic_rotate_right.png';
-    this.icons.duplicate.src = as + 'ic_duplicate.png';
-    this.icons.trash.src = as + 'ic_trash.png';
+    const as = '../assets/icons/';
+    this.icons.flip.src = as + 'flip.png';
+    this.icons.rotateLeft.src = as + 'rotate_left.png';
+    this.icons.rotateRight.src = as + 'rotate_right.png';
+    this.icons.duplicate.src = as + 'duplicate.png';
+    this.icons.trash.src = as + 'trash.png';
     this.gridBoard = new GridBoard(this.canvas, this.gridSize, this.rows, this.cols);
     this.guiController = new GUIController(this);
     this.toolbar = new Toolbar(this);

2D/js/popup/grid.js

@@ -36,7 +36,7 @@ export function showGridPopup(toolbar) {
 
   const assetsReady = Promise.all(
     iconRows.map((row) =>
-      loadImage(`../assets/ic_${row.icon}.png`).then((image) => {
+      loadImage(`../assets/icons/${row.icon}.png`).then((image) => {
         if (image) iconMap.set(row.icon, image);
       })
     )

2D/js/popup/setting.js

@@ -36,7 +36,7 @@ export function showSettingsPopup(toolbar) {
 
   const assetsReady = Promise.all(
     iconRows.map((row) =>
-      loadImage(`../assets/ic_${row.icon}.png`).then((image) => {
+      loadImage(`../assets/icons/${row.icon}.png`).then((image) => {
         if (image) iconMap.set(row.icon, image);
       })
     )

2D/js/popup/solve.js

@@ -75,7 +75,7 @@ export function showSolvePopup(toolbar) {
 
   const assetsReady = Promise.all(
     iconRows.map((row) =>
-      loadImage(`../assets/ic_${row.icon}.png`).then((image) => {
+      loadImage(`../assets/icons/${row.icon}.png`).then((image) => {
         if (image) iconMap.set(row.icon, image);
       })
     )

2D/js/popup/tutorial.js

@@ -85,8 +85,8 @@ export function showTutorialPopup(toolbar) {
 
   const iconMap = new Map();
   const allIconPaths = [
-    ...rows.filter((row) => row.icon).map((row) => `ic_${row.icon}.png`),
-    ...subIcons.map((icon) => `ic_${icon.path}.png`),
+    ...rows.filter((row) => row.icon).map((row) => `icons/${row.icon}.png`),
+    ...subIcons.map((icon) => `icons/${icon.path}.png`),
   ];
 
   const uniqueIconPaths = [...new Set(allIconPaths)];
@@ -160,7 +160,7 @@ export function showTutorialPopup(toolbar) {
       }
 
       if (row.icon) {
-        const icon = iconMap.get(`ic_${row.icon}.png`);
+        const icon = iconMap.get(`icons/${row.icon}.png`);
         if (icon) {
           ctx.drawImage(icon, popup.width - 64, y - 14, 50, 50);
         }
@@ -193,7 +193,7 @@ export function showTutorialPopup(toolbar) {
     });
 
     subIcons.forEach((subIcon) => {
-      const subIconImage = iconMap.get(`ic_${subIcon.path}.png`);
+      const subIconImage = iconMap.get(`icons/${subIcon.path}.png`);
       if (subIconImage) {
         ctx.drawImage(subIconImage, subIcon.x, subIcon.y, 25, 25);
       }

2D/js/toolbar.js

@@ -50,7 +50,7 @@ export class Toolbar {
   }
 
   preloadIcons() {
-    this.homeImage = this.preloadImage('../assets/ic_home.png');
+    this.homeImage = this.preloadImage('../assets/icons/home.png');
     this.buttons.forEach((button) => {
       button.image = this.preloadImage(button.icon);
     });
@@ -60,31 +60,31 @@ export class Toolbar {
     return [
       {
         name: 'Create Polyomino',
-        icon: '../assets/ic_plus.png',
+        icon: '../assets/icons/plus.png',
         action: () => this.togglePopup('polyomino'),
         description: 'To select available Polyomino blocks.\nAdd directly to canvas.',
       },
       {
         name: 'Grid Settings',
-        icon: '../assets/ic_table.png',
+        icon: '../assets/icons/table.png',
         action: () => this.togglePopup('grid'),
         description: 'To change the grid settings.\nAdjust rows, columns, and size.',
       },
       {
         name: 'Solving Polyomino',
-        icon: '../assets/ic_solving.png',
+        icon: '../assets/icons/solving.png',
         action: () => this.togglePopup('solve'),
         description: 'To solve the polyomino puzzle.\nUse different algorithms to solve.',
       },
       {
         name: 'Tutorial',
-        icon: '../assets/ic_question.png',
+        icon: '../assets/icons/question.png',
         action: () => this.togglePopup('tutorial'),
         description: 'To view the tutorial.\nLearn how to use the application.',
       },
       {
         name: 'Settings',
-        icon: '../assets/ic_setting.png',
+        icon: '../assets/icons/setting.png',
         action: () => this.togglePopup('settings'),
         description: 'To adjust application settings.\nChange colors, tooltips, and more.',
       },
@@ -408,7 +408,7 @@ export class Toolbar {
     }
 
     const closeIcon = new Image();
-    closeIcon.src = '../assets/ic_close.png';
+    closeIcon.src = '../assets/icons/close.png';
     closeIcon.style.position = 'fixed';
     Object.assign(closeIcon.style, {
       cursor: 'pointer',

2D/style.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 @font-face {
   font-family: 'Pixellari';
-  src: url('../assets/Pixellari.ttf') format('truetype');
+  src: url('../assets/fonts/Pixellari.ttf') format('truetype');
 }
 * {
   font-family: 'Pixellari', sans-serif;

3D/js/constants.js

@@ -382,43 +382,43 @@ export const TUTORIAL_POPUP_ROWS = [
     underline: true,
     icon: 'plus',
     description:
-      "Click this icon to open a menu.\n\nSteps to create a Polycube:\n\n1. Enter the desired number of cubes in the 'N° cubes' input field.\n2. Enter the position coordinates (x, y, z) for the Polycube.\n3. Use the 'Previous' [ic_arrow_left] and 'Next' [ic_arrow_right] buttons to navigate through highlighted cubes.\n4. Click 'Select' [ic_select] to add the highlighted cube to your Polycube.\n5. Click 'Undo' [ic_reset] to remove the last added cube.\n6. Click 'Create' to finalize and create the Polycube.\n7. Click 'Clear' to reset the Polycube creation and start over.\n8. Use the 'Info' button to display current Polycube information.",
+      "Click this icon to open a menu.\n\nSteps to create a Polycube:\n\n1. Enter the desired number of cubes in the 'N° cubes' input field.\n2. Enter the position coordinates (x, y, z) for the Polycube.\n3. Use the 'Previous' [icons/arrow_left] and 'Next' [icons/arrow_right] buttons to navigate through highlighted cubes.\n4. Click 'Select' [icons/select] to add the highlighted cube to your Polycube.\n5. Click 'Undo' [icons/reset] to remove the last added cube.\n6. Click 'Create' to finalize and create the Polycube.\n7. Click 'Clear' to reset the Polycube creation and start over.\n8. Use the 'Info' button to display current Polycube information.",
   },
   {
     label: '2) Manipulate the Polycubes :',
     underline: true,
     description:
-      "Click to any Polycube on the scene to select it.\n\nAfter selecting a Polycube, you can:\n\n1. Use the [ic_left_click] 'Left Mouse Button' to rotate the Polycube.\n2. Use the [ic_right_click] 'Right Mouse Button' to move the Polycube.\n\nCustom visible views of Polycubes with DAT.GUI :\n\n1. Click 'polycubeVisible' to show or hide the selected Polycube on the scene.\n2. Click 'allCubesVisible' to show or hide all Polycubes on the scene.",
+      "Click to any Polycube on the scene to select it.\n\nAfter selecting a Polycube, you can:\n\n1. Use the [icons/left_click] 'Left Mouse Button' to rotate the Polycube.\n2. Use the [icons/right_click] 'Right Mouse Button' to move the Polycube.\n\nCustom visible views of Polycubes with DAT.GUI :\n\n1. Click 'polycubeVisible' to show or hide the selected Polycube on the scene.\n2. Click 'allCubesVisible' to show or hide all Polycubes on the scene.",
   },
   {
     label: '3) Grid Board Settings',
     underline: true,
     icon: 'table',
     description:
-      "This menu lets you delete and or create the new grid.\n\n1. Click [ic_trash] 'Delete current grid' to delete the grid.\n2. Enter (x, y, z) sizes for the grid. Click [ic_draw] to create a new grid.",
+      "This menu lets you delete and or create the new grid.\n\n1. Click [icons/trash] 'Delete current grid' to delete the grid.\n2. Enter (x, y, z) sizes for the grid. Click [icons/draw] to create a new grid.",
   },
   {
     label: '4) Manipulate the Grid Board :',
     underline: true,
     description:
-      "You can only control the grid through camera perspective with Orbit Controls :\n\n1. Use the [ic_left_click] 'Left Mouse Button' to rotate the grid.\n2. Use the [ic_right_click] 'Right Mouse Button' to move the grid.\n3. Use the 'Center Mouse Button' to zoom the grid.\n\nCustom visible views of grid with DAT.GUI :\n\n1. Click 'showInnerGrid' to show the grid's inner grid.\n2. Click 'showOuterGrid' to show the grid's outer grid. But this is already shown by default.",
+      "You can only control the grid through camera perspective with Orbit Controls :\n\n1. Use the [icons/left_click] 'Left Mouse Button' to rotate the grid.\n2. Use the [icons/right_click] 'Right Mouse Button' to move the grid.\n3. Use the 'Center Mouse Button' to zoom the grid.\n\nCustom visible views of grid with DAT.GUI :\n\n1. Click 'showInnerGrid' to show the grid's inner grid.\n2. Click 'showOuterGrid' to show the grid's outer grid. But this is already shown by default.",
   },
   {
     label: '5) Use Settings :',
     underline: true,
     icon: 'setting',
     description:
-      "In this menu, you can:\n\n1. Click [ic_trash] 'Delete Selected Polycube' to delete the Polycube that you are currently selected.",
+      "In this menu, you can:\n\n1. Click [icons/trash] 'Delete Selected Polycube' to delete the Polycube that you are currently selected.",
   },
 ];
 
 export const TUTORIAL_ICON_MAP = {
-  '[ic_arrow_left]': '../assets/ic_arrow_left.png',
-  '[ic_arrow_right]': '../assets/ic_arrow_right.png',
-  '[ic_select]': '../assets/ic_select.png',
-  '[ic_reset]': '../assets/ic_reset.png',
-  '[ic_left_click]': '../assets/ic_left_click.png',
-  '[ic_right_click]': '../assets/ic_right_click.png',
-  '[ic_trash]': '../assets/ic_trash.png',
-  '[ic_draw]': '../assets/ic_draw.png',
+  '[icons/arrow_left]': '../assets/icons/arrow_left.png',
+  '[icons/arrow_right]': '../assets/icons/arrow_right.png',
+  '[icons/select]': '../assets/icons/select.png',
+  '[icons/reset]': '../assets/icons/reset.png',
+  '[icons/left_click]': '../assets/icons/left_click.png',
+  '[icons/right_click]': '../assets/icons/right_click.png',
+  '[icons/trash]': '../assets/icons/trash.png',
+  '[icons/draw]': '../assets/icons/draw.png',
 };

3D/js/popup/cube/view.js

@@ -10,7 +10,10 @@ export class CubePopupView {
   }
 
   render({ onNChange, onNavigate, onInfo, onClear, onCreate }) {
-    this.popupContainer = this.toolbar.createPopupContainer('cubePopup', this.toolbar.buttons[0].name);
+    this.popupContainer = this.toolbar.createPopupContainer(
+      'cubePopup',
+      this.toolbar.buttons[0].name
+    );
 
     const popup = this.popupContainer.querySelector('canvas');
     const ctx = popup.getContext('2d');
@@ -19,7 +22,10 @@ export class CubePopupView {
 
     this.renderFormFields(onNChange);
     const previewCanvas = this.createPreviewCanvas();
-    this.createTextZone(popup.width - CUBE_POPUP_CONSTANTS.TEXT_ZONE.WIDTH_OFFSET, 'Polycube Info...');
+    this.createTextZone(
+      popup.width - CUBE_POPUP_CONSTANTS.TEXT_ZONE.WIDTH_OFFSET,
+      'Polycube Info...'
+    );
     this.createNavigationButtons(onNavigate);
     this.createActionButtons({ onInfo, onClear, onCreate });
 
@@ -38,7 +44,9 @@ export class CubePopupView {
 
     FORM_FIELD_LAYOUT.forEach((field, index) => {
       const rowY =
-        field.row === 1 ? startY - inputOffset + rowOffset : startY + rowSpacing - inputOffset + rowOffset;
+        field.row === 1
+          ? startY - inputOffset + rowOffset
+          : startY + rowSpacing - inputOffset + rowOffset;
 
       this.createLabel(field.label, field.labelX, rowY);
       const input = this.createInputField(field.inputX, rowY, field.defaultValue);
@@ -147,7 +155,7 @@ export class CubePopupView {
       buttonContainer.appendChild(label);
 
       const icon = document.createElement('img');
-      icon.src = `../assets/ic_${item.icon}.png`;
+      icon.src = `../assets/icons/${item.icon}.png`;
       icon.width = CUBE_POPUP_CONSTANTS.NAV.ICON_SIZE;
       icon.height = CUBE_POPUP_CONSTANTS.NAV.ICON_SIZE;
       icon.style.cursor = 'pointer';

3D/js/popup/grid.js

@@ -13,7 +13,10 @@ export class GridPopup {
   }
 
   render() {
-    this.popupContainer = this.toolbar.createPopupContainer('gridPopup', this.toolbar.buttons[1].name);
+    this.popupContainer = this.toolbar.createPopupContainer(
+      'gridPopup',
+      this.toolbar.buttons[1].name
+    );
     this.popup = this.popupContainer.querySelector('canvas');
     const ctx = this.popup.getContext('2d');
     ctx.fillStyle = GRID_POPUP_CONSTANTS.BACKGROUND_COLOR;
@@ -94,7 +97,7 @@ export class GridPopup {
   createIconButton(y, iconName, onClick) {
     const { LAYOUT } = GRID_POPUP_CONSTANTS;
     const iconButton = document.createElement('img');
-    iconButton.src = `../assets/ic_${iconName}.png`;
+    iconButton.src = `../assets/icons/${iconName}.png`;
     applyStyles(iconButton, {
       position: 'absolute',
       left: `${this.popup.width - LAYOUT.ICON_LEFT_OFFSET}px`,

3D/js/popup/setting.js

@@ -63,7 +63,7 @@ export class SettingsPopup {
     this.popupContainer.appendChild(rowLabel);
 
     const iconButton = document.createElement('img');
-    iconButton.src = `../assets/ic_${SETTINGS_POPUP_CONTENT.ACTION_ICON}.png`;
+    iconButton.src = `../assets/icons/${SETTINGS_POPUP_CONTENT.ACTION_ICON}.png`;
     applyStyles(iconButton, {
       position: 'absolute',
       left: `${this.popup.width - LAYOUT.ICON_LEFT_OFFSET}px`,

3D/js/popup/solve.js

@@ -12,7 +12,10 @@ export class SolvePopup {
   }
 
   render() {
-    this.popupContainer = this.toolbar.createPopupContainer('solvePopup', this.toolbar.buttons[2].name);
+    this.popupContainer = this.toolbar.createPopupContainer(
+      'solvePopup',
+      this.toolbar.buttons[2].name
+    );
     this.popup = this.popupContainer.querySelector('canvas');
     const ctx = this.popup.getContext('2d');
     const { LAYOUT, FONT, COLORS } = SOLVE_POPUP_CONSTANTS;
@@ -69,7 +72,7 @@ export class SolvePopup {
 
       if (row.icon) {
         const iconButton = document.createElement('img');
-        iconButton.src = `../assets/ic_${row.icon}.png`;
+        iconButton.src = `../assets/icons/${row.icon}.png`;
         applyStyles(iconButton, {
           position: 'absolute',
           right: '0',

3D/js/popup/tutorial.js

@@ -1,8 +1,4 @@
-import {
-  TUTORIAL_POPUP_CONSTANTS,
-  TUTORIAL_POPUP_ROWS,
-  TUTORIAL_ICON_MAP,
-} from '../constants.js';
+import { TUTORIAL_POPUP_CONSTANTS, TUTORIAL_POPUP_ROWS, TUTORIAL_ICON_MAP } from '../constants.js';
 
 function applyStyles(element, styles) {
   Object.assign(element.style, styles);
@@ -60,7 +56,7 @@ export class TutorialPopup {
 
       if (row.icon) {
         const icon = document.createElement('img');
-        icon.src = `../assets/ic_${row.icon}.png`;
+        icon.src = `../assets/icons/${row.icon}.png`;
         applyStyles(icon, {
           position: 'absolute',
           right: '0',