Just for fun mode (#540)

* wip: add noelo mode

* finish just for fun mode

app/public/src/pages/after-game.tsx

@@ -7,7 +7,7 @@ import AfterGameState from "../../../rooms/states/after-game-state"
 import firebase from "firebase/compat/app"
 import { FIREBASE_CONFIG } from "./utils/utils"
 import { joinAfter, logIn } from "../stores/NetworkStore"
-import { addPlayer, leaveAfter } from "../stores/AfterGameStore"
+import { addPlayer, leaveAfter, setNoELO } from "../stores/AfterGameStore"
 import { playSound, SOUNDS } from "./utils/audio"
 
 export default function AfterGame() {
@@ -73,6 +73,13 @@ export default function AfterGame() {
           playSound(SOUNDS["FINISH"+player.rank])
         }
       }
+      r.state.onChange = (changes) => {
+        changes.forEach((change) => {
+          if (change.field == "noElo") {
+            dispatch(setNoELO(change.value))
+          } 
+        })
+      }
     }
 
     if (!initialized) {

app/public/src/pages/component/after/after-menu.tsx

@@ -38,6 +38,7 @@ export default function AfterMenu() {
     .slice()
     .sort((a, b) => a.rank - b.rank)
 
+  const noElo = useAppSelector((state) => state.after.noElo)
   const currentPlayerId: string = useAppSelector((state) => state.network.uid)
   const currentPlayer = players.find((p) => p.id === currentPlayerId)
   if (!currentPlayer) return null
@@ -53,9 +54,9 @@ export default function AfterMenu() {
           )}
           <span>{getRankLabel(playerRank)}</span>
         </div>
-        <p className="player-elo">
+        {!noElo && <p className="player-elo">
           ELO {newElo} ({ (newElo >= currentPlayer.elo ? '+' : '-') + Math.abs(newElo - currentPlayer.elo)})
-        </p>
+        </p>}
         <table>
           <thead>
             <tr>

app/public/src/pages/component/available-room-menu/room-item.tsx

@@ -12,6 +12,7 @@ export default function RoomItem(props: {
     <div className="room-item">
       <span className="room-name">{props.room.metadata?.name}</span>
       {props.room.metadata?.password && <img alt="Private" className="lock-icon" src="/assets/ui/lock.svg" />}
+      {props.room.metadata?.noElo && <img alt="Just for fun" title="Just for fun (no ELO gain/loss)" className="noelo-icon" src="/assets/ui/noelo.png" style={{borderRadius: "50%"}} />}
       <span>{props.room.clients}/{props.room.maxClients}</span>
       <button
         className={cc("bubbly", props.room.metadata?.password ? 'orange' : 'green')}

app/public/src/pages/component/preparation/preparation-menu.tsx

@@ -8,7 +8,8 @@ import {
   changeRoomName,
   changeRoomPassword,
   gameStart,
-  toggleReady
+  toggleReady,
+  toggleEloRoom
 } from "../../../stores/NetworkStore"
 import firebase from "firebase/compat/app"
 import { Client, Room } from "colyseus.js"
@@ -37,6 +38,7 @@ export default function PreparationMenu(props: {
   const name: string = useAppSelector((state) => state.preparation.name)
   const ownerId: string = useAppSelector((state) => state.preparation.ownerId)
   const password: string | null = useAppSelector((state) => state.preparation.password)
+  const noElo: boolean = useAppSelector((state) => state.preparation.noElo)
   const botsList: IBot[] | null = useAppSelector((state) => state.preparation.botsList)
   const uid: string = useAppSelector((state) => state.network.uid)
   const isOwner: boolean = useAppSelector(
@@ -66,6 +68,10 @@ export default function PreparationMenu(props: {
     }
   }
 
+  function toggleElo(){
+    dispatch(toggleEloRoom(!noElo))
+  }
+
   const startGame = throttle(async function startGame() {
     if (room && allUsersReady) {
       const token = await firebase.auth().currentUser?.getIdToken()
@@ -74,7 +80,8 @@ export default function PreparationMenu(props: {
           users: users,
           idToken: token,
           name: name,
-          preparationId: room.id
+          preparationId: room.id,
+          noElo
         })
         playSound(SOUNDS.START_GAME)
         dispatch(gameStart(r.id))
@@ -106,10 +113,18 @@ export default function PreparationMenu(props: {
 
       {isOwner && <>
         <div className="actions">
-          <label>
+          <label title="Add a password to this room">
             <input type="checkbox" className="nes-checkbox is-dark" checked={password != null} onChange={() => makePrivate()} />
             <span>Private lobby {password && ` (Password: ${password})`}</span>
           </label>
+          <label title="No ELO gain or loss for this game">
+            <input type="checkbox" className="nes-checkbox is-dark" 
+                  checked={noElo === true}
+                  onChange={() => toggleElo()}
+            />
+            <span>Just for fun</span>
+          </label>
+          <div className="spacer"></div>
         </div>
         <div className="actions">
           <input

app/public/src/pages/game.tsx

@@ -14,6 +14,7 @@ import {
   setItemsProposition,
   setMapName,
   setMoney,
+  setNoELO,
   setPhase,
   setRoundTime,
   setShop,
@@ -133,7 +134,8 @@ export default function Game() {
 
     const r: Room<AfterGameState> = await client.create("after-game", {
       players: savePlayers,
-      idToken: token
+      idToken: token,
+      noElo: room?.state.noElo
     })
     localStorage.setItem("lastRoomId", r.id)
     localStorage.setItem("lastSessionId", r.sessionId)
@@ -280,6 +282,8 @@ export default function Game() {
             dispatch(setStageLevel(change.value))
           } else if (change.field == "mapName") {
             dispatch(setMapName(change.value))
+          } else if (change.field == "noElo") {
+            dispatch(setNoELO(change.value))
           }
         })
       }

app/public/src/pages/preparation.tsx

@@ -20,6 +20,7 @@ import {
   setOwnerId,
   setOwnerName,
   setPassword,
+  setNoELO,
   setUser
 } from "../stores/PreparationStore"
 import GameState from "../../../rooms/states/game-state"
@@ -87,6 +88,8 @@ export default function Preparation() {
             dispatch(setName(change.value))
           } else if (change.field == "password") {
             dispatch(setPassword(change.value))
+          } else if (change.field == "noElo") {
+            dispatch(setNoELO(change.value))
           } 
         })
       }

app/public/src/stores/AfterGameStore.ts

@@ -3,10 +3,12 @@ import SimplePlayer from "../../../models/colyseus-models/simple-player"
 
 interface IUserAfterState {
   players: SimplePlayer[]
+  noElo: boolean
 }
 
 const initialState: IUserAfterState = {
-  players: new Array<SimplePlayer>()
+  players: new Array<SimplePlayer>(),
+  noElo: false
 }
 
 export const afterSlice = createSlice({
@@ -16,10 +18,17 @@ export const afterSlice = createSlice({
     addPlayer: (state, action: PayloadAction<SimplePlayer>) => {
       state.players.push(JSON.parse(JSON.stringify(action.payload)))
     },
-    leaveAfter: () => initialState
+    leaveAfter: () => initialState,
+    setNoELO: (state, action: PayloadAction<boolean>) => {
+      state.noElo = action.payload
+    },
   }
 })
 
-export const { addPlayer, leaveAfter } = afterSlice.actions
+export const { 
+  addPlayer,
+  leaveAfter,
+  setNoELO
+} = afterSlice.actions
 
 export default afterSlice.reducer

app/public/src/stores/GameStore.ts

@@ -22,6 +22,7 @@ interface GameStateStore {
   players: IPlayer[]
   stageLevel: number
   mapName: string
+  noElo: boolean
   currentPlayerId: string
   money: number
   interest: number
@@ -57,6 +58,7 @@ const initialState: GameStateStore = {
   players: new Array<IPlayer>(),
   stageLevel: 0,
   mapName: "",
+  noElo: false,
   currentPlayerId: "",
   money: 5,
   interest: 0,
@@ -119,6 +121,9 @@ export const gameSlice = createSlice({
     setMapName: (state, action: PayloadAction<string>) => {
       state.mapName = action.payload
     },
+    setNoELO: (state, action: PayloadAction<boolean>) => {
+      state.noElo = action.payload
+    },
     addPlayer: (state, action: PayloadAction<IPlayer>) => {
       state.players.push(JSON.parse(JSON.stringify(action.payload)))
     },
@@ -472,6 +477,7 @@ export const {
   setPhase,
   setStageLevel,
   setMapName,
+  setNoELO,
   addPlayer,
   setCurrentPlayerId,
   setExperienceManager,

app/public/src/stores/NetworkStore.ts

@@ -133,6 +133,9 @@ export const networkSlice = createSlice({
     toggleReady: (state) => {
       state.preparation?.send(Transfer.TOGGLE_READY)
     },
+    toggleEloRoom: (state, action: PayloadAction<boolean>) => {
+      state.preparation?.send(Transfer.TOGGLE_NO_ELO, action.payload)
+    },
     requestTilemap: (state) => {
       state.game?.send(Transfer.REQUEST_TILEMAP)
     },
@@ -252,6 +255,7 @@ export const {
   removeBot,
   listBots,
   toggleReady,
+  toggleEloRoom,
   requestTilemap,
   itemClick,
   shopClick,

app/public/src/stores/PreparationStore.ts

@@ -11,6 +11,7 @@ interface IUserPreparationState {
   messages: IMessage[]
   name: string
   password: string | null
+  noElo: boolean
   user: GameUser | undefined
   botsList: IBot[] | null
 }
@@ -24,6 +25,7 @@ const initialState: IUserPreparationState = {
   name: "",
   user: undefined,
   password: null,
+  noElo: false,
   botsList: null
 }
 
@@ -72,6 +74,9 @@ export const preparationSlice = createSlice({
     setPassword: (state, action: PayloadAction<string | null>) => {
       state.password = action.payload
     },
+    setNoELO: (state, action: PayloadAction<boolean>) => {
+      state.noElo = action.payload
+    },
     leavePreparation: () => initialState,
     setBotsList: (state, action: PayloadAction<IBot[] | null>) => {
       state.botsList = action.payload
@@ -91,6 +96,7 @@ export const {
   setOwnerId,
   setOwnerName,
   setPassword,
+  setNoELO,
   leavePreparation
 } = preparationSlice.actions
 

app/rooms/after-game-room.ts

@@ -12,10 +12,14 @@ export default class AfterGameRoom extends Room {
     this.dispatcher = new Dispatcher(this)
   }
 
-  onCreate(options: any) {
+  onCreate(options: {
+    players: SimplePlayer[],
+    idToken: string,
+    noElo: boolean
+  }) {
     console.log("create after game", this.roomId)
 
-    this.setState(new AfterGameState())
+    this.setState(new AfterGameState(options.noElo))
     this.maxClients = 8
     // console.log('before', this.state.players);
     if (options.players) {

app/rooms/commands/preparation-commands.ts

@@ -134,11 +134,36 @@ export class OnRoomPasswordCommand extends Command<
     message: string
   }
   > {
-  execute({ client, message }) {
+  execute({ client, message: password }) {
     try {
-      if (client.auth.uid == this.state.ownerId && this.state.password != message) {
-        this.room.setPassword(message)
-        this.state.password = message
+      if (client.auth.uid == this.state.ownerId && this.state.password != password) {
+        this.room.setPassword(password)
+        this.state.password = password
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  }
+}
+
+export class OnToggleEloCommand extends Command<
+  PreparationRoom,
+  {
+    client: Client
+    message: boolean
+  }
+  > {
+  execute({ client, message: noElo }) {
+    try {
+      if (client.auth.uid === this.state.ownerId && this.state.noElo != noElo) {
+        this.state.noElo = noElo
+        this.room.toggleElo(noElo)
+        this.room.broadcast(Transfer.MESSAGES, {
+          name: "Server",
+          payload: `Room leader ${noElo ? "disabled" : "enabled"} ELO gain for this game.`,
+          avatar: this.state.users.get(client.auth.uid)?.avatar,
+          time: Date.now()
+        })
       }
     } catch (error) {
       console.log(error)

app/rooms/game-room.ts

@@ -38,7 +38,6 @@ import {
   Transfer
 } from "../types"
 import { Pkm, PkmFamily, PkmIndex } from "../types/enum/Pokemon"
-import PokemonConfig from "../models/colyseus-models/pokemon-config"
 import { Synergy } from "../types/enum/Synergy"
 import { Pokemon } from "../models/colyseus-models/pokemon"
 import { IGameUser } from "../models/colyseus-models/game-user"
@@ -73,7 +72,8 @@ export default class GameRoom extends Room<GameState> {
     users: { [key: string]: IGameUser }
     preparationId: string
     name: string
-    idToken: string
+    idToken: string,
+    noElo: boolean
   }) {
     console.log("create game room")
     this.setMetadata(<IGameMetadata>{
@@ -83,7 +83,7 @@ export default class GameRoom extends Room<GameState> {
       type: "game"
     })
     // console.log(options);
-    this.setState(new GameState(options.preparationId, options.name))
+    this.setState(new GameState(options.preparationId, options.name, options.noElo))
     this.miniGame.create(this.state.avatars, this.state.floatingItems)
     Object.keys(PRECOMPUTED_TYPE_POKEMONS).forEach((type) => {
       PRECOMPUTED_TYPE_POKEMONS[type].additionalPokemons.forEach((p) => {
@@ -439,7 +439,8 @@ export default class GameRoom extends Room<GameState> {
 
     if (
       this.state.stageLevel >= requiredStageLevel &&
-      this.state.elligibleToXP
+      this.state.elligibleToXP === true &&
+      this.state.noElo === false
     ) {
       this.state.players.forEach((player) => {
         if (player.isBot) {