Skip to content

Commit

Permalink
grab base values
Browse files Browse the repository at this point in the history
  • Loading branch information
@brofar
brofar committed Jun 8, 2024
1 parent af70085 commit 62e6222
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 41 deletions.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FF8 Q+Z Card</title>
<title>FF8 Card Manip</title>
</head>
<body>
<div id="root"></div>
Expand Down
117 changes: 78 additions & 39 deletions src/components/RngCalculator.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,51 +3,62 @@ import PropTypes from 'prop-types';
import { useState } from 'react';
import { IconPhoto, IconMessageCircle, IconSettings } from '@tabler/icons-react';

export function RngCalculator(props) {
const [rngValue, setRngValue] = useState({});
const configData = props.data;

const makeid = (length) => {
// https://stackoverflow.com/questions/1349404/generate-random-string-characters-in-javascript
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for (var i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() *
charactersLength));
const CalculateBaseValues = (configData) => {
// Calculate base values
let basevalues = {
q: 0,
z: 0
}

for (let config of configData) {
let isQuistis = config.button;
if (config.baseValue != -1) {
basevalues[isQuistis ? 'q' : 'z'] += config.baseValue;
}
return result;
}

const ProcessCategory = (category, topLabel) => {
return (<>
<Title order={2} my="md">{category.label}</Title>
{Object.prototype.hasOwnProperty.call(category, 'subCategories') ? category.subCategories.map((subcategory) => ProcessSubCategory(subcategory, category.baseCountPage || "", category.label, topLabel)) : ""}
</>)
return basevalues;
}

const makeid = (length) => {
// https://stackoverflow.com/questions/1349404/generate-random-string-characters-in-javascript
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for (var i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() *
charactersLength));
}
return result;
}

const ProcessSubCategory = (subcategory, baseCountPage, catLabel, topLabel) => {
let label = subcategory.label || "";

catLabel = `${topLabel}-${catLabel}`;
const sumValues = obj => Object.values(obj).reduce((a, b) => a + b, 0);

switch (subcategory.type.toLowerCase()) {
case 'buttons':
return CreateButtons(subcategory.value, label, catLabel);
case 'radiobutton':
return CreateRadioButtons(subcategory.value, label, catLabel);
case 'list':
return CreateList(subcategory.value, label, catLabel, subcategory.times || 1);
export function RngCalculator(props) {
const configData = props.data;
let bases = CalculateBaseValues(configData);

const [qRngValue, setQRngValue] = useState({ 'q-basevalue': bases.q });
const [zRngValue, setZRngValue] = useState({ 'z-basevalue': bases.z });

const setRngValue = (rngName, val, isQuistis) => {
if (isQuistis) {
setQRngValue(prevState => ({ ...prevState, [rngName]: val }));
} else {
setZRngValue(prevState => ({ ...prevState, [rngName]: val }));
}
console.log(val);
}

const CreateButtons = (data, label, catLabel) => {
const CreateButtons = (data, label, catLabel, isQuistis) => {
let rngName = btoa(`${catLabel}-${label}`)

return (
<Checkbox.Group
label={label}
onChange={(val) => setRngValue(prevState => ({ ...prevState, [rngName]: val.reduce((a, c) => { return a + parseInt(c) }, 0) }))}
onChange={(val) => setRngValue(rngName, val.reduce((a, c) => { return a + parseInt(c) }, 0), isQuistis)}
>
<Group mt="xs">
{data.map((button) => {
Expand All @@ -58,12 +69,12 @@ export function RngCalculator(props) {
);
}

const CreateRadioButtons = (data, label, catLabel) => {
const CreateRadioButtons = (data, label, catLabel, isQuistis) => {
let rngName = btoa(`${catLabel}-${label}`)
return (
<Radio.Group
label={label}
onChange={(val) => setRngValue(prevState => ({ ...prevState, [rngName]: parseInt(val) }))}
onChange={(val) => setRngValue(rngName, parseInt(val), isQuistis)}
>
<Group mt="xs">
{data.map((button) => {
Expand All @@ -74,34 +85,61 @@ export function RngCalculator(props) {
);
}

const CreateList = (data, label, catLabel, times) => {
const ProcessCategory = (category, topLabel, isQuistis) => {
return (
<>
<Title order={2} my="md">{category.label}</Title>
{Object.prototype.hasOwnProperty.call(category, 'subCategories') ? category.subCategories.map((subcategory) => ProcessSubCategory(subcategory, category.baseCountPage || "", category.label, topLabel, isQuistis)) : ""}
</>
)
}

const ProcessSubCategory = (subcategory, baseCountPage, catLabel, topLabel, isQuistis) => {
let label = subcategory.label || "";

catLabel = `${topLabel}-${catLabel}`;

switch (subcategory.type.toLowerCase()) {
case 'buttons':
return CreateButtons(subcategory.value, label, catLabel, isQuistis);
case 'radiobutton':
return CreateRadioButtons(subcategory.value, label, catLabel, isQuistis);
case 'list':
return CreateList(subcategory.value, label, catLabel, subcategory.times || 1, isQuistis);
}
}

const CreateList = (data, label, catLabel, times, isQuistis) => {
let rngName = btoa(`${catLabel}-${label}`)
let elements = [];
for (let i = 1; i < times; i++) {
for (let i = 1; i <= times; i++) {
let rngNameTimes = `${rngName}-${i}`;
elements.push(<Select
key={rngNameTimes}
label={label}
placeholder="Pick one"
data={data}
onChange={(val) => setRngValue(prevState => ({ ...prevState, [rngNameTimes]: val }))}
onChange={(val) => setRngValue(rngNameTimes, val, isQuistis)}
/>)
}
return (<Group mt="xs">{elements}</Group>);
}

const sumValues = obj => Object.values(obj).reduce((a, b) => a + b, 0);
//! Start the actual computation.

// Iterate through top level categories (tabs)
const tablist = configData.map((config) => {
// if button == true: quistis
// if button == false: zell
return (<Tabs.Tab key={config.label} value={config.label} icon={<IconPhoto size="0.8rem" />}>{config.label}</Tabs.Tab>)
});

const tabs = configData.map((config) => {
console.log(rngValue);
//console.log(rngValue);
let isQuistis = config.button;

return (
<Tabs.Panel key={config.label} value={config.label} pt="xs">
{config.categories.map((category) => ProcessCategory(category, config.label))}
{config.categories.map((category) => ProcessCategory(category, config.label, isQuistis))}
</Tabs.Panel>
);
});
Expand All @@ -112,7 +150,8 @@ export function RngCalculator(props) {
{tablist}
</Tabs.List>
{tabs}
{sumValues(rngValue)}
Q: {sumValues(qRngValue)} <br />
Z: {sumValues(zRngValue)}
</Tabs>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Siteheader.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function Siteheader() {
>
<IconArrowNarrowLeft size="1.1rem" />
</ActionIcon>
<Title order={1}>FF8 Q+Z Card</Title>
<Title order={1}>Card Manip</Title>
<ActionIcon
size="lg"
variant="outline"
Expand Down

0 comments on commit 62e6222

Please sign in to comment.