Skip to content

General Changes #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 28 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
668 changes: 290 additions & 378 deletions package-lock.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "cortex",
"version": "0.1.0",
"private": true,
"private": false,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-solid-svg-icons": "^5.15.1",
Expand Down
2 changes: 1 addition & 1 deletion public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
<title>Cortex Command Community Project</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<noscript>You need to enable JavaScript to view this page.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
Expand Down
6 changes: 3 additions & 3 deletions src/components/App/App.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
body {
color: #111;
background-color: #eee
color: #EEE;
Copy link
Contributor

Choose a reason for hiding this comment

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

I like the light theme :(

Copy link
Contributor

Choose a reason for hiding this comment

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

Actually, can you pull out the theme edits into a separate branch? I think it needs to be addressed separately. I think it's a good opportunity to adjust the stylesheets and how style is managed across the site.
See #9

background-color: #202020
}

p {
Expand All @@ -9,7 +9,7 @@ p {
}

h1, h2, h3 {
color: #284673;
color: #DDD;
font-weight: normal;
font-family: "Montserrat", sans-serif;
}
Expand Down
5 changes: 5 additions & 0 deletions src/components/App/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import './App.css';
import Home from '../Home/Home';
import Downloads from '../Static/Downloads/Downloads';
import Get_Involved from '../Static/Get_Involved/Get_Involved';
import NotFound from '../Static/NotFound/NotFound';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

Expand All @@ -15,6 +16,10 @@ function App() {
<Route path="/downloads">
<Downloads />
</Route>
<Route path="/get-involved">
<Get_Involved />
</Route>
<Get_Involved />
<Route>
<NotFound />
</Route>
Expand Down
9 changes: 5 additions & 4 deletions src/components/Button/Button.css
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
.button-element {
display: inline-block;
color: #333;
border: 1px solid #333;
padding: 6px 12px;
color: #DDD;
border: 1px solid #DDD;
padding: 6px 16px;
border-radius: 4px;
text-decoration: none;
margin-Right: 4px;
}

.button-content {
padding-right: 12px;
padding-right: 6px;
font-family: "Montserrat", sans-serif;
}

Expand Down
10 changes: 6 additions & 4 deletions src/components/Card/Card.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,17 @@ function Card(props) {
<div style={{ margin: '48px 0'}}>
<div style={{
marginTop: '12px',
border: '1px solid #333',
border: '1px solid #ddd',
padding: '12px 18px',
borderRadius: '6px',
}}>
<h2 style={{
marginTop: '-28px',
padding: '0 4px',
width: 'fit-content',
background: '#eee',
paddingLeft: '8px',
paddingRight: '8px',
marginBottom: '-1px',
float: 'left',
background: '#202020',
}}>{props.title}</h2>
{props.children}
</div>
Expand Down
Binary file added src/components/Emoji/dunno.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/components/Emoji/dunno2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/components/Emoji/good.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/Header/Header.css
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
display: flex;
align-items: center;
justify-content: center;
font-size: 10pt;
font-size: 12pt;
color: #f9de8f;
text-decoration: none;
text-transform: uppercase;
Expand Down
2 changes: 1 addition & 1 deletion src/components/Header/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ function Header() {
}}>
<li><NavLink to="/"><span>Home</span></NavLink></li>
<li><NavLink to="/downloads"><span>Downloads</span></NavLink></li>
<li><NavLink to="/get-involved"><span>Get Involved</span></NavLink></li>
<li><NavLink to="/get_involved"><span>Get Involved</span></NavLink></li>
</ul>
</div>
);
Expand Down
7 changes: 5 additions & 2 deletions src/components/Home/CortexCardContents/CortexCardContents.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,18 @@ function CortexCardContents(props) {
}}>
<h1>{props.title}</h1>
<p>{props.body}</p>

</div>
</div>
{/* This is an image placeholder **Imagine an Image** */}
<div style={{
<img style={{
Copy link
Contributor

Choose a reason for hiding this comment

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

I believe the original indentation was correct here.

border: '2px solid black',
backgroundColor: 'black',
minHeight: '196px',
width: '196px',
}} />
}}
src={props.image} alt={props.alt}
/>
</div>
);
}
Expand Down
13 changes: 12 additions & 1 deletion src/components/Home/Home.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@ import CortexCardContainer from './CortexCardContainer/CortexCardContainer';
import CortexCardContents from './CortexCardContents/CortexCardContents';
import MagicArrow from './MagicArrow/MagicArrow';

/*image imports*/
Copy link
Contributor

Choose a reason for hiding this comment

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

I think prettier or something enforces import ordering, so I typically just put all the imports together so the autoformatter can do its thing.

import NewImg from './img/stuff.GIF'
import SniperImg from './img/sniper.GIF'
import IntenseImg from './img/crabs.GIF'

function Home() {
return (
<div style={{ backgroundColor: '#111'}}>
Expand All @@ -27,19 +32,25 @@ function Home() {
<CortexCardContents
title='Upgraded Engine'
body='The source code has been enhanced to improve performance.'
image={NewImg}
alt=''
/>
</CortexCard>
<CortexCard right>
<CortexCardContents
right
title='New Content'
body='New weapons, characters, and scenes.'
image={IntenseImg}
alt=''
/>
</CortexCard>
<CortexCard>
<CortexCardContents
title='Improved Strategic Gameplay'
body='The team has focused on accentuating the most satisfying gameplay elements.'
image={SniperImg}
alt=''
/>
</CortexCard>
</CortexCardContainer>
Expand All @@ -50,4 +61,4 @@ function Home() {
)
}

export default Home;
export default Home;
Binary file added src/components/Home/img/BuyMenu.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/components/Home/img/Joystick.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/components/Home/img/Team.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/components/Home/img/crabs.GIF
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/components/Home/img/intense.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/components/Home/img/mystery.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/components/Home/img/newthings.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/components/Home/img/sniper.GIF
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/components/Home/img/sniper.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/components/Home/img/strats.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/components/Home/img/stuff.GIF
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 27 additions & 8 deletions src/components/Static/Downloads/Downloads.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,48 @@ import Template from '../../Template/Template';
import Card from '../../Card/Card';
import Button from '../../Button/Button';

import EmojiGood from '../../Emoji/good.png';

function Downloads() {
return (
<Template>
<h1 style={{ marginTop: '48px' }}>Downloads</h1>
<h2>Project Releases</h2>
<Card title={'Cortex Command Community Project'}>
<p style={{
marginBottom: '18px',
}}>This is where you can find the community's plans for Cortex Command's future. There'll be rebalancing, new weapons and units, and much more.</p>
<Button link to='https://github.com/cortex-command-community/Cortex-Command-Community-Project-Data/releases'>Releases</Button>
marginTop: '8px', marginBottom: '18px',
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't know if there's any current consistency across the site on a 6px vs 8px based unit size, but it's probably worth being consistent at least internally. Eventually we'd want to move to being able to do something like,

marginTop: unit(1),
marginBottom: unit(3)

or whatever.

Copy link
Contributor

Choose a reason for hiding this comment

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

So the takeaway here is to choose which looks better:
marginTop: '8px', marginBottom: '16px',
or
marginTop: '6px', marginBottom: '18px',

Copy link
Contributor

Choose a reason for hiding this comment

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

Definitely agree that setting up standardized sizes is the way to go. Probably too late to be convenient now, but using rem sizes as opposed to px sizes is quite nice.

}}>This is where you can find the community's plans for Cortex Command's future. There'll be rebalancing, new weapons, units, and much <i>much</i> more.</p>

<Button link to='https://github.com/cortex-command-community/Cortex-Command-Community-Project-Data/'>View on Github</Button>

<Button link to='https://github.com/cortex-command-community/Cortex-Command-Community-Project-Data/releases/download/v0.1.0-pre3.0/Cortex.Command.zip'>Download Pre 3 (.exe)(latest)</Button>

</Card>
<h2>Mods</h2>
Copy link
Contributor

Choose a reason for hiding this comment

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

With the addition of some more content on this page I think it's looking a little cluttered. No action required now, but I will probably be restructuring some of the headings on this page/grouping up some of the card content.

<Card title={'Get Mods'}>
Copy link
Contributor

Choose a reason for hiding this comment

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

Definitely an important addition.
Might be useful to know what the plan is to allow users to find the correct mod versions?

<p style={{
marginTop: '8px', marginBottom: '18px',
}}>What is Cortex Command without <strong>MODS</strong>? Luckily, we've got you covered. There are 2 great ways to get mods and if neither of them suit your fancy, you can use the Legacy Mod Converter to convert mods from the Data Realms Fan Forums or the Steam Workshop!</p>

<Button link to='https://discord.gg/yuZvazK'>Community Discord <img width='14px' height='14px' marginBottom='-12px' src={EmojiGood}/></Button>

<Button link to='https://cccp.mod.io/'>Mod.io</Button>

</Card>
<h2>Modding Tools</h2>
<Card title={'Legacy Mod Converter'}>
<p style={{
marginBottom: '18px',
marginTop: '8px', marginBottom: '18px',
}}>This project automates most of the conversion work required to convert the legacy Cortex Command mods into Cortex Command Community Project compatible mods.</p>
<Button link to='https://github.com/cortex-command-community/Cortex-Command-Legacy-Mod-Converter'>Get source</Button>
<Button link to='https://github.com/cortex-command-community/Cortex-Command-Legacy-Mod-Converter'>View on Github</Button>
<Button link to='https://github.com/cortex-command-community/Cortex-Command-Legacy-Mod-Converter/releases/download/pre3.0.2/_Mod.Converter.zip'>Download Source (.py)(latest)</Button>
</Card>
<Card title={'Bender'}>
<Card title={'CCCP Bender'}>
<p style={{
marginBottom: '18px',
marginTop: '8px', marginBottom: '18px',
}}>The purpose of this tool is to make the life of modders easier by automagically generating bent limb sprites from limb parts.</p>
<Button link to='https://github.com/cortex-command-community/Cortex-Command-Community-Bender/releases'>Releases</Button>
<Button link to='https://github.com/cortex-command-community/Cortex-Command-Community-Bender'>View on Github</Button>
<Button link to='https://github.com/cortex-command-community/Cortex-Command-Community-Bender/releases/download/1.3.0/CCCP.Bender.1.3.0.zip'>Download Bender 1.3.0 (.exe)(latest)</Button>
</Card>
<div style={{ height: '24px' }} />
</Template >
Expand Down
40 changes: 40 additions & 0 deletions src/components/Static/Get_Involved/Get_Involved.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from 'react';
import Template from '../../Template/Template';
import Card from '../../Card/Card';
import Button from '../../Button/Button';

import EmojiGood from '../../Emoji/good.png';

function Get_Involved() {
return (
<Template>
<h1 style={{ marginTop: '48px' }}>Get Involved</h1>
<h2>Want to help the Community Project? Here are some links to help you get started.</h2>

<Card title={'Join the Discord'}>
<p style={{
marginTop: '8px', marginBottom: '18px',
}}>So you want to take part in the project? A good start would be going to the discord where the project is discussed. You can find a link here. After that, all our releases will be available under the releases area and all of our bugs and changes and ideas are tracked in github issues. Feel free to play and suggest changes or point out any problems.</p>

<Button link to='https://discord.gg/yuZvazK'>Discord <img width='14px' height='14px' marginBottom='-12px' src={EmojiGood}/></Button>

</Card>

<Card title={'Contribute to the Github'}>
<p style={{
marginTop: '8px', marginBottom: '18px',
}}>If you've got experience with the game's ini data through modding it, are good at spriting or know Lua, maybe you can contribute some of your time directly to the project. We'll look at any pull requests that come in and are always happy to have more hands on deck. If you're an experienced programmer (particularly with C++), there's also tons of work to be done in our source repository.</p>
<p style={{
marginTop: '8px', marginBottom: '18px',
}}>If you're familiar with github you should be familiar with making issues. It's as simple as going to the issues tab and clicking a button. Once you do that, you'll see an easy to follow template to fill in. After you've done that, try to put in the appropriate category for the issue and it'll be handled from there.</p>
<Button link to='https://github.com/cortex-command-community/Cortex-Command-Community-Project-Source/'>Get Started</Button>

<Button link to='https://github.com/cortex-command-community/Cortex-Command-Community-Project-Source/issues'>View or Submit an Issue</Button>

</Card>

</Template>
);
}

export default Get_Involved;
8 changes: 8 additions & 0 deletions src/components/Static/NotFound/NotFound.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,20 @@
import React from 'react';
import Template from '../../Template/Template';

import EmojiDunno from '../../Emoji/dunno.png';

function NotFound() {
return (
<Template>
<div style={{textAlign: 'center'}}>
Copy link
Contributor

Choose a reason for hiding this comment

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

I think left aligned is more professional looking, at least for text.

<h1 style={{ marginTop: '48px' }}>Page Not Found</h1>
<p>Sorry, but the page you were trying to view does not exist.</p>
<br />
<br />
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm not wholly opposed to using <br /> here (I might have used it some places myself), but generally I think using CSS for spacing should be preferred.

Don't change it if you don't feel like it.

<a href='https://www.youtube.com/watch?v=t0s9dRNjhfg?autoplay=1'><img style={{postion: 'absolute', width: '25%'}} src={EmojiDunno}/></a>
Copy link
Contributor

Choose a reason for hiding this comment

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

Interesting easter egg. Doesn't seem super relevant in this context, but I'm fine with it.

</div>
</Template>

);
}

Expand Down
2 changes: 2 additions & 0 deletions src/components/Template/Template.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,10 @@ function Template(props) {
<Header />
<div style={{
margin: 'auto',
marginBottom: '0px',
Copy link
Contributor

Choose a reason for hiding this comment

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

What are the changes in this file for?

maxWidth: '800px',
width: '100%',
height: '100%',
flex: '1',
}}>
<div style={{ padding: '0 8px', }}>
Expand Down