From cb9fa3b3d8751368846d2607a7a5861d386252c7 Mon Sep 17 00:00:00 2001 From: Galvin <77013913+GalvinPython@users.noreply.github.com> Date: Thu, 3 Aug 2023 11:22:57 +0100 Subject: [PATCH 1/2] Styling update --- README.md | 20 +++- public/index.html | 4 +- ...dometer-theme-default.css => odometer.css} | 0 src/App.js | 100 +++++++++--------- src/App.scss | 10 +- src/pointer.svg | 3 + 6 files changed, 81 insertions(+), 56 deletions(-) rename public/{odometer-theme-default.css => odometer.css} (100%) create mode 100644 src/pointer.svg diff --git a/README.md b/README.md index 5d98ff9..8600530 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,8 @@ # GlobalClicker -[Click here to play](https://gc.galvindev.me.uk) +[Click here to play](https://gc.galvindev.me.uk) +![Website](https://img.shields.io/website?url=https%3A%2F%2Fgc.galvindev.me.uk&style=for-the-badge&label=Website) ![API](https://img.shields.io/website?url=https%3A%2F%2Fapi-gc.galvindev.me.uk&style=for-the-badge&label=API) +![Website Version](https://img.shields.io/badge/Website%20Version%3A-1.0%20(Upcoming%201)-blue?style=for-the-badge) + # API Endpoints There are currently only two supported endpoints, however more are to be developed: @@ -12,7 +15,22 @@ There are currently only two supported endpoints, however more are to be develop # Changelog Note: Backend code isn't available, however changes are documented +### Version 1.0 (Upcoming) +#### Backend +* No issues fixed, but there will be changes made + +#### Frontend +* Button hover colour is now blue, rather than staying green. However it will remain green when you're not hovering +* Added pointer when hovering on button +* Can no longer select text +* Renamed odometer.css +* Made small text more readable on smaller devices +* `index.html`: root is now main rather than div +* Added accessability +
+ + Beta ### Beta 0.3 (26/07/2023) diff --git a/public/index.html b/public/index.html index 17629fe..b0326df 100644 --- a/public/index.html +++ b/public/index.html @@ -11,11 +11,11 @@ /> - + Global Clicker -
+
diff --git a/public/odometer-theme-default.css b/public/odometer.css similarity index 100% rename from public/odometer-theme-default.css rename to public/odometer.css diff --git a/src/App.js b/src/App.js index eb78141..04eadf7 100644 --- a/src/App.js +++ b/src/App.js @@ -4,59 +4,59 @@ import Odometer from 'react-odometerjs' import { useEffect, useState } from 'react'; function App() { - const [value, setValue] = useState() - useEffect(() => { - let rows; - console.log("Script running!") - const interval = setInterval(() => { - fetch('https://api-gc.galvindev.me.uk/clicks', {method: 'GET'}) - .then(function(response) { - if(response.ok) return response.json(); - throw new Error('Request failed.'); - }) - .then(function(data) { - rows = data[0].row_count - }) - .catch(function(error) { - console.log(error); - }); + const [value, setValue] = useState() + useEffect(() => { + let rows; + console.log("Script running!") + const interval = setInterval(() => { + fetch('https://api-gc.galvindev.me.uk/clicks', {method: 'GET'}) + .then(function(response) { + if(response.ok) return response.json(); + throw new Error('Request failed.'); + }) + .then(function(data) { + rows = data[0].row_count + }) + .catch(function(error) { + console.log(error); + }); + setValue(rows) + }, 2000) + return () => clearInterval(interval) + }, []) - setValue(rows) - }, 2000) - return () => clearInterval(interval) - }, []) + function sendReq() { + fetch('https://api-gc.galvindev.me.uk/clicked') + .then(function(response) { + if(response.ok) return response.json + throw new Error('Request failed.') + }) + .catch(function(error) { + console.error(error) + }) + } - function sendReq() { - fetch('https://api-gc.galvindev.me.uk/clicked') - .then(function(response) { - if(response.ok) return response.json - throw new Error('Request failed.') - }) - .catch(function(error) { - console.error(error) - }) - } + // Needed for outlinks + const Anchor = props => { + return ( + {props.children} + ) + } - // Needed for outlinks - const Anchor = props => { - return ( - {props.children} - ) - } - - return ( -
-
- logo -

Global Clicker By: GalvinPython

-
- -
- - Version 0.3-20230726 (BETA) | View Source -
-
- ); + return ( +
+
+ logo +

Global Clicker By: GalvinPython

+
+ +
+ + 1.0 (Upcoming 1) | View Source + {/* Version 1.0| View Source */} +
+
+ ); } export default App; diff --git a/src/App.scss b/src/App.scss index 8a51935..6ba69a9 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1,6 +1,7 @@ // Variables $background-color_1: black; $background-color_2: rgb(181, 252, 94); +$background-color_3: rgb(97, 218, 251); $color_1: white; $color_2: #61dafb; @@ -46,15 +47,17 @@ button { font-size: 1em; transition-duration: 0.5s; font-weight: bolder; + cursor: url(cursor.svg), auto; &:hover { + background-color: $background-color_3; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(255,255,255,0.19); - cursor: pointer; transition-duration: 0.5s; + cursor: url(pointer.svg), auto; } } small { - font-size: 1vh; + font-size: 1.2vh; position: fixed; bottom: 0; } @@ -64,6 +67,7 @@ body { font-family: $font-family_1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + user-select: none; } code { @@ -76,5 +80,5 @@ code { } a { - color: white; + color: $color_1; } \ No newline at end of file diff --git a/src/pointer.svg b/src/pointer.svg new file mode 100644 index 0000000..0364398 --- /dev/null +++ b/src/pointer.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file From 2677195bb235684b27949aa6e77ce7593047fc72 Mon Sep 17 00:00:00 2001 From: Galvin <77013913+GalvinPython@users.noreply.github.com> Date: Sun, 6 Aug 2023 20:58:37 +0100 Subject: [PATCH 2/2] Worked on Light Mode --- README.md | 4 ++-- src/App.js | 17 ++++++++++++--- src/App.scss | 47 +++++++++++++++++++++++++++++++--------- src/pointer.svg | 4 +--- src/{ => svg}/cursor.svg | 0 src/svg/settings.svg | 1 + src/svg/stats.svg | 1 + 7 files changed, 56 insertions(+), 18 deletions(-) rename src/{ => svg}/cursor.svg (100%) create mode 100644 src/svg/settings.svg create mode 100644 src/svg/stats.svg diff --git a/README.md b/README.md index 8600530..fe351f5 100644 --- a/README.md +++ b/README.md @@ -27,10 +27,10 @@ Note: Backend code isn't available, however changes are documented * Made small text more readable on smaller devices * `index.html`: root is now main rather than div * Added accessability +* Added light mode +* Restructured folders
- - Beta ### Beta 0.3 (26/07/2023) diff --git a/src/App.js b/src/App.js index 04eadf7..9ad3812 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,7 @@ import logo from './logo.svg'; +import settingsIcon from './svg/settings.svg' +import statsIcon from './svg/stats.svg' + import './App.scss'; import Odometer from 'react-odometerjs' import { useEffect, useState } from 'react'; @@ -45,14 +48,22 @@ function App() { return (
-
+
+
+
+ logo +
+
+ logo +
+
logo -

Global Clicker By: GalvinPython

+

Global Clicker By GalvinPython

- 1.0 (Upcoming 1) | View Source + 1.0 (Upcoming 2) | View Source {/* Version 1.0| View Source */}
diff --git a/src/App.scss b/src/App.scss index 6ba69a9..410d7b3 100644 --- a/src/App.scss +++ b/src/App.scss @@ -2,6 +2,8 @@ $background-color_1: black; $background-color_2: rgb(181, 252, 94); $background-color_3: rgb(97, 218, 251); +$background-color_4: white; +$background-color_5: #222; $color_1: white; $color_2: #61dafb; @@ -13,7 +15,7 @@ $font-family_2: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospa // Main Content .App { text-align: center; - cursor: url(cursor.svg), auto; + cursor: url(svg/cursor.svg), auto; } .App-logo { height: 20vmin; @@ -28,6 +30,17 @@ $font-family_2: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospa justify-content: center; font-size: calc(10px + 2vmin); color: $color_1; + a { + color: $color_1; + } + + &.light { + background-color: $background-color_4; + color: $color_3; + a { + color: $color_3; + } + } } .App-link { color: $color_2; @@ -47,7 +60,7 @@ button { font-size: 1em; transition-duration: 0.5s; font-weight: bolder; - cursor: url(cursor.svg), auto; + cursor: url(svg/cursor.svg), auto; &:hover { background-color: $background-color_3; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(255,255,255,0.19); @@ -56,12 +69,6 @@ button { } } -small { - font-size: 1.2vh; - position: fixed; - bottom: 0; -} - body { margin: 0; font-family: $font-family_1; @@ -72,6 +79,9 @@ body { code { font-family: $font-family_2; + font-size: 1.2vh; + position: fixed; + bottom: 0; } .odometer { @@ -79,6 +89,23 @@ code { font-size: 10vw; } -a { - color: $color_1; +.App-settings { + position: absolute; + top: 0; + right: 10px; +} +.App-icons { + background-color: $background-color_5; + border-radius: 50%; + width: 5vw; + height: 5vw; + margin-top: 10px; + cursor: not-allowed !important; // TODO: Remove once functionality has been implemented + > img { + text-align: center; + vertical-align: center; + width: 3vw; + margin-top: 1vw; + pointer-events: none; + } } \ No newline at end of file diff --git a/src/pointer.svg b/src/pointer.svg index 0364398..a961cea 100644 --- a/src/pointer.svg +++ b/src/pointer.svg @@ -1,3 +1 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/cursor.svg b/src/svg/cursor.svg similarity index 100% rename from src/cursor.svg rename to src/svg/cursor.svg diff --git a/src/svg/settings.svg b/src/svg/settings.svg new file mode 100644 index 0000000..6c34fdf --- /dev/null +++ b/src/svg/settings.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/svg/stats.svg b/src/svg/stats.svg new file mode 100644 index 0000000..d26cb6f --- /dev/null +++ b/src/svg/stats.svg @@ -0,0 +1 @@ + \ No newline at end of file