Change all "click" event to "pointerdown" event (workadventure#3745)

* Change "click" to "pointerdown" event This is a workaround for a bug introduce in the new version of Phaser 3.80.0 => phaserjs/phaser#6747 * Create test for mobile
ffddorf · Feb 27, 2024 · d00585f · d00585f
1 parent e965369
commit d00585f
Show file tree

Hide file tree

Showing 89 changed files with 993 additions and 402 deletions.
diff --git a/.github/workflows/build-test-and-deploy.yml b/.github/workflows/build-test-and-deploy.yml
@@ -624,6 +624,11 @@ jobs:
             shard: 5
             nbShards: 5
             renderer: headless
+            renderer: auto
+          - browser: mobilechrome
+            shard: 1
+            nbShards: 1
+            renderer: auto
     needs:
       - build-play
       - build-chat

diff --git a/play/src/front/Components/ActionBar/ActionBar.svelte b/play/src/front/Components/ActionBar/ActionBar.svelte
diff --git a/play/src/front/Components/ActionBar/Applicatons.svelte b/play/src/front/Components/ActionBar/Applicatons.svelte
@@ -80,7 +80,7 @@
         on:keydown|preventDefault={noDrag}
         on:focus|preventDefault={noDrag}
         on:blur|preventDefault={noDrag}
-        on:click={() => {
+        on:pointerdown={() => {
             toggleAppMenu();
         }}
         class="bottom-action-button"
@@ -107,7 +107,7 @@
                     <div class="tw-transition-all bottom-action-button">
                         <Tooltip text={$LL.mapEditor.properties.klaxoonProperties.label()} />
                         <button
-                            on:click={() => {
+                            on:pointerdown={() => {
                                 klaxoonButtonHandler();
                                 appMenuOpened = false;
                             }}
@@ -124,7 +124,7 @@
                     <div class="tw-transition-all bottom-action-button">
                         <Tooltip text={$LL.mapEditor.properties.googleDocsProperties.label()} />
                         <button
-                            on:click={() => {
+                            on:pointerdown={() => {
                                 window.open(`https://docs.google.com/document/u/1/`, "_blanck");
                                 appMenuOpened = false;
                             }}
@@ -139,7 +139,7 @@
                     <div class="tw-transition-all bottom-action-button">
                         <Tooltip text={$LL.mapEditor.properties.googleSheetsProperties.label()} />
                         <button
-                            on:click={() => {
+                            on:pointerdown={() => {
                                 window.open(`https://docs.google.com/spreadsheets/u/1/`, "_blanck");
                                 appMenuOpened = false;
                             }}
@@ -154,7 +154,7 @@
                     <div class="tw-transition-all bottom-action-button">
                         <Tooltip text={$LL.mapEditor.properties.googleSlidesProperties.label()} />
                         <button
-                            on:click={() => {
+                            on:pointerdown={() => {
                                 window.open(`https://docs.google.com/presentation/u/1/`, "_blanck");
                                 appMenuOpened = false;
                             }}
@@ -169,7 +169,7 @@
                     <div class="tw-transition-all bottom-action-button">
                         <Tooltip text={$LL.mapEditor.properties.eraserProperties.label()} />
                         <button
-                            on:click={() => {
+                            on:pointerdown={() => {
                                 window.open(`https://app.eraser.io/dashboard/all`, "_blanck");
                                 appMenuOpened = false;
                             }}

diff --git a/play/src/front/Components/ActionsMenu/ActionsMenu.svelte b/play/src/front/Components/ActionsMenu/ActionsMenu.svelte
@@ -51,7 +51,7 @@
 {#if actionsMenuData}
     <div class="tw-flex tw-w-full tw-h-full tw-justify-center tw-items-center">
         <div class="actions-menu tw-p-4 is-rounded tw-max-w-xs">
-            <button type="button" class="close-window" on:click={closeActionsMenu}>×</button>
+            <button type="button" class="close-window" on:pointerdown={closeActionsMenu}>×</button>
             {#if actionsMenuData.menuName}
                 <h2 class="name tw-mb-2 tw-mx-2 margin-close">{actionsMenuData.menuName}</h2>
             {/if}
@@ -65,8 +65,8 @@
                             type="button"
                             class="btn light tw-justify-center tw-font-bold tw-text-xs sm:tw-text-base tw-text-center tw-h-fit tw-m-2 tw-w-full {action.style ??
                                 ''}"
-                            on:click={analyticsClient.clicPropertykMapEditor(action.actionName, action.style)}
-                            on:click|preventDefault={() => {
+                            on:pointerdown={analyticsClient.clicPropertykMapEditor(action.actionName, action.style)}
+                            on:pointerdown|preventDefault={() => {
                                 action.callback();
                             }}
                         >

diff --git a/play/src/front/Components/AudioManager/AudioManager.svelte b/play/src/front/Components/AudioManager/AudioManager.svelte
@@ -130,7 +130,7 @@
 <div class="main-audio-manager">
     <div class:hidden={state !== "playing"}>
         <div class="audio-manager-player-volume">
-            <span id="audioplayer_volume_icon_playing" bind:this={audioPlayerVolumeIcon} on:click={onMute}>
+            <span id="audioplayer_volume_icon_playing" bind:this={audioPlayerVolumeIcon} on:pointerdown={onMute}>
                 <svg
                     width="2em"
                     height="2em"
@@ -183,7 +183,7 @@
         <button
             type="button"
             class="btn light tw-justify-center tw-font-bold tw-text-xs sm:tw-text-base tw-w-fit"
-            on:click={tryPlay}>{$LL.audio.manager.allow()}</button
+            on:pointerdown={tryPlay}>{$LL.audio.manager.allow()}</button
         >
     </div>
     <div

diff --git a/play/src/front/Components/Chat/Chat.svelte b/play/src/front/Components/Chat/Chat.svelte
@@ -227,7 +227,7 @@
 <div id="chatWindow" class:show={$chatVisibilityStore}>
     <input type="text" bind:this={searchElement} on:keydown={search} style="display: none;" />
     {#if $chatVisibilityStore}<div class="hide">
-            <button class="close-window" on:click={closeChat}>&#215;</button>
+            <button class="close-window" on:pointerdown={closeChat}>&#215;</button>
         </div>{/if}
     <iframe
         id="chatWorkAdventure"

diff --git a/play/src/front/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte b/play/src/front/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
@@ -107,8 +107,8 @@
     class:ready={$state === "ready"}
     class:displayed={isMain || isHighlight}
     class:vertical
-    on:click={() => analyticsClient.stackOpenCloseMultiIframe()}
-    on:click={onClick}
+    on:pointerdown={() => analyticsClient.stackOpenCloseMultiIframe()}
+    on:pointerdown={onClick}
 >
     <img
         class="cowebsite-icon noselect clickable tw-bg-dark-blue/50 tw-p-0 tw-border-medium-purple tw-border-solid tw-rounded tw-pointer-events-auto hover:tw-border-light-purple hover:tw-bg-dark-blue/75 hover:tw-scale-105 tw-transition-all"

diff --git a/play/src/front/Components/EmbedScreens/Layouts/PresentationLayout.svelte b/play/src/front/Components/EmbedScreens/Layouts/PresentationLayout.svelte
@@ -95,7 +95,7 @@
                                         <button
                                             type="button"
                                             class="close-window top-right-btn"
-                                            on:click={closeCoWebsite}
+                                            on:pointerdown={closeCoWebsite}
                                         >
                                             &times;
                                         </button>

diff --git a/play/src/front/Components/EmoteMenu/EmoteMenu.svelte b/play/src/front/Components/EmoteMenu/EmoteMenu.svelte
@@ -71,7 +71,7 @@
             unsubscriber();
         }
 
-        document.body.removeEventListener("click", checkClickOutSide);
+        document.body.removeEventListener("pointerdown", checkClickOutSide);
         picker.destroyPicker();
     });
 
@@ -88,7 +88,7 @@
 
     function clickOutside(element: unknown) {
         console.info("clickOutside event listener attached to element: ", element);
-        document.body.addEventListener("click", checkClickOutSide);
+        document.body.addEventListener("pointerdown", checkClickOutSide);
     }
 </script>
 

diff --git a/play/src/front/Components/Exploration/Explorer.svelte b/play/src/front/Components/Exploration/Explorer.svelte
@@ -150,7 +150,7 @@
                 >
                     <button
                         class="add-property-button tooltip tw-p-4 tw-flex tw-justify-center tw-items-center"
-                        on:click={explorationMode}
+                        on:pointerdown={explorationMode}
                     >
                         <div class="tw-w-10 tw-h-10 tw-flex tw-flex-wrap tw-items-center tw-justify-center">
                             <img
@@ -174,7 +174,7 @@
             >
                 <button
                     class="add-property-button tooltip tw-p-4 tw-flex tw-justify-center tw-items-center"
-                    on:click={toggleSearchMode}
+                    on:pointerdown={toggleSearchMode}
                 >
                     <div class="tw-w-10 tw-h-10 tw-flex tw-flex-wrap tw-items-center tw-justify-center">
                         <img draggable="false" class="tw-max-w-[75%] tw-max-h-[75%]" src={visioSvg} alt="info icon" />
@@ -202,65 +202,64 @@
                 <AddPropertyButtonWrapper
                     property="jitsiRoomProperty"
                     isActive={$selectFilters.includes("jitsiRoomProperty")}
-                    on:click={() => {
+                    on:pointerdown={() => {
                         addFilter("jitsiRoomProperty");
                     }}
                 />
                 <AddPropertyButtonWrapper
                     property="playAudio"
                     isActive={$selectFilters.includes("playAudio")}
-                    on:click={() => {
+                    on:pointerdown={() => {
                         addFilter("playAudio");
                     }}
                 />
                 <AddPropertyButtonWrapper
                     property="openWebsite"
                     isActive={$selectFilters.includes("openWebsite")}
-                    on:click={() => {
+                    on:pointerdown={() => {
                         addFilter("openWebsite");
                     }}
                 />
                 <AddPropertyButtonWrapper
                     property="speakerMegaphone"
                     isActive={$selectFilters.includes("speakerMegaphone")}
-                    on:click={() => {
+                    on:pointerdown={() => {
                         addFilter("speakerMegaphone");
                     }}
                 />
                 <AddPropertyButtonWrapper
                     property="listenerMegaphone"
                     isActive={$selectFilters.includes("listenerMegaphone")}
-                    on:click={() => {
+                    on:pointerdown={() => {
                         addFilter("listenerMegaphone");
                     }}
                 />
                 <AddPropertyButtonWrapper
                     property="exit"
                     isActive={$selectFilters.includes("exit")}
-                    on:click={() => {
+                    on:pointerdown={() => {
                         addFilter("exit");
                     }}
                 />
                 <AddPropertyButtonWrapper
                     property="start"
                     isActive={$selectFilters.includes("start")}
-                    on:click={() => {
+                    on:pointerdown={() => {
                         addFilter("silent");
                     }}
                 />
                 <AddPropertyButtonWrapper
                     property="focusable"
                     isActive={$selectFilters.includes("focusable")}
-                    on:click={() => {
+                    on:pointerdown={() => {
                         addFilter("focusable");
                     }}
                 />
             </div>
 
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
             <div
                 class="entities tw-p-4 tw-rounded-2xl tw-flex tw-flex-row tw-justify-around tw-items-center tw-cursor-pointer"
-                on:click={toggleEntityList}
+                on:pointerdown={toggleEntityList}
             >
                 <img class="tw-w-10 tw-h-auto tw-mr-2 tw-pointer-events-none" src={EntityToolImg} alt="link icon" />
                 {#if $entitessListFiltered.size > 0}
@@ -281,12 +280,11 @@
             {#if entityListActive && $entitessListFiltered.size > 0}
                 <div class="entity-items tw-p-4 tw-flex tw-flex-col">
                     {#each [...$entitessListFiltered] as [key, entity] (key)}
-                        <!-- svelte-ignore a11y-click-events-have-key-events -->
                         <div
                             id={entity.entityId}
                             on:mouseenter={() => highlightEntity(entity)}
                             on:mouseleave={() => unhighlightEntity(entity)}
-                            on:click={() => mapExplorationObjectSelectedStore.set(entity)}
+                            on:pointerdown={() => mapExplorationObjectSelectedStore.set(entity)}
                             class="item tw-p-4 tw-rounded-2xl tw-flex tw-flex-row tw-justify-around tw-items-center tw-cursor-pointer"
                         >
                             <img
@@ -302,10 +300,9 @@
                 </div>
             {/if}
 
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
             <div
                 class="areas tw-p-4 tw-rounded-2xl tw-flex tw-flex-row tw-justify-around tw-items-center tw-cursor-pointer"
-                on:click={toggleAreaList}
+                on:pointerdown={toggleAreaList}
             >
                 <img class="tw-w-10 tw-h-auto tw-mr-2 tw-pointer-events-none" src={AreaToolImg} alt="link icon" />
                 {#if $areasListFiltered.size > 0}
@@ -326,12 +323,11 @@
                 <div class="area-items tw-p-4 tw-flex tw-flex-col">
                     {#if $areasListFiltered.size > 0}
                         {#each [...$areasListFiltered] as [key, area] (key)}
-                            <!-- svelte-ignore a11y-click-events-have-key-events -->
                             <div
                                 id={key}
                                 on:mouseenter={() => highlightArea(area)}
                                 on:mouseleave={() => unhighlightArea(area)}
-                                on:click={() => mapExplorationObjectSelectedStore.set(area)}
+                                on:pointerdown={() => mapExplorationObjectSelectedStore.set(area)}
                                 class="item tw-p-4 tw-rounded-2xl tw-flex tw-flex-row tw-justify-around tw-items-center tw-cursor-pointer"
                             >
                                 <img

diff --git a/play/src/front/Components/Exploration/MapList.svelte b/play/src/front/Components/Exploration/MapList.svelte
@@ -103,12 +103,11 @@
                 <h3>{$LL.mapEditor.listRoom.noRoomFound()}</h3>
             {/if}
             {#each Array.from($roomListFiltered) as [roomUrl, roomData] (roomUrl)}
-                <!-- svelte-ignore a11y-click-events-have-key-events -->
                 <div
                     id={roomUrl}
                     class:active={currentRoomUrl == roomData.roomUrl}
                     class="room-card tw-flex tw-flex-col tw-items-center tw-justify-center tw-cursor-pointer tw-rounded-xl tw-m-12 tw-p-12"
-                    on:click={() => clickRoom(roomData.roomUrl, roomData.name)}
+                    on:pointerdown={() => clickRoom(roomData.roomUrl, roomData.name)}
                 >
                     <img
                         class="tw-pointer-events-none tw-rounded-full tw-h-56 tw-w-56 tw-mb-3"
@@ -130,7 +129,7 @@
         <div
             class="tw-bg-dark-purple/90 tw-backdrop-blur-sm tw-absolute tw-bottom-0 tw-left-0 tw-h-16 tw-w-screen tw-flex tw-justify-center tw-content-center tw-items-center"
         >
-            <button class="light" on:click={close}>{$LL.mapEditor.listRoom.close()}</button>
+            <button class="light" on:pointerdown={close}>{$LL.mapEditor.listRoom.close()}</button>
         </div>
     {/if}
 </div>

diff --git a/play/src/front/Components/FollowMenu/FollowMenu.svelte b/play/src/front/Components/FollowMenu/FollowMenu.svelte
@@ -45,10 +45,10 @@
     >
         <p class="tw-mt-2">{$LL.follow.interactMenu.title.follow({ leader: name($followUsersStore[0]) })}</p>
         <div class="tw-flex tw-flex-row tw-justify-evenly">
-            <button type="button" class="btn light" on:click|preventDefault={acceptFollowRequest}
+            <button type="button" class="btn light" on:pointerdown|preventDefault={acceptFollowRequest}
                 >{$LL.follow.interactMenu.yes()}</button
             >
-            <button type="button" class="btn outline" on:click|preventDefault={reset}
+            <button type="button" class="btn outline" on:pointerdown|preventDefault={reset}
                 >{$LL.follow.interactMenu.no()}</button
             >
         </div>
@@ -67,10 +67,10 @@
             <p class="tw-m-1">{$LL.follow.interactMenu.stop.leader()}</p>
         {/if}
         <div class="tw-flex tw-flex-row tw-justify-evenly">
-            <button type="button" class="btn light" on:click|preventDefault={reset}
+            <button type="button" class="btn light" on:pointerdown|preventDefault={reset}
                 >{$LL.follow.interactMenu.yes()}</button
             >
-            <button type="button" class="btn outline" on:click|preventDefault={abortEnding}
+            <button type="button" class="btn outline" on:pointerdown|preventDefault={abortEnding}
                 >{$LL.follow.interactMenu.no()}</button
             >
         </div>

diff --git a/play/src/front/Components/HelpSettings/HelpCameraSettingsPopup.svelte b/play/src/front/Components/HelpSettings/HelpCameraSettingsPopup.svelte
@@ -53,7 +53,8 @@
         </p>
     </section>
     <section class="tw-flex tw-row tw-justify-center">
-        <button class="light" on:click|preventDefault={refresh}>{$LL.camera.help.refresh()}</button>
-        <button type="submit" class="outline" on:click|preventDefault={close}>{$LL.camera.help.continue()}</button>
+        <button class="light" on:pointerdown|preventDefault={refresh}>{$LL.camera.help.refresh()}</button>
+        <button type="submit" class="outline" on:pointerdown|preventDefault={close}>{$LL.camera.help.continue()}</button
+        >
     </section>
 </form>
diff --git a/play/src/front/Components/HelpSettings/HelpPopUpBlocked.svelte b/play/src/front/Components/HelpSettings/HelpPopUpBlocked.svelte
@@ -34,6 +34,6 @@
     </section>
 
     <section class="tw-flex tw-row tw-justify-center">
-        <button class="light" on:click|preventDefault={close}>{$LL.warning.popupBlocked.done()}</button>
+        <button class="light" on:pointerdown|preventDefault={close}>{$LL.warning.popupBlocked.done()}</button>
     </section>
 </form>
diff --git a/play/src/front/Components/HelpSettings/HelpWebRtcSettingsPopup.svelte b/play/src/front/Components/HelpSettings/HelpWebRtcSettingsPopup.svelte
@@ -64,7 +64,9 @@
         </ul>
     </section>
     <section class="tw-flex tw-row tw-justify-center">
-        <button class="light" on:click|preventDefault={refresh}>{$LL.camera.webrtc.refresh()}</button>
-        <button type="submit" class="outline" on:click|preventDefault={close}>{$LL.camera.webrtc.continue()}</button>
+        <button class="light" on:pointerdown|preventDefault={refresh}>{$LL.camera.webrtc.refresh()}</button>
+        <button type="submit" class="outline" on:pointerdown|preventDefault={close}
+            >{$LL.camera.webrtc.continue()}</button
+        >
     </section>
 </form>
diff --git a/play/src/front/Components/Input/ButtonState.svelte b/play/src/front/Components/Input/ButtonState.svelte
@@ -27,7 +27,7 @@
     }
 </script>
 
-<button type="button" class={`light tw-mt-5 ${state} button-state`} on:click={click} disabled={state !== "ready"}>
+<button type="button" class={`light tw-mt-5 ${state} button-state`} on:pointerdown={click} disabled={state !== "ready"}>
     {#if state === "ready"}
         {initialText}
     {:else if state === "loading"}

diff --git a/play/src/front/Components/LayoutActionManager/LayoutActionManager.svelte b/play/src/front/Components/LayoutActionManager/LayoutActionManager.svelte
@@ -11,18 +11,16 @@
 >
     {#each $layoutManagerActionStore as action (action.uuid)}
         {#if action.type === "warning"}
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
             <div
                 class="blue-dialog-box tw-w-56 tw-min-h-10 tw-border-pop-yellow tw-text-pop-yellow tw-border tw-border-solid tw-pointer-events-auto"
-                on:click={() => onClick(action.callback)}
+                on:pointerdown={() => onClick(action.callback)}
             >
                 <p class="tw-text-center tw-m-0 tw-p-2">{action.message}</p>
             </div>
         {:else}
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
             <div
                 class="blue-dialog-box tw-w-56 tw-min-h-10 tw-border-light-blue tw-text-light-blue tw-border tw-border-solid tw-pointer-events-auto"
-                on:click={() => onClick(action.callback)}
+                on:pointerdown={() => onClick(action.callback)}
             >
                 <p class="tw-text-center tw-m-0 tw-p-2">{action.message}</p>
             </div>