wip

Readme.md

@@ -26,10 +26,12 @@ Break colourful bricks, catch bouncing coins and select powerful upgrades !
   - missed challenges show as greyed out choices (with unlock condition).
   - bigger "level X or Y cleared", continue to level X/Y as button
 
-- make menu and score button more "button like" when you just installed the game.
+- Can't press ? buttons in Creative Menu.
-- 
+
 ## Done
 
+- hide any tooltip on page scroll
+- added a "display level code" button in editor
 - passive income : paddle transparent for a much shorter time
 - better default value for mobile mode detection
 
@@ -483,6 +485,7 @@ Break colourful bricks, catch bouncing coins and select powerful upgrades !
 
 ## UX / gameplay
 
+- make menu and score button more "button like" when you just installed the game.
 - chill game mode, to just relax your mind :
   - no 7 levels limit
   - no upgrades offered at the end of the level 

src/game.less

@@ -450,7 +450,15 @@ h2.histogram-title strong {
   user-select: none;
   opacity: 1;
   border: 1px solid white;
-  max-width: 300px;
+  &.desktop{
+
+    max-width: 300px;
+
+  }
+  &.mobile{
+  width: 95vw;
+    left:2.5vw;
+  }
 }
 
 #popup.history > div {

src/i18n/ar.json

@@ -5,6 +5,7 @@
   "confirmRestart.yes": "إعادة تشغيل اللعبة",
   "editor.editing.bigger": "زيادة حجم المستوى",
   "editor.editing.color": "اختر لونًا من قائمة الألوان (بحد أقصى 5 لكل مستوى)",
+  "editor.editing.copied": "",
   "editor.editing.copy": "نسخ رمز المستوى",
   "editor.editing.copy_help": "ألصقه في قناة #levels في Discord الخاص بنا",
   "editor.editing.credit": "الاعتمادات والمصدر",
@@ -17,6 +18,8 @@
   "editor.editing.rename": "اسم المستوى",
   "editor.editing.rename_prompt": "الرجاء إدخال اسم جديد للمستوى",
   "editor.editing.right": "حرك كل الطوب إلى اليمين",
+  "editor.editing.show_code": "",
+  "editor.editing.show_code_help": "",
   "editor.editing.smaller": "تقليل حجم المستوى",
   "editor.editing.title": "مستوى التحرير: {{name}}",
   "editor.editing.up": "حرك كل الطوب لأعلى",

src/i18n/b71.babel

@@ -240,6 +240,41 @@
 											</translation>
 										</translations>
 									</concept_node>
+									<concept_node>
+										<name>copied</name>
+										<description/>
+										<comment/>
+										<translations>
+											<translation>
+												<language>ar-LB</language>
+												<approved>false</approved>
+											</translation>
+											<translation>
+												<language>de-DE</language>
+												<approved>false</approved>
+											</translation>
+											<translation>
+												<language>en-US</language>
+												<approved>false</approved>
+											</translation>
+											<translation>
+												<language>es-CL</language>
+												<approved>false</approved>
+											</translation>
+											<translation>
+												<language>fr-FR</language>
+												<approved>false</approved>
+											</translation>
+											<translation>
+												<language>ru-RU</language>
+												<approved>false</approved>
+											</translation>
+											<translation>
+												<language>tr-TR</language>
+												<approved>false</approved>
+											</translation>
+										</translations>
+									</concept_node>
 									<concept_node>
 										<name>copy</name>
 										<description/>
@@ -660,6 +695,76 @@
 											</translation>
 										</translations>
 									</concept_node>
+									<concept_node>
+										<name>show_code</name>
+										<description/>
+										<comment/>
+										<translations>
+											<translation>
+												<language>ar-LB</language>
+												<approved>false</approved>
+											</translation>
+											<translation>
+												<language>de-DE</language>
+												<approved>false</approved>
+											</translation>
+											<translation>
+												<language>en-US</language>
+												<approved>false</approved>
+											</translation>
+											<translation>
+												<language>es-CL</language>
+												<approved>false</approved>
+											</translation>
+											<translation>
+												<language>fr-FR</language>
+												<approved>false</approved>
+											</translation>
+											<translation>
+												<language>ru-RU</language>
+												<approved>false</approved>
+											</translation>
+											<translation>
+												<language>tr-TR</language>
+												<approved>false</approved>
+											</translation>
+										</translations>
+									</concept_node>
+									<concept_node>
+										<name>show_code_help</name>
+										<description/>
+										<comment/>
+										<translations>
+											<translation>
+												<language>ar-LB</language>
+												<approved>false</approved>
+											</translation>
+											<translation>
+												<language>de-DE</language>
+												<approved>false</approved>
+											</translation>
+											<translation>
+												<language>en-US</language>
+												<approved>false</approved>
+											</translation>
+											<translation>
+												<language>es-CL</language>
+												<approved>false</approved>
+											</translation>
+											<translation>
+												<language>fr-FR</language>
+												<approved>false</approved>
+											</translation>
+											<translation>
+												<language>ru-RU</language>
+												<approved>false</approved>
+											</translation>
+											<translation>
+												<language>tr-TR</language>
+												<approved>false</approved>
+											</translation>
+										</translations>
+									</concept_node>
 									<concept_node>
 										<name>smaller</name>
 										<description/>

src/i18n/de.json

@@ -5,6 +5,7 @@
   "confirmRestart.yes": "Spiel neustarten",
   "editor.editing.bigger": "Level vergrößern",
   "editor.editing.color": "Wähle eine Farbe aus der Farbliste (max. 5 pro Level)",
+  "editor.editing.copied": "",
   "editor.editing.copy": "Levelcode kopieren",
   "editor.editing.copy_help": "Teile ihn im Kanal #levels auf unserem Discord",
   "editor.editing.credit": "Credits und Quellcode",
@@ -17,6 +18,8 @@
   "editor.editing.rename": "Levelname",
   "editor.editing.rename_prompt": "Gib einen neuen Namen für das Level ein",
   "editor.editing.right": "Bewege alle Steine nach rechts",
+  "editor.editing.show_code": "",
+  "editor.editing.show_code_help": "",
   "editor.editing.smaller": "Level verkleinern",
   "editor.editing.title": "Bearbeite Level: {{name}}",
   "editor.editing.up": "Bewege alle Steine nach oben",

src/i18n/en.json

@@ -5,6 +5,7 @@
   "confirmRestart.yes": "Restart game",
   "editor.editing.bigger": "Increase level size",
   "editor.editing.color": "Pick a color in the color list (max 5 per level)",
+  "editor.editing.copied": "Level code copied",
   "editor.editing.copy": "Copy level code",
   "editor.editing.copy_help": "Paste it in the #levels channel in our discord",
   "editor.editing.credit": "Credits and source",
@@ -17,6 +18,8 @@
   "editor.editing.rename": "Level name",
   "editor.editing.rename_prompt": "Please enter a new name for the level",
   "editor.editing.right": "Move all bricks to the right",
+  "editor.editing.show_code": "Show level code",
+  "editor.editing.show_code_help": "You can then copy it manually",
   "editor.editing.smaller": "Decrease level size",
   "editor.editing.title": "Editing level : {{name}}",
   "editor.editing.up": "Move up all the bricks",

src/i18n/es.json

@@ -5,6 +5,7 @@
   "confirmRestart.yes": "Empezar una nueva partida",
   "editor.editing.bigger": "Aumentar el tamaño del nivel",
   "editor.editing.color": "Elige un color de la lista de colores (máximo 5 por nivel)",
+  "editor.editing.copied": "",
   "editor.editing.copy": "Copiar código de nivel",
   "editor.editing.copy_help": "Pégalo en el canal #levels en nuestro discord",
   "editor.editing.credit": "Créditos y fuente",
@@ -17,6 +18,8 @@
   "editor.editing.rename": "Nombre del nivel",
   "editor.editing.rename_prompt": "Por favor, introduzca un nuevo nombre para el nivel",
   "editor.editing.right": "Mueve todos los ladrillos hacia la derecha",
+  "editor.editing.show_code": "",
+  "editor.editing.show_code_help": "",
   "editor.editing.smaller": "Disminuir el tamaño del nivel",
   "editor.editing.title": "Nivel de edición: {{name}}",
   "editor.editing.up": "Mueve todos los ladrillos hacia arriba",

src/i18n/fr.json

@@ -5,6 +5,7 @@
   "confirmRestart.yes": "Commencer une nouvelle partie",
   "editor.editing.bigger": "Augmenter la taille du niveau",
   "editor.editing.color": "Choisissez une couleur dans la liste des couleurs (max 5 par niveau)",
+  "editor.editing.copied": "",
   "editor.editing.copy": "Copier le code du niveau",
   "editor.editing.copy_help": "Collez-le dans le canal #levels de notre discord",
   "editor.editing.credit": "Crédits et source",
@@ -17,6 +18,8 @@
   "editor.editing.rename": "Nom du niveau",
   "editor.editing.rename_prompt": "Veuillez saisir un nouveau nom pour le niveau",
   "editor.editing.right": "Déplacer toutes les briques vers la droite",
+  "editor.editing.show_code": "",
+  "editor.editing.show_code_help": "",
   "editor.editing.smaller": "Diminuer la taille du niveau",
   "editor.editing.title": "Niveau d'édition : {{name}}",
   "editor.editing.up": "Déplacez toutes les briques",

src/i18n/ru.json

@@ -5,6 +5,7 @@
   "confirmRestart.yes": "Перезапустите игру",
   "editor.editing.bigger": "Увеличить размер уровня",
   "editor.editing.color": "Выберите цвет из списка цветов (максимум 5 на уровень)",
+  "editor.editing.copied": "",
   "editor.editing.copy": "Скопировать код уровня",
   "editor.editing.copy_help": "Вставьте его в канал #levels в нашем Discord",
   "editor.editing.credit": "Кредиты и источник",
@@ -17,6 +18,8 @@
   "editor.editing.rename": "Название уровня",
   "editor.editing.rename_prompt": "Введите новое название уровня.",
   "editor.editing.right": "Переместите все кирпичи вправо.",
+  "editor.editing.show_code": "",
+  "editor.editing.show_code_help": "",
   "editor.editing.smaller": "Уменьшить размер уровня",
   "editor.editing.title": "Уровень редактирования: {{name}}",
   "editor.editing.up": "Поднимите все кирпичи.",

src/i18n/tr.json

@@ -5,6 +5,7 @@
   "confirmRestart.yes": "Oyunu yeniden başlat",
   "editor.editing.bigger": "Seviye boyutunu artır",
   "editor.editing.color": "Renk listesinden bir renk seçin (seviye başına en fazla 5)",
+  "editor.editing.copied": "",
   "editor.editing.copy": "Kopyalama seviyesi kodu",
   "editor.editing.copy_help": "Bunu Discord'umuzdaki #levels kanalına yapıştırın",
   "editor.editing.credit": "Krediler ve kaynak",
@@ -17,6 +18,8 @@
   "editor.editing.rename": "Seviye Adı",
   "editor.editing.rename_prompt": "Lütfen seviye için yeni bir ad girin",
   "editor.editing.right": "Tüm tuğlaları sağa taşı",
+  "editor.editing.show_code": "",
+  "editor.editing.show_code_help": "",
   "editor.editing.smaller": "Seviye boyutunu azalt",
   "editor.editing.title": "Düzenleme düzeyi : {{name}}",
   "editor.editing.up": "Tüm tuğlaları yukarı taşı",

src/levelEditor.ts

@@ -14,6 +14,7 @@ import {
   MAX_LEVEL_SIZE,
   MIN_LEVEL_SIZE,
 } from "./pure_functions";
+import {toast} from "./toast";
 
 const palette = _palette as Palette;
 
@@ -146,6 +147,11 @@ export async function editRawLevelList(nth: number, color = "W") {
         value: "copy",
         help: t("editor.editing.copy_help"),
       },
+      {
+        text: t("editor.editing.show_code"),
+        value: "show_code",
+        help: t("editor.editing.show_code_help"),
+      },
       {
         text: t("editor.editing.bigger"),
         value: "size:+1",
@@ -228,7 +234,7 @@ export async function editRawLevelList(nth: number, color = "W") {
       });
       return;
     }
-    if (action === "copy") {
+    if (action === "copy" || action ==='show_code') {
       let text =
         "```\n[" +
         (level.name || "unnamed level")?.replace(/\[|\]/gi, " ") +
@@ -241,7 +247,24 @@ export async function editRawLevelList(nth: number, color = "W") {
         "\n[" +
         (level.credit?.replace(/\[|\]/gi, " ") || "Missing credits") +
         "]\n```";
-      navigator.clipboard.writeText(text);
+
+      if (action === "copy") {
+        try{
+        await navigator.clipboard.writeText(text);
+        toast(t('editor.editing.copied'))
+        }catch (e){
+          if('message' in e) {
+            toast(e.message)
+          }
+        }
+      }else{
+       await asyncAlert({
+          title:t('editor.editing.show_code'),
+          content:[`
+          <pre>${text}</pre>
+          `]
+        })
+      }
       // return
     }
     if (action === "rename") {

src/level_editor/levels_editor.tsx

@@ -1,5 +1,4 @@
-import { Level, Palette, RawLevel } from "../types";
+import {  Palette, RawLevel } from "../types";
-import _backgrounds from "../data/backgrounds.json";
 import _palette from "../data/palette.json";
 import { createRoot } from "react-dom/client";
 import { useEffect, useState } from "react";

src/tooltip.ts

@@ -14,7 +14,9 @@ export function hideAnyTooltip() {
 const tooltip = document.getElementById("tooltip") as HTMLDivElement;
 
 function setupMobileTooltips(tooltip: HTMLDivElement) {
+  tooltip.className='mobile'
   function openTooltip(e: Event) {
+    hideAnyTooltip()
     const hovering = e.target as HTMLElement;
     if (!hovering?.hasAttribute("data-help-content")) {
       return;
@@ -23,8 +25,9 @@ function setupMobileTooltips(tooltip: HTMLDivElement) {
     e.preventDefault();
     tooltip.innerHTML = hovering.getAttribute("data-help-content") || "";
     tooltip.style.display = "";
-    const { left, top, height } = hovering.getBoundingClientRect();
+    const {  top } = hovering.getBoundingClientRect();
-    tooltip.style.transform = `translate(${left}px,${top}px) translate(${left > window.innerWidth / 2 ? "-100%" : "0"},${top > window.innerHeight / 3 ? "-100%" : height + "px"})`;
+    tooltip.style.transform = `translate(0,${top}px) translate(0,-100%)`;
+
   }
 
   document.body.addEventListener("touchstart", openTooltip, true);
@@ -43,6 +46,7 @@ function setupMobileTooltips(tooltip: HTMLDivElement) {
 
   document.body.addEventListener("touchend", closeTooltip, true);
   document.body.addEventListener("mouseup", closeTooltip, true);
+  document.addEventListener("scroll", hideAnyTooltip);
 
   function ignoreClick(e: Event) {
     const hovering = e.target as HTMLElement;
@@ -58,6 +62,7 @@ function setupMobileTooltips(tooltip: HTMLDivElement) {
 }
 
 function setupDesktopTooltips(tooltip: HTMLDivElement) {
+  tooltip.className='desktop'
   function updateTooltipPosition(e: { clientX: number; clientY: number }) {
     tooltip.style.transform = `translate(${e.clientX}px,${e.clientY}px) translate(${e.clientX > window.innerWidth / 2 ? "-100%" : "0"},${e.clientY > (window.innerHeight * 2) / 3 ? "-100%" : "20px"})`;
   }