Online multi-player classic pong game.
- visit https://www.play-pong-online.site/
- click PLAY
- send the invitation link to your friend
- when your friend joins, the match starts🔥
- play till you win😤
I wanted to play pong with my partner in long-distance. We didn't find any on the Internet. So I decided to build one.
I also wanted to try things further with my Full-stack SAM application pattern blueprint (https://github.com/yozibak/serverless-chat)
# Install deps
pnpm i
# Deploy backend resources to dev environment
pnpm deploy:backend # -> prints API endpoint url
# Create .env
cd frontend/app
cp .env.default .env # <- write API endpoint url & key
# Run frontend
pnpm dev
# Optionally, you can deploy your frontend build onto dev s3 bucket
pnpm deploy:frontendsequenceDiagram
actor player1
participant server
actor player2
player1 ->> player1: initiate game as a host
player1 ->> server: subscribe
player1 ->> player2: send invitation link or show QR
player2 ->> player2: access the game
player2 ->> server: subscribe
player2 ->> server: initial message
server -->> player1: receive initial message
player1 ->> player1: locally set the start time
player1 ->> server: start sending starting time constantly
server -->> player2: receive starting time
rect rgb(80, 80, 80)
player1 --> player2: waiting, set up initial state and stuff
end
rect rgb(100,100,100)
player1 --> player2: start game at time, counting frames
end
sequenceDiagram
actor player1 as player1(local)
participant server
actor player2 as player2(opponent)
loop frame at n-x
player2 ->> server: send state payload
server -->> player1: receive opponent's state as frame[n-x]
note right of player1: save the payload
end
loop frame at n
player1 ->> player1: import input & get snapshot
note right of player1: combine network state & local
alt if ball is on p1 side
player1 ->> player1: calc next ball position based on local data
else
player1 ->> player1: calc next ball position based on network data
end
player1 ->> server: send final state as frame[n]
server -->>player2: receive state
player1 ->> player1: render state
end
| player bar | opponent’s bar | ball | |
|---|---|---|---|
| when ball is on player's side | once | recursive | once |
| when ball is on opponent's side | once | recursive | recursive |
flowchart LR
localInput --> merged
localSnapshot --> receiverState
networkPayload --> receiverState
receiverState --> merged
merged --recursively resolve frames--> finalSnapshot
You can basically deploy to your AWS environment by selecting test or prod as sam deploy --config-env just as same as dev environment.
To setup CICD, follow steps below.
Go to AWS console -> Pipeline -> Settings -> Create connection
Select your repository & create connection. Copy the connection ARN.
Once Github connection is created, deploy pipeline by running:
sam deploy
\--config-env pipeline
\--parameter-overrides ConnectionArn=GITHUB_CONN_ARN,FullRepositoryId=<username>/<repository_name>The entire stages and actions are as follows:
flowchart TD
subgraph Source
ConnectionArn
end
subgraph Build
BuildStack
end
subgraph Test
deployStackTest(DeployStack)
buildFrontTest(BuildFrontEnd)
test(TestApplication)
deployTest(DeployFrontEnd)
BuildArtifactAsZip --> deployStackTest
deployStackTest --stack info --> buildFrontTest
buildFrontTest --build--> test
buildFrontTest --build--> deployTest
end
subgraph Deploy
deployStackProd(DeployStack)
buildFrontProd(BuildFrontEnd)
deployProd(DeployFrontEnd)
deployStackProd --stack info --> buildFrontProd
buildFrontProd --build--> deployProd
end
Source --✅--> Build
Build --✅--> Test
Test --✅--> Deploy