From 5148ee2063846d37f9152a9dfa64fcd40cc0454b Mon Sep 17 00:00:00 2001 From: Elizabeth Hunt Date: Fri, 1 Mar 2024 16:31:27 -0700 Subject: get something on the screen --- src/App.css | 42 ------------------- src/App.tsx | 56 ++++++++++++------------- src/assets/react.svg | 1 - src/components/GameCanvas.tsx | 16 ++++++++ src/css/colors.css | 45 ++++++++++++++++++++ src/css/style.css | 95 +++++++++++++++++++++++++++++++++++++++++++ src/css/tf.css | 33 +++++++++++++++ src/css/theme.css | 17 ++++++++ src/index.css | 68 ------------------------------- src/main.tsx | 13 +++--- 10 files changed, 238 insertions(+), 148 deletions(-) delete mode 100644 src/App.css delete mode 100644 src/assets/react.svg create mode 100644 src/components/GameCanvas.tsx create mode 100644 src/css/colors.css create mode 100644 src/css/style.css create mode 100644 src/css/tf.css create mode 100644 src/css/theme.css delete mode 100644 src/index.css (limited to 'src') diff --git a/src/App.css b/src/App.css deleted file mode 100644 index b9d355d..0000000 --- a/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/src/App.tsx b/src/App.tsx index afe48ac..9c5f790 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,35 +1,31 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' -import './App.css' +import { GameCanvas } from "./components/GameCanvas"; -function App() { - const [count, setCount] = useState(0) +const WIDTH = 800; +const HEIGHT = 800; +export const App = () => { return ( - <> -
- - Vite logo - - - React logo - +
+
+
+

the abstraction engine

+
-

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

+
+
-

- Click on the Vite and React logos to learn more -

- - ) -} - -export default App +
+ + built by{" "} + + simponic + + +
+
+ ); +}; diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/GameCanvas.tsx b/src/components/GameCanvas.tsx new file mode 100644 index 0000000..ea93c64 --- /dev/null +++ b/src/components/GameCanvas.tsx @@ -0,0 +1,16 @@ +import { useRef } from "react"; + +export interface GameCanvasProps { + width: number; + height: number; +} + +export const GameCanvas = ({ width, height }: GameCanvasProps) => { + const canvasRef = useRef(null); + + return ( +
+ +
+ ); +}; diff --git a/src/css/colors.css b/src/css/colors.css new file mode 100644 index 0000000..067ddcd --- /dev/null +++ b/src/css/colors.css @@ -0,0 +1,45 @@ +:root { + --bg: #fbf1c7; + --text: #3c3836; + --red: #9d0006; + --green: #6d790e; + --yellow: #b57614; + --blue: #075678; + --aqua: #57ab7e; + --purple: #b16286; + --orange: #af3a03; +} + +[data-theme="dark"] { + --bg: #282828; + --text: #f9f5d7; + --red: #fb4934; + --green: #b8bb26; + --yellow: #fabd2f; + --blue: #83a598; + --aqua: #8ec07c; + --purple: #d3869b; + --orange: #d65d0e; +} + +.red { + color: var(--red); +} +.green { + color: var(--green); +} +.yellow { + color: var(--yellow); +} +.blue { + color: var(--blue); +} +.aqua { + color: var(--aqua); +} +.purple { + color: var(--purple); +} +.orange { + color: var(--orange); +} diff --git a/src/css/style.css b/src/css/style.css new file mode 100644 index 0000000..cdfef76 --- /dev/null +++ b/src/css/style.css @@ -0,0 +1,95 @@ +@import url("./theme.css"); +@import url("./tf.css"); + +@font-face { + font-family: "scientifica"; + src: url("/fonts/scientifica.ttf"); +} + +* { + padding: 0; + margin: 0; + font-family: "scientifica", monospace; + transition: background 0.2s ease-in-out; + font-smooth: never; +} + +html, +body { + margin: 0; + width: 100%; + height: 100%; +} + +body { + background-color: var(--bg); + color: var(--text); +} + +a { + color: var(--blue); +} +a:visited { + color: var(--blue); +} + +.main { + min-height: 100vh; + display: grid; + grid-template-rows: auto 1fr auto; + min-width: 600px; + width: 45%; + margin-left: auto; + margin-right: auto; + padding: 0; +} + +.header { + display: flex; + justify-content: space-around; + padding-top: 1rem; + padding-bottom: 1rem; +} + +.content { + border-top: 1px solid var(--yellow); + border-bottom: 1px solid var(--yellow); + max-height: 90vh; +} + +.footer { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.nav { + display: flex; +} + +.title { + text-decoration: none; +} +.title:hover { + text-decoration: underline; + cursor: pointer; +} + +.centered-game { + display: flex; + justify-content: center; + align-items: center; + padding-bottom: 1rem; + height: 100%; + flex-direction: column; + gap: 1rem; +} + +.centered-game canvas { + display: block; + max-height: 90%; + width: auto; + max-width: 100%; + border: 1px solid var(--yellow); + border-radius: 0.5rem; + margin: 0; +} diff --git a/src/css/tf.css b/src/css/tf.css new file mode 100644 index 0000000..c1acd72 --- /dev/null +++ b/src/css/tf.css @@ -0,0 +1,33 @@ +.tf { + position: relative; + z-index: 1; + + transition: color 0.3s ease-out; + transition: opacity 0.5s ease-in-out; +} + +.tf:before { + background: rgb(162, 254, 254); + background: linear-gradient( + 90deg, + rgba(162, 254, 254, 1) 0%, + rgba(249, 187, 250, 1) 25%, + rgba(250, 250, 250, 1) 50%, + rgba(249, 187, 250, 1) 75%, + rgba(162, 254, 254, 1) 100% + ); + + content: ""; + width: 100%; + height: 100%; + top: 0; + left: 0; + position: absolute; + z-index: -1; + opacity: 0; + transition: all 0.5s; +} + +.tf:hover:before { + opacity: 1; +} diff --git a/src/css/theme.css b/src/css/theme.css new file mode 100644 index 0000000..c65b2a8 --- /dev/null +++ b/src/css/theme.css @@ -0,0 +1,17 @@ +@import url("./colors.css"); + +.primary { + color: var(--aqua); +} +.secondary { + color: var(--blue); +} +.tertiary { + color: var(--purple); +} +.warning { + color: var(--yellow); +} +.error { + color: var(--red); +} diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 6119ad9..0000000 --- a/src/index.css +++ /dev/null @@ -1,68 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/src/main.tsx b/src/main.tsx index 3d7150d..94b1039 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,10 +1,9 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App.tsx' -import './index.css' - -ReactDOM.createRoot(document.getElementById('root')!).render( +import React from "react"; +import ReactDOM from "react-dom/client"; +import { App } from "./App.tsx"; +import "./css/style.css"; +ReactDOM.createRoot(document.getElementById("root")!).render( , -) +); -- cgit v1.2.3-70-g09d2