@@ -162,7 +162,8 @@ export const DeltaLayout = () => {
: renderDeltaChange(codeword, i);
}
- layoutArray.push(layout);
+ layoutArray.push(
+ layout);
}
}
return layoutArray;
diff --git a/frontend/src/components/CodificationLayouts/EliasGammaLayout/index.tsx b/frontend/src/components/CodificationLayouts/EliasGammaLayout/index.tsx
index 8382585..7152b96 100644
--- a/frontend/src/components/CodificationLayouts/EliasGammaLayout/index.tsx
+++ b/frontend/src/components/CodificationLayouts/EliasGammaLayout/index.tsx
@@ -106,7 +106,7 @@ export const EliasGammaLayout = () => {
&
{rest}
- [{binaryRest} em binário]
+ [{binaryRest} in binary]
);
diff --git a/frontend/src/components/CodificationLayouts/FibonacciLayout/index.tsx b/frontend/src/components/CodificationLayouts/FibonacciLayout/index.tsx
index 5444803..132d4ac 100644
--- a/frontend/src/components/CodificationLayouts/FibonacciLayout/index.tsx
+++ b/frontend/src/components/CodificationLayouts/FibonacciLayout/index.tsx
@@ -145,7 +145,7 @@ export const FibonacciLayout = () => {
})}
{sum}
- (Diferença de 1, por causa do incremento)
+ (Difference of 1, because of the increment)
diff --git a/frontend/src/components/CodificationLayouts/GoulombLayout/index.tsx b/frontend/src/components/CodificationLayouts/GoulombLayout/index.tsx
index 4062458..18680bf 100644
--- a/frontend/src/components/CodificationLayouts/GoulombLayout/index.tsx
+++ b/frontend/src/components/CodificationLayouts/GoulombLayout/index.tsx
@@ -17,27 +17,14 @@ export const GoulombLayout = () => {
const [codewords] = useCodewords();
const [goulombDivisor] = useGoulombDivisor();
const [codingDecoding] = useCodingDecoding();
-
- const [stopBitPosition, setStopBitPosition] = useState(-1);
const [theme] = useTheme();
- useEffect(() => {
- if (stopBitPosition === -1 && codewords.length) {
- const firstCodeword = codewords[0].codeword.toString();
- for (let i = 0; i < firstCodeword.length; i++) {
- if (firstCodeword.charAt(i) === "1") {
- setStopBitPosition(i);
- break;
- }
- }
- }
- }, [codewords, stopBitPosition]);
-
function renderExplanation(codeword: Codeword) {
- const quantityOfZeros = codeword.codeword.substring(0, stopBitPosition)
- .length;
+ const codewordString = codeword.codeword;
+ const stopBitPosition = getStopBitPosition(codewordString);
+ const quantityOfZeros = codewordString.substring(0, stopBitPosition).length;
- const rest = codeword.codeword.substring(stopBitPosition + 1);
+ const rest = codewordString.substring(stopBitPosition + 1);
const binaryRest = parseInt(rest, 2);
const integerPart = goulombDivisor * quantityOfZeros;
@@ -139,13 +126,27 @@ export const GoulombLayout = () => {
&
{rest}
- [{binaryRest} em binário]
+ [{binaryRest} in binary]
);
}
+ function getStopBitPosition(codeword:string){
+ let position = 0;
+ for(let i =0 ;i< codeword.length;i++){
+ const character = codeword.charAt(i);
+ if(character==='0'){
+ position++;
+ }else{
+ break;
+ }
+ }
+ return position;
+ }
+
function renderCodewordSplitted(codeword: string) {
+ const stopBitPosition = getStopBitPosition(codeword);
return (
diff --git a/frontend/src/components/CodificationLayouts/HuffmanLayout/index.tsx b/frontend/src/components/CodificationLayouts/HuffmanLayout/index.tsx
index fdcd49e..32f8639 100644
--- a/frontend/src/components/CodificationLayouts/HuffmanLayout/index.tsx
+++ b/frontend/src/components/CodificationLayouts/HuffmanLayout/index.tsx
@@ -99,7 +99,7 @@ export const HuffmanLayout = () => {
}
return list.length ? (
-
+
{list.map((line, index) => {
return (
{
return data;
}
+ function getHeightOfTree(){
+ if(huffmanTree.length>17){
+ return 900;
+ }else if(huffmanTree.length>13){
+ return 600;
+ }else if(huffmanTree.length>10){
+ return 450;
+ }else if(huffmanTree.length>5){
+ return 400;
+ }else{
+ return 300;
+ }
+ }
+
return (
-
-
@@ -204,19 +218,22 @@ export const HuffmanLayout = () => {
-
diff --git a/frontend/src/components/CodificationLayouts/HuffmanLayout/styles.js b/frontend/src/components/CodificationLayouts/HuffmanLayout/styles.js
index 87d5fe7..a3f20c4 100644
--- a/frontend/src/components/CodificationLayouts/HuffmanLayout/styles.js
+++ b/frontend/src/components/CodificationLayouts/HuffmanLayout/styles.js
@@ -1,120 +1,131 @@
-import styled from 'styled-components'
-import { GRAY, PRIMARY, DARKEST, BLUEISH, LIGHT_GRAY, LIGHTEST_GRAY } from '../../../constants/colors'
+import styled from "styled-components";
+import {
+ GRAY,
+ PRIMARY,
+ DARKEST,
+ BLUEISH,
+ LIGHT_GRAY,
+ LIGHTEST_GRAY,
+} from "../../../constants/colors";
export const Count = styled.div`
- color:${props=> props.isDark?'white':'black'};;
- background-color:${props=> props.isDark?DARKEST:LIGHTEST_GRAY};
- padding:10px;
- border-radius:10px;
- animation:surgir 1s forwards ease-in-out;
-
- .line{
- margin:8px auto;
- justify-content: center;
- align-items: center;
- display: flex;
-
- &>span{
- margin:0 10px;
- }
+ color: ${(props) => (props.isDark ? "white" : "black")};
+ background-color: ${(props) => (props.isDark ? DARKEST : LIGHTEST_GRAY)};
+ padding: 10px;
+ border-radius: 10px;
+ animation: surgir 1s forwards ease-in-out;
+
+ .counter-list {
+ max-height: 200px;
+ overflow-y: auto;
+
+ .line {
+ margin: 8px auto;
+ justify-content: center;
+ align-items: center;
+ display: flex;
+
+ & > span {
+ margin: 0 10px;
+ }
+
+ .selected-row {
+ background-color: ${(props) => (props.isDark ? GRAY : LIGHT_GRAY)};
+ border-radius: 5px;
+ }
}
-
- .selected-row{
- background-color:${props=> props.isDark?GRAY:LIGHT_GRAY};
- border-radius:5px;
- }
-`
+ }
+`;
export const TreeContainer = styled.div`
- animation:surgir 1s forwards ease-in-out;
- background-color:${props=> props.isDark?DARKEST:LIGHTEST_GRAY};
- padding:10px;
- border-radius:10px;
- margin:8px;
-
- .normal-path{
- fill: transparent;
- stroke:black;
- stroke-width: 1px;
- }
-
- .write-path{
- fill: transparent;
- stroke:${PRIMARY};
- stroke-width: 3px;
- }
-
- .node circle {
- fill: ${PRIMARY};
- stroke-width: 0px;
- }
-
- .node text {
- font-size: 11px;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- background-color: black;
- fill: ${props=> props.isDark?'white':'black'};
- }
-
-`
+ animation: surgir 1s forwards ease-in-out;
+ background-color: ${(props) => (props.isDark ? DARKEST : LIGHTEST_GRAY)};
+ padding: 10px;
+ border-radius: 10px;
+ margin: 8px;
+
+ .normal-path {
+ fill: transparent;
+ stroke: black;
+ stroke-width: 1px;
+ }
+
+ .write-path {
+ fill: transparent;
+ stroke: ${PRIMARY};
+ stroke-width: 3px;
+ }
+
+ .node circle {
+ fill: ${PRIMARY};
+ stroke-width: 0px;
+ }
+
+ .node text {
+ font-size: 11px;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ background-color: black;
+ fill: ${(props) => (props.isDark ? "white" : "black")};
+ }
+`;
export const Container = styled.div`
- display:flex;
+ display: flex;
- h3{
- color:${props=> props.isDark?'white':'black'};
- text-align:center;
- margin-bottom:10px;
- }
+ h3 {
+ color: ${(props) => (props.isDark ? "white" : "black")};
+ text-align: center;
+ margin-bottom: 10px;
+ }
- .first-column{
- display:flex;
- flex-direction: column;
- overflow-y: auto;
- max-height: calc(100vh - 250px);
-
- .counters{
- display:flex;
- flex-direction:row;
-
- &> div {
- margin: 0 8px 8px;
- flex: 1;
- }
- }
- }
+ .first-column {
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+ max-height: calc(100vh - 250px);
+
+ .counters {
+ display: flex;
+ flex-direction: row;
- .second-column{
- padding: 6px;
- overflow-y: auto;
- max-height: calc(100vh - 250px);
- margin-left: 8px;
- border-radius: 10px;
- background-color:${props=> props.isDark?DARKEST:LIGHTEST_GRAY};
+ & > div {
+ margin: 0 8px 8px;
flex: 1;
+ }
}
-`
+ }
+
+ .second-column {
+ padding: 6px;
+ overflow-y: auto;
+ max-height: calc(100vh - 250px);
+ margin-left: 8px;
+ border-radius: 10px;
+ background-color: ${(props) => (props.isDark ? DARKEST : LIGHTEST_GRAY)};
+ flex: 1;
+ }
+`;
export const HuffmanCodewordRow = styled.div`
- animation:surgir 0.5s forwards ease-in-out;
- align-items:center;
+ animation: surgir 0.5s forwards ease-in-out;
+ align-items: center;
+ font-size: 0.9rem;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ margin: 8px 5px;
+
+ .codeword {
font-size: 0.9rem;
- display: flex;
- flex-direction: row;
- justify-content: center;
- margin: 8px 5px;
-
- .codeword{
- font-size: 0.9rem;
- background-color:${props=> props.isDark?BLUEISH:LIGHT_GRAY};
- padding: 6px;
- border-radius: 4px;
- margin-right: 10px;
- }
-
- .codevalue{
- margin-left:10px;
- font-weight: bold;
- color:${props=> props.isDark?PRIMARY:'black'};
- }
-`
\ No newline at end of file
+ background-color: ${(props) => (props.isDark ? BLUEISH : LIGHT_GRAY)};
+ padding: 6px;
+ border-radius: 4px;
+ margin-right: 10px;
+ }
+
+ .codevalue {
+ margin-left: 10px;
+ font-weight: bold;
+ color: ${(props) => (props.isDark ? PRIMARY : "black")};
+ }
+`;
diff --git a/frontend/src/components/ExecutionWindow/OnError/index.tsx b/frontend/src/components/ExecutionWindow/OnError/index.tsx
new file mode 100644
index 0000000..14e9796
--- /dev/null
+++ b/frontend/src/components/ExecutionWindow/OnError/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Button } from '../../Button';
+import { Typografy } from '../../Typografy';
+import {Container} from './styles';
+import ErrorGif from "../../../assets/error.gif";
+import { useTheme } from '../../../context';
+
+export const OnError = ({finish})=>{
+
+ const [theme] = useTheme();
+
+ return (
+
+ 
+ finish()} isDark={theme}>Back
+
+ )
+}
\ No newline at end of file
diff --git a/frontend/src/components/ExecutionWindow/OnError/styles.js b/frontend/src/components/ExecutionWindow/OnError/styles.js
new file mode 100644
index 0000000..f062feb
--- /dev/null
+++ b/frontend/src/components/ExecutionWindow/OnError/styles.js
@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import { PRIMARY } from '../../../constants/colors';
+
+export const Container = styled.div`
+
+ display:flex;
+ flex-direction:column;
+ justify-content:center;
+
+ img {
+ margin-bottom: 16px;
+ object-fit: contain;
+ }
+
+ h2 {
+ margin-bottom: 20px;
+ text-align: center;
+ font-size: 22px;
+ color: ${PRIMARY};
+ }
+
+ p {
+ color: ${(props) => (props.isDark ? "white" : "black")};
+ }
+
+ button{
+ margin-top:10px;
+ }
+`;
\ No newline at end of file
diff --git a/frontend/src/components/ExecutionWindow/OnProcessing/index.tsx b/frontend/src/components/ExecutionWindow/OnProcessing/index.tsx
new file mode 100644
index 0000000..b32c3fe
--- /dev/null
+++ b/frontend/src/components/ExecutionWindow/OnProcessing/index.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { useCodificationMethod, useTheme } from "../../../context";
+import { Button } from "../../Button";
+import { Typografy } from "../../Typografy";
+import { Container } from "./styles";
+import { Line } from "rc-progress";
+
+export const OnProcessing = ({ actualPercentage, finish }) => {
+ const [codificationMethod, setCodificationMethod] = useCodificationMethod();
+ const [theme] = useTheme();
+ return (
+
+ Cancel
+
+ );
+};
diff --git a/frontend/src/components/ExecutionWindow/OnProcessing/styles.js b/frontend/src/components/ExecutionWindow/OnProcessing/styles.js
new file mode 100644
index 0000000..957eb18
--- /dev/null
+++ b/frontend/src/components/ExecutionWindow/OnProcessing/styles.js
@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+import { PRIMARY } from '../../../constants/colors';
+
+export const Container = styled.section`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ svg {
+ width: fit-content;
+ }
+
+ h2 {
+ color: ${PRIMARY};
+ margin-bottom: 20px;
+ }
+
+ & > div {
+ display: flex;
+ justify-content: center;
+ }
+
+ button {
+ margin-top: 15px;
+ }
+
+ .percentage-value {
+ margin-top: 10px;
+ display: flex;
+ align-items: center;
+
+ span {
+ color: ${PRIMARY};
+ font-weight: bold;
+ margin-right: 10px;
+ }
+ }
+
+ p {
+ color: ${(props) => (props.isDark ? "white" : "black")};
+ font-weight: bold;
+ margin: 15px 0;
+ }
+`;
\ No newline at end of file
diff --git a/frontend/src/components/ExecutionWindow/Steps/index.tsx b/frontend/src/components/ExecutionWindow/Steps/index.tsx
new file mode 100644
index 0000000..3e56dd8
--- /dev/null
+++ b/frontend/src/components/ExecutionWindow/Steps/index.tsx
@@ -0,0 +1,97 @@
+import React from "react";
+import {
+ useCodificationMethod,
+ useCodingDecoding,
+ useTheme,
+} from "../../../context";
+import { CodificationMethod } from "../../../enums/CodificationMethod";
+import { EncodingDecoding } from "../../../enums/EncodingDecoding";
+import { Typografy } from "../../Typografy";
+import { Container, StepsCanva, ScroolingList, Buttons } from "./styles";
+import {
+ DeltaLayout,
+ EliasGammaLayout,
+ FibonacciLayout,
+ GoulombLayout,
+ UnaryLayout,
+ HuffmanLayout,
+ HammingLayout,
+} from "../../CodificationLayouts";
+import { Button } from "../../Button";
+import { Icon } from "../../Icon";
+
+export const Steps = ({ index, length, back, next, finish }) => {
+ const [theme] = useTheme();
+ const [codingDecoding] = useCodingDecoding();
+ const [codificationMethod] = useCodificationMethod();
+
+ function renderCodificationLayout() {
+ switch (codificationMethod.codificationType) {
+ case CodificationMethod.UNARIO:
+ return
+
+
+
+
+ {renderCodificationLayout()}
+
+
+
+
+ = length}
+ icon={
+
+
+ );
+};
diff --git a/frontend/src/components/ExecutionWindow/Steps/styles.js b/frontend/src/components/ExecutionWindow/Steps/styles.js
new file mode 100644
index 0000000..68af338
--- /dev/null
+++ b/frontend/src/components/ExecutionWindow/Steps/styles.js
@@ -0,0 +1,50 @@
+import styled,{css} from 'styled-components';
+import { PRIMARY } from '../../../constants/colors';
+
+
+export const Container = styled.section`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+`;
+
+export const Buttons = styled.section`
+ display: flex;
+ align-self: center;
+ justify-content: center;
+ position: fixed;
+ bottom: 30px;
+
+ button {
+ margin: 10px;
+ }
+`;
+
+export const StepsCanva = styled.div`
+ width: 100%;
+ height: 100%;
+
+ header {
+ display: flex;
+ justify-content: space-between;
+ margin: 15px 10px;
+
+ .counter {
+ color: ${PRIMARY};
+ }
+
+ .codification-title {
+ color: ${(props) => (props.isDark ? "white" : "black")};
+ }
+ }
+`;
+
+export const ScroolingList = styled.div`
+ ${(props) =>
+ props.scrool &&
+ css`
+ overflow-y: auto;
+ max-height: calc(100% - 100px);
+ `}
+`;
diff --git a/frontend/src/components/ExecutionWindow/index.tsx b/frontend/src/components/ExecutionWindow/index.tsx
index 0c0c82d..9161dbd 100644
--- a/frontend/src/components/ExecutionWindow/index.tsx
+++ b/frontend/src/components/ExecutionWindow/index.tsx
@@ -1,13 +1,5 @@
import React, { useEffect, useState } from "react";
-import {
- Container,
- OnProcessing,
- Steps,
- Buttons,
- StepsCanva,
- ScroolingList,
- OnError,
-} from "./style";
+import { Container } from "./style";
import {
useOnProcessing,
@@ -18,25 +10,15 @@ import {
useTheme,
useCodingDecoding,
} from "../../context";
-import { Typografy, Button } from "../index";
import { CodificationMethod } from "../../enums/CodificationMethod";
-import {
- DeltaLayout,
- EliasGammaLayout,
- FibonacciLayout,
- GoulombLayout,
- UnaryLayout,
- HuffmanLayout,
- HammingLayout,
-} from "../CodificationLayouts";
-import { Icon } from "../Icon";
import { progress, nextStep } from "../../hooks/useCodification";
-import { Line } from "rc-progress";
import { Codeword } from "../../models/codeword";
-import ErrorGif from "../../assets/error.gif";
import codifications from "../../constants/codifications";
import { EncodingDecoding } from "../../enums/EncodingDecoding";
+import { OnError } from "./OnError";
+import { OnProcessing } from "./OnProcessing";
+import { Steps } from "./Steps";
interface ExecutionWindowProps {
onError: boolean;
@@ -49,45 +31,38 @@ export const ExecutionWindow = (props: ExecutionWindowProps) => {
onFinishedCodification,
setOnFinishedCodification,
] = useFinishedCodification();
+
const [codificationMethod, setCodificationMethod] = useCodificationMethod();
const [codewords, setCodewords] = useCodewords();
- const [codingDecoding] = useCodingDecoding();
-
- const [actualPercentage, setActualPercentage] = useState(0);
-
+ const [, setCodingDecoding] = useCodingDecoding();
const [index, setIndex] = useIndex();
-
- const [length, setLength] = useState(0);
const [theme] = useTheme();
- function finishCodification() {
- setOnFinishedCodification(true);
- setOnProcessing(false);
- }
+ const [actualPercentage, setActualPercentage] = useState(0);
+ const [length, setLength] = useState(0);
useEffect(() => {
let interval;
if (onProcessing) {
-
interval = setInterval(async () => {
try {
const percentage = await progress();
if (percentage < 60) {
setActualPercentage(percentage);
} else {
- finishCodification();
+ endCodification();
}
} catch (e) {
props.setOnError(true);
- finishCodification();
+ endCodification();
}
}, 1000);
}
- return ()=>{
+ return () => {
clearInterval(interval);
- }
+ };
}, [onProcessing]);
useEffect(() => {
@@ -98,49 +73,50 @@ export const ExecutionWindow = (props: ExecutionWindowProps) => {
async function getFirstCodeword() {
const codeword = await nextStep();
- if (codeword) {
- setLength(codeword.numberOfCharsTotal);
- if (codeword.characterBeforeEncode) {
- setCodewords([
- new Codeword(codeword.characterBeforeEncode, codeword.codeword),
- ]);
- } else {
- const codificationFinded = codifications.filter((codification) =>
- codification.name.includes(codeword.codificationName)
- );
- setCodificationMethod(codificationFinded[0]);
- setCodewords([
- new Codeword(codeword.characterDecoded, codeword.bitsBeforeDecode),
- ]);
- }
+ if (!codeword) {
+ return;
}
+
+ setLength(codeword.numberOfCharsTotal);
+
+ if (!codeword.characterBeforeEncode) {
+ if(codeword.codificationName.includes("Huffman Estático"))
+ codeword.codificationName = "Static Huffman"; // TODO In the future translate inside the backend and remove these lines
+ if(codeword.codificationName.includes("Unário"))
+ codeword.codificationName = "Unary";
+ const codificationFinded = codifications.filter((codification) =>
+ codification.name.includes(codeword.codificationName)
+ );
+ setCodificationMethod(codificationFinded[0]);
+ }
+
+ addCodeword(codeword);
}
}, [onFinishedCodification]);
- async function next() {
-
- if(index= codewords.length) {
const codeword = await nextStep();
if (!codeword.codeword && !codeword.characterDecoded) {
return;
}
+ addCodeword(codeword);
+ }
+ setIndex(index + 1);
+ }
- if (codeword.characterBeforeEncode) {
- setCodewords([
- ...codewords,
- new Codeword(codeword.characterBeforeEncode, codeword.codeword),
- ]);
- } else {
- setCodewords([
- ...codewords,
- new Codeword(codeword.characterDecoded, codeword.bitsBeforeDecode),
- ]);
- }
-
- setIndex(index + 1);
+ function addCodeword(codeword) {
+ if (codeword.characterBeforeEncode) {
+ setCodewords([
+ ...codewords,
+ new Codeword(codeword.characterBeforeEncode, codeword.codeword),
+ ]);
+ } else {
+ setCodewords([
+ ...codewords,
+ new Codeword(codeword.characterDecoded, codeword.bitsBeforeDecode),
+ ]);
}
}
@@ -151,126 +127,33 @@ export const ExecutionWindow = (props: ExecutionWindowProps) => {
}
function finish() {
+ props.setOnError(false);
+ setActualPercentage(0);
+ setLength(0);
+
setOnProcessing(false);
setOnFinishedCodification(false);
- setCodificationMethod(-1);
+ setCodingDecoding(EncodingDecoding.NO_ONE);
+ setCodificationMethod(CodificationMethod.NO_ONE);
setCodewords([]);
- setActualPercentage(0);
- setLength(0);
setIndex(1);
}
- function cancelProcessing() {
- finishCodification();
- finish();
- }
-
- function renderCodificationLayout() {
- switch (codificationMethod.codificationType) {
- case CodificationMethod.UNARIO:
- return
- {props.onError && (
-
-
-
- )}
- {!props.onError && onProcessing && (
-
- Cancelar
-
+ {!props.onError && onProcessing && (
+
-
-
-
-
- {renderCodificationLayout()}
-
-
-
- = length}
- icon={
-
-
+
)}
);
diff --git a/frontend/src/components/ExecutionWindow/style.js b/frontend/src/components/ExecutionWindow/style.js
index 91c8caa..103c6fd 100644
--- a/frontend/src/components/ExecutionWindow/style.js
+++ b/frontend/src/components/ExecutionWindow/style.js
@@ -1,5 +1,5 @@
-import styled, { css } from "styled-components";
-import { BLUE_GRAY, PRIMARY, WHITE } from "../../constants/colors";
+import styled from "styled-components";
+import { BLUE_GRAY, WHITE } from "../../constants/colors";
export const Container = styled.div`
background-color: ${(props) => (props.isDark ? BLUE_GRAY : WHITE)};
@@ -19,110 +19,3 @@ export const Container = styled.div`
`;
-export const OnError = styled.div`
- img {
- margin-bottom: 16px;
- }
-
- h2 {
- margin-bottom: 20px;
- text-align: center;
- font-size: 22px;
- color: ${PRIMARY};
- }
-
- p {
- color: ${(props) => (props.isDark ? "white" : "black")};
- }
-`;
-
-export const OnProcessing = styled.section`
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-
- svg {
- width: fit-content;
- }
-
- h2 {
- color: ${PRIMARY};
- margin-bottom: 20px;
- }
-
- & > div {
- display: flex;
- justify-content: center;
- }
-
- button {
- margin-top: 15px;
- }
-
-
-
- .percentage-value {
- margin-top: 10px;
- display: flex;
- align-items: center;
-
- span {
- color: ${PRIMARY};
- font-weight: bold;
- margin-right: 10px;
- }
- }
-
- p {
- color: ${(props) => (props.isDark ? "white" : "black")};
- font-weight: bold;
- margin: 15px 0;
- }
-`;
-
-export const Steps = styled.section`
- display: flex;
- flex-direction: column;
- width: 100%;
- height: 100%;
-`;
-export const Buttons = styled.section`
- display: flex;
- align-self: center;
- justify-content: center;
- position: fixed;
- bottom: 30px;
-
- button {
- margin: 10px;
- }
-`;
-
-export const StepsCanva = styled.div`
- width: 100%;
- height: 100%;
-
- header {
- display: flex;
- justify-content: space-between;
- margin: 15px 10px;
-
- .counter {
- color: ${PRIMARY};
- }
-
- .codification-title {
- color: ${(props) => (props.isDark ? "white" : "black")};
- }
- }
-`;
-
-export const ScroolingList = styled.div`
- ${(props) =>
- props.scrool &&
- css`
- overflow-y: auto;
- max-height: calc(100% - 100px);
- `}
-`;
diff --git a/frontend/src/components/Header/index.tsx b/frontend/src/components/Header/index.tsx
index d9bcfa3..6081784 100644
--- a/frontend/src/components/Header/index.tsx
+++ b/frontend/src/components/Header/index.tsx
@@ -1,104 +1,55 @@
import React from "react";
import { useModal } from "../../hooks";
import { Icon, Modal } from "../index";
-import { Container, ModalContent } from "./style";
+import { Container } from "./style";
import Logo from "../../assets/logo.png";
import LogoDark from "../../assets/logoDark.png";
-import Programmer from "../../assets/programmer.mp4";
import Toggle from "react-toggle";
-import { useTheme } from "../../context";
+import {
+ useCodewords,
+ useCodificationMethod,
+ useCodingDecoding,
+ useFinishedCodification,
+ useIndex,
+ useOnProcessing,
+ useTheme,
+} from "../../context";
+import { EncodingDecoding } from "../../enums/EncodingDecoding";
+import { CodificationMethod } from "../../enums/CodificationMethod";
+import { ModalUsers } from "../ModalUsers";
export const Header = () => {
const { isShown, toggle } = useModal();
const [theme, setTheme] = useTheme();
+ const [, setOnProcessing] = useOnProcessing();
+ const [, setOnFinishedCodification] = useFinishedCodification();
+ const [, setCodificationMethod] = useCodificationMethod();
+ const [, setCodewords] = useCodewords();
+ const [, setCodingDecoding] = useCodingDecoding();
+ const [, setIndex] = useIndex();
+
function openModal() {
toggle();
}
function renderModal() {
- return (
-
-
-
-
- );
+ function clickOnLogo() {
+ setOnProcessing(false);
+ setOnFinishedCodification(false);
+ setCodingDecoding(EncodingDecoding.NO_ONE);
+ setCodificationMethod(CodificationMethod.NO_ONE);
+ setCodewords([]);
+ setIndex(1);
}
return (
-
- 
-
-
+ ![]()
clickOnLogo()} alt="logo" src={theme ? Logo : LogoDark} />
{
props.isDark ? DARKEST: LIGHT_GRAY};
+ background-color: ${(props) => (props.isDark ? DARKEST : LIGHT_GRAY)};
color: white;
width: 100vw;
padding: 20px;
@@ -12,27 +11,28 @@ export const Container = styled.header`
align-items: center;
max-height: 80px;
- img{
- height:65px;
+ img {
+ cursor: pointer;
+ height: 65px;
}
- .right-content{
- display:flex;
- align-items:center;
+ .right-content {
+ display: flex;
+ align-items: center;
- .toggle-container{
- display:flex;
- align-items:center;
- margin-right:20px;
+ .toggle-container {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
- .react-toggle{
- margin-right:10px;
- transform:scale(0.8);
+ .react-toggle {
+ margin-right: 10px;
+ transform: scale(0.8);
}
- .toggle-name{
- font-weight:bold;
- color:${props=>props.isDark? 'white': 'black'}
+ .toggle-name {
+ font-weight: bold;
+ color: ${(props) => (props.isDark ? "white" : "black")};
}
}
}
@@ -41,56 +41,16 @@ export const Container = styled.header`
background-color: ${PRIMARY};
}
- .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track{
+ .react-toggle--checked:hover:not(.react-toggle--disabled)
+ .react-toggle-track {
background-color: ${PRIMARY} !important;
}
- .react-toggle-track{
- background-color:${GRAY}
+ .react-toggle-track {
+ background-color: ${GRAY};
}
.user-icon-container {
cursor: pointer;
}
-`;
-
-export const ModalContent = styled.div`
- display: flex;
-
- video {
- width: 250px;
- }
-
- nav {
- display: flex;
-
- ul {
- display: flex;
- flex-direction: column;
- margin-left: 20px;
-
- li {
- margin-bottom: 10px;
- font-size: 0.9rem;
- font-weight: bold;
- background-color:#ddd;
- border-radius:5px;
- padding:10px;
- display:flex;
- flex-direction:column;
-
- .devname{
- color:#333;
- }
-
- .social-media{
- margin-top:10px;
-
- a{
- margin-right:10px;
- }
- }
- }
- }
- }
-`;
+`;
\ No newline at end of file
diff --git a/frontend/src/components/Icon/index.tsx b/frontend/src/components/Icon/index.tsx
index 8457fc7..8226f7d 100644
--- a/frontend/src/components/Icon/index.tsx
+++ b/frontend/src/components/Icon/index.tsx
@@ -1,145 +1,223 @@
-import React from 'react';
-import {MdSearch} from 'react-icons/md'
-import {FaUserAlt, FaArrowAltCircleRight} from 'react-icons/fa'
-import {MdArrowBack, MdArrowForward, MdClose} from 'react-icons/md'
-import {BsFillSkipEndFill, BsArrowDownShort} from 'react-icons/bs'
-import {CgShapeTriangle} from 'react-icons/cg'
-import { AiOutlineGoogle, AiFillLinkedin, AiFillGithub, AiFillMinusCircle, AiFillPlusCircle, AiFillAlert} from 'react-icons/ai'
-import {GiBowlSpiral, GiRadioactive} from 'react-icons/gi'
-import {RiStackshareLine, RiBubbleChartFill, RiExchangeFill} from 'react-icons/ri'
-import {GoFileBinary} from 'react-icons/go'
+import React from "react";
+import { MdSearch } from "react-icons/md";
+import { FaUserAlt, FaArrowAltCircleRight } from "react-icons/fa";
+import { MdArrowBack, MdArrowForward, MdClose } from "react-icons/md";
+import { BsFillSkipEndFill, BsArrowDownShort } from "react-icons/bs";
+import { CgShapeTriangle } from "react-icons/cg";
+import {
+ AiOutlineGoogle,
+ AiFillLinkedin,
+ AiFillGithub,
+ AiFillMinusCircle,
+ AiFillPlusCircle,
+ AiFillAlert,
+ AiFillQuestionCircle
+} from "react-icons/ai";
+import { GiBowlSpiral, GiRadioactive } from "react-icons/gi";
+import {
+ RiStackshareLine,
+ RiLoader4Fill,
+ RiBubbleChartFill,
+ RiExchangeFill,
+} from "react-icons/ri";
+import { GoFileBinary } from "react-icons/go";
type IconProps = {
- size: number,
- color: string
+ size: number;
+ color: string;
+};
+
+export class Icon {
+
+ static Explanation = (props: IconProps) => {
+ return (
+
- )
- }
-
- static User = (props : IconProps)=>{
- return (
-
- )
- }
-
- static TransformTo = (props : IconProps)=>{
- return (
-
- )
- }
-
- static Next = (props : IconProps)=>{
- return (
-
- )
- }
-
- static Back = (props : IconProps)=>{
- return (
-
- )
- }
-
- static Finish = (props : IconProps)=>{
- return (
-
- )
- }
-
- static Close = (props:IconProps)=>{
- return (
-
- )
- }
-
- static Goulomb = (props:IconProps)=>{
- return (
-
- )
- }
-
- static EliasGamma = (props:IconProps)=>{
- return (
-
- )
- }
-
- static Fibonatti = (props:IconProps)=>{
- return (
-
- )
- }
-
- static Unario = (props:IconProps)=>{
- return (
-
- )
- }
-
- static Hamming = (props:IconProps)=>{
- return (
-
- )
- }
-
- static Delta = (props:IconProps)=>{
- return (
-
- )
- }
-
- static Huffman = (props:IconProps)=>{
- return (
-
- )
- }
-
- static Down = (props:IconProps)=>{
- return (
-
- )
- }
-
- static Linkedin = (props:IconProps)=>{
- return (
-
- )
- }
-
- static Github = (props:IconProps)=>{
- return (
-
- )
- }
-
- static Plus = (props:IconProps)=>{
- return (
-
- )
- }
-
- static Minus = (props:IconProps)=>{
- return (
-
- )
- }
-
- static Changed = (props:IconProps)=>{
- return (
-
- )
- }
-
-
- static Alert = (props:IconProps)=>{
- return (
-
- )
- }
-
-}
\ No newline at end of file
diff --git a/frontend/src/components/Modal/styles.js b/frontend/src/components/Modal/styles.js
index 2916c96..69ae106 100644
--- a/frontend/src/components/Modal/styles.js
+++ b/frontend/src/components/Modal/styles.js
@@ -48,5 +48,5 @@ export const CloseButton = styled.button`
`;
export const Content = styled.div`
padding: 10px;
- max-height: 30rem;
+ height: 30rem;
`;
\ No newline at end of file
diff --git a/frontend/src/components/ModalUsers/index.tsx b/frontend/src/components/ModalUsers/index.tsx
new file mode 100644
index 0000000..0d5d1d9
--- /dev/null
+++ b/frontend/src/components/ModalUsers/index.tsx
@@ -0,0 +1,84 @@
+import React from "react";
+import { Container } from "./style";
+import Programmer from "../../assets/programmer.mp4";
+import { Icon } from "../Icon";
+import { Typografy } from "../Typografy";
+
+export const ModalUsers = () => {
+ return (
+
+
+ );
+};
diff --git a/frontend/src/components/ModalUsers/style.js b/frontend/src/components/ModalUsers/style.js
new file mode 100644
index 0000000..ae3908e
--- /dev/null
+++ b/frontend/src/components/ModalUsers/style.js
@@ -0,0 +1,54 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+
+ p{
+ font-size: 0.8rem;
+ line-height: 27px;
+ text-align: justify;
+ text-indent: 10px;
+ margin-bottom: 10px;
+ }
+
+ .teamwork-container{
+ display:flex;
+ flex-direction:row;
+ justify-content: space-around;
+ margin-top:15px;
+ video {
+ width: 250px;
+ }
+
+ ul {
+ display: flex;
+ flex-direction: column;
+ margin-left: 0;
+ margin-right:10px;
+
+ li {
+ margin-bottom: 10px;
+ font-size: 0.9rem;
+ font-weight: bold;
+ background-color: #ddd;
+ border-radius: 5px;
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+
+ .devname {
+ color: #333;
+ }
+
+ .social-media {
+ margin-top: 10px;
+
+ a {
+ margin-right: 10px;
+ }
+ }
+ }
+ }
+ }
+`;
diff --git a/frontend/src/components/SidePanel/Menu/index.tsx b/frontend/src/components/SidePanel/Menu/index.tsx
index ae96866..6d7450c 100644
--- a/frontend/src/components/SidePanel/Menu/index.tsx
+++ b/frontend/src/components/SidePanel/Menu/index.tsx
@@ -1,5 +1,5 @@
import React, { useRef, useState } from "react";
-import { Button, Icon, Typografy } from "../../index";
+import { Button, Icon, Typografy, Modal } from "../../index";
import {
ButtonsRow,
Card,
@@ -8,7 +8,8 @@ import {
FormRowHeader,
InputRow,
Container,
- DevCodification
+ DevCodification,
+ ModalContainer
} from "./style";
import codifications from "../../../constants/codifications";
import { EncodingDecoding } from "../../../enums/EncodingDecoding";
@@ -18,6 +19,8 @@ import { encode, decode } from '../../../hooks/useCodification'
import { CodificationMethod } from "../../../enums/CodificationMethod";
import { Codification } from '../../../models/codification'
import {useTheme} from '../../../context'
+import { PRIMARY } from "../../../constants/colors";
+import { useModal } from "../../../hooks";
interface FileType {
name?: string,
@@ -29,23 +32,37 @@ export const Menu = () => {
const [codificationMethod, setCodificationMethod] = useCodificationMethod();
const [file, setFile] = useState({});
const [goulombDivisor, setGoulombDivisor] = useGoulombDivisor();
+ const [explanation, setExplanation] = useState(null);
const inputRef = useRef(null);
const [theme,] = useTheme();
+ const { isShown, toggle } = useModal();
const [, setOnProcessing] = useOnProcessing();
const [, setOnFinishedCodification] = useFinishedCodification();
+ function openModal() {
+ toggle();
+ }
+
+ function renderModal() {
+ return (
+
+ {explanation &&
+ 
+ }
+
+ );
+ }
+
function handleCodificationMode(codificationMode: number) {
if (codificationMode === EncodingDecoding.DECODING) {
setCodificationMethod(-1)
}
-
setCodingDecoding(codificationMode);
}
function handleCodificationMethod(codificMethod: Codification) {
-
setCodificationMethod(codificMethod);
}
@@ -57,27 +74,24 @@ export const Menu = () => {
function handleInput(e: any) {
const files = e.target.files;
-
if (files && files.length) {
setFile(files[0]);
}
}
async function inicialize() {
-
if (codingDecoding === EncodingDecoding.NO_ONE) {
- toast.warn("Selecione o modo");
+ toast.warn("Select the mode");
} else if (codingDecoding!==EncodingDecoding.DECODING && !codificationMethod.codificationType) {
- toast.warn("Selecione um algoritmo");
+ toast.warn("Select an algorithm");
} else if (!file.path) {
- toast.warn("Selecione um arquivo");
+ toast.warn("Select a file");
} else {
setOnProcessing(true);
setOnFinishedCodification(false);
if (codingDecoding === EncodingDecoding.ENCODING) {
await encode(codificationMethod.urlName, file.path, goulombDivisor);
} else {
- console.log("Decodando"+file.path)
await decode(file.path);
}
}
@@ -100,7 +114,7 @@ export const Menu = () => {
1
-
{
onClick={() => {
handleCodificationMode(EncodingDecoding.ENCODING);
}}>
- Codificar
+ Encode
{
onClick={() => {
handleCodificationMode(EncodingDecoding.DECODING);
}}>
- Decodificar
+ Decode
)
}
+ function clickOnExplanation(codificationImage){
+ setExplanation(codificationImage);
+ openModal()
+ }
+
function renderCodificationMethod() {
if (codingDecoding === EncodingDecoding.ENCODING) {
return (
2
-
{codifications.map((codification, index) => {
@@ -143,6 +162,11 @@ export const Menu = () => {
>
3
-
{
@@ -175,7 +199,7 @@ export const Menu = () => {
{getIndexOfFileRow()}
-
{
type="file"
onChange={handleInput}
/>
-
+
@@ -195,11 +219,11 @@ export const Menu = () => {
{getIndexOfFileRow() + 1}
-
- Iniciar
+ Start
@@ -210,7 +234,7 @@ export const Menu = () => {
return (
-
)
}
@@ -226,7 +250,13 @@ export const Menu = () => {
:
renderInitButton()
}
-
+
+ {finalString}
- }
- }
return (
-
- )
+ );
};
diff --git a/frontend/src/components/SidePanel/Text/style.js b/frontend/src/components/SidePanel/Text/style.js
index 9c83732..9a1a624 100644
--- a/frontend/src/components/SidePanel/Text/style.js
+++ b/frontend/src/components/SidePanel/Text/style.js
@@ -1,24 +1,29 @@
-import styled from 'styled-components'
-import { BLUE_GRAY, PRIMARY, WHITE } from '../../../constants/colors'
+import styled from "styled-components";
+import { BLUE_GRAY, PRIMARY, WHITE } from "../../../constants/colors";
export const Container = styled.div`
- background-color: ${props=>props.isDark?BLUE_GRAY:WHITE};
- border-radius: 10px;
- padding: 16px;
- display: flex;
- flex-direction: column;
- width: 30%;
- overflow-y: auto;
+ background-color: ${(props) => (props.isDark ? BLUE_GRAY : WHITE)};
+ border-radius: 10px;
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ width: 30%;
+ overflow-y: auto;
- .text-title{
- color:${PRIMARY};
- text-align:center;
- }
+ .text-title {
+ color: ${PRIMARY};
+ text-align: center;
+ }
+
+ p {
+ margin-top: 10px;
+ text-align: center;
+ background-color: transparent;
+ color: ${(props) => (props.isDark ? "white" : "black")};
- p{
- margin-top: 10px;
- text-align: center;
- background-color:transparent;
- color: ${props=>props.isDark?'white':'dark'};
+ .actual-symbol {
+ color: ${PRIMARY};
+ font-weight: bold;
}
-`
\ No newline at end of file
+ }
+`;
diff --git a/frontend/src/components/SyncLoader/index.tsx b/frontend/src/components/SyncLoader/index.tsx
new file mode 100644
index 0000000..f39a1e7
--- /dev/null
+++ b/frontend/src/components/SyncLoader/index.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import {Container} from './style'
+import {useTheme} from '../../context'
+import { Typografy } from '../Typografy';
+import { Icon } from '../Icon';
+import { SyncState } from '../../enums/SyncState';
+import { Button } from '../Button';
+
+export const SyncLoader = ({isSync, setIsSync}) =>{
+
+ const [theme] = useTheme();
+
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/frontend/src/components/SyncLoader/style.js b/frontend/src/components/SyncLoader/style.js
new file mode 100644
index 0000000..a33eb9e
--- /dev/null
+++ b/frontend/src/components/SyncLoader/style.js
@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+import { BLUE_GRAY, DARKEST, LIGHTEST_GRAY, PRIMARY } from '../../constants/colors';
+
+export const Container = styled.main`
+ width:100%;
+ height:100%;
+ display:flex;
+ align-items:center;
+ justify-content:center;
+ background-color:${props=>props.isDark? DARKEST: LIGHTEST_GRAY};
+
+
+ .center-view{
+ position: relative;
+ top: -60px;
+ padding:15px 30px;
+ border-radius:12px;
+ background-color:${props=>props.isDark? BLUE_GRAY: 'white'};
+ display:flex;
+ flex-direction:column;
+ justify-content:center;
+
+ .text{
+ margin-bottom:20px;
+ text-align:center;
+ color:${props=>props.isDark? PRIMARY: 'black'};
+ }
+
+ p{
+ color:${props=>props.isDark? 'white': 'black'};
+ margin-bottom:10px;
+ font-size:0.8rem;
+ }
+
+ .icon-container{
+ display:flex;
+ justify-content:center;
+ animation:rotate360 infinite 2s forwards;
+ }
+ }
+`
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index 354c0bc..18fe9da 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -4,4 +4,6 @@ export {Button} from './Button'
export {Typografy} from './Typografy'
export {Header} from './Header'
export {SidePanel} from './SidePanel'
-export {ExecutionWindow} from './ExecutionWindow'
\ No newline at end of file
+export {ExecutionWindow} from './ExecutionWindow'
+export {SyncLoader} from './SyncLoader'
+export {ModalUsers} from './ModalUsers'
\ No newline at end of file
diff --git a/frontend/src/constants/codifications.tsx b/frontend/src/constants/codifications.tsx
index bb51e01..7644436 100644
--- a/frontend/src/constants/codifications.tsx
+++ b/frontend/src/constants/codifications.tsx
@@ -3,42 +3,57 @@ import { CodificationMethod } from "../enums/CodificationMethod";
import React from 'react';
import { Codification } from '../models/codification'
+import GoulombExplanation from '../assets/codificationsExplanations/Goulomb.png';
+import DeltaExplanation from '../assets/codificationsExplanations/Delta.png';
+import UnarioExplanation from '../assets/codificationsExplanations/Unario.png';
+import HuffmanExplanation from '../assets/codificationsExplanations/Huffman.png';
+import EliasExplanation from '../assets/codificationsExplanations/EliasGamma.png';
+import FibonacciExplanation from '../assets/codificationsExplanations/Fibonacci.png';
+
+
export default [
new Codification(
"Goulomb",
"goulomb",
CodificationMethod.GOULOMB,
-
-
-
-
+ {isSync === SyncState.SYNC ?
+
+
+
+
+ :
+
+ }
)
};
diff --git a/frontend/src/scripts/electronBuilder.js b/frontend/src/scripts/electronBuilder.js
new file mode 100644
index 0000000..5714585
--- /dev/null
+++ b/frontend/src/scripts/electronBuilder.js
@@ -0,0 +1,20 @@
+const fs = require('fs');
+const finalPath = './public/electron.js'
+
+const args = process.argv.slice(2).reduce((acc, arg) => {
+ let [k, v = true] = arg.split('=')
+ acc[k] = v
+ return acc
+}, {})
+
+let copyPath ='';
+
+if(args.isDev){
+ copyPath = './src/scripts/electronFiles/electronForDev.js'
+}else{
+ copyPath = './src/scripts/electronFiles/electronForBuild.js'
+}
+
+const content = fs.readFileSync(copyPath, {encoding:'utf8', flag:'r'});
+fs.writeFileSync(finalPath,content,{encoding:'utf8',flag:'w'})
+
diff --git a/frontend/src/scripts/electronFiles/electronForBuild.js b/frontend/src/scripts/electronFiles/electronForBuild.js
new file mode 100644
index 0000000..9df1ef1
--- /dev/null
+++ b/frontend/src/scripts/electronFiles/electronForBuild.js
@@ -0,0 +1,58 @@
+const {app, BrowserWindow} = require("electron");
+const isDev = require("electron-is-dev");
+
+const childProcess = require("child_process");
+const path = require("path");
+const {killPortProcess} = require('kill-port-process');
+
+function createWindow() {
+ (async () => {
+ await killPortProcess(10022);
+ })();
+
+ const jarPath = path.resolve(
+ __dirname,
+ "..",
+ "..",
+ "..",
+ "public",
+ "backend_jar",
+ "encodedecodestepbystep-0.0.1-SNAPSHOT.jar"
+ );
+ console.log(jarPath);
+
+ const child = childProcess.spawn("java", ['-jar', jarPath]);
+
+ const win = new BrowserWindow({
+ width: 800,
+ height: 800,
+ webPreferences: {
+ nodeIntegration: true,
+ },
+ icon: __dirname + "/favicon.png",
+ });
+
+ win.on("close", (e) => {
+ child.kill();
+ });
+
+ win.loadURL(
+ isDev
+ ? "http://localhost:3000"
+ : `file://${path.join(__dirname, "../build/index.html")}`
+ );
+}
+
+app.whenReady().then(createWindow);
+
+app.on("window-all-closed", () => {
+ if (process.platform !== "darwin") {
+ app.quit();
+ }
+});
+
+app.on("activate", () => {
+ if (BrowserWindow.getAllWindows().length === 0) {
+ createWindow();
+ }
+});
diff --git a/frontend/src/scripts/electronFiles/electronForDev.js b/frontend/src/scripts/electronFiles/electronForDev.js
new file mode 100644
index 0000000..8114766
--- /dev/null
+++ b/frontend/src/scripts/electronFiles/electronForDev.js
@@ -0,0 +1,34 @@
+const {app, BrowserWindow} = require('electron')
+const isDev = require('electron-is-dev');
+
+const path = require("path");
+
+function createWindow() {
+
+ const win = new BrowserWindow({
+ width: 800,
+ height: 800,
+ webPreferences: {
+ nodeIntegration: true
+ },
+ icon: __dirname + '/favicon.png'
+ })
+
+ win.loadURL(
+ isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, "../build/index.html")}`
+ )
+}
+
+app.whenReady().then(createWindow)
+
+app.on('window-all-closed', () => {
+ if (process.platform !== 'darwin') {
+ app.quit()
+ }
+})
+
+app.on('activate', () => {
+ if (BrowserWindow.getAllWindows().length === 0) {
+ createWindow()
+ }
+})
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 39f121e..575475c 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -18,8 +18,9 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
- "jsx": "react",
- "strict": false
+ "jsx": "react-jsx",
+ "strict": false,
+ "noFallthroughCasesInSwitch": true
},
"include": [
"src"
-
Unable to connect to the server
+
+ {actualPercentage.toFixed(2)} %
+
+ + Putting coding in the background +
+ + )} +Não foi possível se conectar ao servidor
-
- {actualPercentage.toFixed(2)} %
-
- Colocando codificação em segundo plano
- - )} -
-
-
+ + Encode Decode Step By Step is a tool developed at Unisinos (2020) for bitwise file encoding. + It features six algorithms: Delta, Unary, Elias-Gamma, Fibonacci, Goulomb, and Static Huffman, + coupled with an intuitive graphical interface. +
+ +{codification.icon}
{codification.name}
+ { codification.explanationImage &&
+ {clickOnExplanation(codification.explanationImage)}}>
+ Essa codificaçao está atualmente em desenvolvimento
+This coding is currently under development
+ {codewords.map((codeword, i) => { + const simbol = codeword.value; + if (i === index - 1) { + return {simbol}; + } else { + return {simbol}; + } + })} +
+ {isSync == SyncState.UNSYNC ?
+ <>
+
+
+
+ :
+ <>
+ {
+ setIsSync(SyncState.UNSYNC)
+ }}>Try again
+
+ }
+
+ Wait while we initialize the application services
+ +