Code Monkey home page Code Monkey logo

pbji / ultimate-tic-tac-toe-2 Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 0.0 92 KB

This is going to be a revised version of the game I previously developed back in 2021. The game is nothing but ultimate variant of tictactoe, ever heard of it? No? Then try it out with your friends and maybe with an unbeatable bot.

JavaScript 100.00%
ai beginner-friendly bot fern game machine-learning machine-learning-algorithms minimax-algorithm ml monte-carlo

ultimate-tic-tac-toe-2's Introduction

Purshotam Bohra - Software Developer & IT Student

Hello, I'm Purshotam Bohra, a software developer with a passion for exploring web application development and a diverse set of interests. I'm currently pursuing a BSc in IT, alongside my active involvement in software development.

About Me

I've been actively involved in web application development and have successfully completed several small projects that demonstrate my growing aptitude in this field. Additionally, I have a keen fascination with software management techniques aimed at enhancing software-based projects.

Current Interests

  • Web Application Development
  • Software Management Techniques

Feel free to explore my projects below and get in touch if you're interested in collaboration or discussions.

Purshotam's GitHub Stats

Projects

Real-Time Chat App (React Application) (Work in Progress)

I'm currently working on a real-time chat application using the MERN stack. While the project is still a work in progress, it represents my ongoing journey in web application development. The backend components, including MongoDB and Express, are yet to be fully implemented from scratch, and the UI functionality is still evolving with major features pending development.

Explore the Chat App Project

Profile Editor (React Application) (September 2023)

This React application, developed using TypeScript and styled components, serves as a simple profile editor. Users can manage profiles by editing attributes such as age, gender, name, country, and description. The application includes validation checks to ensure data integrity during the saving process.

Explore the Dummy Profile Editor

WixCast (April 2023)

An automation project for uploading product details from WhatsApp to wix.com. Not functional due to failed development.

Explore the WixCast Repository

Edabit Scraper and File Automation (December 2022)

A JavaScript script for scraping, extracting, and downloading problem statements from Edabit.com into individual files, alongside a bash script for streamlining related processes.

Visit the Edabit-JS Repository

Ultimate TicTacToe JavaScript Game (November 2021)

A variation of traditional TicTacToe featuring a 9x9 grid with 3x3 sub-grids with a simple bot.

Experience Ultimate TicTacToe

CodePens

Draggable Labelled Boxes

So, while dabbling with blessed library on npm, I realized I should create a similar kind of box that has a label on its top border. While creating this cute box I added an extra dose of dragginess (don't confuse with drowsiness) to it. Link here

ultimate-tic-tac-toe-2's People

Contributors

nitkarshchourasia avatar pbji avatar

Watchers

 avatar  avatar

ultimate-tic-tac-toe-2's Issues

APIs

What apis would be used between express and react?

  1. Here is a rough list:

Serve the app: Send GET @ "/" return { Built React App }
To choose mode: Send Post { Multiplayer or Singleplayer } @ "/:gameid" returns { Gamestate, Status: Complete or Error}
To play a move: Send POST { move:[x, y] } @ "/:gameid" returns { Gamestate, Status: Complete or Error }

branch_issue: default branch of yours?

Check whether the default branch of yours is what you expected it to be.
module is the current default branch.
I think you intended bot to be your default branch?!

What bot?

List of AI agents we could potentially use (Please note, the author of this issue had limited knowledge about the vast variety of AI solutions, hence the list above would not reflect the actual optimized solution yet)

  1. Minimax
  2. Heuristic based
  3. Re-inforcement learning.

The complexity of each solution increase by the order.

plan: Choosing the development stack

The actual game would be hosted on NodeJS Express server.
For temporary hosting, we can use REPL to store and run the backend server.
React will be used to create and update the front-end.
The choice between using FIrebase or MongoDB is debatable. Firebase could provide real-time updates which is a plus, so currently the priority would be Firebase.

actions: Setup ideal workflow for this repo

Setting up workflows is another art one has to deal with, using workflows we could reduce much needed human hours and also build some cool looking dashboards right inside the repo.

The real game.

On the backend the real game would either functional or class based implemented.
We could store the game objects created by a single class in mongodb or firebase easily as both support json.

Bot type: Heuristic weights

Modules till now:

  1. Game setup: uttt.js
  2. Testing setup: uttt.test.js extends uttt.js
  3. Bot: uttt.bot.js extends uttt.test.js // Work in progress

Currently the bot that I am personally experimenting with is but static weights that I manually add based on few heuristics I have devised.
The heuristic weights and the coefficients for these weights are stored in the setup module.

But given that heuristic can fall short of performance when they encounter unexpected cases, the more robust solution would be to design neural-networks using re-inforcement learning. Which is quite a challenge in it's own. Hence this part of the issue will be taken care of in: #6 What bot?

[Documentation]: Not clear.

  • Programs are not well documented.
  • README.md is not precise, a reader might be confused as what features are pending, and what is to added.
    That is the current state, and the state which we want.
    Improve this.
  • Make it clear, understandable and precise.
  • Can't work unless, well documented.
  • Also, make a license for this repo.
  • Make a contributing.md.
  • Also, add images, explaining different things.
  • Also, how to install and uninstall, and run the program.

This, is a repo, which is does not count to open source standards.

frontend packaging: discussing the details.


We divide the front-end into two variety.

  1. User mode: Only keeps the current state of the game and general options.
  2. Research mode: Have full access and special panel to run simulations on back-end. This UI will be more dynamic in nature.


Specification for user frontend:

  1. It will not contain the game logic but will only reflect the game state.
  2. It cannot directly update the game state. but rather have controlled user inputs which will trigger API requests to update the game state in the backend.

That is it.

Game state:

  • currentPlayer,
  • currentMove,
  • movesArray, etc.

Controlled user inputs:

  • clickable cells,
  • non-clickable cells,
  • start game,
  • undo, etc.

API request:

  • send move for currentPlayer,
  • read reply,
  • undo move, etc.


ROUTINE for frontend development:

  1. Specify the general options for user on game setup changes in backend.
  2. Track bot experimental features and update the special panel for researchers to interact with these newly designed features.


UI DESIGNs for frontend:
Figma file for user and researcher interface design



TODOs (based on routines defined):

  1. Setup boards and cells that can be clicked. (Game setup)
  2. Setup api requests that sends user inputs like cell location and other metadata (player, name, etc.)
  3. When receiving an update, accordingly change user interface.

Firebase? How do we use it?

Firebase is known for it's realtime database which is the reason why it could be considered the only viable database for a good UX in multiplayer games. Further details of implementation and integration with the rest of the backend is open to discussion.

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.