+
Play Now
Learn more
-
+
-
-
![]()
(
alt={`Animated core simulator example`}
/>
-
-
+
+
![]()
(
alt={`Animated parser usage example`}
/>
-
+
+
-
+ Run through the tutorial to understand the basics of corewar first, then head over the app
+ to test what you've learned.
+
+
(
{roadMapItems
.filter(x => x.complete)
.map(item => (
-
+
This is Corewar where players test their coding skills against each other, writing warriors
which battle for control of the core. Do you have what it takes to become the King of the
Hill?
+
+
Our interactive Corewar Simulator provides the battle ground for your warriors. Play the
game, inspect the core and debug your code from your web browser!
-
+
+
Our powerful Redcode editor makes it easy to write warriors and through real-time code
analysis improve the quality of your programs. The perfect canvas on which to craft your
masterpiece.
-
-
+
Play Now
-
-
- You should head over to the app and follow the interactive guide to explore the features
-
-
-
- Experienced player
I’ve played corewar before and understand the instructions and concepts
+
+ Head over to the app and follow the interactive guide to explore the features
+
+
+
View Tutorial
-
-
- You should run through the tutorial to understand the basics of corewar first, then head
- over the app to test what you've learned.
-
-
-
+ New to the game
I’ve done some coding before but never played corewar
@@ -208,7 +154,7 @@ const Home = () => (
{roadMapItems
.filter(x => x.complete === false)
.map(item => (
-
diff --git a/packages/corewar-ui/src/features/onboarding/roadmapItem.js b/packages/corewar-ui/src/features/onboarding/roadmapItem.js
index 20bb1733..b9e1ec6a 100644
--- a/packages/corewar-ui/src/features/onboarding/roadmapItem.js
+++ b/packages/corewar-ui/src/features/onboarding/roadmapItem.js
@@ -3,13 +3,13 @@ import Octicon from 'react-octicon'
export default ({ item }) => (
-
+
{item.leftText}
+ history.push(`/`)}>
-
+const Logo = ({ siteName, siteDomain }) => (
+
+ 
+
-
)
diff --git a/packages/corewar-ui/src/styles/index.css b/packages/corewar-ui/src/styles/index.css
index 7f393742..dd304dd2 100644
--- a/packages/corewar-ui/src/styles/index.css
+++ b/packages/corewar-ui/src/styles/index.css
@@ -2,4 +2,9 @@
@tailwind components;
+.guidance:hover > section {
+ opacity: 1;
+ transition: 0.5s;
+}
+
@tailwind utilities;
diff --git a/packages/corewar-ui/src/styles/tailwind.css b/packages/corewar-ui/src/styles/tailwind.css
index cfc4fa96..7f111643 100644
--- a/packages/corewar-ui/src/styles/tailwind.css
+++ b/packages/corewar-ui/src/styles/tailwind.css
@@ -615,6 +615,12 @@ video {
}
}
+.guidance:hover > section {
+ opacity: 1;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+}
+
.sr-only {
position: absolute;
width: 1px;
@@ -5331,6 +5337,18 @@ video {
min-width: 0;
}
+.min-w-150 {
+ min-width: 150px;
+}
+
+.min-w-200 {
+ min-width: 200px;
+}
+
+.min-w-300 {
+ min-width: 300px;
+}
+
.min-w-full {
min-width: 100%;
}
@@ -10841,8 +10859,12 @@ video {
grid-template-rows: none;
}
+.grid-rows-mobile-home-grid {
+ grid-template-rows: minmax(48px, 1fr) 25vh repeat(8, auto) 100px;
+}
+
.grid-rows-home-grid {
- grid-template-rows: 48px 50vh repeat(8, auto) 100px;
+ grid-template-rows: minmax(48px, 1fr) 50vh repeat(8, auto) 100px;
}
.grid-rows-roadmap {
@@ -17445,6 +17467,18 @@ video {
min-width: 0;
}
+ .sm\:min-w-150 {
+ min-width: 150px;
+ }
+
+ .sm\:min-w-200 {
+ min-width: 200px;
+ }
+
+ .sm\:min-w-300 {
+ min-width: 300px;
+ }
+
.sm\:min-w-full {
min-width: 100%;
}
@@ -22955,8 +22989,12 @@ video {
grid-template-rows: none;
}
+ .sm\:grid-rows-mobile-home-grid {
+ grid-template-rows: minmax(48px, 1fr) 25vh repeat(8, auto) 100px;
+ }
+
.sm\:grid-rows-home-grid {
- grid-template-rows: 48px 50vh repeat(8, auto) 100px;
+ grid-template-rows: minmax(48px, 1fr) 50vh repeat(8, auto) 100px;
}
.sm\:grid-rows-roadmap {
@@ -29560,6 +29598,18 @@ video {
min-width: 0;
}
+ .md\:min-w-150 {
+ min-width: 150px;
+ }
+
+ .md\:min-w-200 {
+ min-width: 200px;
+ }
+
+ .md\:min-w-300 {
+ min-width: 300px;
+ }
+
.md\:min-w-full {
min-width: 100%;
}
@@ -35070,8 +35120,12 @@ video {
grid-template-rows: none;
}
+ .md\:grid-rows-mobile-home-grid {
+ grid-template-rows: minmax(48px, 1fr) 25vh repeat(8, auto) 100px;
+ }
+
.md\:grid-rows-home-grid {
- grid-template-rows: 48px 50vh repeat(8, auto) 100px;
+ grid-template-rows: minmax(48px, 1fr) 50vh repeat(8, auto) 100px;
}
.md\:grid-rows-roadmap {
@@ -41675,6 +41729,18 @@ video {
min-width: 0;
}
+ .lg\:min-w-150 {
+ min-width: 150px;
+ }
+
+ .lg\:min-w-200 {
+ min-width: 200px;
+ }
+
+ .lg\:min-w-300 {
+ min-width: 300px;
+ }
+
.lg\:min-w-full {
min-width: 100%;
}
@@ -47185,8 +47251,12 @@ video {
grid-template-rows: none;
}
+ .lg\:grid-rows-mobile-home-grid {
+ grid-template-rows: minmax(48px, 1fr) 25vh repeat(8, auto) 100px;
+ }
+
.lg\:grid-rows-home-grid {
- grid-template-rows: 48px 50vh repeat(8, auto) 100px;
+ grid-template-rows: minmax(48px, 1fr) 50vh repeat(8, auto) 100px;
}
.lg\:grid-rows-roadmap {
@@ -53790,6 +53860,18 @@ video {
min-width: 0;
}
+ .xl\:min-w-150 {
+ min-width: 150px;
+ }
+
+ .xl\:min-w-200 {
+ min-width: 200px;
+ }
+
+ .xl\:min-w-300 {
+ min-width: 300px;
+ }
+
.xl\:min-w-full {
min-width: 100%;
}
@@ -59300,8 +59382,12 @@ video {
grid-template-rows: none;
}
+ .xl\:grid-rows-mobile-home-grid {
+ grid-template-rows: minmax(48px, 1fr) 25vh repeat(8, auto) 100px;
+ }
+
.xl\:grid-rows-home-grid {
- grid-template-rows: 48px 50vh repeat(8, auto) 100px;
+ grid-template-rows: minmax(48px, 1fr) 50vh repeat(8, auto) 100px;
}
.xl\:grid-rows-roadmap {
diff --git a/packages/corewar-ui/tailwind.config.js b/packages/corewar-ui/tailwind.config.js
index f6a590fb..15fa3457 100644
--- a/packages/corewar-ui/tailwind.config.js
+++ b/packages/corewar-ui/tailwind.config.js
@@ -22,7 +22,8 @@ module.exports = {
success: '#6FCF97'
},
gridTemplateRows: {
- 'home-grid': '48px 50vh repeat(8, auto) 100px',
+ 'mobile-home-grid': 'minmax(48px, 1fr) 25vh repeat(8, auto) 100px',
+ 'home-grid': 'minmax(48px, 1fr) 50vh repeat(8, auto) 100px',
roadmap: '80px 1fr'
},
gridTemplateColumns: {
@@ -33,6 +34,11 @@ module.exports = {
'200': '200px',
'300': '300px'
},
+ minWidth: {
+ '150': '150px',
+ '200': '200px',
+ '300': '300px'
+ },
maxWidth: {
'350': '350px'
},
{item.rightText}
diff --git a/packages/corewar-ui/src/features/onboarding/speechBubble.js b/packages/corewar-ui/src/features/onboarding/speechBubble.js
new file mode 100644
index 00000000..8a1112ed
--- /dev/null
+++ b/packages/corewar-ui/src/features/onboarding/speechBubble.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default ({ children }) => (
+
+ {children}
+
+)
diff --git a/packages/corewar-ui/src/features/topbar/logo.js b/packages/corewar-ui/src/features/topbar/logo.js
index 955d0ec3..1208412a 100644
--- a/packages/corewar-ui/src/features/topbar/logo.js
+++ b/packages/corewar-ui/src/features/topbar/logo.js
@@ -1,61 +1,21 @@
import React from 'react'
import PropTypes from 'prop-types'
-import styled from 'styled-components'
-
-import { colour, font, space } from '../common/theme'
import CorewarLogo from '../../img/corewar-logo.png'
-const Wrapper = styled.section`
- display: grid;
- grid-template-columns: ${space.header} 1fr;
-`
-
-const LogoImage = styled.img`
- margin: ${space.s};
- width: calc(${space.header} - ${space.ss} - ${space.s});
- height: calc(${space.header} - ${space.s} - ${space.s});
-`
-
-const SiteName = styled.div`
- font-family: ${font.default};
- font-size: ${font.large};
- color: ${colour.blue};
- font-weight: 300;
- line-height: 1.2em;
- padding-left: ${space.m};
- padding-top: ${space.s};
-
- :hover {
- cursor: pointer;
- }
-`
-
-SiteName.displayName = 'SiteName'
-
-const SiteDomain = styled.span`
- font-weight: 500;
- color: ${colour.white};
-`
-
-const Logo = ({ siteName, siteDomain, history }) => (
-
{siteName}
- {siteDomain}
-
-
+ {siteDomain}
+
+
)
Logo.propTypes = {
- siteName: PropTypes.string.isRequired,
- siteDomain: PropTypes.string.isRequired
-}
-
-Logo.defaultProps = {
- siteName: 'corewar',
- siteDomain: '.io'
+ siteName: PropTypes.string,
+ siteDomain: PropTypes.string
}
export default Logo
diff --git a/packages/corewar-ui/src/features/topbar/siteHeader.js b/packages/corewar-ui/src/features/topbar/siteHeader.js
index 9ac53df3..0493022d 100644
--- a/packages/corewar-ui/src/features/topbar/siteHeader.js
+++ b/packages/corewar-ui/src/features/topbar/siteHeader.js
@@ -18,9 +18,9 @@ const Header = styled.header`
`}
`
-const SiteHeader = ({ isAuthenticated, history }) => (
+const SiteHeader = ({ isAuthenticated }) => (