Alienator is a web game where the user should guess the character name of Alienator, the boss of the game.
The user should send their question to Alienator who answers whether the question is correct or not as well as tips at sometimes to help them. The user has up to 15 attempts to guess it correctly.
The goal of developing this project was learn the features of HTMX, an amazing web technology that gives you access to AJAX without JavaScript, as well as _hyperscript, an easy lib to execute JavaScript code directly in HTML (similiar to Tailwind but for JS 😜).
|
- The game should be switch between 3 states: ready to start and running
- The user should start the game by a button if the game is ready to start
- The user should send a question to Alienator by a form if the game is running
- The user should not stop the game if it is running, that means the game only ends after the user wins or loses
- The user should start as many games as they want
- Alienator should think the name of a character as the game starts
- Alienator should avoid giving simple yes or no answers
- Alienator should answers user's question but he can never reveal the character he thought of
- Alienator should give user some hints in some of his asnwers to help them to guess it correclty
- Alienator should congratulate user if they manage to guess the character's name
- Alienator should mock the user if the cannot guess the character's name
- Alienator should say the name of the character as the game ends regardless whether the user won or lost
- Alienator should not answers not friendly family questions
- The Alienator's cat should inform the user how many attempts are left (this number should be updated with each question)
- The "wisdom" of Alienator shoud come from an AI
- The left attempts and The history of the user and Alienator "chat" should be saved while the game is running
- The history should empty and the attempts should reset to 15 if the game is ready to start
- The layout and the game behavior should adapt to the user device regardless of its size
-
HTMX to make requests to the server directly on the HTML
-
Hyperscript to make some components interactive
-
Python Flask to build the server
-
Gemini Ai to serve as the "wisdom" of Alienator
-
Tailwind to style the app
-
Flowbite UI to build static accessible ui components with tailwind
For more details about the project's dependencies like specific versions of each dependency, see package.json and requirements.txt
Before download the project you will need install some tools:
Besides that, it is good to have some tool to write the code like VSCode
Also it is pivotal setting the environment variables on the
.envfile before running the application. See the .env.example file to know which variables should be set
# Clone this repo
$ git clone https://github.com/JohnPetros/alienator.git .
# Install the python dependencies
$ pip install -r requirements.txt
# Install the node dependencies
$ pnpm install
# Run the application on a development environment
$ pnpm dev
Probably the aplication will be running on http://localhost:5000
- Docker the amazing technology to manage containers.
# Run
$ docker compose up --build
Probably the aplication will be running on http://localhost:5000
This application's deploy was made using Rende plataform, which means you can use the running application accessing this link.
# Fork this repo
$ git clone https://github.com/JohnPetros/alienator.git
# Create a nem branch for the new feature
$ git checkout -b new-feature
# Commit your changes:
$ git commit -m 'feat: <New Feature>'
# Push your branch:
$ git push origin new-feature
You must replace new-feature with the name the feature you are adding
You can also open a new issue about some problem, question or sugestion for the project. I will be happy to help as well as improve this application
This application is under MIT Licence. See the licence file to get more details about it.
Made with 💜 by John Petros 👋🏻