From 2110a203d9e47a2d901abb93e6cb50a491fc3eb0 Mon Sep 17 00:00:00 2001 From: "anastasia.birillo" Date: Thu, 17 Aug 2023 19:14:09 +0200 Subject: [PATCH] Add modes --- backToTheFutureFrontend/src/App.css | 65 +++++++++++ .../src/assets/actions/alert.svg | 5 + .../src/assets/buttons/queue-focused.svg | 16 +++ .../src/assets/buttons/queue-hover.svg | 16 +++ .../src/assets/buttons/queue.svg | 15 +++ .../src/assets/buttons/stack-focused.svg | 16 +++ .../src/assets/buttons/stack-hover.svg | 16 +++ .../src/assets/buttons/stack.svg | 15 +++ .../src/assets/buttons/try_again-hover.svg | 17 +++ .../src/assets/buttons/try_again.svg | 16 +++ .../src/components/Tamagotchi.tsx | 3 + .../src/components/screens/MainGameScreen.tsx | 105 ++++++++++++------ 12 files changed, 272 insertions(+), 33 deletions(-) create mode 100644 backToTheFutureFrontend/src/assets/actions/alert.svg create mode 100644 backToTheFutureFrontend/src/assets/buttons/queue-focused.svg create mode 100644 backToTheFutureFrontend/src/assets/buttons/queue-hover.svg create mode 100644 backToTheFutureFrontend/src/assets/buttons/queue.svg create mode 100644 backToTheFutureFrontend/src/assets/buttons/stack-focused.svg create mode 100644 backToTheFutureFrontend/src/assets/buttons/stack-hover.svg create mode 100644 backToTheFutureFrontend/src/assets/buttons/stack.svg create mode 100644 backToTheFutureFrontend/src/assets/buttons/try_again-hover.svg create mode 100644 backToTheFutureFrontend/src/assets/buttons/try_again.svg diff --git a/backToTheFutureFrontend/src/App.css b/backToTheFutureFrontend/src/App.css index d23602d..48a38d2 100644 --- a/backToTheFutureFrontend/src/App.css +++ b/backToTheFutureFrontend/src/App.css @@ -166,6 +166,24 @@ background-image: url('assets/buttons/clean-button-hover.svg'); } +.App-try-again-container { + width: 100%; + align-content: center; + justify-content: center; + display: flex; + height: 16vmin; +} + +.App-button-try-again { + background-image: url('assets/buttons/try_again.svg'); + height: 6vmin; + width: 20vmin; + margin-top: 1vmin; +} +.App-button-try-again:hover{ + background-image: url('assets/buttons/try_again-hover.svg'); +} + .App-tamagotchi-container { display: flex; flex-direction: column; @@ -197,6 +215,10 @@ .App-tamagotchi-image-base { background-image: url('assets/actions/dog-resize.svg'); } +.App-tamagotchi-image-alert { + background-image: url('assets/actions/alert.svg'); + margin-top: 1vmin; +} @keyframes blink { from { @@ -308,3 +330,46 @@ .App-command-container-sleep { background-image: url('assets/commands/small-sleep.svg'); } + +.App-unclickable-button { + pointer-events: none; + opacity: 40%; +} + + +.App-buttons-container { + min-height: 10vmin; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin-bottom: 1vmin; +} + +.App-button-collection { + background-size: contain; + width: 17vmin; + height: 6vmin; + margin-top: 2vmin; +} + +.App-button-queue { + background-image: url('assets/buttons/queue.svg'); + margin-right: 2vmin; +} +.App-button-queue:hover { + background-image: url('assets/buttons/queue-hover.svg'); +} +.App-button-queue-focused { + background-image: url('assets/buttons/queue-focused.svg'); +} + +.App-button-stack { + background-image: url('assets/buttons/stack.svg'); +} +.App-button-stack:hover { + background-image: url('assets/buttons/stack-hover.svg'); +} +.App-button-stack-focused { + background-image: url('assets/buttons/stack-focused.svg'); +} diff --git a/backToTheFutureFrontend/src/assets/actions/alert.svg b/backToTheFutureFrontend/src/assets/actions/alert.svg new file mode 100644 index 0000000..d88098c --- /dev/null +++ b/backToTheFutureFrontend/src/assets/actions/alert.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/backToTheFutureFrontend/src/assets/buttons/queue-focused.svg b/backToTheFutureFrontend/src/assets/buttons/queue-focused.svg new file mode 100644 index 0000000..1c04503 --- /dev/null +++ b/backToTheFutureFrontend/src/assets/buttons/queue-focused.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/backToTheFutureFrontend/src/assets/buttons/queue-hover.svg b/backToTheFutureFrontend/src/assets/buttons/queue-hover.svg new file mode 100644 index 0000000..2c129c9 --- /dev/null +++ b/backToTheFutureFrontend/src/assets/buttons/queue-hover.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/backToTheFutureFrontend/src/assets/buttons/queue.svg b/backToTheFutureFrontend/src/assets/buttons/queue.svg new file mode 100644 index 0000000..62e2622 --- /dev/null +++ b/backToTheFutureFrontend/src/assets/buttons/queue.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/backToTheFutureFrontend/src/assets/buttons/stack-focused.svg b/backToTheFutureFrontend/src/assets/buttons/stack-focused.svg new file mode 100644 index 0000000..ed74b24 --- /dev/null +++ b/backToTheFutureFrontend/src/assets/buttons/stack-focused.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/backToTheFutureFrontend/src/assets/buttons/stack-hover.svg b/backToTheFutureFrontend/src/assets/buttons/stack-hover.svg new file mode 100644 index 0000000..ce6821d --- /dev/null +++ b/backToTheFutureFrontend/src/assets/buttons/stack-hover.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/backToTheFutureFrontend/src/assets/buttons/stack.svg b/backToTheFutureFrontend/src/assets/buttons/stack.svg new file mode 100644 index 0000000..4d8260c --- /dev/null +++ b/backToTheFutureFrontend/src/assets/buttons/stack.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/backToTheFutureFrontend/src/assets/buttons/try_again-hover.svg b/backToTheFutureFrontend/src/assets/buttons/try_again-hover.svg new file mode 100644 index 0000000..b5a0635 --- /dev/null +++ b/backToTheFutureFrontend/src/assets/buttons/try_again-hover.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/backToTheFutureFrontend/src/assets/buttons/try_again.svg b/backToTheFutureFrontend/src/assets/buttons/try_again.svg new file mode 100644 index 0000000..27a6b7a --- /dev/null +++ b/backToTheFutureFrontend/src/assets/buttons/try_again.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/backToTheFutureFrontend/src/components/Tamagotchi.tsx b/backToTheFutureFrontend/src/components/Tamagotchi.tsx index eafed22..fab7216 100644 --- a/backToTheFutureFrontend/src/components/Tamagotchi.tsx +++ b/backToTheFutureFrontend/src/components/Tamagotchi.tsx @@ -11,6 +11,9 @@ type TamagotchiProps = { export default function Tamagotchi({eat, sleep, play, clean, state}: TamagotchiProps) { function getImageClass() { + if (eat + sleep + play + clean == 0) { + return "App-tamagotchi-image-alert" + } if (state == State.Cleaning) { return "App-tamagotchi-image-cleaning" } diff --git a/backToTheFutureFrontend/src/components/screens/MainGameScreen.tsx b/backToTheFutureFrontend/src/components/screens/MainGameScreen.tsx index 9a1c6b8..124f9e9 100644 --- a/backToTheFutureFrontend/src/components/screens/MainGameScreen.tsx +++ b/backToTheFutureFrontend/src/components/screens/MainGameScreen.tsx @@ -10,15 +10,21 @@ type MainGameScreenProps = { } const MAX_SIZE = 16 +const MAX_VALUE = 100 + +const QUEUE = "Queue" +const STACK = "Stack" export default function MainGameScreen({gameStateSetter}: MainGameScreenProps) { let [state, stateSetter] = useState(State.Base) let [commands, commandsSetter] = useState>([]) - let [eatScale, eatScaleSetter] = useState(100); - let [cleanScale, cleanScaleSetter] = useState(100); - let [playScale, playScaleSetter] = useState(100); - let [sleepScale, sleepScaleSetter] = useState(100); + let [eatScale, eatScaleSetter] = useState(MAX_VALUE); + let [cleanScale, cleanScaleSetter] = useState(MAX_VALUE); + let [playScale, playScaleSetter] = useState(MAX_VALUE); + let [sleepScale, sleepScaleSetter] = useState(MAX_VALUE); + + let [mode, modeSetter] = useState(QUEUE) let [isInProgress, isInProgressSetter] = useState(false) @@ -34,10 +40,19 @@ export default function MainGameScreen({gameStateSetter}: MainGameScreenProps) { commandsSetter(clonedCommands) } + function getCommand() { + if (mode == QUEUE) { + const command = commands[0] + setCommands(commands.slice(1, MAX_SIZE)) + return command + } + const command = commands[commands.length - 1] + setCommands(commands.slice(0, commands.length - 1)) + return command + } + function removeFromQueue() { - const command = commands[0] - setCommands(commands.slice(1, MAX_SIZE)) - performCommand(command) + performCommand(getCommand()) } function performCommand(command: Command) { @@ -69,28 +84,20 @@ export default function MainGameScreen({gameStateSetter}: MainGameScreenProps) { useEffect(() => { const timer = setTimeout(() => { - setDamages(damages + 1) - // TODO: get from server - const states = [State.Playing, State.Cleaning, State.Eating, State.Sleeping] + if (isAlive()) { + // TODO: get from server + const states = [State.Playing, State.Cleaning, State.Eating, State.Sleeping] - const randomState = states[randomIntFromInterval(0, states.length - 1)] - const randomDamage = randomIntFromInterval(10, 20) + const randomState = states[randomIntFromInterval(0, states.length - 1)] + const randomDamage = randomIntFromInterval(10, 20) - decreaseValues(randomState, randomDamage) + decreaseValues(randomState, randomDamage) + } + setDamages(damages + 1) }, 3000) return () => clearTimeout(timer) }, [damages]) - // useEffect(() => { - // // TODO: get from server - // const states = [State.Playing, State.Cleaning, State.Eating, State.Sleeping] - // - // const randomState = states[randomIntFromInterval(0, states.length - 1)] - // const randomDamage = randomIntFromInterval(0, 5) - // - // decreaseValues(randomState, randomDamage) - // }, []) - function putIntoQueue(command: Command) { if (commands.length >= MAX_SIZE) { alert("You cannot add more actions! The queue is full!") @@ -114,8 +121,8 @@ export default function MainGameScreen({gameStateSetter}: MainGameScreenProps) { function increaseValue(value: number, amountToIncrease: number) { const newValue = value + amountToIncrease - if (newValue > 100) { - return 100 + if (newValue > MAX_VALUE) { + return MAX_VALUE } return newValue } @@ -192,6 +199,23 @@ export default function MainGameScreen({gameStateSetter}: MainGameScreenProps) { runAction(State.Playing) } + function isAlive() { + return eatScale + sleepScale + cleanScale + playScale > 0 + } + + function newGame() { + commandsSetter([]) + stateSetter(State.Base) + isInProgressSetter(false) + modeSetter(QUEUE) + eatScaleSetter(MAX_VALUE) + cleanScaleSetter(MAX_VALUE) + playScaleSetter(MAX_VALUE) + sleepScaleSetter(MAX_VALUE) + } + + const BASE_BUTTON_CLASSES = "App-button-base App-button-collection" + return (
@@ -201,21 +225,36 @@ export default function MainGameScreen({gameStateSetter}: MainGameScreenProps) { }>
- - - -
-
- - -
+ { + isAlive() ?
+
+ + +
+
+ + +
+
+ :
+ +
+ }
) }