Skip to content

Commit

Permalink
Finally added the new config system
Browse files Browse the repository at this point in the history
  • Loading branch information
BergerAPI committed Apr 13, 2021
1 parent 20131bd commit 719e40c
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 78 deletions.
19 changes: 11 additions & 8 deletions components/config/Checkbox.jsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
import React from "react";
import styles from "../../styles/components/config/Config.module.css";
import { Config } from "../../util/config";

export class Checkbox extends React.Component {
constructor(props) {
super(props);

this.state = {
activated: "false",
activated: false,
};
this.config = new Config()
}

componentDidMount() {
this.setState({ activated: localStorage.getItem(this.props.item) });
this.config.load()
this.setState({ activated: this.config.get(this.props.item) });
}

render() {
Expand All @@ -25,22 +28,22 @@ export class Checkbox extends React.Component {
<div className={styles.box}>
<p
className={
this.state.activated == "true" ? styles.offBox : undefined
this.state.activated ? styles.offBox : undefined
}
onClick={() => {
this.setState({ activated: "false" });
localStorage.setItem(this.props.item, "false");
this.setState({ activated: false });
this.config.set(this.props.item, false);
}}
>
Disable
</p>
<p
className={
this.state.activated != "true" ? styles.offBox : undefined
!this.state.activated ? styles.offBox : undefined
}
onClick={() => {
this.setState({ activated: "true" });
localStorage.setItem(this.props.item, "true");
this.setState({ activated: true });
this.config.set(this.props.item, true);
}}
>
Activate
Expand Down
10 changes: 6 additions & 4 deletions components/config/Mode.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
import styles from "../../styles/components/config/Config.module.css";
import { Config } from "../../util/config";

export class Mode extends React.Component {
constructor(props) {
Expand All @@ -9,12 +10,13 @@ export class Mode extends React.Component {
values: props.values,
currentValue: props.values[0],
};
this.config = new Config()
}

componentDidMount() {
if (localStorage.getItem(this.props.item))
this.setState({ currentValue: localStorage.getItem(this.props.item) });
else localStorage.setItem(this.props.item, this.state.values[0]);
this.config.load()

this.setState({ currentValue: this.config.get(this.props.item) });
}

render() {
Expand All @@ -26,7 +28,7 @@ export class Mode extends React.Component {
}
onClick={() => {
this.setState({ currentValue: value });
localStorage.setItem(this.props.item, value);
this.config.set(this.props.item, value);
}}
>
{value}
Expand Down
73 changes: 28 additions & 45 deletions components/input/Input.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { initSounds, playSound } from "../../util/sound/sound-handler.js";
import { calculate } from "../../util/logic/type-logic.js";
import { db, auth } from "../../util/firebase/firebase.js";

import { Config } from "../../util/config.js";

export class Input extends React.Component {
constructor(props) {
super(props);
Expand All @@ -32,7 +34,8 @@ export class Input extends React.Component {
rawData: [],
number: [],
};
this.timer = undefined
this.timer = undefined;
this.config = new Config();
}

/**
Expand Down Expand Up @@ -69,54 +72,35 @@ export class Input extends React.Component {
}
}

if (localStorage.getItem("mode")) {
if (localStorage.getItem("mode") !== "Time") {
if (
this.state.time >=
parseInt(localStorage.getItem("mode").substring(0, 2)) * 1000
) {
clearInterval(this.timer);
await this.handleFinish();
}
if (this.config.get("mode") !== "Time") {
if (
this.state.time >=
parseInt(this.config.get("mode").substring(0, 2)) * 1000
) {
clearInterval(this.timer);
await this.handleFinish();
}
}
}, 1);
}

/**
* Sets all states that are important for the component
* TODO: Clean this shitty peace of code and
* TODO: use a json object in the localstorage
*/
async setupConfig() {
let language = localStorage.getItem("language")
? localStorage.getItem("language")
: "english";

this.state.unit = localStorage.getItem("unit")
? localStorage.getItem("unit")
: "WPM";

if (!localStorage.getItem("mode")) localStorage.setItem("mode", "15s");

if (localStorage.getItem("mode") !== "Text")
this.setState({ timeText: " / " + localStorage.getItem("mode") });
let language = this.config.get("language");

if (!localStorage.getItem("font-size"))
localStorage.setItem("font-size", "15px");
this.state.unit = this.config.get("unit");

this.setState({ fontSize: localStorage.getItem("font-size") });
if (this.config.get("mode") !== "Text")
this.setState({ timeText: " / " + this.config.get("mode") });

if (!localStorage.getItem("font-family"))
localStorage.setItem("font-family", "Arial");

this.setState({ font: localStorage.getItem("font-family") });
this.setState({
fontSize: this.config.get("fontSize"),
font: this.config.get("fontFamily"),
});

if (
localStorage.getItem("input_mode")
? localStorage.getItem("input_mode") == "Quotes"
: true
) {
if (this.config.get("inputMode") === "Quotes") {
let quote = await getQuote(language);

this.setState({
Expand Down Expand Up @@ -158,12 +142,12 @@ export class Input extends React.Component {
async handleValidInput(event) {
if (this.state.index == 0) this.startTimer();

if (localStorage.getItem("click_sounds") === "true")
if (this.config.get("clickSounds"))
playSound("click_sounds");

if (event.key !== this.state.fullText[this.state.index]) {
this.setState({ errorCount: this.state.errorCount + 1 });
if (localStorage.getItem("error_sounds") === "true")
if (this.config.get("errorSounds"))
playSound("error_sounds");
}

Expand All @@ -182,12 +166,11 @@ export class Input extends React.Component {
}

/**
* Handles a restart request by the user, and basically just
* Handles a restart request by the user, and basically just
* sets all states to the default and inits the config
*/
handRestart() {
if(this.timer)
clearInterval(this.timer)
if (this.timer) clearInterval(this.timer);

this.setState({
index: 0,
Expand All @@ -204,10 +187,10 @@ export class Input extends React.Component {
restartSelected: false,
wpmData: [],
rawData: [],
number: []
})
number: [],
});

this.setupConfig()
this.setupConfig();
}

/**
Expand Down Expand Up @@ -288,7 +271,7 @@ export class Input extends React.Component {
else if (event.keyCode == 8 && this.state.index > 0)
this.handleBackspace();
else if (event.keyCode == 13 && this.state.restartSelected)
this.handRestart()
this.handRestart();
else if (event.keyCode == 9) {
event.preventDefault();
this.setState({ restartSelected: true });
Expand Down
14 changes: 8 additions & 6 deletions pages/config/index.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
import { Checkbox } from "../../components/config/Checkbox.jsx"
import { Mode } from "../../components/config/Mode.jsx"
import MovingLayout from "../../components/layout/Moving-Layout.js"
import { Config } from "../../util/config";


export default function Home() {
return (
<>
<Checkbox title="Error Sound" description="If this is enabled, you will hear a sound, every time you type a error. (Not recommend on Macbook's)" item="error_sounds" />
<Checkbox title="Click Sound" description="If this is enabled, you will hear a sound, every time you press a key. (Not recommend on Macbook's)" item="click_sounds" />
<Mode title="Input Mode" description="If you want to type quotes in you selected language, or just randomly placed words." item="input_mode" values={["Words", "Quotes"]} />
<Checkbox title="Error Sound" description="If this is enabled, you will hear a sound, every time you type a error. (Not recommend on Macbook's)" item="errorSounds" />
<Checkbox title="Click Sound" description="If this is enabled, you will hear a sound, every time you press a key. (Not recommend on Macbook's)" item="clickSounds" />
<Mode title="Input Mode" description="If you want to type quotes in you selected language, or just randomly placed words." item="inputMode" values={["Words", "Quotes"]} />
<Mode title="Unit" description="If you want to see your wpm or your cpm." item="unit" values={["WPM", "CPM"]} />
<Mode title="Mode" description="If you want to play in time, or just write a text." item="mode" values={["Text", "10s", "15s", "30s", "60s"]} />
<Mode title="Language" description="The Language, in which you want to type in" item="language" values={["English", "German", "France", "Russia"]} />
<Mode title="Font-Size" description="The size of the font" item="font-size" values={["15px", "20px", "25px", "30px"]} />
<Mode title="Font" description="The font" item="font-family" values={["'Arial'", "monospace", "'Roboto'", "Source Code Pro"]} />
</>
<Mode title="Font-Size" description="The size of the font" item="fontSize" values={["15px", "20px", "25px", "30px"]} />
<Mode title="Font" description="The font" item="fontFamily" values={["'Arial'", "monospace", "'Roboto'", "Source Code Pro"]} />
</>
)
}

Expand Down
74 changes: 59 additions & 15 deletions util/config.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,60 @@
let currentConfig = {
mode: "",
language: "",
clickSounds: false,
errorSounds: false
}

export function load() {
if (localStorage.getItem("config"))
this.currentConfig = JSON.parse(localStorage.getItem("config"))
else this.save()
}

export function save() {
localStorage.setItem("config", currentConfig)
export class Config {
constructor() {
this.currentConfig = new Map()
}

/**
* Sets a value instantly saves the config
*/
set(key, value) {
this.load()
this.currentConfig.set(key, value)
this.save()
}

/**
* Gets a value from the config
*/
get(key) {
this.load()
return this.currentConfig.get(key)
}

/**
* Saves the current config, or if no config is loaded,
* it loads the default config
*/
save() {
localStorage.clear()

if (this.currentConfig.size !== 0) {
localStorage.setItem("config", JSON.stringify(Object.fromEntries(this.currentConfig)))

console.log("gg ")
console.log(this.currentConfig)
} else {

console.log("fff")

// Loading the default config here
this.currentConfig.set("inputMode", "words")
this.currentConfig.set("language", "english")
this.currentConfig.set("clickSounds", false)
this.currentConfig.set("errorSounds", false)
this.currentConfig.set("unit", "wpm")
this.currentConfig.set("mode", "15s")
this.currentConfig.set("fontSize", "30px")
this.currentConfig.set("fontFamily", "Source Code Pro")
localStorage.setItem("config", JSON.stringify(Object.fromEntries(this.currentConfig)))
}
}

/**
* Loads the Config
*/
load() {
if (localStorage.getItem("config") !== null)
this.currentConfig = new Map(Object.entries(JSON.parse(localStorage.getItem("config"))))
else this.save()
}
}

1 comment on commit 719e40c

@vercel
Copy link

@vercel vercel bot commented on 719e40c Apr 13, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.