AccueilClientsExpertisesBlogOpen SourceContact

9 janvier 2019

ISS Escape game

3 minutes de lecture

ISS Escape game

Nous aimons bricoler, coder et tester de nouveaux concepts régulièrement. L'occasion s'est de nouveau présentée lors d'une soirée dans nos locaux, présentation ici de notre premier escape game et des différentes étapes de sa réalisation. 🚀

🗒 Scénario

Nous disposions d’une petite salle de 4m carrés et la thématique de l’espace est récurrente dans nos locaux. Un channel Slack #space est d’ailleurs dédié à l’actualité sur l’espace et plus particulièrement au suivi des différents lancements de fusées. Nous sommes donc partis sur un scénario avec cette salle devenant un module défaillant de la station spatiale internationale dont il faut s’échapper. Une suite d'énigmes amène les joueurs à accéder à un serveur central pour activer l’évacuation d’urgence.

La salle

L'écran du serveur central utilisant une application simulant un environnement type SF. Dispo sur GitHub https://github.com/GitSquared/edex-ui

🕵️‍ Énigmes

Ayant chacun participé à plusieurs escapes games, les énigmes ont été créées plus rapidement que nous le pensions en repensant au thème et au matériel qui était déjà à notre disposition. Dans la plupart de ces jeux on retrouve des combinaisons de cadenas, des correspondances avec des formes et des codes couleurs ainsi que des objets à trouver. Nous voulions avoir une durée relativement courte pour 2 joueurs c'est pourquoi l’ensemble comporte seulement 5 énigmes.

Une ardoise avec plusieurs codes dont certains chiffres sont écrits au marqueur indélébile est la première énigme à trouver, plusieurs joueurs n’osaient pas l’effacer même avec des indications les encourageant. C'est pourquoi nous jetions un œil régulièrement et communiquions via talkie walkie pour aider les joueurs.

Un autre code devait être trouvé grâce à une lampe à lumière noire révélant des signes écrits au feutre UV. Le code final d’accès du serveur central nécessitait de jouer quelques notes sur une guitare avec un accordeur afin de le révéler. Ce-dernier permettant d'appeler les secours et ainsi terminer le jeu.

Enigme

Aussi une machine à fumée, des couvertures de survie et les musiques du film Interstellar ajoutaient une ambiance pesante sur les participants 😈.

⚛️ Bonus app

Pour garder le score (et surtout parce que l’on aime vraiment coder) une petite web app React a été créée. Les données sont stockées sur Firebase, ce qui permet d’utiliser la base de données temps réel et d’ajouter un service worker pour recevoir une notification lorsque les participants accèdent à la commande d’urgence et peuvent enfin s'échapper !

App button

Firebase

L'affichage des scores est affiché sur une tablette à côté de la salle et nous souhaitions aussi recevoir les notifications sur nos smartphones.

Notifications

Firebase s'est avéré répondre aux besoins mais la documentation officielle manque d'exemple pour les notifications web avec service worker. Voici donc comment nous demandons côté client à s'inscrire sur un topic de notification

// Request permission with the browser, get a unique token and subscribe to a topic
const messaging = firebase.messaging()
messaging.usePublicVapidKey('XXX')

await messaging.requestPermission()
const token = await messaging.getToken()
fetch(`https://europe-west1-escape-game-
XXXX.cloudfunctions.net/app/subscribe/${token}`)

messaging.onMessage((payload) => {
  console.log('Notification Received', payload)
})

Il faut ensuite implémenter la partie serveur sur cloud functions pour envoyer la notification lors qu'une partie se termine.

const functions = require('firebase-functions')
const admin = require('firebase-admin')
const express = require('express')
const cors = require('cors')({ origin: true })

admin.initializeApp(functions.config().firebase)

const app = express()
app.use(cors)

// Send a notification when a game end
exports.updateGame = functions
  .region('europe-west1')
  .firestore.document('games/{gameId}')
  .onUpdate((change, context) => {
    const newValue = change.after.data()
    const previousValue = change.before.data()

    if (!previousValue.endedAt && newValue.endedAt) {
      admin.messaging().send({
        notification: {
          title: `${newValue.player1} et ${newValue.player2} sont sauvés !`,
        },
        topic: 'notifications',
      })
    }
  })

// Subscribe a token to a  topic
app.use(cors)
app.get('/subscribe/:token', (req, res) => {
  admin.messaging().subscribeToTopic([req.params.token], 'notifications')
})

exports.app = functions.region('europe-west1').https.onRequest(app)

Pour plus de détails le dépôt GitHub est disponible.

Je m'échappe 👋🚀.

La salle

À découvrir également

Gérez les notifications dans une WebView avec React Native

11 Oct 2024

Gérez les notifications dans une WebView avec React Native

Gérez les notifications dans une WebView avec React Native

par

Colin

AI et UI #1 - Filtres intelligents avec le SDK Vercel AI et Next.js

12 Jun 2024

AI et UI #1 - Filtres intelligents avec le SDK Vercel AI et Next.js

Dans ce premier article d’une série consacrée à l’IA et l’UI, je vous propose de découvrir différentes manières d’intégrer ces modèles d’IA dans vos applications React pour améliorer l’expérience utilisateur.

par

Baptiste

Retour d'expérience chez 20 Minutes : s'adapter au journalisme numérique

30 May 2024

Retour d'expérience chez 20 Minutes : s'adapter au journalisme numérique

Dans cet article, vous ne trouverez pas de snippets ou de tips croustillants sur React, seulement le récit d'une aventure plutôt ordinaire à travers le développement et l'évolution d'un projet technique.

par

Vincent

Premier Octet vous accompagne dans le développement de vos projets avec react

En savoir plusNous contacter
18 avenue Parmentier
75011 Paris
+33 1 43 57 39 11
hello@premieroctet.com

Suivez nos aventures

GitHub
X (Twitter)
Flux RSS

Naviguez à vue