Giter Site home page Giter Site logo

dopewars's Introduction

Dope Wars Banner

Dope Wars

Github Actions

Dope Wars is an onchain adaptation of the original Drug Wars game, built on Starknet using the Dojo Engine.

Development

Install the latest Dojo toolchain from releases or follow the installation guide

With Katana

# Start Katana
katana --disable-fee

# Build the game
sozo build

# Migrate the world, this will declare/deploy contracts to katana and take note of the world address
sozo migrate

# Start indexer, graphql endpoint at http://localhost:8080
torii --world {world_address}

# Setup default authorization & initialization
./scripts/default_auth.sh [local]

# Copy manifest.json into web directory & do graphql/ts codegen
./scripts/gen.sh

# Start frontend, located at http://localhost:3000
cd web
yarn install && yarn dev

In Scarb.toml, there is various shortcut defined using scripts. For exemple scarb run migrate will execute sozo migrate then gen.sh / default_auth.sh

sozo build && scarb run migrate

Any errors when doing sozo build ?

This might be because your version of sozo is not correct.

Check the Scarb.toml file and get the rev or tag from the dojo dependency:

[dependencies]
dojo = { git = "https://github.com/dojoengine/dojo.git", rev = "ca2d2e6dd1ef0fe311310ba0728be8743b1d5cc8" }
# or
dojo = { git = "https://github.com/dojoengine/dojo.git", tag = "v0.3.15"}

In this example, this is how we would install the correct rev version:

git clone https://github.com/dojoengine/dojo.git
cd dojo
git checkout ca2d2e6dd1ef0fe311310ba0728be8743b1d5cc8
dojoup -p .

For tagged version, you can use dojoup:

dojoup -v v0.3.15

This will reinstall the binaries in your ~/.dojo/bin folder.

With Madara

TBD

Mechanics

As in the original Drug Wars, players will land in a fictional NYC, arbitraging the price of drugs in an attempt to stack paper and own the streets.

Dope Wars extends the core game mechanic of arbitraging drugs in different neighborhoods to a multiplayer environment where each player’s actions affect the in-game economy, creating a competitive and evolving environment. During each turn, a player will travel to a neighborhood, review the current market prices for drugs, and decide to Buy or Sell. After each turn is complete, the market prices will be affected by the previous player’s turn, adding a new layer of strategy to the game. Random events affect prices between turns to avoid making the game too deterministic.

Game Loop

The following game loop is repeated until the end condition of the game is reached:

graph TB
    J{{Join game lobby}} -->|Deposit fee + Commit to Loadout| B[Wait for Start]
    B --> |Markets initialized, Loadout revealed|TS
    TS[Turn Sarts] --> TsN
    TsN([Player at Location])
    TsS([Player is in the Shop])

    TsN --> Trade{{Buys / Sells drugs on local markets}}
    Trade --> Travel{{Select next location to travel to}}
    Travel --> Safe[/Player travels without incident/]
    Travel --> E[/Player Encounters Gang / Cops/] --> ED
    TsS --> Shop{{Player Can Buy an Item}}

    subgraph Encounter
        ED{{Select Pay / Run / Fight}}
        ED --> CP[Pay] & CF[Fight\n] & CR[Run]

        CP --> |Pay Them Off|Op([Paid])

        CR --> |Escapes|Oe([Escaped])
        CR --> |Gets Caught|Oc([Captured])

        CF --> |Wins Fight|Ov([Victorious])
        CF --> |Looses Fight|Oc
        Oc --> Oc0>Loose Some Health]
        Oc0 --> Oc1[/Has Some Health Left/]
        Oc0 --> Oc2[/Has None Health Left/]
        Oc1 --> ED
        Oc2 --> Od([Dead])
        Op --> L>Loose some drugs / money]
        Oe --> R>Location gets Randomised]
        Ov --> W>Gain Some Money]

    end
    Shop --> ET[End Travel]
    Safe --> CS[Check if Shop is Open\nShop opens every nth turn]
     
    L --> CS
     
    R --> CS
    W --> CS
    Od --> GO[Game Over]

    
    CS --> SO[/Shop Open/] --> TsS
    CS --> SC[/Shop Closed/]
    SC --> ET --> MU>Markets Update] --> TE[Turn Ends] --> TS


Loading

Future improvements

Currently, game initialization state is hidden during the join phase, players commit to a loadout (i.e. their weapons, clothing, etc) and reveal it upon their first turn. Once the game has begun, market state is randomly initialized (each location contains a constant product market) and players can start the game loop. Market state is transparent, players can view the prices at other locations as well as other player balances.

  • Player inventories should be hidden until the game end condition is reached, at which point, they would reveal their current inventory
  • Mugging is currently PVE, eventually, it would be cool to do it PVP, in which case, the mugger should not know the loadout of their target until the mugging is performed. Ideally there is a mechanism to force the "mugger" and "muggee" to reveal their loadout. See https://github.com/FlynnSC/zk-hunt#search

dopewars's People

Contributors

broody avatar notv4l avatar larkooo avatar tarrencev avatar clicksave avatar zoemeriet avatar akhercha avatar hug0x0 avatar junichisugiura avatar bengineer42 avatar sparqet avatar

Stargazers

asuma avatar okhai avatar  avatar Sman  avatar Daniel Bejarano avatar  avatar Wondong Shin avatar ₿2008 avatar roger_s avatar  avatar Erhan avatar Ameya Deshmukh avatar Andrey Kucherenko avatar Coburn avatar Buster7 avatar Stone Gao avatar Federico Carrone avatar Hossein avatar Tran Chinh avatar Alexander Keating avatar Peyton Spencer avatar  avatar Hoanh An avatar Cindy Chau avatar LIB avatar  avatar Pedro Junior  avatar Mark Anthony avatar Frost avatar Matthias avatar Thomas avatar kia avatar Omelette avatar enixlee avatar 1ln9 avatar Mourad Kejji avatar Jon Insley avatar Stardust avatar Neilson K-S avatar  avatar  avatar Xiaolong Zhao avatar geoffhorwitz.eth  avatar Lyron Co Ting Keh avatar  avatar Nadai avatar Jaybamaniya avatar Robin Straub avatar loothero avatar StarkNet 中文 | China avatar highskore avatar  avatar  avatar Erlend Sogge Heggen avatar Zk avatar Keeks avatar Brandon H. Gomes avatar Non avatar Fran Algaba avatar Peteris Erins avatar  avatar Loaf avatar

Watchers

 avatar  avatar Loaf avatar  avatar

dopewars's Issues

Build a Media Component and update the UI audio feedback

Description

We have some amazing music that has been produced for RYO, and we'd like to have something a little more nuanced than a simple mute/unmute button for the audio. So lets build a media component. It should allow players to Play/Pause and Cycle through the different songs (7 total).


Videos

Desktop Behavior - Shows player interacting with the media component

Screen.Recording.2023-06-10.at.1.28.35.AM.mov

Desktop idle State - Shows the idle state of the media component (while a song is playing)

Screen.Recording.2023-06-10.at.10.09.15.AM.mov

Mobile Behavior
Note: on mobile you will need to implement a slightly different UX as it doesn't accommodate hover states.

Screen.Recording.2023-06-10.at.9.24.32.AM.mov

Resources

Figma Pages
Desktop - Mobile
Media Button Components
Desktop - Mobile
Prototypes
Desktop - Mobile


Sound
OK heres the fun part, check out this insane music. (Credit to Casey Wescott, super talented musician/audio engineer who hooked us up)

MusicTracks_Pass_1.zip

He also produced a set of really nice sounds for button feedback and will be a fun exercise to fine tune the audio mapping for specific game events, but for now lets just update the generic button press sound.

ArcadeGameButton_S011TE.23.wav.zip


Requirements

  • Build the media component for desktop
  • Make it responsive
  • Update the button click feedback

Update the button audio feedback

Currently button audio feedback triggers on hover only, and while cool can be a little overwhelming. Lets update it so that it occurs on click instead.


Requirements
[ ] Remove the button on hover audio feedback
[ ] Add audio feedback on click

Add a decision tree to the random event

Theres a huge opportunity to make these more nuanced than whats presented here. but this seems like a good way to introduce the concept/mechanic. Lets make the random event pages more engaging.


image

Pages


Gang Encounter

image

Note: I have a timer on this page, this isn't necessary but maybe it'd be cool to have some kind of counter that adds some pressure to the decision. Or maybe the timer actually has some bearing on the outcome. just a thought. happy to omit if its too much.


Mugged!

image

Note: maybe we have variable percentages here. i.e. if you pay them right away it could be less punitive than if you try to run and they catch you


<Escaped!>

image

Note: Returning them to their original location is a clever option imo. they get to keep their cash but they effectively lose a turn. open to a few different options though. Could drop them in a random location, could just evade the gang. maybe we poll the Dope Wars discord on this one.


<Summary page>

We'll need to add a result for 'escaped'

image

Pages

Figma


Resources

TestFighter2

Improvements to the Game Lobby

Description

We've already constructed a lobby page, but it isn't interactive yet. Lets change that.

Here's a video showing the desired behavior.

Screen.Recording.2023-06-15.at.4.12.39.PM.mov

Going to call out a couple things here..

    • Lobbies should be joinable
    • There is both a 'Home button' & a 'Leave button' Leave button removes you from the game lobby, home button returns you to the home page.
    • There is a timer that counts down until the game start time. following that the Start button becomes active and you can no longer share the game.
Screen.Recording.2023-06-15.at.4.27.15.PM.mov
    • Your character is highlighted yellow in the list of players
    • After joining the lobby the game details bar appears in the header
    • The home page contains a list of all the lobbies you have joined

Note: not included in this prototype are the primary button states. Just a pain to prototype, so assume that those are staying the same. i.e. include the skeuomorphic 'Press' effect

Note: The timer has a flash effect when the minutes change, tried this on the seconds counter as well but felt like it was too much. Would love to have this but lmk what you think.


Resources

Pages

Fix inventory module

Inventory component doesnt scale. In this video I'm buying acid but you don't see it in my inventory because it's full.

Video.Jul.31.2023.13.57.57.1.mp4

I designed this little component for the inventory module, it adds arrows when there are results that exist off screen. arrows scroll the content horizontally. Think its a good solution, and would prefer it to one that stacks the results (saves vertical space)

Screen.Recording.2023-07-31.at.2.49.08.PM.mov

Theres an additional issue where the empty state for the module doesn't reappear when you sell all of your product

image

I've changed the design a bit as well -> replaced the background fill with a border so it doesn't compete with the header buttons.

image

Requirements

  • Fix bug where empty state doesn't appear
  • Update component to allow scrolling
  • Update UI

Build a Tutorial pattern

Lets add a tutorial pattern to give new players a way to familiarize themselves with the game/rules. I imagine this can/will change a bit as the game evolves. Simplest strategy is to have it appear in a modal

Screen.Recording.2023-09-05.at.3.09.16.PM.mov

Resources

Pages
Components


Note: This design moves the 'create burner' button to the header

Will follow up with responsive comps

Build the Paper Bridge UI

Lowish priority ticket, just want to document it. We probably shouldn't wire it up until we have a plan for paper tokens

Screenshots

image image

Resources

Pages

Implement price controls

With the limitation on bag size we should also look into adding price controls on a drug by drug basis.

I did a bunch of playtesting w/ the older game and collected the different prices I saw for each drug.

One that immediately jumps out is that certain drugs are always cheap relative to others. theres a clear hierarchy. This adds a sense of progression to the game. Theres also a lot more variation on the higher end. Combined with bag size it makes for some interesting decisions. i.e. you can't buy cocaine in the early game, you can't make a significant profit on ludes in the late game

You start with $5500 for reference


Cocaine

28330
28000
27530
27000
26505
26320
26310
25410
25000
24610

23620
22430
21300
20620
19340
16605

15720
15700

Heroin


Addicts are buying heroin at outrageous prices!! : 49200 (Scarcity) 



25000
12640
11880

11640
11560
10000
9840

9600
9480
8760
8520
7920
7840
7720
7000
6980
6760

5400


“Pigs are selling cheap heroin from last weeks raid !!” : 1120 (Discount)



Acid

4400
4200
4100
3600
3400
3200
3000
2800
2600
2500
2300
2000
1700

1200
1000

“The markets are flooded with cheap homemade acid!!!” : 200 (Discount)

Weed


720


700
630
620
610
605
530
505
450
430
410
400
340
330
320
310
300

Columbian Freighter Dusted the coast guard !! Weed prices have bottomed out !! : 88 (Discount)

Speed

240
230
220
210
190
180
170
160
150

140
130
120
110

Ludes

50
40
30
20
10


Build the Random Events pages

Description

Lets add some RNG to the game. When players end their turn there should be a percentage chance that a random event occurs. We only have two for now but it's a good place to start

Videos

Screen.Recording.2023-07-10.at.5.37.22.PM.mov

Events

  • Mugged. Player loses half their cash
  • Arrested. Player loses a turn

GIFS

Mugged
RYO_Gun_Transparent

Arrested
policecar_V3_transparency

Resources

Pages - Desktop Mobile


Requirements

  • Random event results should be a line item in the summary page

Note: my be a cool idea to choose from a set of different descriptions as well. It doesn't have to say "Nothing personal kid" every time you get arrested

Add feedback to number selectors

Right now the number inputs are a little lackluster and could benefit from better feedback.

See https://rollyourown.preview.cartridge.gg/create


Here's a design that introduces some hover states for the arrows and has the field's value flash to signal that its changed.

Screen.Recording.2023-06-02.at.9.28.58.AM.mov

Figma:
Pages
Button States
Field States
Prototype


Task:
Improve feedback for the number field

Note: This ticket is really about the behavior of the arrows but would be cool to have a way to type the value of the field as well

Build the Buy/Sell Page

Description

Each drug will have its own 'Market' page where you can exchange money for supply or visa versa. You can access this page by clicking on the drug on the location page.

This is part of the core game loop. Prices fluctuate turn to turn and your goal as a player is to arbitrage them and make a profit.

Screen.Recording.2023-06-16.at.1.48.35.PM.mov

Requirements

  • Build a Market page for each of the six drugs (Ludes, Speed, Weed, Acid, Heroin, Cocaine)
image
  • Players will be able to click 'max buy' and 'max sell' to quickly navigate the amounts
  • Players will able to incrimentally change the quanity with the arrows to the right and left of the horizontal progress bar thing
image
  • On the market page the home button is replaced by a back button which will take you back to the location page
  • The 'bag number' and the amount of money you have in the header change depending on your activity
image
  • We likely will add additional feedback when players buy/sell things but for now lets just get this page working
  • Make it responsive
image

Resources

Pages

Mobile Comp

Illustrations

Build the Credits page

Would be cool to credit people who contributed to the project (if they want), so I've added a special button to the home page. And if you (contributor) want credit as well, add your name to the list


Desktop

Screen.Recording.2023-07-10.at.11.23.14.AM.mov

Mobile

Screen.Recording.2023-07-10.at.11.24.41.AM.mov

Links

image

The links will redirect to the following pages

Cartridge - https://cartridge.gg/
Dojo - https://dojoengine.org/
Mr. Fax - https://twitter.com/Mr_faxu
HPMNK - https://twitter.com/HPMNK_One
Casey Wescott - https://twitter.com/CaseyWescott


Resources

Pages - Desktop Mobile

Prototypes - Desktop Mobile

Components Desktop - Button Modal

Components Mobile - Tab Modal

Updates to the home page

A couple QOL things, lets fix some of the navigational stuff.

  • remove the home button from the home page. it's is intended to take you back to this page, so not necessary/functional here
image
  • Remove the game status bar
image

This bar only exists in the game and you should see it after you click quick play, but it doesn't make sense to show it here.

  • Remove the connect button. Theres been some thinking done about this. new players will be assigned a burner wallet, and will input a name for the leaderboard after the game ends.

  • Remove the chat button. This page is intended as a way to chat with players /in your game/ I'm open to making it a global chat but my guess is that we're not going to be ready for it at first launch. Lets remove it for now, at least from the home page.


Requirements

  • Remove the home button from the home page
  • Update the primary button text from 'quick play' to 'hustle'
  • Remove the game status bar
image
  • Remove the chat button from the home page
  • Remove the connect button

Remove horizontal scroll on mobile (inventory page)

observed on iPhone, Safari

Description

Theres some unwanted horizontal scrolling on mobile. scroll should be vertical only


Video.Jul.26.2023.18.45.23.mp4

  • Remove horiztontal scroll on the inventory page

Update the Home Page

Description

To get RYO out the door we're going to implement a simplified version of the game that removes the lobby mechanism.

Instead, players will be able to click a button and jump right into a game instance. We're also adding a leaderboard to the home page. check it out.


image

We also have a mobile comp

image

Requirements

  • Remove the lobby components from the home page
  • Build the global leaderboard
  • Update the sidepanel graphic on desktop
  • add a 'credits' button (can be non-functional for now, will add as a separate ticket)

Resources

Pages


NOTE: Results will be sorted by the balance accrued when the game ends (day 30)
NOTE: Clicking 'quick play' will drop the player into a new game at a random location
NOTE: Your contributions to the leaderboard are highlighted in yellow
NOTE: This design assumes players are connected with a cartridge controller and includes the cartridge avatar as a thumbnail icon for the leaderboard. This may not be feasible at the time being. as an alternative you can use on the the player icons from the chat page or you can omit it entirely

Build the Chat/Activity Page

Description

A big part of the game is going to be communicated via the chat feature.

It will contain system messages, random events information, and of course a chat log where players can communicate. The first iteration of this page is accessible via the header. Check it out

Screen.Recording.2023-06-20.at.1.28.46.PM.mov

Details

Player Messages

Initially, players will be assigned a random avatar for the duration of the game, when they communicate it will but displayed along with their message.

image

Like most chat apps, other players avatars will be left aligned to their messages and your avatars will be right aligned

image

New Bar

There will also be a new bar, that places a reference point in the chat feed separating messages you've seen from the ones that are new.

image

If new messages exist, the chat button in the header will change its appearance (become yellow).

image

It's default state (when no new messages exist) is green

image

Random Events

We'll initially support three kinds of random events. Hacked, Mugged, and Arrested. When one of these occurs it should be broadcast to the chat along appended with that players username.

If this occurs to you, the username should be replaced with 'You' (i.e. You were Hacked)

image

System Messages

We'll also want to show system messages, i.e. if a player joins the game, if the game starts, and if when the game ends

image

Empty State

If no one has said anything, and no messages exist, we might want to consider adding an empty state.

image

Audio

We'd like to add some unique audio feedback for new messages. When one is received the player should hear a notification. Of these, my favorite is 1b_Pager_Send_Soft_5 but feel free to experiment.

PAGER_SFX.zip


Responsiveness

There are some design constraints for mobile devices that should be considered. See below. Same logic, but the chat button now appears in a menu.

Screen.Recording.2023-06-20.at.1.39.55.PM.mov

Resources

Pages - Desktop Mobile

Components - Link

NOTE: This is kind of a complicated feature, so consider this a first pass. We anticipate that the scope of this page will change over time, and im sure there are a few things I havent anticipated

Improve Dropdown behavior

Lets build some custom dropdowns. Would be nice if these were more aligned with the rest of the game UI (see below)

Screen.Recording.2023-06-02.at.10.28.18.AM.mov

Designs
Pages
Prototype
Hover States
Dropdown


Task:
Update the dropdown UI/behavior

Note: We'll also want to apply this design to the 'Duration' field

Paginate the leaderboard

Not certain what the ideal number or results per page should be (50?) but heres a scalable solution for the leaderboard. Nothing fancy, lets just break down the leaderboard to reduce the amount of data the page needs to load.


Pages

image image

Button states

(Active, inactive, hover)

image

Resources

Pages

Component

Reskin the Chakra Date selector

We may decided to modify the 'Starts' field to be a date selector instead of the simple dropdown that exists now.

Nothing fancy, just a reskin of the selector that already exists in Chakra.

https://chakra-ui.com/docs/components/input#input-methods-other-than-text

image

Resources
Mockup
Components
Date/Time Field Button States Selector

Note: The mobile version of this input as an entirely different pattern. Don't have designs for that view quite yet. We should find out whether or not it's using Native UI elements before we proceed

Build the Results page

Eventually the game will end and it'd be really cool to show players a 'Results' page. See below


image image

Trophy is a .gif

Trophy3D_Transparent


NOTE: I think there are a ton of ways this can be improved and the kind of information you want to show here depends a lot on the rules.
NOTE: Turns are asynchronous rn, so if other players in the lobby haven't finished their game, I'm showing the turn they're on (i.e. DAY 26) instead of their balance. I'm not sure 'Balance' tells you much, because players will have most of their cash in product at any given point
Note: the only thing you can do on this page is return to the lobby


Pages

link

Reskin the 'Your Inventory' Component

image

Description

The location page contains an inventory component that is currently out of date. Another issue is that it breaks the scroll behavior on mobile

See below

Video.Jun.13.2023.16.29.47.mp4

Lets update this to the current designs.

On smaller screens, or mobile devices some horizontal scrolling may be necessary. So in this case an arrow should appear (on the right or left side depending on which direction you need to scroll.

Screen.Recording.2023-06-13.at.4.43.53.PM.mov

Requirements

  • Update the Inventory component UI
  • Remove the horizontal scroll behavior on mobile
  • Add the button scroll behavior and button feedback

Resources
Pages
Component
Prototype

Build the Location Pages

Description

We have a finalized set of illustrations for the location pages! lets add them to the game.

image

The full flow for goes like this

At location -> End Turn -> Select new location -> Random event -> summary page (confirmed on starknet) -> New location

See the following for a general idea

Screen.Recording.2023-06-19.at.11.30.00.AM.mov
  • Note: On Mobile the illustrations are omitted
image

Requirements

  • Build a page for each location (distinct title & illustration)
  • Build the responsive pages
  • Have the travel flow advance the turn (i.e. After traveling Day 2 turns into Day 3)

Resources
Figma Pages - Desktop
Illustrations - Link

Build the Results Page and Game End pattern

OK, so let me know if this is coherent. We need to figure out a good pattern to end the game and a couple issues present themselves.

The biggest thing, is that turn 30 is not like turns 1-29

  • It doesn't make sense to buy product on the last turn (you won't be able to sell it)
  • It doesn't make sense to travel on the last turn (for the same reason)

In fact, the only thing that makes sense on the final turn (to me) is to force the user to sell all of their remaining product. Soo, lets do that.

Also, consider what this may mean for certain random events.

  • Players probably shouldn't be arrested on turn 29 (they can't lose their final turn)

I'm making a few small modifications to the UI and hoping this isn't too big of an ask.

Inventory Page

  • Replace the 'Continue' Button with the text 'Sell All and Continue'
  • Put the drugs that you don't own into a disabled state
  • Replace the 'Day 30' string in the title with 'Final Turn'
image

Buy/Sell Page

  • Remove the 'Buy' option and replace it with a custom alert
image
  • Change the default amount in the sell field to MAX (optional)
image

NOTE: I'm open to just disabling the buy/sell page entirely on this step but it might be nice to allow people to sell their stuff incrementally, either way, when they leave the inventory page they're selling their product.


Travel Page

  • Doesn't exist for the final turn, take them straight to the turn summary page

Summary Page

  • Removed the location and random event components
  • Updated the illustration

OK and last but not least...

Results Page

Since all users are using the same wallet in this initial version, we need to provide a way for them to add their name to the leaderboard.

So i built this fancy in-line input field where people can write their name directly to it.

image

At this step, I'm not showing the whole leaderboard, just the two result directly above and below the players final score.

Mobile is a little different, Theres not a ton of space, and doing the inline field editing feels kind of forced to me, so, here I'm dropping the context entirely

image

I also added an error prompt if we need it

image

Clicking submit ends the game session and takes you back to the homepage


Resources

Pages - Desktop - Mobile

Extend the drug card hover target to the entire card

In order to see the buy/sell buttons you currently need to hover over the specific place on the card where they appear. This should be extended to the entire card (e.g. anything within the outline that contains the title and pricing information

Screen.Recording.2023-09-15.at.11.50.58.AM.mov

Fix header issues on mobile

When navigating to a page that requires a back button the header jumps around

Video.Jul.31.2023.13.36.20.mp4

  • Elements should be fixed in place.
image

There are also some sizing/ui improvements that I'd like to make

image

Photo Jul 31 2023, 13 58 33

  • Back button should be left aligned
  • dot dot button should be right aligned
  • game status bar should be center aligned
  • header should be taller. 40px -> 48 px Link
  • Header doesn't scale to fit large numbers, so we should have some kind of solution for that. If we need to show $3,500,000 maybe we render it as 3.5m.. etc.
  • Replace clock icon with a calendar icon
    Generic Icons
  • Replace '9/10' text with '9' i.e. just show the day

Add a sound toggle to the header

RYO will have music and sound effects. players will need a way to toggle that on and off. So we're putting a Sound Toggle in the header. Check it out

Screen.Recording.2023-06-01.at.4.02.17.PM.mov

Here are the designs

Header

Button

Icons

Pages

Prototype: Desktop, Mobile


Task:

  • Add a mute button to the header this will appear on all pages

Note: The header is rendered a little differently on mobile (horizontal and vertical padding is removed with some slightly different button detailing)

Note: On mobile the hover state is replaced by a tap state

Note: Sound should be on by default

Update the menu button on mobile

ATM there is no way to return to the game after you navigate to the leaderboard page, we don't have a working chat page, and the profile button 'shinobi' doesn't show relevant information.

My recommendation is to remove the non functional options for the time being, leaving only the media player, and account button.

Photo Jul 31 2023, 16 30 05


image

Link


Account button

We're using burner wallets, so they don't have usernames the way cartridge controllers do. in light of this I'l love to update the button text from 'Shinobi' to the wallet address.

Clicking on this button should open up a log out modal.


I would love to add a 'Credits' option which shows the contributors to the game. If you've worked on this game and aren't listed here lets add a line for you as well! (if you want)


Additionally, the mockups add a translucent background overlay to the menu, as well as a border that creates some space for the menu items. I'd love to include these visual updates in this batch of work.

Link


  • Remove extra non-functional buttons from the menu (mobile)
  • Add a credits button
  • Add log out modal
  • Update the UI

Buy/Sell page updates before taking you back to the inventory page

See below, clicking 'buy' should take you directly back to the inventory page where you see the notification confirming your purchase. Currently the results update first saying 'you're broke' etc. for a second before ultimately taking you where you need to go. Can we remove this lag?

Screen.Recording.2023-07-31.at.4.59.56.PM.mov

Issue is also present on the travel page

Screen.Recording.2023-07-31.at.5.07.48.PM.mov

  • Remove page lag on the buy/sell actions
  • Remove page lag on the travel page

Modernize cairo code

There have been a few changes to Dojo we should update to support.

We can use all the latest fancy things in our code that have since been added to Cairo. Some examples:

  • true/false keywords instead of bool::True(())/bool::False(())
  • less type suffixes (e.g. _u32), the compiler now infers most of the stuff
  • less turbofish
  • more loops
  • no more need for withdraw_gas
  • combine imports: use foo::{Bar, Baz}

Implement Header Modifications

The Header buttons feel too small, and over the course of the design some structural changes have been made to it. lets implement them

image image

Requirements
[ ] Increase the height of the objects/buttons in the header (they should all be consistent, I now have them at H:48px
[ ] Add the connect/player button to the header on all pages
(Note: Formerly, the connect/player button was only available on the home page)
[ ] Reorganized buttons

  • Left Group (home/back button)
  • Center Group (Game Details, Chat, Equipped button)
  • Right Group (Media player, Connect/player button)
  • Replace the 'Day counter' with a 'Health counter'
    [ ] Update the responsiveness
  • Remove the diamond icon on mobile, adjust the padding and spacing of the details bar, increase the size of the home button
    and menu button, Update the corner treatment. See below
image image

Resources
Pages
Components

Update border radii to pixel corners

The corners of the primary buttons have been built with this really nice rounded-corner pixel effect. We'd like extend that treatment to all places where rounded corners exist in the app.

image image

To achieve this effect a svg is cut into four quadrants and applied it to each corner.

Task:

  • Apply pixel corners to the secondary buttons and status bar in the header
  • Apply pixel corners to the inventory bar
  • Apply pixel corners to the 'My games' section on the Home Page
  • Apply pixel corners to the location toggle on the Travel Page

Figma:
Link

SVG:
Corners

Notifications need to be dismissible

Theres an issue where in some places you need to wait for the notification to disappear before continuing. It's not ideal, but either way you should be able to dismiss a notification. particularly on mobile. Lets replace the external link button with a close button, and allow players to swipe a notification away.

RPReplay_Final1690825875.MP4

image

Link

Improvements to the Buy/Sell pattern

Think this a a pretty good quality of life improvement. Have been watching people interact with the game and it seems like they get tripped up by the tabs on the buy/sell tabs.

So lets get rid of them and have players decide whether they want to buy or sell on the location page directly

See below

Screen.Recording.2023-09-12.at.1.43.17.AM.mov

Annd mobile comps

image image

You'll notice some differences. documenting here

  • Theres a reconfiguration of the input section of the market page
image
  • I added a number field for players to type the quantity of drug they want. Would be cool to add, and convenient for players

  • I'm introducing 'health' to the Status Bar

image

Note: Including this stat, forces us to render it differently on mobile. We needed the extra space anyways so here's what I came up with

image

Resources

Pages
Prototype

Improve Input behavior

We have a pretty normal input atm, uses the classic '|' cursor. Would be cool to do something a little more retro. Take a look at the video below.

Screen.Recording.2023-06-01.at.5.40.17.PM.mov

Task: Update the input cursor to a flashing block instead of the a vertical pipe

Figma:
Pages
Prototype
Input States

SVG:
Cursor

Update the landing page

We're adding some marketing style content to the landing page to make it more interesting and provide some additional context to the game. See below.

Screen.Recording.2023-09-08.at.8.59.02.AM.mov

Screenshot

image

Resources

Prototype
Pages

Notes

  • These changes only apply to the desktop view of the page, the mobile version remains the same
  • I expect we'll update some of the illustrations and we'll certainly update the copy but go ahead with these as placeholders
  • The tutorial pattern seen in the video is outlined in a separate issue. here

Build the Game Summary page

We have a request for a game summary page. Somewhere you can see a history of your past trades or easily screenshot for clout.

image

Think it's a great idea, lets build it.


Screen.Recording.2023-07-21.at.12.13.07.AM.mov

Desktop

image

Note: there is a state change on the button when it is selected. Background fill -> to border
Note: we're moving the back button so that it's closer to the rest of the UI

Mobile

image

Note: Since the game state bar is a button now, i modified the proportions of it a bit. It's bigger


Pages - Desktop Mobile

Reformat the side panel illustrations

Early designs for RYO called for for full bleed images on desktop to augment the page content (see below)

image

This has since changed and new designs call for the illustration to be center aligned (with some vertical padding on the top)

image

Note: We don't have the final set of illustrations yet, but they will all follow this format placeholders can be found here
Note: These illustrations are still omitted in the mobile view of the game


Figma:
Link

Task:

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.