MINESWEEPER

Comment intégrer le Démineur dans Notion

Une page Notion peut accueillir une grille de Démineur entièrement jouable, mais Notion n’accepte pas de code iframe. Il prend un lien.

Temps nécessaire
Environ 1 minute
Type de bloc
/embed
Ce que tu colles
Une URL, pas du HTML
Forfait Notion
Tous, y compris gratuit

Le générateur d’intégration te remet un bloc de HTML qui ressemble à ceci :

<iframe
  src="https://play-minesweeper.games/embed/?size=beginner"
  width="344"
  height="472"
  frameborder="0"
  title="Minesweeper Game"></iframe>

…suivi d’un court paragraphe qui porte un lien vers le jeu :

<p style="…">
  <a href="https://play-minesweeper.games/">play-minesweeper.games</a> — free Minesweeper, no download
</p>

Sur WordPress ou Neocities, tu colles les deux tels quels. Notion ne prend ni l’un ni l’autre, car il n’a aucun bloc HTML brut. Les deux moitiés deviennent donc deux éléments Notion :

  • Le jeu : un bloc d’intégration auquel tu donnes l’adresse contenue dans src="...", soit https://play-minesweeper.games/embed/?size=beginner
  • La mention : une légende Notion ou une simple ligne de texte sous le bloc, avec les mots Play Minesweeper liés à https://play-minesweeper.games/

Notion est la seule plateforme de cette série où il faut reconstruire cette seconde moitié à la main, et c’est précisément pour cela qu’elle fait l’objet d’une étape numérotée plus bas plutôt que d’une note de bas de page. Notion affiche en outre chaque bloc d’intégration dans son propre cadre et en fixe lui-même les dimensions : les attributs width et height sont ignorés, même si tu essaies de les glisser. La taille se règle à la souris, en faisant glisser.

Voici le bloc exact à utiliser, comment le dimensionner pour que la grille ne soit pas coupée en deux, et que faire quand Notion affiche Failed to load.

Ajouter le Démineur à une page Notion, étape par étape

  1. Copie l’URL du jeu, pas la balise iframe

    Ouvre le générateur d’intégration, choisis une taille de grille et un thème, puis prends l’adresse qui se trouve dans src="..." : par exemple https://play-minesweeper.games/embed/?size=beginner. Notion ne peut pas exécuter du HTML collé, la balise iframe qui l’entoure ne sert donc à rien ici. Garde l’extrait dans ton presse-papiers ou à l’écran, car tu as aussi besoin du lien de mention de sa seconde moitié.

  2. Tape /embed sur une nouvelle ligne dans Notion

    Place le curseur sur une ligne vide de ta page Notion, tape /embed et appuie sur Entrée. Notion insère un bloc d’intégration avec un champ pour coller un lien. Tu peux aussi cliquer sur le + qui apparaît dans la marge de gauche et choisir le bloc d’intégration (Embed) dans la liste.

  3. Colle l’URL et valide l’intégration

    Colle l’URL play-minesweeper.games/embed dans le champ et valide. Si tu colles plutôt le lien directement sur une ligne vide, Notion affiche un petit menu qui demande quoi en faire : choisis l’option d’intégration plutôt que Create bookmark (créer un signet), qui n’afficherait qu’une carte d’aperçu.

  4. Fais glisser le bloc jusqu’à la taille voulue

    Survole le bloc d’intégration. Des guides noirs apparaissent sur les bords gauche et droit, et une poignée le long du bord inférieur. Tire les côtés pour la largeur et le bas pour la hauteur, jusqu’à ce que toute la grille et le bouton smiley soient visibles sans barre de défilement intérieure.

  5. Ajoute le lien de mention sous la grille

    L’extrait comprend une ligne de mention sous le jeu, et comme Notion ne peut pas afficher ce HTML, tu dois la recréer avec un élément Notion. Soit tu sélectionnes le bloc d’intégration, ouvres le menu de sa poignée et choisis Légende (Caption), soit tu ajoutes une simple ligne de texte juste en dessous. Ensuite, fais pointer les mots Play Minesweeper vers https://play-minesweeper.games/ avec Ctrl+K ou Cmd+K. Cela prend dix secondes, et c’est ce qui garde l’intégration gratuite.

  6. Vérifie l’aperçu et partage la page

    Appuie sur Échap pour désélectionner, puis joue une partie pour vérifier que les clics et les clics droits sont bien pris en compte. Partage la page avec Partager > Publier si tu veux que des visiteurs sans compte Notion puissent jouer.

Dimensionner la grille dans une page Notion

Une page Notion par défaut offre environ 700 pixels de largeur utile, et le bloc d’intégration se trouve dans cette colonne. C’est ce chiffre qui décide de la grille à choisir :

  • Débutant (9×9) demande environ 344×472 pixels. Elle tient dans une page standard, dans une mise en page à deux colonnes et dans un bloc dépliable. C’est la taille à prendre en cas de doute.
  • Intermédiaire (16×16) demande environ 536×664 pixels. À l’aise sur une page normale, à l’étroit dans une colonne.
  • Expert (30×16) demande environ 956×664 pixels. Active d’abord Full width (« Pleine largeur ») dans le menu ••• de la page, sinon les colonnes de droite de la grille sont coupées et les joueurs se retrouvent avec une barre de défilement horizontale dans le cadre.

Tire la poignée du bas jusqu’à ce que le bouton smiley de remise à zéro et le compteur de mines soient tous deux visibles. Si le bloc est trop court, Notion ne réduit pas le jeu : il en cache simplement le bas, et c’est de loin la plainte la plus fréquente à propos des jeux intégrés dans Notion.

Pour placer la grille à côté de tes notes, fais glisser le bloc par sa poignée ⋮⋮ jusqu’au bord droit d’un paragraphe existant, jusqu’à ce qu’un guide vertical bleu apparaisse : Notion transforme alors la zone en colonnes.

Les particularités de Notion à connaître avant de publier

Le clic droit fonctionne, mais le menu de Notion peut s’ouvrir d’abord. Le jeu annule le menu contextuel du navigateur, si bien qu’un clic droit sur une case pose un drapeau. Si tu fais un clic droit juste à côté de la grille, tu tombes sur le menu de bloc de Notion : vise l’intérieur de la grille grise.

Le mode sombre n’est pas hérité. Notion n’indique pas à une page intégrée quel thème utilise le lecteur. Si ton espace de travail est en mode sombre, génère le code avec le thème sombre pour que la grille ne brille pas en blanc sur une page sombre :

https://play-minesweeper.games/embed/?size=beginner&theme=dark

Le lien de mention est la partie qu’on oublie. Partout ailleurs, il arrive avec le collage ; dans Notion, non, puisqu’il n’y a pas de HTML à coller. Une légende sur le bloc, ou une petite ligne de texte en dessous avec Play Minesweeper lié au jeu, fait l’affaire. Ce lien est ce qui permet à une intégration gratuite et sans inscription de se financer, alors ajoute-le, s’il te plaît. Il passe d’ailleurs mieux en légende qu’en texte courant.

Les exports perdent le jeu. Les intégrations ne survivent pas à l’export PDF ou Markdown de Notion : une page exportée affiche le lien, pas une grille jouable. C’est le comportement normal de toutes les intégrations Notion, rien de propre à celle-ci.

Les pages publiées se comportent comme les pages privées. Un site Notion ou une page partagée avec Share to web charge l’intégration pour les visiteurs anonymes : une page de wiki interne comme une page d’accueil publique fonctionnent.

De bons endroits pour un bloc Démineur dans Notion

  • La page « salle de pause » ou la page du vendredi d’un wiki d’équipe, où une grille 9×9 offre deux minutes de distraction.
  • Une page d’accueil des nouveaux arrivants, rangée dans un bloc dépliable intitulé par exemple « récompense pour avoir terminé cette section ».
  • Une page de cours ou de révision, à côté de notes sur les probabilités et la déduction : le Démineur est un exemple travaillé et limpide de raisonnement sous contraintes.
  • Un tableau de bord personnel, dans la colonne de droite à côté de ta base de données de tâches.

Si tu veux une forme de grille précise plutôt qu’un des préréglages, l’URL accepte des dimensions explicites et un nombre de mines, par exemple ?size=12x12&mines=20. Ajouter &branding=false retire la ligne « Powered by » dessinée dans le cadre, ce qui est purement esthétique : elle n’a rien à voir avec le lien de mention que tu ajoutes en légende, et celui-ci reste dans tous les cas.

Questions sur l’intégration dans Notion

Peut-on coller du HTML iframe dans Notion ?

Non. Les blocs d’intégration de Notion n’acceptent qu’une URL : Notion n’a aucun bloc HTML brut, et une balise iframe collée reste simplement affichée en texte brut. Copie l’adresse qui se trouve dans src="..." du code d’intégration et colle-la à la place.

Pourquoi mon intégration Notion affiche-t-elle « Failed to load » ?

Ce message signifie que le site lié refuse d’être affiché dans une autre page. L’URL d’intégration du Démineur est faite pour être encadrée : si tu le vois, vérifie que tu as collé l’URL /embed et non l’URL d’une page normale, et que l’adresse commence par https://.

Comment afficher l’intégration du Démineur en pleine largeur dans Notion ?

Élargis le bloc en tirant ses guides latéraux, puis ouvre le menu ••• de la page en haut à droite et active Full width (Pleine largeur) pour supprimer les marges par défaut de Notion. Sur une page pleine largeur, la grille Expert (30x16) tient sans peine sur un écran d’ordinateur portable.

L’intégration fonctionne-t-elle dans l’application mobile Notion ?

Oui. Notion ne bloque que les intégrations qui exigent de se connecter à un service externe, et celle-ci ne demande aucun compte. Sur téléphone, la grille est étroite : choisis la taille Débutant 9x9 et pose les drapeaux avec un appui long au lieu du clic droit.

Les visiteurs ont-ils besoin d’un compte Notion pour jouer ?

Non. Une fois la page publiée sur le Web, toute personne disposant du lien peut l’ouvrir et jouer. Le jeu tourne entièrement dans son navigateur et ne stocke rien dans ton espace de travail Notion.

Faut-il ajouter le lien de mention à la main dans Notion ?

Oui, et seulement dans Notion. Sur toutes les autres plateformes, la ligne de mention arrive avec l’extrait collé, mais Notion n’a aucun bloc HTML brut, donc rien de ce que tu colles ne peut la transporter. Recrée-la en légende du bloc d’intégration ou en ligne de texte en dessous, avec les mots Play Minesweeper liés à https://play-minesweeper.games/. C’est grâce à ces liens que l’intégration est gratuite et sans limite d’usage.

Un bloc d’intégration consomme-t-il mon stockage de fichiers Notion ?

Non. Un bloc d’intégration stocke un lien, pas un fichier : il n’est pas concerné par la limite de 5 Mio par fichier téléversé des espaces de travail Notion gratuits. Tu peux ajouter autant de grilles que tu veux sans toucher à ton stockage.

Tout ce qui figure sur cette page part d’un extrait du générateur : un cadre de jeu et, en dessous, une ligne de mention avec un lien. Choisis une taille de grille et un thème, décide si tu affiches la ligne facultative « Powered by » à l’intérieur du jeu, puis copie le code.

Ouvrir le générateur d’intégration du Démineur

Également utile : le générateur de widget Démineur et les options de l’iframe, comment jouer au Démineur et les tailles de grille personnalisées.