Fixing Svelte-check errors

front/package.json

@@ -58,7 +58,7 @@
     "test": "TS_NODE_PROJECT=\"tsconfig-for-jasmine.json\" ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json",
     "lint": "node_modules/.bin/eslint src/ . --ext .ts",
     "fix": "node_modules/.bin/eslint --fix src/ . --ext .ts",
-    "svelte-check-watch": "svelte-check --fail-on-warnings --compiler-warnings \"a11y-no-onchange:ignore,a11y-autofocus:ignore\" --watch",
+    "svelte-check-watch": "svelte-check --fail-on-warnings --fail-on-hints --compiler-warnings \"a11y-no-onchange:ignore,a11y-autofocus:ignore\" --watch",
-    "svelte-check":       "svelte-check --fail-on-warnings --compiler-warnings \"a11y-no-onchange:ignore,a11y-autofocus:ignore\""
+    "svelte-check":       "svelte-check --fail-on-warnings --fail-on-hints --compiler-warnings \"a11y-no-onchange:ignore,a11y-autofocus:ignore\""
   }
 }

front/src/Components/App.svelte

@@ -1,6 +1,4 @@
 <script lang="typescript">
-    import MenuIcon from "./Menu/MenuIcon.svelte";
-    import {menuIconVisible} from "../Stores/MenuStore";
     import {enableCameraSceneVisibilityStore, gameOverlayVisibilityStore} from "../Stores/MediaStore";
     import CameraControls from "./CameraControls.svelte";
     import MyCamera from "./MyCamera.svelte";
@@ -17,7 +15,7 @@
     import VisitCard from "./VisitCard/VisitCard.svelte";
     import {requestVisitCardsStore} from "../Stores/GameStore";
 
-    import {Game} from "../Phaser/Game/Game";
+    import type {Game} from "../Phaser/Game/Game";
     import {helpCameraSettingsVisibleStore} from "../Stores/HelpCameraSettingsStore";
     import HelpCameraSettingsPopup from "./HelpCameraSettings/HelpCameraSettingsPopup.svelte";
     import AudioPlaying from "./UI/AudioPlaying.svelte";
@@ -74,7 +72,7 @@
     {/if}
     {#if $helpCameraSettingsVisibleStore}
         <div>
-            <HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup>
+            <HelpCameraSettingsPopup></HelpCameraSettingsPopup>
         </div>
     {/if}
     {#if $requestVisitCardsStore}

front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte

@@ -1,10 +1,10 @@
 <script lang="typescript">
-    import { Game } from "../../Phaser/Game/Game";
+    import type { Game } from "../../Phaser/Game/Game";
-    import { CustomizeSceneName } from "../../Phaser/Login/CustomizeScene";
+    import {CustomizeScene, CustomizeSceneName} from "../../Phaser/Login/CustomizeScene";
 
     export let game: Game;
 
-    const customCharacterScene = game.scene.getScene(CustomizeSceneName);
+    const customCharacterScene = game.scene.getScene(CustomizeSceneName) as CustomizeScene;
     let activeRow = customCharacterScene.activeRow;
 
     function selectLeft() {
@@ -116,4 +116,4 @@
   }
 
 
-</style>
+</style>

front/src/Components/EnableCamera/EnableCameraScene.svelte

@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import {Game} from "../../Phaser/Game/Game";
+    import type {Game} from "../../Phaser/Game/Game";
     import {EnableCameraScene, EnableCameraSceneName} from "../../Phaser/Login/EnableCameraScene";
     import {
         audioConstraintStore,
@@ -15,8 +15,8 @@
     import microphoneImg from "../images/microphone.svg";
 
     export let game: Game;
-    let selectedCamera : string|null = null;
+    let selectedCamera : string|undefined = undefined;
-    let selectedMicrophone : string|null = null;
+    let selectedMicrophone : string|undefined = undefined;
 
     const enableCameraScene = game.scene.getScene(EnableCameraSceneName) as EnableCameraScene;
 
@@ -24,10 +24,10 @@
         enableCameraScene.login();
     }
 
-    function srcObject(node, stream) {
+    function srcObject(node: HTMLVideoElement, stream: MediaStream) {
         node.srcObject = stream;
         return {
-            update(newStream) {
+            update(newStream: MediaStream) {
                 if (node.srcObject != newStream) {
                     node.srcObject = newStream
                 }
@@ -53,8 +53,8 @@
             }
         } else {
             stream = null;
-            selectedCamera = null;
+            selectedCamera = undefined;
-            selectedMicrophone = null;
+            selectedMicrophone = undefined;
         }
     });
 
@@ -79,7 +79,7 @@
     <section class="text-center">
         <h2>Turn on your camera and microphone</h2>
     </section>
-        {#if $localStreamStore.stream}
+        {#if $localStreamStore.type === 'success' && $localStreamStore.stream}
             <video class="myCamVideoSetup" use:srcObject={$localStreamStore.stream} autoplay muted playsinline></video>
         {:else }
             <div class="webrtcsetup">

front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte

@@ -8,7 +8,7 @@
 
     const NB_BARS = 20;
 
-    let timeout;
+    let timeout: ReturnType<typeof setTimeout>;
     const soundMeter = new SoundMeter();
     let display = false;
 

front/src/Components/Login/LoginScene.svelte

@@ -1,14 +1,13 @@
 <script lang="typescript">
-    import {Game} from "../../Phaser/Game/Game";
+    import type {Game} from "../../Phaser/Game/Game";
-    import {LoginSceneName} from "../../Phaser/Login/LoginScene";
+    import {LoginScene, LoginSceneName} from "../../Phaser/Login/LoginScene";
     import {DISPLAY_TERMS_OF_USE, MAX_USERNAME_LENGTH} from "../../Enum/EnvironmentVariable";
     import logoImg from "../images/logo.png";
     import {gameManager} from "../../Phaser/Game/GameManager";
-    import {maxUserNameLength} from "../../Connexion/LocalUser";
 
     export let game: Game;
 
-    const loginScene = game.scene.getScene(LoginSceneName);
+    const loginScene = game.scene.getScene(LoginSceneName) as LoginScene;
 
     let name = gameManager.getPlayerName() || '';
     let startValidating = false;

front/src/Components/MyCamera.svelte

@@ -3,10 +3,10 @@
     import SoundMeterWidget from "./SoundMeterWidget.svelte";
     import {onDestroy} from "svelte";
 
-    function srcObject(node, stream) {
+    function srcObject(node: HTMLVideoElement, stream: MediaStream) {
         node.srcObject = stream;
         return {
-            update(newStream) {
+            update(newStream: MediaStream) {
                 if (node.srcObject != newStream) {
                     node.srcObject = newStream
                 }
@@ -38,9 +38,9 @@
 
 <div>
     <div class="video-container div-myCamVideo" class:hide={!$localStreamStore.constraints.video}>
+        {#if $localStreamStore.type === "success" && $localStreamStore.stream }
         <video class="myCamVideo" use:srcObject={$localStreamStore.stream} autoplay muted playsinline></video>
-        <!-- {#if stream}
         <SoundMeterWidget stream={stream}></SoundMeterWidget>
-        {/if} -->
+        {/if}
     </div>
 </div>

front/src/Components/SelectCompanion/SelectCompanionScene.svelte

@@ -1,10 +1,10 @@
 <script lang="typescript">
-    import {Game} from "../../Phaser/Game/Game";
+    import type {Game} from "../../Phaser/Game/Game";
-    import {SelectCompanionSceneName} from "../../Phaser/Login/SelectCompanionScene";
+    import {SelectCompanionScene, SelectCompanionSceneName} from "../../Phaser/Login/SelectCompanionScene";
 
     export let game: Game;
 
-    const selectCompanionScene = game.scene.getScene(SelectCompanionSceneName);
+    const selectCompanionScene = game.scene.getScene(SelectCompanionSceneName) as SelectCompanionScene;
 
     function selectLeft() {
         selectCompanionScene.moveToLeft();

front/src/Components/SoundMeterWidget.svelte

@@ -8,7 +8,7 @@
 
     const NB_BARS = 5;
 
-    let timeout;
+    let timeout: ReturnType<typeof setTimeout>;
     const soundMeter = new SoundMeter();
     let display = false;
 

front/src/Components/UI/AudioPlaying.svelte

@@ -2,7 +2,7 @@
     import { fly } from 'svelte/transition';
     import megaphoneImg from "./images/megaphone.svg";
     import {soundPlayingStore} from "../../Stores/SoundPlayingStore";
-    import {afterUpdate, onMount} from "svelte";
+    import {afterUpdate} from "svelte";
 
     export let url: string;
     let audio: HTMLAudioElement;

front/src/Components/VisitCard/VisitCard.svelte

@@ -7,7 +7,7 @@
     let w = '500px';
     let h = '250px';
     let hidden = true;
-    let cvIframe;
+    let cvIframe: HTMLIFrameElement;
 
     function closeCard() {
         requestVisitCardsStore.set(null);

front/src/Components/selectCharacter/SelectCharacterScene.svelte

@@ -1,10 +1,10 @@
 <script lang="typescript">
-    import { Game } from "../../Phaser/Game/Game";
+    import type { Game } from "../../Phaser/Game/Game";
-    import { SelectCharacterSceneName } from "../../Phaser/Login/SelectCharacterScene";
+    import {SelectCharacterScene, SelectCharacterSceneName} from "../../Phaser/Login/SelectCharacterScene";
 
     export let game: Game;
 
-    const selectCharacterScene = game.scene.getScene(SelectCharacterSceneName);
+    const selectCharacterScene = game.scene.getScene(SelectCharacterSceneName) as SelectCharacterScene;
 
     function selectLeft() {
         selectCharacterScene.moveToLeft();
@@ -89,4 +89,4 @@
   }
 
 
-</style>
+</style>

front/src/Phaser/Login/CustomizeScene.ts

@@ -263,7 +263,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 3;
      }
 
-    private nextSceneToCamera(){
+    public nextSceneToCamera(){
         const layers: string[] = [];
             let i = 0;
             for (const layerItem of this.selectedLayers) {
@@ -284,7 +284,7 @@ export class CustomizeScene extends AbstractCharacterScene {
             customCharacterSceneVisibleStore.set(false);
     }
 
-    private backToPreviousScene(){
+    public backToPreviousScene(){
         this.scene.sleep(CustomizeSceneName);
         waScaleManager.restoreZoom();
         this.scene.run(SelectCharacterSceneName);

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -92,7 +92,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         });
     }
 
-    protected nextSceneToCameraScene(): void {
+    public nextSceneToCameraScene(): void {
         if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
             return;
         }
@@ -108,7 +108,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         this.events.removeListener('wake');
     }
 
-    protected nextSceneToCustomizeScene(): void {
+    public nextSceneToCustomizeScene(): void {
         if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
             return;
         }
@@ -118,7 +118,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         selectCharacterSceneVisibleStore.set(false);
     }
 
-    createCurrentPlayer(): void {        
+    createCurrentPlayer(): void {
         for (let i = 0; i <this.playerModels.length; i++) {
             const playerResource = this.playerModels[i];
 
@@ -165,7 +165,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         this.updateSelectedPlayer();
     }
 
-    protected moveToLeft(){
+    public moveToLeft(){
         if(this.currentSelectUser === 0){
             return;
         }
@@ -173,7 +173,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         this.moveUser();
     }
 
-    protected moveToRight(){
+    public moveToRight(){
         if(this.currentSelectUser === (this.players.length - 1)){
             return;
         }

front/src/ambient.d.ts

@@ -0,0 +1,38 @@
+/**
+ * These declarations tell TypeScript that we allow import of images, e.g.
+ * ```
+ <script lang='ts'>
+ import successkid from 'images/successkid.jpg';
+ </script>
+ <img src="{successkid}">
+ ```
+ */
+declare module "*.gif" {
+    const value: string;
+    export = value;
+}
+
+declare module "*.jpg" {
+    const value: string;
+    export = value;
+}
+
+declare module "*.jpeg" {
+    const value: string;
+    export = value;
+}
+
+declare module "*.png" {
+    const value: string;
+    export = value;
+}
+
+declare module "*.svg" {
+    const value: string;
+    export = value;
+}
+
+declare module "*.webp" {
+    const value: string;
+    export = value;
+}