From 618694df599da5a2027a6f7bcd9b0bf58ead309d Mon Sep 17 00:00:00 2001 From: piotrruss Date: Fri, 1 Apr 2022 01:05:07 +0000 Subject: Added Calculator app --- apps/Calculator/components/App.js | 109 ++++++++++++++++++++++++++ apps/Calculator/index.js | 3 + apps/Calculator/styles/Calculator.module.scss | 1 + apps/Calculator/styles/_calculator.scss | 92 ++++++++++++++++++++++ apps/index.js | 1 + configs/appList.js | 3 +- configs/translations.js | 4 + public/icons/calculator.svg | 10 +++ 8 files changed, 222 insertions(+), 1 deletion(-) create mode 100644 apps/Calculator/components/App.js create mode 100644 apps/Calculator/index.js create mode 100644 apps/Calculator/styles/Calculator.module.scss create mode 100644 apps/Calculator/styles/_calculator.scss create mode 100644 public/icons/calculator.svg diff --git a/apps/Calculator/components/App.js b/apps/Calculator/components/App.js new file mode 100644 index 0000000..df46751 --- /dev/null +++ b/apps/Calculator/components/App.js @@ -0,0 +1,109 @@ +import { useState } from 'react'; +import styles from '../styles/Calculator.module.scss' + +const App = () => { + const [display, setDisplay] = useState('0') + const [memory, setMemory] = useState([]) + const [result, setResult] = useState([]) + + const onClear = () => { + setDisplay('0') + setMemory([]) + } + const onNumber = n => setDisplay(p => display === '0' ? n.toString() : p+n) + const onMath = m => { + if (display !== '0') { + if (!result) { + setMemory(p => [ + ...p, + { type: 'n', value: display }, + { type: 'm', value: m }, + ]); + } else { + setResult(false) + setMemory([ + { type: 'n', value: display }, + { type: 'm', value: m }, + ]); + } + setDisplay('0') + } else if (memory[memory.length - 1].type === 'm') { + setMemory(p => [...p.slice(0, -1), { type: 'm', value: m }]); + } + } + + const newVal = (prevVal, curVal) => { + if (!prevVal || !prevVal.m) return 0; + + if (prevVal.m === '+') { + return `${Number(prevVal.value) + Number(curVal.value)}` + } + if (prevVal.m === '-') { + return `${Number(prevVal.value) - Number(curVal.value)}` + } + if (prevVal.m === '*') { + return `${Number(prevVal.value) * Number(curVal.value)}` + } + if (prevVal.m === '/') { + return prevVal.value !== '0' && curVal.value !== '0' + ? `${Number(prevVal.value) / Number(curVal.value)}` + : '0' + } + } + + const onResult = () => { + if (memory.length > 2 || (memory.length > 1 && display !== '0')) { + const actions = display === 0 + ? memory + : [...memory, { type: 'n', value: display }] + const result = actions.reduce((prevVal, curVal) => { + return curVal.type === 'n' + ? ({ value: newVal(prevVal, curVal), m: null }) + : ({ value: prevVal.value, m: curVal.value }) + }) + setDisplay(result?.value || 0); + setResult(true) + if (display !== 0) { + setMemory(p => [...p, { type: 'n', value: display }]) + } + } + } + + return ( + <> +
+
+
+ Clear +
+
+
+
+
+
+ { memory.map(o => o.value).join(' ') } +
+
+ {display} +
+
+
+
+ { [...Array(10).keys()].map(k => ( +
onNumber(k)}>{k}
+ )) } +
setDisplay(p => p+'.')}>.
+
=
+
+
+ {['+','-','*','/'].map(m => ( +
onMath(m)}>{m}
+ ))} +
+
+
+ + ) +} + +export default App diff --git a/apps/Calculator/index.js b/apps/Calculator/index.js new file mode 100644 index 0000000..4a7ef43 --- /dev/null +++ b/apps/Calculator/index.js @@ -0,0 +1,3 @@ +import Calculator from './components/App' + +export default Calculator diff --git a/apps/Calculator/styles/Calculator.module.scss b/apps/Calculator/styles/Calculator.module.scss new file mode 100644 index 0000000..2bc25fa --- /dev/null +++ b/apps/Calculator/styles/Calculator.module.scss @@ -0,0 +1 @@ +@import "calculator"; diff --git a/apps/Calculator/styles/_calculator.scss b/apps/Calculator/styles/_calculator.scss new file mode 100644 index 0000000..987a0ea --- /dev/null +++ b/apps/Calculator/styles/_calculator.scss @@ -0,0 +1,92 @@ +.calculator { + width: 100%; + height: 100%; + position: relative; + background-color: #000; + display: flex; + flex-direction: column; + background-color: var(--color-window-content); +} + +.display { + height: 20%; + background-color: var(--color-text); + color: var(--color-window-content); + display: flex; + flex-direction: column; + padding-right: 1em; + + > div:nth-child(1) { + font-size: 1em; + padding-top: .5em; + white-space: nowrap; + text-align: right; + } + + > div:nth-child(2) { + font-size: 2.5em; + flex-grow: 1; + display: flex; + align-items: center; + justify-content: flex-end; + } +} + +.keys { + height: 80%; + width: 100%; + display: flex; + + & > div { + height: 100%; + display: flex; + + & > div { + height: 25%; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid var(--color-window-buttons); + transition: .3s background-color; + font-size: 2em; + } + + &:nth-of-type(1) { + width: 75%; + flex-wrap: wrap; + background-color: var(--color-window-popup); + + & > div { + width: 33.3%; + flex-grow: 1; + + &:hover { + background-color: var(--color-window-content); + } + + &:first-of-type { + order: 2; + } + + &:nth-of-type(12) { + order: 3; + } + } + } + + &:nth-of-type(2) { + width: 25%; + flex-direction: column; + + & > div { + width: 100%; + background-color: var(--color-window-menu-alt); + + &:hover { + background-color: var(--color-window-content); + } + } + } + } + +} diff --git a/apps/index.js b/apps/index.js index 465761b..eccedac 100644 --- a/apps/index.js +++ b/apps/index.js @@ -1,3 +1,4 @@ +export { default as Calculator } from './Calculator' export { default as Notes } from './Notes' export { default as Player } from './Player' export { default as Settings } from './Settings' diff --git a/configs/appList.js b/configs/appList.js index b5f1eac..83535a3 100644 --- a/configs/appList.js +++ b/configs/appList.js @@ -1,6 +1,7 @@ -import { Notes, Player, Settings, Youtube } from 'apps' +import { Calculator, Notes, Player, Settings, Youtube } from 'apps' const appList = { + Calculator: { component: Calculator, icon: true, buttons: ['min', 'close'], height: '40em', width: '30em' }, Notes: { component: Notes, icon: true, buttons: ['min', 'max', 'close'], height: '48em', width: '64em' }, Player: { component: Player, icon: true, buttons: ['min', 'max', 'close'], height: '48em', width: '64em' }, Settings: { component: Settings, icon: false, buttons: ['min'], height: '23em', width: '16em' }, diff --git a/configs/translations.js b/configs/translations.js index 11a5988..79fcf7d 100644 --- a/configs/translations.js +++ b/configs/translations.js @@ -33,6 +33,7 @@ const translations = { created: 'Created', modified: 'Modified', open_apps: 'Open apps:', + Calculator: 'Calculator', Notes: 'Notes', Player: 'Player', Settings: 'Settings', @@ -120,6 +121,7 @@ const translations = { created: 'Utworzono', modified: 'Zmodyfikowano', open_apps: 'Otwarte aplikacje:', + Calculator: 'Kalkulator', Notes: 'Notatki', Player: 'Odtwarzacz', Settings: 'Ustawienia', @@ -207,6 +209,7 @@ const translations = { created: 'Creado', modified: 'Modificado', open_apps: 'Aplicaciones abiertas:', + Calculator: '????????????????????????????????????????????????????/', Notes: 'Notas', Player: 'Jugador', Settings: 'Ajustes', @@ -294,6 +297,7 @@ const translations = { created: 'Erstellt', modified: 'Geändert', open_apps: 'Anwendungen öffnen:', + Calculator: '????????????????????????????????????????????????????/', Notes: 'Anmerkungen', Player: 'Spieler', Settings: 'Einstellungen', diff --git a/public/icons/calculator.svg b/public/icons/calculator.svg new file mode 100644 index 0000000..9429c59 --- /dev/null +++ b/public/icons/calculator.svg @@ -0,0 +1,10 @@ + + + + + + + + + + -- cgit v1.2.3