Skip to content

Latest commit

 

History

History
137 lines (112 loc) · 7.29 KB

readme.md

File metadata and controls

137 lines (112 loc) · 7.29 KB
Raw

Portofolio🚀🚀🚀

Source code of https://johansenjunias20.github.io

Go to deploy repository

⭐ Reviewed by Web Programming Unpas

🔗https://www.youtube.com/watch?v=pjDYyyMh4rM&t=3997s

alt text

Please install Git bash and Docker⚠️

Development

bash dev.sh
  • Run webpack build watch and nodemon websocket
  • Only build files not serve files, you still need to serve public/index.html file with public folder as relative path. Please use Live Server

Production

bash prod.sh
  • Run Coturn Server and websocket server and build files
  • Only build files not serve files, you still need to serve public/index.html file with public folder as relative path. Please use Live Server

Preview✨

alt text

To do Description Done
Map Pointer draw 2D Arrow on screen if character's position off the map
Spawn Wave Effect Objects appear from underground to the surface in sequence, start from the center point (character spawn) towards outside ✅
Post Processing Bloom on Billboards Image, Blur Camera's Edges, Selective Outline on knowledge In Progress
Responsive Mobile UI Add Joystick & fix blury noise when screen resized ✅
Desc on knowledges Whenever user click a knowledge, it will show it's description on html modal
Add Showcase WPU Add 3D showcase by Web Programming Unpas Channel ✅
Player List UI Draw list of players & move camera to specific player when user click player's name ✅
more playground boardgame that can be played with bots or other players like connect 4
Bots to playground implement bots so players can play alone
Advanced Multiplayer implement Multiplayer to playground (play connect 4 with other players)
Add more knowledges nginx, node.js, adobe, docker, expo, aws, laravel, threejs, opengl ✅
Add more billboard projects minecraft-clone, Accounting Web, Laughing Clown
Contact Person Github, and LinkedIn at lobby Area ✅
Shadows on Movable Object shadows on movable object like character(ball), johansen mesh, and hotkeys Suspended (complicated)
Dockerize Coturn image coturn/coturn seems to be broken, planning to make own custom coturn image ✅
Nicknames Add nickname on top each player's character ✅
Smooth Movement P2P Make interpolation position between each data sent to peers ✅
Spotify Activity Show spotify profile, activity, and playlist In Progress
Graphics Settings Add options to lower the graphics quality (disable few post-processing) ✅
Easter Egg Add Easter Egg
Audio Visualization Add Audio Echo Visualization on current playing song

Notes

  1. Please write <!-- COPY --> content <!-- ENDCOPY --> in readme file that you want to copy to readme.md's JohansenJunias20.github.io

Files

.env

  • Config will be sent to /src/*.tsx through webpack config files
  • build.sh is responsible for passing variables in .env to webpack config file
  • Flow: /.env → build.sh → webpack.(dev/prod).js → /src/*.tsx

build.sh

  • Build /src/*.tsx files to /public/dist/bundle.js
  • If you are not sure what arguments suit for you just run dev.sh or prod.sh
  • Contain 2 arguments
    • -m | --mode DEV/PROD specify the mode
      • mode DEV will pass dev config from .env file and use webpack.dev.js as file config to compile /src/*.tsx files
      • mode PROD will pass prod config from .env file and use webpack.prod.js as file config to compile /src/*.tsx files
    • -d | --use-docker with virtualization or not, if you dont have docker installed you can leave this option unwritten (assuming you have node js and npm installed).
      • On windows, do not use DEV mode with virtualization because windows are not signalling file changes to docker mounted volumes

copy_readme.sh

  • Called by Github Actions to copy readme.md file from portofolio to JohansenJunias20.github.io
  • Copy lines start with COPY tag and end with ENDCOPY tag in readme.md file

dev.sh

  • Run code on development mode. Automatically find and run the most suit config for your OS
  • You still need live server extension to serve public/index.html file
  • What dev.sh do:
    • Copy .env file to ws-server/.env
    • Run socket.io server locally with docker
    • Run webpack development mode and watch changes on src/*.tsx

docker-compose.dev.yml

  • Run socket.io server service and run bash ws-server/dev.sh inside container
  • Run by dev.sh

docker-compose.prod.yml

  • Run socket.io server and turn server services
  • Run by prod.sh

install.sh

  • Run by github action
  • Installing Coturn and Websocket services on boot start up linux automatically ubuntu

porto.service

  • configuration for linux services used by install.sh

config_turn.sh

  • Configure turnserver.conf file based .env
  • Called by prod.sh

prod.sh

  • Run this script to deploy the code to production. It will automatically find and run the most suit config for your OS
  • You still need to use live server extension to server public/index.html file
  • What prod.sh do:
    • Copy .env file to ws-server/.env
    • Configure coturn
    • Run socket.io server & coturn server with docker
    • Run webpack production mode

ssl_renew.sh

  • Renew ssl certificates for turn and ws domains if about to expired
  • Docker required
  • Make sure port 80 is not being used by other process
  • Called by prod.sh

turnserver.conf

  • Config file for coturn server
  • Please do not change manually
  • This config based on .env config file
  • Please configure coturn's config on .env file, config_turn.sh will automatically copied .env to turnserver.conf file

wepback.dev.js

  • Webpack's config for development mode
  • Used by build.sh -m DEV

wepback.prod.js

  • Webpack's config for production mode
  • Used by build.sh -m PROD