Skip to content

Commit

Permalink
Merge pull request #192 from SamKomesarook/staging
Browse files Browse the repository at this point in the history
Staging
  • Loading branch information
SamKomesarook authored Nov 1, 2020
2 parents 4d8caf3 + 8427845 commit 846128b
Show file tree
Hide file tree
Showing 43 changed files with 822 additions and 940 deletions.
25 changes: 16 additions & 9 deletions src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -61,14 +61,16 @@ Ref: https://css-tricks.com/snippets/css/glowing-blue-input-highlights/
-o-transition: all 0.30s ease-in-out;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 3px solid var(--border-line-editable);
background-color: var(--bg-editable);
border: 3px solid var(--border-line);
border-radius: 7px;
/* background-color: var(--bg-secondary); */
background-color: var(--bg-editable-pane);
}

.highlightable-input:focus-within {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
.highlightable-input:focus-within, .highlightable-input:focus {
border: 3px solid #88c0d0;
border-radius: 7px;
box-shadow: 0 0 4px #aac3ca;
}

input, textarea {
Expand Down Expand Up @@ -155,23 +157,28 @@ select.control > option {

/** BUTTON **/

button {
button, div[role=button] {
border: none;
text-align: center;
font-family: inherit;
font-size: inherit;
letter-spacing: 0.7px;
outline: none;
cursor: pointer;
}

button:focus {
border: 1px dotted white;
}

button:hover:enabled, div[role=button]:hover {
button:hover:enabled {
cursor: pointer;
filter: brightness(90%);
}

button:disabled {
cursor: default;
filter: brightness(125%);
filter: brightness(40%);
}

.std-btn {
Expand Down
11 changes: 0 additions & 11 deletions src/#Screen.css
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@
}
}


.login-input {
margin-top: 15%;
margin-bottom: 10%;
Expand All @@ -61,17 +60,7 @@
/* also need animation and -moz-animation */
-webkit-animation: shake .5s linear;
-moz-animation: shake .5s linear;
margin-top: 15%;
margin-bottom: 10%;
color: grey;
width: 100%;
font-size: 24px;
background: transparent;
border: 0;
outline: 0;
text-align: center;
border-bottom: solid 1px red;
font-family: inherit
}

.login-btn {
Expand Down
63 changes: 25 additions & 38 deletions src/#Screen.js
Original file line number Diff line number Diff line change
@@ -1,78 +1,65 @@
import React, { useState } from 'react';
import React, { useState, useRef } from 'react';
import bcrypt from 'bcryptjs';
import Cookies from 'js-cookie';
import App from './App';
import './#Screen.css';

const data = require('./hash/hash.json');

// read from json
// Read from json
const hashValue = data.find((hash) => hash.id === 1);

function LoginScreen() {
// password
const [password, setPassword] = useState('');
const setInput = (e) => setPassword(e.target.value);
const LoginScreen = () => {
const passwordRef = useRef();
const [isLoggedIn, setLoggedIn] = useState(false);
const [isInvalidInput, setInvalidInput] = useState(false);

// login button
// set the state to false
const [log, setLog] = React.useState(false);
const [popUp, setPopUp] = React.useState(false);
// read from cookie
const readCookie = () => {
const user = Cookies.get('user');
if (user) {
setLog(true);
}
};

React.useEffect(() => {
readCookie();
}, []);

const login = () => {
// const hash = fs.readFileSync('hash.txt');
const check = bcrypt.compareSync(password, hashValue.value);
const handleLogin = () => {
setInvalidInput(false);
const check = bcrypt.compareSync(passwordRef.current.value, hashValue.value);
if (check) {
setLog(true);
// set cookie with 1 day expiry
// Set cookie with 1 day expiry
Cookies.set('user', hashValue.value, { expires: 1 });
setLoggedIn(true);
} else {
setPopUp(true);
setInvalidInput(true);
}
};

if (log) {
React.useEffect(() => {
// Read from cookie
if (Cookies.get('user')) {
setLoggedIn(true);
}
}, []);

if (isLoggedIn) {
return (
<App />
);
}

const isMain = 'login-screen';

return (
<div className="login-container">
<div className={isMain}>
<div className="login-screen">
Welcome to Rome.
<input
name="password-field"
type="password"
className={!popUp ? 'login-input' : 'login-input-invalid'}
value={password}
onChange={setInput}
className={`login-input ${isInvalidInput ? 'login-input-invalid' : ''}`}
placeholder="password"
ref={passwordRef}
/>
<button
type="submit"
onClick={login}
onClick={handleLogin}
className="login-btn"
>
Go
</button>
</div>

</div>
);
}
};

export default LoginScreen;
72 changes: 55 additions & 17 deletions src/components/computer/Console.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import DebugControl from './DebugControl';

const Console = () => {
const [display, setDisplay] = useContext(DisplayContext);
const inputRef = useRef();
const inputRef = useRef(null);

const executeStart = (inputValue) => {
// Create a deep copy of default display with some updated values
Expand Down Expand Up @@ -45,25 +45,43 @@ const Console = () => {
const executeWriteToMemory = (inputValue) => {
// Create a deep copy of display
const staticDisplay = DisplayContext.createCustomClone(display);
const errorReporter = new ErrorReporter(staticDisplay);

// Save recent command to console history
staticDisplay.consoleHistory.push(inputValue);
staticDisplay.reading = false;

if (staticDisplay.memory[staticDisplay.selected].content.length === 0) {
// Get the keys of special memory cells
const pos = staticDisplay.memory[staticDisplay.selected].key;
const numOfSpecialKeys = staticDisplay.specialKeys.length;
const numUsableCells = staticDisplay.memorySize - numOfSpecialKeys;
const stringSize = staticDisplay.dataTypeSize.string;
const availableLength = numUsableCells * stringSize - pos * stringSize;

// Check if the memory has enough space to accomodate the input
if (inputValue.length > availableLength) {
errorReporter.generalError('Out of memory');
} else if (staticDisplay.memory[staticDisplay.selected].content.length !== 0) {
errorReporter.generalError('Memory cell not empty');
} else {
// Get the keys of special memory cells
const usbMemoryKey = staticDisplay.specialKeys.find((element) => element.specialContent === 'usb').key;
if (staticDisplay.selected === usbMemoryKey) {
USBToggle();
} else {
staticDisplay.memory[staticDisplay.selected].content = inputRef.current.value;
staticDisplay.memory[staticDisplay.selected].type = 'string';
const base = Math.floor(inputValue.length / stringSize);

// Ensure one memory cell only contains the defined number of letter
for (let i = 0; i < base + 1; i++) {
staticDisplay.memory[pos + i * 1].content = inputValue.substr(i * stringSize, stringSize);
staticDisplay.memory[pos + i * 1].type = 'string';
if (i > 0) {
staticDisplay.selected += 1;
}
}
}
staticDisplay.reading = false;

// Continue execute the remaining commands
processInstrs(staticDisplay);
} else {
const errorReporter = new ErrorReporter(staticDisplay);
errorReporter.generalError('Memory cell not empty');
}

// Render new display information
Expand All @@ -82,19 +100,39 @@ const Console = () => {
executeReset(inputValue);
} else if (inputValue === 'consoleClear') {
executeClear(inputValue);
} else if (inputValue === '') {
setDisplay((prevDisplay) => ({
...prevDisplay,
consoleHistory: [
...prevDisplay.consoleHistory,
inputValue,
],
}));
} else {
setDisplay((prevDisplay) => ({
...prevDisplay,
consoleHistory: [...prevDisplay.consoleHistory, inputValue],
consoleHistory: [
...prevDisplay.consoleHistory,
inputValue,
`ERROR: "${inputValue}" is not recognized as a command.`,
],
}));
}
inputRef.current.value = '';
}
};

const consoleHistoryList = display.consoleHistory.map((record) => (
<div>{`> ${record}`}</div>
));
const consoleHistoryList = display.consoleHistory.map((record) => {
if (record.substring(0, 5) === 'ERROR') {
return (
<div>
{'> '}
<span style={{ color: 'red' }}>{record}</span>
</div>
);
}
return <div>{`> ${record}`}</div>;
});

return (
<div id="console-wrapper">
Expand All @@ -105,15 +143,15 @@ const Console = () => {
color: `${display.consoleStyle.txtColor}`,
fontSize: `${display.consoleStyle.txtSize}`,
textAlign: `${display.consoleStyle.txtAlign}`,
fontWeight: `${display.consoleStyle.bold}`,
fontStyle: `${display.consoleStyle.italic}`,
textDecorationLine: `${display.consoleStyle.underline}`,
fontWeight: `${display.consoleStyle.fontWeight}`,
fontStyle: `${display.consoleStyle.fontStyle}`,
textDecorationLine: `${display.consoleStyle.textDecorationLine}`,
}}
className="code highlightable-input"
>
{consoleHistoryList}
<div className="hflex">
<span>>&nbsp;</span>
<span>{'> '}</span>
<textarea
id="console-input"
ref={inputRef}
Expand Down
19 changes: 8 additions & 11 deletions src/components/computer/DebugControl.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,25 +36,22 @@ const DebugControl = () => {
};

return (
<div id="debug-control" className={isElementHidden}>
<div
role="button"
<div id="debug-control" className={isElementHidden} disabled>
<button
type="button"
className={`hovered ${display.running ? 'hidden' : ''}`}
onClick={handleClickDebug}
onKeyPress={handleClickDebug}
tabIndex="0"
>
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M14,12H10V10H14M14,16H10V14H14M20,8H17.19C16.74,7.22 16.12,6.55 15.37,6.04L17,4.41L15.59,3L13.42,5.17C12.96,5.06 12.5,5 12,5C11.5,5 11.04,5.06 10.59,5.17L8.41,3L7,4.41L8.62,6.04C7.88,6.55 7.26,7.22 6.81,8H4V10H6.09C6.04,10.33 6,10.66 6,11V12H4V14H6V15C6,15.34 6.04,15.67 6.09,16H4V18H6.81C7.85,19.79 9.78,21 12,21C14.22,21 16.15,19.79 17.19,18H20V16H17.91C17.96,15.67 18,15.34 18,15V14H20V12H18V11C18,10.66 17.96,10.33 17.91,10H20V8Z" /></svg>
</div>
<div
role="button"
</button>
<button
type="button"
className={`hovered ${isDebugging ? '' : 'hidden'}`}
onClick={handleClickStepInto}
onKeyPress={handleClickStepInto}
tabIndex="0"
disabled={display.reading}
>
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M12,22A2,2 0 0,1 10,20A2,2 0 0,1 12,18A2,2 0 0,1 14,20A2,2 0 0,1 12,22M13,2V13L17.5,8.5L18.92,9.92L12,16.84L5.08,9.92L6.5,8.5L11,13V2H13Z" /></svg>
</div>
</button>
</div>
);
};
Expand Down
4 changes: 2 additions & 2 deletions src/components/computer/Memory.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ const Memory = () => {
const memoryCellList = (memorySize) => {
const tempMemoryCellList = [];
for (let i = 0; i < memorySize; i++) {
tempMemoryCellList.push(<MemoryCell id={i} />);
tempMemoryCellList.push(<MemoryCell id={i} key={i} />);
}
return tempMemoryCellList;
};

return (
<div className={`memory-section noselect ${isElementHiddenClass}`}>
<div className={`memory-section noselect code ${isElementHiddenClass}`}>
{memoryCellList(display.memorySize)}
</div>
);
Expand Down
1 change: 1 addition & 0 deletions src/components/computer/MemoryCell.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ const MemoryCell = ({ id }) => {
default:
}

// eslint-disable-next-line react/no-array-index-key
const binaryCellList = binary.split('').map((bit, index) => (<div key={index}>{bit}</div>));
setBinaryContent(binaryCellList);
};
Expand Down
Loading

0 comments on commit 846128b

Please # to comment.