From 42edf2c31f29d09681968a9c0718d1a92437b295 Mon Sep 17 00:00:00 2001 From: Aiden Mathews <98974983+SealyBoi@users.noreply.github.com> Date: Thu, 28 Sep 2023 14:39:40 -0500 Subject: [PATCH] Turned Data into JSON --- client/src/data/chartTables.tsx | 271 ------------------ client/src/data/charts.json | 183 ++++++++++++ client/src/views/Charts/index.tsx | 126 ++++---- client/src/views/Game/styles/Card.module.css | 4 +- client/src/views/Game/styles/Game.module.css | 2 +- client/src/views/Game/styles/Hand.module.css | 2 + .../src/views/Game/styles/Status.module.css | 2 + 7 files changed, 264 insertions(+), 326 deletions(-) delete mode 100644 client/src/data/chartTables.tsx create mode 100644 client/src/data/charts.json diff --git a/client/src/data/chartTables.tsx b/client/src/data/chartTables.tsx deleted file mode 100644 index ee38c89..0000000 --- a/client/src/data/chartTables.tsx +++ /dev/null @@ -1,271 +0,0 @@ -export const chart1 = { - data: [ - { - label: '5', - value: [ - 'H','S','H','H','H','H','H','H','H' - ] - }, - { - label: '6', - value: [ - 'H','S','H','H','H','H','H','H','H' - ] - }, - { - label: '7', - value: [ - 'H','H','H','S','H','H','H','H','H' - ] - }, - { - label: '8', - value: [ - 'H','H','H','H','H','S','H','H','H' - ] - }, - { - label: '9', - value: [ - 'H','H','S','S','H','H','H','H','H' - ] - }, - { - label: '10', - value: [ - 'H','H','S','H','H','H','H','H','H' - ] - }, - { - label: '11', - value: [ - 'H','H','H','H','H','H','H','S','H' - ] - }, - { - label: '12', - value: [ - 'H','H','H','H','H','S','S','H','H' - ] - }, - { - label: '13', - value: [ - 'H','S','H','H','H','H','H','H','H' - ] - }, - { - label: '14', - value: [ - 'S','H','H','H','H','H','H','H','H' - ] - }, - { - label: '15', - value: [ - 'H','H','H','H','H','H','S','S','S' - ] - }, - { - label: '16', - value: [ - 'H','H','S','S','S','H','H','H','H' - ] - }, - { - label: '17', - value: [ - 'H','S','H','S','H','H','H','H','H' - ] - } - - ], - data2: [ - { - label: 'A/2', - value: [ - 'H','S','H','H','H','H','H','H','H' - ] - }, - { - label: 'A/3', - value: [ - 'H','S','H','H','H','H','H','H','H' - ] - }, - { - label: 'A/4', - value: [ - 'H','H','H','S','H','H','H','H','H' - ] - }, - { - label: 'A/5', - value: [ - 'H','H','H','H','H','S','H','H','H' - ] - }, - { - label: 'A/6', - value: [ - 'H','H','S','S','H','H','H','H','H' - ] - }, - { - label: 'A/7', - value: [ - 'H','H','S','H','H','H','H','H','H' - ] - }, - { - label: 'A/8', - value: [ - 'H','H','H','H','H','H','H','S','H' - ] - }, - { - label: 'A/9', - value: [ - 'H','H','H','H','H','S','S','H','H' - ] - } - - ] -} - -export const chart2 = { - data: [ - { - label: '5', - value: [ - 'S','S','S','S','S','S','S','S','S' - ] - }, - { - label: '6', - value: [ - 'H','S','H','H','H','H','H','H','H' - ] - }, - { - label: '7', - value: [ - 'H','H','H','S','H','H','H','H','H' - ] - }, - { - label: '8', - value: [ - 'S','S','S','S','S','S','S','S','S' - ] - }, - { - label: '9', - value: [ - 'H','H','S','S','H','H','H','H','H' - ] - }, - { - label: '10', - value: [ - 'S','S','S','S','S','S','S','S','S' - ] - }, - { - label: '11', - value: [ - 'S','S','S','S','S','S','S','S','S' - ] - }, - { - label: '12', - value: [ - 'S','S','S','S','S','S','S','S','S' - ] - }, - { - label: '13', - value: [ - 'H','S','H','H','H','H','H','H','H' - ] - }, - { - label: '14', - value: [ - 'S','H','H','H','H','H','H','H','H' - ] - }, - { - label: '15', - value: [ - 'H','H','H','H','H','H','S','S','S' - ] - }, - { - label: '16', - value: [ - 'H','H','S','S','S','H','H','H','H' - ] - }, - { - label: '17', - value: [ - 'S','S','S','S','S','S','S','S','S' - ] - } - - ], - data2: [ - { - label: 'A/2', - value: [ - 'H','S','H','H','H','H','H','H','H' - ] - }, - { - label: 'A/3', - value: [ - 'S','S','S','S','S','S','S','S','S' - ] - }, - { - label: 'A/4', - value: [ - 'S','S','S','S','S','S','S','S','S' - ] - }, - { - label: 'A/5', - value: [ - 'H','H','H','H','H','S','H','H','H' - ] - }, - { - label: 'A/6', - value: [ - 'H','H','S','S','H','H','H','H','H' - ] - }, - { - label: 'A/7', - value: [ - 'S','S','S','S','S','S','S','S','S' - ] - }, - { - label: 'A/8', - value: [ - 'S','S','S','S','S','S','S','S','S' - ] - }, - { - label: 'A/9', - value: [ - 'H','H','H','H','H','S','S','H','H' - ] - } - - ] -} - -export const dealerRow = [2,3,4,5,6,7,8,9,10]; \ No newline at end of file diff --git a/client/src/data/charts.json b/client/src/data/charts.json new file mode 100644 index 0000000..db8db5b --- /dev/null +++ b/client/src/data/charts.json @@ -0,0 +1,183 @@ +{ + "chart1": { + "data": [ + { + "label": "5", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "6", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "7", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "8", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "9", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "10", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "11", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "12", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "13", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "14", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "15", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "16", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "17", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + } + ], + "data2": [ + { + "label": "A/2", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "A/3", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "A/4", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "A/5", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "A/6", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "A/7", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "A/8", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "A/9", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + } + ] + }, + "chart2": { + "data": [ + { + "label": "5", + "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"] + }, + { + "label": "6", + "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"] + }, + { + "label": "7", + "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"] + }, + { + "label": "8", + "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"] + }, + { + "label": "9", + "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"] + }, + { + "label": "10", + "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"] + }, + { + "label": "11", + "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"] + }, + { + "label": "12", + "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"] + }, + { + "label": "13", + "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"] + }, + { + "label": "14", + "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"] + }, + { + "label": "15", + "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"] + }, + { + "label": "16", + "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"] + }, + { + "label": "17", + "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"] + } + ], + "data2": [ + { + "label": "A/2", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "A/3", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "A/4", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "A/5", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "A/6", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "A/7", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "A/8", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + }, + { + "label": "A/9", + "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"] + } + ] + }, + "dealerRow": [2, 3, 4, 5, 6, 7, 8, 9, 10] +} diff --git a/client/src/views/Charts/index.tsx b/client/src/views/Charts/index.tsx index 78f40fc..437b728 100644 --- a/client/src/views/Charts/index.tsx +++ b/client/src/views/Charts/index.tsx @@ -1,60 +1,82 @@ -import './Charts.css'; -import {useState} from 'react'; -import {chart1, chart2, dealerRow} from '../../data/chartTables'; +import "./Charts.css"; +import { useState } from "react"; +import jsonData from "../../data/charts.json"; const Charts = () => { + const chart1 = JSON.parse(JSON.stringify(jsonData.chart1)); + console.log(chart1.data); + const chart2 = JSON.parse(JSON.stringify(jsonData.chart2)); + console.log(chart2); + const dealerRow = JSON.parse(JSON.stringify(jsonData.dealerRow)); + console.log(dealerRow); - const [chart,setChart] = useState(chart1); + const [chart, setChart] = useState(chart1); - const handleClick = () => { - setChart(chart2); - } + const handleClick = () => { + setChart(chart2); + }; - return ( -
- - - - {dealerRow.map((data, i) => { - return - })} - - {chart.data.map((data, i) => { - return ( - - - {data.value.map((value) => { - return - })} - - ) + return ( +
+
{`Dealer's Card\nYour Hand`}{data}
{data.label}{value}
+ + + {dealerRow.map((data: number, i: number) => { + return ; + })} + + {chart.data.map( + (data: { label: string; value: string[] }, i: number) => { + return ( + + + {data.value.map((value) => { + return ( + + ); })} -
{`Dealer's Card\nYour Hand`}{data}
{data.label} + {value} +
- - - - {dealerRow.map((data, i) => { - return - })} - - {chart.data2.map((data, i) => { - return ( - - - {data.value.map((value) => { - return - })} - - ) + + ); + } + )} +
Your Hand\Dealer's Card{data}
{data.label}{value}
+ + + + {dealerRow.map((data: number, i: number) => { + return ; + })} + + {chart.data2.map( + (data: { label: string; value: string[] }, i: number) => { + return ( + + + {data.value.map((value) => { + return ( + + ); })} -
Your Hand\Dealer's Card{data}
{data.label} + {value} +
- -
- ) -} + + ); + } + )} + + + + ); +}; -export default Charts; \ No newline at end of file +export default Charts; diff --git a/client/src/views/Game/styles/Card.module.css b/client/src/views/Game/styles/Card.module.css index 68179ac..011baa4 100644 --- a/client/src/views/Game/styles/Card.module.css +++ b/client/src/views/Game/styles/Card.module.css @@ -10,8 +10,8 @@ } .hiddenCard { - width: 90px; - height: 195px; + width: 85px; + height: 185px; margin: 10px; padding: 0.5em 1.5em; background-image: linear-gradient(176deg, #ffffff 8.33%, #ff0000 8.33%, #ff0000 50%, #ffffff 50%, #ffffff 58.33%, #ff0000 58.33%, #ff0000 100%); diff --git a/client/src/views/Game/styles/Game.module.css b/client/src/views/Game/styles/Game.module.css index dbfd112..f08717d 100644 --- a/client/src/views/Game/styles/Game.module.css +++ b/client/src/views/Game/styles/Game.module.css @@ -1,4 +1,4 @@ .gameBackground { background-color: green; - height: 900px; + height: 750px; } \ No newline at end of file diff --git a/client/src/views/Game/styles/Hand.module.css b/client/src/views/Game/styles/Hand.module.css index 0815412..89ea3b6 100644 --- a/client/src/views/Game/styles/Hand.module.css +++ b/client/src/views/Game/styles/Hand.module.css @@ -14,6 +14,8 @@ .title { text-align: center; + margin-bottom: 0; + margin-top: 5px; } @media screen and (max-width: 600px) { diff --git a/client/src/views/Game/styles/Status.module.css b/client/src/views/Game/styles/Status.module.css index 4e9accd..5833b43 100644 --- a/client/src/views/Game/styles/Status.module.css +++ b/client/src/views/Game/styles/Status.module.css @@ -10,6 +10,7 @@ margin: 0.5em 0.5em 0.5em 1em; padding: 1em; width: 40%; + height: 50px; background: black; border: 5px solid white; border-radius: 15px; @@ -23,6 +24,7 @@ margin: 0.5em 1em 0.5em 0.5em; padding: 1em; width: 20%; + height: 50px; background: black; border: 5px solid white; border-radius: 15px;