Code Monkey home page Code Monkey logo

sleepy-spider's Introduction

Netlify Status Unit tests E2E Tests

SLEEPY SPIDER

Oh, no! Sleepy has fallen into a deep sleep!

It's a game half clicker, half quiz. You have to achieve the highest possible score within a one-minute time limit.



🎮 How to play

Visit: https://bilbostack.zenekezene.com.

Instructions to play

  • Tap as many times in a minute to help Sleepy wake up.
  • Answer questions correctly to get bonus points.
  • Challenge your friends and try to be the best. You can login with your Twitter account.



💻 Only for developers

🌱 Installation

Prerequisites

  • Node v18 or higher.

How install

The all-in-one script to install and launch in development mode is defined below. But you can install front and back separately:

$ cd front
$ npm install

$ cd ../back
$ npm install

🚀 Getting started

Development mode

All-in-one script (included installation)

To launch the dev mode, you can launch the all-in-one script called 'wakeup.sh'. This script launches the front and back projects together.

$ ./wakeup.sh

Separately

You can launch back and front separately.

$ cd front
$ npm run dev

$ cd ../back
$ npm run start

View the project

Finally, you can open the frontend with your browser: localhost:8000. The backend will be listening in localhost:3000.


Production mode

Front:

$ cd front
$ npm run build

Library:

$ cd lib
$ npm run build

Note: You may want to publish a new version of the package (in npm public registry) and then install it in the front dependencies.

$ npm version X.X.X
$ npm publish

Back:

Build process is not necessary. Only deploy the last version of back on your favorite server. We uses Railway but you can use whatever.

Different environments

There are more instructions to generate differente API environment inside the subfolder /back/README.md.

API URL

https://css-api.up.railway.app/api/v1/questions

🛣️ Roadmap

Some next steps to include:

  • Weekly challenges and gifts.
  • Landing page.
  • Replay game without reload.
  • Legal notes.
  • Night mode.

You can view the roadmap visiting this link: Sleepy Spider, the pet project.

💡 Idea

This project is an experiment to test the capabilities of canvas. It also serves as a challenge to practice using vanilla JS without the need for frameworks like React or Vue.

This project started like almost all of them: with pencil and paper.

Sketch one Sketch two

🗣️ Stay in touch

Contribution

The main purpose of this repository is to continue learning JS and canvas posibilities. Development of Sleepy Spider happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements.

And you can help donating:

Buy Me A Coffee



Contributors


License

MIT License

Copyright (c) [2023] [@zenekezene, @arturobarbaro].

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Sleepy Spider

sleepy-spider's People

Contributors

anxodio avatar zenekezene avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Forkers

anxodio

sleepy-spider's Issues

Propuesta a Bilbostack

Resumen
Queremos hacer una propuesta a los organizadores de Bilbostack para que usen Sleepy para su evento Bilbostack 2024, que sucederá el 27 de Enero 2024, en el Palacio Euskalduna Jauregia, Bilbao.

Escenarios posibles

  • Usar Sleepy Spider en redes antes del evento. Por ejemplo, para regalar X entradas a los ganadores. La integración con X (Twitter) ayuda.
  • Usar Sleepy Spider durante el evento. Por ejemplo, entre charla y charla.
  • Usar Sleepy Spider después del evento. Por ejemplo, con preguntas sobre el evento.

Funcionalidades

  • Multi-lenguaje: español, inglés y euskera.
  • La base de datos es un excel, que a priori podrían rellenar ellos, pero que tendríamos que integrar nosotros.
  • Customización de UI, paleta de colores, etc.
  • Customización del título, subtítulo, hashtag, enlaces, etc.

Servicios

  • Customización.
  • Adaptación a multilenguaje (de ser requerido).
  • Puesta en marcha.
  • Mantenimiento.

Plan B si la propuesta no sale
WIP

Performance en Android

Como usuario, quiero poder experimentar la misma experiencia despertando a Sleepy con independencia del dispositivo que esté usando.

Escenarios:
En dispositivos Android, suceden los siguientes comportamientos raros:

  • Las animaciones de los ojos corren lentas.
  • Las animaciones de la araña (iddle, wakeup) corren lentas.

Nota: cuando los ojos se abre, las partículas Zzzz se comportan extrañamente.

  • La animación de tap no parece reaccionar inmediatamente, como si pasa en iOS, lo cual hace impacta en el feeling del usuario (candidato a splitear como issue aparte).

En dispositivos iOS no se presentan estos bugs, ni en Chrome ni en Safari, así como en navegadores de escritorio.

Captura de vídeo

Bug con ranking

Posibles escenarios a testar:

El juego termina y veo la pantalla final. Podrían pasar los siguientes escenarios:
Como usuario no logado

  1. Hay cero jugadores rankeados como para mostrar el TOP 3:
  • Mostramos TOP 3 falso + CTA para logarse.
  1. Hay entre cero y menos de 3 jugadores rankeados en el TOP 3.
  • Mostramos TOP 3 falso, mezclando los jugadores rankeados con los falsos + CTA para logarse.
  1. Hay jugadores suficientes rankeados para mostrar el TOP 3.
  • Mostramos el TOP 3 real + mostramos la puntuación del jugador + CTA para logarse.
    No ordenamos el TOP respecto a la puntuación del jugadores, siempre la colocamos al final.

Como usuario logado

  1. No hay jugadores suficientes rankeados para mostrar el TOP 5.
  • Mostramos TOP 5 falso, teniendo en cuenta la mejor posición del jugador.
  1. Hay jugadores suficientes rankeados para mostrar el TOP 5.
  • Si está entre el TOP 5, metemos mejor posición del jugador en dicho TOP y pintamos las 5 puntuaciones.
  • Si no está entre el TOP 5, pintamos TOP 5 sin el jugador.

Nota: la mejor puntuación del jugador se refiera a la que acaba de conseguir (local) o la que tuviera rankeada de antes (remoto).

Testeo responsive con Browserstack

Como usuario, quiero poder jugar a Sleepy en multitud de pantallas y dispositivos, y en todas ellas quiero tener una experiencia similar.

Para ello, los elementos de interfaz se ven adecuadamente, así como la propia araña y elementos relacionados.
Podríamos probar en BS.

  • Iphone 12 - Safari

  • Iphone XR - Safari

  • Iphone 8 - Chrome, Safari - No funciona

  • Iphone 11 Pro - Safari

  • Iphone XS - No funciona.

  • Ipad 9th, OK.

  • Ipad Pro 12, 2020.

  • Ipad Pro 11, Chrome, 2022.

  • Ipad Mini 2019, no funciona.

Creo que si quitamos el Optional chaining operator ganaríamos más compatibilidad.

Ranking con puntuaciones vecinas

Quiero mostrar la previsualización del ranking de la siguiente manera:

  1. Enseñar siempre el TOP3, de haberlo.
  2. Enseñar la puntuación del usuario.
  3. Ubicar la posición del usuario dentro del ranking total.
  4. Enseñar la puntuación por encima y por debajo del usuario, de haberlas.

Bug con zoom

Como usuario, quiero poder jugar al juego sin que el zoom aumente por razones equivocadas.

Como replicar
Probado en dispositivo iOS, al hacer tap rápidamente, sobre todo por la parte central del dispositivo, si este toca algún texto (o similar), el zoom aumenta.
Probablemente pase también en Android.

Captura
Image

Documentar entornos de backend

Flujo

1.- Nuestra base de datos, una hoja de cálculos

Nos apoyamos en Google Sheets, pero valdría cualquier otra herramienta de hojas de cálculo, como Excel. Por ejemplo: https://docs.google.com/spreadsheets/d/1xSLlB_hpHBXuD2LOmMss7lMMl9HSYUTmfNIO6EMWYVo/edit#gid=748318665.

Image

Los campos son:

  • question (string): Por ejemplo: Which CSS property is used to change the background color of an element?
  • option1 (string): Por ejemplo: background-color
  • option2 (string): color
  • option3 (string): text-color
  • option4 (string): Por ejemplo: element-color
  • correct (string): respuesta correcta. Tiene que coincidir el texto exactamente con una de las cuatro opciones. Esto quizá sea un pain.
  • tags (string): Separados por comas. Por ejemplo: CSS, SASS
  • database-id (string): Identifica de forma única qué version de datos es.

2.- Exportar nuestra hoja de cálculos

  • Archivo > Descargar > Valores separados por comas (.CSV).
    Image

3.- Convertir a JSON

Necesitamos convertir el fichero .CSV a un fichero .JSON. Para eso nos apoyamos en la siguiente herramienta:
Convertidor Online

4.- Integrar en proyecto

Movemos el fichero JSON al monorepo: back > src > databases > XXX.json
Pusheamos los cambios al repositorio.

5.- Conectamos con el backend

Usamos Railway para crear servicios y exponerlos en producción. En este caso, tan solo usamos servicios web para exponer nuestra API de preguntas, así nuestra araña puede mostrar dichas preguntas al usuario.

Crear entorno nuevo

Railway funciona con entornos, esto nos da la posibilidad de tener una instancia aislada del servicio que queramos ofrecer, en este caso un servicio web que expone una API. Para crear un entorno nuevo:
Image

Rellenamos los campos, con especial cuidado de rellenar la variable de entorno DATABASE_FILE. Esta variable apunta al fichero .JSON que hemos metido en nuestro proyecto back, pero no tenemos que prefijarlo con el path ni sufijarlo con el nombre formato. Si por ejemplo, nuestro fichero se llamaba questions.database.json, tan solo tenemos que poner questions.database.
Image

También necesitas indicar en qué proyecto apoyarse para ofrecer el servicio. En nuestro caso, es un proyecto en Node albergado en un monorepo, bajo el subdirectorio back.
Image

Con el entorno creado

Si ya tuviéramos un entorno creado, bien porque estuviera creado de antes, bien porque la acabamos de crear, tan solo tenemos que cambiar la variable de entorno DATABASE_FILE de nuestro servicio, como hemos indicado antes.

Al guardar los cambios, se desplegará una versión nueva de nuestro servicio.
Finalmente habremos creado el servicio y nos dará una URL, como esta:
Image
Que utilizaremos a continuación.

6.- Conectamos con el frontend

Utilizamos Netlify para desplegar nuestro frontend y servirlo a nuestros usuarios. Pero, para que la araña pueda mostrar nuestras nuevas preguntas, necesitamos apuntar a la URL anterior.

Con esta URL, vamos a Netlify, y modificamos la siguiente variable de entorno con dicha URL como valor:
Image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.