diff --git a/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.css b/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.css
index 6b0017158109c1168081139dd4bc31b5b7555307..e0e907794d5c4fcf3620820038850ca2bc68fffb 100644
--- a/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.css
+++ b/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.css
@@ -1,6 +1,14 @@
body {
background-color: powderblue;
}
+.calculate {
+ align-self: center;
+}
+.flex {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+}
h2 {
text-align: center;
display: block;
@@ -8,26 +16,26 @@ h2 {
.rate {
margin: auto;
width: 85%;
- border: 3px solid green;
- padding: 25px;
+ border: .5em solid green;
+ padding: 1em;
}
.stats {
margin: auto;
width: 75%;
- border: 3px solid green;
- padding: 10px;
+ border: .5em solid green;
+ padding: 1em;
}
.ball {
margin: auto;
width: 75%;
- border: 3px solid red;
- padding: 10px;
+ border: .5em solid red;
+ padding: 1em;
}
.status {
margin: auto;
width: 75%;
- border: 3px solid blue;
- padding: 10px;
+ border: .5em solid blue;
+ padding: 1em;
}
p {
color: red;
diff --git a/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.js b/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.js
index 4e158d14024a8f1c14e5c34d00210fa0b2a27f36..e6d550d431dace067f9946f1c30abc92ee79a21c 100644
--- a/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.js
+++ b/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.js
@@ -1,62 +1,88 @@
import React from 'react';
import styles from './catchRateCalc.css';
+import { useSelector, useDispatch } from 'react-redux';
+
+import {
+ setBallValue,
+ setStatusValue,
+ setHPValue,
+ setLevelValue,
+ setRateValue,
+ selectBall,
+ selectStatus,
+ selectHP,
+ selectLevel,
+ selectRate
+} from './catchRateCalcSlice.js';
export function CatchRateCalc() {
+
+ const dispatch = useDispatch();
+ const ratePercent = 0;
+
+ const onClickBall = () => dispatch(setBallValue({
+
+ }));
+
+ const onClickFSHP = () => dispatch(setHPValue({
+
+ }));
+
+
return (
<main>
-
<h2>Gen6 Pokemon Catch Rate Calculator</h2>
+ <div class="flex">
+ <div class="rate">
+ <label for="rate">Enter the Pokemon's Modified Catch Rate:</label>
+ <input type="number" size="3" id="rate" name="rate"></input>
+ </div>
- <div class="rate">
- <label for="rate">Enter the Pokemon's Modified Catch Rate:</label>
- <input type="number" size= "3" id="rate" name="rate"></input>
- </div>
+ <div class="stats">
+ <div class="level">
+ <label for="level">Enter the Pokemon's Level:</label>
+ <input type="number" size="3" name="level" id="level" value="35"></input>
+ </div>
- <div class="stats">
- <div class="level">
- <label for="level">Enter the Pokemon's Level:</label>
- <input type="number" size="3" name="level" id="level" value="35"></input>
- </div>
+ <div class="hp">
+ <label for="hp">HP Approximation (1% to 100%)</label>
+ <div>
+ <input type="range" min="1" max="100" value="50" class="slider" id="myRange"></input>
+ </div>
+ </div>
- <div class="hp">
- <label for="hp">HP Approximation (1% to 100%)</label>
- <div class="slidecontainer">
- <input type="range" min="1" max="100" value="50" class="slider" id="myRange"></input>
+ <div class="falseSwipe">
+ <label for="falseSwipe">False Swipe (exactly 1 HP):</label>
+ <input type="checkbox" id="falseSwipe" onClick={onClickFSHP} value="1"></input>
</div>
</div>
- <div class="falseSwipe">
- <label for="falseSwipe">False Swipe (exactly 1 HP):</label>
- <input type="checkbox" id="falseSwipe" value="1"></input>
+ <div class="ball">
+ <label for="ball">Ball:</label>
+
+ <select name="ball" onClick={onClickBall}>
+ <option ball="1">Poke Ball</option>
+ <option ball="1.5">Great Ball</option>
+ <option ball="2">Ultra Ball</option>
+ <option ball="99">Master Ball</option>
+ </select>
</div>
- </div>
- <div class="ball">
- <label for="ball">Ball:</label>
-
- <select name="ball">
- <option value="1">Poke Ball</option>
- <option value="1.5">Great Ball</option>
- <option value="2">Ultra Ball</option>
- <option value="999">Master Ball</option>
- <option value="1+.3">Timer Ball</option>
- <option value="4">Quick Ball</option>
- </select>
- </div>
+ <div class="status">
+ <label for="status">Status:</label>
- <div class="status">
- <label for="status">Status:</label>
-
- <select name="status">
- <option value="1">None</option>
- <option value="1.5">Poisoned</option>
- <option value="1.5">Burned</option>
- <option value="2">Asleep</option>
- <option value="1.5">Paralyzed</option>
- <option value="2">Frozen</option>
- </select>
+ <select name="status">
+ <option status="1">None</option>
+ <option status="1.5">Poisoned</option>
+ <option status="1.5">Burned</option>
+ <option status="2">Asleep</option>
+ <option status="1.5">Paralyzed</option>
+ <option status="2">Frozen</option>
+ </select>
+ </div>
+ <button class="calculate">Calculate Catch Rate!</button>
</div>
-
- </main >
+ <h2>Catch Rate: {ratePercent}</h2>
+ </main>
);
}
\ No newline at end of file
diff --git a/catch-rate-calc/src/features/catchRateCalc/catchRateCalcSlice.js b/catch-rate-calc/src/features/catchRateCalc/catchRateCalcSlice.js
new file mode 100644
index 0000000000000000000000000000000000000000..67c53f0a0e18e07f216ca0f339573045d882a66d
--- /dev/null
+++ b/catch-rate-calc/src/features/catchRateCalc/catchRateCalcSlice.js
@@ -0,0 +1,77 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const catchRateCalcSlice = createSlice({
+ name: 'catchRateCalc',
+ initialState: {
+ ball: 1,
+ status: 1,
+ hp: 50,
+ level: 35,
+ rate: 60
+ },
+ reducers: {
+ setBallValue: (ball, action) => {
+ const {
+ value,
+ } = action.payload;
+ ball.value = value;
+ },
+
+ setStatusValue: (status, action) => {
+ const {
+ value,
+ } = action.payload;
+ status.value = value;
+ },
+
+ setHPValue: (hp, action) => {
+ const {
+ value,
+ } = action.payload;
+ hp.value = value;
+ },
+
+ setLevelValue: (level, action) => {
+ const {
+ value,
+ } = action.payload;
+ level.value = value;
+ },
+
+ setRateValue: (rate, action) => {
+ const {
+ value,
+ } = action.payload;
+ rate.value = value;
+ }
+ },
+});
+export default catchRateCalcSlice;
+
+export const {
+ setBallValue,
+ setStatusValue,
+ setHPValue,
+ setLevelValue,
+ setRateValue
+} = catchRateCalcSlice.actions;
+
+export function selectRate(state) {
+ return state.catchRateCalc.rate;
+}
+
+export function selectBall(state) {
+ return state.catchRateCalc.ball;
+}
+
+export function selectStatus(state) {
+ return state.catchRateCalc.status;
+}
+
+export function selectHP(state) {
+ return state.catchRateCalc.hp;
+}
+
+export function selectLevel(state) {
+ return state.catchRateCalc.level;
+}
\ No newline at end of file