Code Monkey home page Code Monkey logo

sui8192's Introduction

SUI 8192

A fully on-chain, extra challenging version of the popular 2048 game. Built on Sui by Ethos.

You can play SUI 8192 at https://ethoswallet.github.io/Sui8192

SUI 8192 consists of a smart contract that allows the player to mint a game that is playable on chain.

The front-end submits transaction to the Sui blockchain that calculates the next state of the game board. That next state is returned to the front end to display the next state. Most of the logic in the front-end involves diffing and animating the game board states to create an interesting and enjoyable user experience.

Sui

This project is built on the Sui blockchain, which provides the performance necessary for a great game experience. Every move is a transaction that is recorded on-chain, making the gameplay verifiable, shareable, and transferable. Each game is an NFT that can be sent to anyone and will display in a web3 wallet (such as the Ethos Wallet).

Ethos

This project uses the Ethos APIs to make the SUI 8192 game accessible to people who do not yet have a web3 wallet. It allows them to start playing the game right away without having to figure out a wallet first.

As far as the game is concerned every player has a wallet because the Ethos APIs provide a unified interface for both players with and without wallets.

The primary methods that this game uses to do this are:

<EthosConnectProvider>, SignInButton, and ethos.transact()

Each of these can be found by searching in js/game.js

  • The Ethos APIs currently require react and react-dom which is why they are included.

The Smart Contract

The SUI 8192 smart contract is written Sui Move for deployment on the Sui blockchain. It consists of three parts:

  1. Game: Primarily entry functions for making moves and recording the overall game state.

  2. Game Board: Most of the game logic.

  3. Leaderboard: A shared object that accepts games, sorting them into order based on top tile and score.

The code for the smart contract is in the "move" folder.

If you deploy the smart contract and want to use the new deployment in the game you'll need to edit js/constants.js and set the contract address and leaderboard address.

You wil see output like this:

Created Objects:
  - ID: 0x6d86e967767b3d736447bc5f29c74e8b6b9c5dd7 , Owner: Immutable
  - ID: 0xf9803ad429fe9083a6c26f52c4f1ffa981d5ccbf , Owner: Shared

The immutable object is the contract address and the shared object is the leaderboard address.

Working With The Smart Contract

From the move folder:

Build Contract

sui move build

Test Contract

sui move test

or

sui move test --filter SUBSTRING

Deploy Contract

sui client publish --gas-budget 10000

You will need to update the contract and leaderboard address in constants.ts with the values provided when you publish the contract.

The Front-End

The front end is written in plain javascript, html, and css. It has minimal dependencies and is statically hosted on GitHub, using the blockchain for all persistent state.

It has react as a dependency to work properly with the Ethos apis which provide wallet connecting capabilities as well as an easy pathway for people who do not yet have a wallet to play the game via email or social authentication.

Working With The Front-End

Initialize Front End

yarn

Running Front End

yarn start

This should automatically open a browser window with the latest code running.

Deploy Front End

Running yarn start will generate the necessary static files for deployment. Simply commit those files to the main branch of github and the live site should be updated.

sui8192's People

Contributors

jaredcosulich avatar juzybits avatar adamwade2384 avatar jayrodkc avatar i-am-neon avatar

Stargazers

Afolabi Johnson  avatar

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.