Localize SuperSplat to Chinese, Japanese and Korean (#192)

* Localize SuperSplat to Japanese

* Add Chinese translations

* Add Korean translations

* Move localization to ui folder

* Localize one more tooltip

* More succinct keys

* Use correct language code for Korean

* Uppercase PLY

* Exports at the end

* Refine Japanese translation (#193)

Co-authored-by: Will Eastcott <will@playcanvas.com>

---------

Co-authored-by: yushimatenjin <39250588+yushimatenjin@users.noreply.github.com>

package.json

@@ -68,6 +68,8 @@
  "cors": "^2.8.5",
  "cross-env": "^7.0.3",
  "eslint": "^8.56.0",
+ "i18next": "^23.15.1",
+ "i18next-browser-languagedetector": "^8.0.0",
  "jest": "^29.7.0",
  "playcanvas": "^1.74.0",
  "postcss": "^8.4.41",

src/scene.ts

@@ -19,6 +19,7 @@ import { Camera } from './camera';
 import { CustomShadow as Shadow } from './custom-shadow';
 // import { Grid } from './grid';
 import { InfiniteGrid as Grid } from './infinite-grid';
+import { localize } from './ui/localization';
 
 class Scene {
  events: Events;
@@ -217,7 +218,7 @@ class Scene {
  } catch (err) {
  this.events.invoke('showPopup', {
  type: 'error',
- header: 'ERROR LOADING FILE',
+ header: localize('popup.error-loading'),
  message: `${err.message ?? err} while loading '${filename}'`
  });
  }

src/ui/bottom-toolbar.ts

@@ -1,6 +1,7 @@
 import { Button, Element, Container } from 'pcui';
 import { Events } from '../events';
 import { Tooltips } from './tooltips';
+import { localize } from './localization';
 
 import undoSvg from '../svg/undo.svg';
 import redoSvg from '../svg/redo.svg';
@@ -139,17 +140,17 @@ class BottomToolbar extends Container {
  });
 
  // register tooltips
- tooltips.register(undo, 'Undo ( Ctrl + Z )');
- tooltips.register(redo, 'Redo ( Ctrl + Shift + Z )');
- tooltips.register(picker, 'Picker Select ( P )');
- tooltips.register(brush, 'Brush Select ( B )');
+ tooltips.register(undo, localize('tooltip.undo'));
+ tooltips.register(redo, localize('tooltip.redo'));
+ tooltips.register(picker, localize('tooltip.picker'));
+ tooltips.register(brush, localize('tooltip.brush'));
  // tooltips.register(lasso, 'Lasso Select');
- tooltips.register(sphere, 'Sphere Select');
+ tooltips.register(sphere, localize('tooltip.sphere'));
  // tooltips.register(crop, 'Crop');
- tooltips.register(translate, 'Translate ( 1 )');
- tooltips.register(rotate, 'Rotate ( 2 )');
- tooltips.register(scale, 'Scale ( 3 )');
- tooltips.register(coordSpace, 'Local Space Gizmo');
+ tooltips.register(translate, localize('tooltip.translate'));
+ tooltips.register(rotate, localize('tooltip.rotate'));
+ tooltips.register(scale, localize('tooltip.scale'));
+ tooltips.register(coordSpace, localize('tooltip.local-space'));
 
  }
 }

src/ui/data-panel.ts

@@ -3,6 +3,7 @@ import { Events } from '../events';
 import { Splat } from '../splat';
 import { Histogram } from './histogram';
 import { State } from '../edit-ops';
+import { localize } from './localization';
 import { rgb2hsv } from './color';
 
 const SH_C0 = 0.28209479177387814;
@@ -78,7 +79,7 @@ class DataPanel extends Panel {
  constructor(events: Events, args = { }) {
  args = {
  ...args,
- headerText: 'SPLAT DATA',
+ headerText: localize('data'),
  id: 'data-panel',
  resizable: 'top',
  resizeMax: 1000,
@@ -107,19 +108,19 @@ class DataPanel extends Panel {
  { v: 'x', t: 'X' },
  { v: 'y', t: 'Y' },
  { v: 'z', t: 'Z' },
- { v: 'distance', t: 'Distance' },
- { v: 'volume', t: 'Volume' },
- { v: 'surface-area', t: 'Surface Area' },
- { v: 'scale_0', t: 'Scale X' },
- { v: 'scale_1', t: 'Scale Y' },
- { v: 'scale_2', t: 'Scale Z' },
- { v: 'f_dc_0', t: 'Red' },
- { v: 'f_dc_1', t: 'Green' },
- { v: 'f_dc_2', t: 'Blue' },
- { v: 'opacity', t: 'Opacity' },
- { v: 'hue', t: 'Hue' },
- { v: 'saturation', t: 'Saturation' },
- { v: 'value', t: 'Value' }
+ { v: 'distance', t: localize('data.distance') },
+ { v: 'volume', t: localize('data.volume') },
+ { v: 'surface-area', t: localize('data.surface-area') },
+ { v: 'scale_0', t: localize('data.scale-x') },
+ { v: 'scale_1', t: localize('data.scale-y') },
+ { v: 'scale_2', t: localize('data.scale-z') },
+ { v: 'f_dc_0', t: localize('data.red') },
+ { v: 'f_dc_1', t: localize('data.green') },
+ { v: 'f_dc_2', t: localize('data.blue') },
+ { v: 'opacity', t: localize('data.opacity') },
+ { v: 'hue', t: localize('data.hue') },
+ { v: 'saturation', t: localize('data.saturation') },
+ { v: 'value', t: localize('data.value') }
  ]
  });
 
@@ -129,7 +130,7 @@ class DataPanel extends Panel {
 
  const logScaleLabel = new Label({
  class: 'control-label',
- text: 'Log Scale'
+ text: localize('data.log-scale')
  });
 
  const logScaleValue = new BooleanInput({
@@ -143,12 +144,12 @@ class DataPanel extends Panel {
  controls.append(dataSelector);
  controls.append(logScale);
 
- controls.append(sepLabel('Totals'));
+ controls.append(sepLabel(localize('data.totals')));
 
- const splatsValue = dataLabel(controls, 'Splats');
- const selectedValue = dataLabel(controls, 'Selected');
- const hiddenValue = dataLabel(controls, 'Hidden');
- const deletedValue = dataLabel(controls, 'Deleted');
+ const splatsValue = dataLabel(controls, localize('data.totals.splats'));
+ const selectedValue = dataLabel(controls, localize('data.totals.selected'));
+ const hiddenValue = dataLabel(controls, localize('data.totals.hidden'));
+ const deletedValue = dataLabel(controls, localize('data.totals.deleted'));
 
  controlsContainer.append(controls);
 

src/ui/editor.ts

@@ -12,6 +12,7 @@ import { RightToolbar } from './right-toolbar';
 import { ModeToggle } from './mode-toggle';
 import { Tooltips } from './tooltips';
 import { ShortcutsPopup } from './shortcuts-popup';
+import { localizeInit } from './localization';
 
 import { version } from '../../package.json';
 import logo from './playcanvas-logo.png';
@@ -25,6 +26,8 @@ class EditorUI {
  popup: Popup;
 
  constructor(events: Events, remoteStorageMode: boolean) {
+ localizeInit();
+
  // favicon
  const link = document.createElement('link');
  link.rel = 'icon';