snap

craeftgame · Mar 31, 2019 · 47b0f33 · 47b0f33
1 parent e22e95b
commit 47b0f33
Show file tree

Hide file tree

Showing 106 changed files with 5,415 additions and 2,302 deletions.
diff --git a/IDEAS.md b/IDEAS.md
@@ -0,0 +1,6 @@
+Crafting:
+
+- craefter can die from crafting
+- player can die on slaying tbd
+- items can be w:rusty / a:stiff / j:dull
+- mysterious items can be crafted but not sure about the outcome
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,13 +12,15 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "assert": "^1.4.1",
-    "create-react-app": "^2.1.5"
+    "create-react-app": "^2.1.8"
   },
   "dependencies": {
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3",
-    "react-scripts": "2.1.5"
+    "RPGUI": "git+https://github.com/RonenNess/RPGUI.git",
+    "bulma": "^0.7.4",
+    "mathjs": "^5.6.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "react-scripts": "^2.1.8"
   },
   "browserslist": [
     ">0.2%",

diff --git a/public/index.html b/public/index.html
@@ -1,18 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+<head>
+    <meta charset="utf-8"/>
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"/>
+    <link href="https://fonts.googleapis.com/css?family=MedievalSharp" rel="stylesheet">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
+          integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
+          crossorigin="anonymous">
     <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+            name="viewport"
+            content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#000000"/>
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -22,20 +26,20 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
+    <title>Cräft!</title>
+</head>
+<body>
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id="root"></div>
+<!--
+  This HTML file is a template.
+  If you open it directly in the browser, you will see an empty page.
 
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
+  You can add webfonts, meta tags, or analytics to this file.
+  The build step will place the bundled scripts into the <body> tag.
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
+  To begin the development, run `npm start` or `yarn start`.
+  To create a production bundle, use `npm run build` or `yarn build`.
+-->
+</body>
 </html>
diff --git a/src/About.js b/src/About.js
@@ -0,0 +1,16 @@
+import React, {Component} from 'react';
+
+export default class About extends Component {
+
+    render() {
+        return (
+            <div>
+                hello world
+
+                <div>
+                    <a href='/'>back</a>
+                </div>
+            </div>
+        )
+    }
+}
diff --git a/src/App.js b/src/App.js
diff --git a/src/Craeft.css b/src/Craeft.css
@@ -0,0 +1,68 @@
+* {
+    font-family: 'MedievalSharp', cursive;
+    font-size: 24px;
+}
+
+html, body {
+    color: #FAEBD7;
+    background-color: #000;
+}
+
+strong {
+    color: #FAEFE1;
+}
+
+.craeft-logo {
+    font-size: 90px;
+    font-weight: bold;
+    color: #FAEFE1;
+}
+
+.column {
+    display: inline-block;
+    vertical-align: top;
+    padding-right: 20px;
+}
+
+.frame {
+    min-width: 380px;
+}
+
+.row {
+    text-align: center;
+}
+
+.player {
+    margin-bottom: 30px;
+}
+
+.item,
+.resources,
+.craefter,
+.craeft-window,
+.craefter-window {
+    border: 1px solid #FAEFE1;
+    margin-bottom: 5px;
+    margin-top: 2px;
+    padding: 6px;
+}
+
+.craefters-list {
+    margin-top: 5px;
+}
+
+.items hr,
+.craefters hr,
+.farm hr {
+    margin-top: 10px;
+    margin-bottom: 0;
+}
+
+.footer {
+    text-align: center;
+    background-color: #000;
+}
+
+.item-description {
+    min-width: 80%;
+}
diff --git a/src/Craeft.js b/src/Craeft.js
@@ -0,0 +1,127 @@
+import React, {Component} from 'react';
+// game engine
+import Player from './engine/player';
+import Farm from "./engine/farm";
+
+// visual components
+// structure
+import Footer from './components/structure/Footer';
+import Header from "./components/structure/Header";
+
+// game
+import PlayerComponent from './components/Player'
+import FarmComponent from "./components/Farm";
+import ItemsComponent from "./components/Items";
+import CraeftersComponent from "./components/Craefters";
+
+const initialResources = 100;
+
+export default class Craeft extends Component {
+
+    state = {
+        // the player
+        player: new Player(),
+        // the farm
+        farm: new Farm(10),
+        // craefters
+        craefters: [],
+        // items
+        items: [],
+        // resources
+        resources: {
+            wood: initialResources,
+            metal: initialResources,
+            cloth: initialResources,
+            diamond: initialResources
+        }
+    };
+
+    constructor(props) {
+        super(props);
+
+        // re-render every second
+        setInterval(() => {
+            this.forceUpdate();
+        }, 1 * 1000);
+
+        this.farmComplete = this.farmComplete.bind(this);
+        this.addCraefter = this.addCraefter.bind(this);
+        this.addItem = this.addItem.bind(this);
+    }
+
+    farmComplete(
+        result
+    ) {
+        const resources = Object.assign({}, this.state.resources);
+
+        resources.metal += result.metal;
+        resources.wood += result.wood;
+        resources.cloth += result.cloth;
+        resources.diamond += result.diamond;
+
+        this.setState({
+            resources
+        })
+    }
+
+    addCraefter(
+        craefter
+    ) {
+        const craefters = [...this.state.craefters];
+
+        craefters.push(craefter);
+
+        this.setState({
+            craefters
+        })
+    }
+
+    addItem(
+        item,
+        resourcesConsumed
+    ) {
+        const items = [...this.state.items];
+        const resources = Object.assign({}, this.state.resources);
+
+        resources.wood -= resourcesConsumed.wood;
+        resources.metal -= resourcesConsumed.metal;
+        resources.cloth -= resourcesConsumed.cloth;
+        resources.diamond -= resourcesConsumed.diamond;
+
+        items.push(item);
+
+        this.setState({
+            items,
+            resources
+        })
+    }
+
+    render() {
+        return (
+            <div className="rpgui-content container craeft">
+
+                <Header/>
+
+                <PlayerComponent player={this.state.player}/>
+
+                <div className={'craefting-interface columns'}>
+
+                    <CraeftersComponent resources={this.state.resources}
+                                        craefters={this.state.craefters}
+                                        craefterAdded={this.addCraefter}
+                                        itemAdded={this.addItem}/>
+
+                    <FarmComponent resources={this.state.resources}
+                                   farm={this.state.farm}
+                                   farmComplete={this.farmComplete}/>
+
+                    <ItemsComponent items={this.state.items}/>
+
+                </div>
+
+                <Footer/>
+
+            </div>
+        );
+    }
+}
diff --git a/test/App.test.js → src/__tests__/App.test.js b/test/App.test.js → src/__tests__/App.test.js
@@ -1,9 +1,10 @@
+/* globals describe, it */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from '../src/App';
+import Craeft from '../App';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
+  ReactDOM.render(<Craeft />, div);
   ReactDOM.unmountComponentAtNode(div);
 });
diff --git a/src/assets/background-image-golden.png b/src/assets/background-image-golden.png
diff --git a/src/assets/background-image-golden2.png b/src/assets/background-image-golden2.png
diff --git a/src/assets/background-image-grey.png b/src/assets/background-image-grey.png
diff --git a/src/assets/background-image.png b/src/assets/background-image.png
diff --git a/src/assets/border-image-golden.png b/src/assets/border-image-golden.png
diff --git a/src/assets/border-image-golden2.png b/src/assets/border-image-golden2.png
diff --git a/src/assets/border-image-grey.png b/src/assets/border-image-grey.png
diff --git a/src/assets/border-image.png b/src/assets/border-image.png
diff --git a/src/assets/button-background.png b/src/assets/button-background.png
diff --git a/src/assets/button-down.png b/src/assets/button-down.png
diff --git a/src/assets/button-golden-down.png b/src/assets/button-golden-down.png
diff --git a/src/assets/button-golden-hover.png b/src/assets/button-golden-hover.png
diff --git a/src/assets/button-golden-left.png b/src/assets/button-golden-left.png
diff --git a/src/assets/button-golden-right.png b/src/assets/button-golden-right.png
diff --git a/src/assets/button-golden.png b/src/assets/button-golden.png
diff --git a/src/assets/button-hover.png b/src/assets/button-hover.png
diff --git a/src/assets/button.png b/src/assets/button.png
diff --git a/src/assets/checkbox-golden-off.png b/src/assets/checkbox-golden-off.png
diff --git a/src/assets/checkbox-golden-on.png b/src/assets/checkbox-golden-on.png
diff --git a/src/assets/checkbox-off.png b/src/assets/checkbox-off.png
diff --git a/src/assets/checkbox-on.png b/src/assets/checkbox-on.png
diff --git a/src/assets/cursor/cursor.cur b/src/assets/cursor/cursor.cur
diff --git a/src/assets/cursor/default.png b/src/assets/cursor/default.png
diff --git a/src/assets/cursor/grab-close.png b/src/assets/cursor/grab-close.png
diff --git a/src/assets/cursor/grab-open.png b/src/assets/cursor/grab-open.png
diff --git a/src/assets/cursor/point.png b/src/assets/cursor/point.png
diff --git a/src/assets/cursor/select.png b/src/assets/cursor/select.png
diff --git a/src/assets/hr-golden.png b/src/assets/hr-golden.png
diff --git a/src/assets/hr.png b/src/assets/hr.png
diff --git a/src/assets/icons/armor-slot.png b/src/assets/icons/armor-slot.png
diff --git a/src/assets/icons/empty-slot.png b/src/assets/icons/empty-slot.png
diff --git a/src/assets/icons/exclamation.png b/src/assets/icons/exclamation.png
diff --git a/src/assets/icons/helmet-slot.png b/src/assets/icons/helmet-slot.png
diff --git a/src/assets/icons/magic-slot.png b/src/assets/icons/magic-slot.png
diff --git a/src/assets/icons/potion-blue.png b/src/assets/icons/potion-blue.png
diff --git a/src/assets/icons/potion-green.png b/src/assets/icons/potion-green.png
diff --git a/src/assets/icons/potion-red.png b/src/assets/icons/potion-red.png
diff --git a/src/assets/icons/potion-slot.png b/src/assets/icons/potion-slot.png
diff --git a/src/assets/icons/ring-slot.png b/src/assets/icons/ring-slot.png
diff --git a/src/assets/icons/shield-slot.png b/src/assets/icons/shield-slot.png
diff --git a/src/assets/icons/shield.png b/src/assets/icons/shield.png
diff --git a/src/assets/icons/shoes-slot.png b/src/assets/icons/shoes-slot.png
diff --git a/src/assets/icons/sword.png b/src/assets/icons/sword.png
diff --git a/src/assets/icons/weapon-slot.png b/src/assets/icons/weapon-slot.png
diff --git a/src/assets/progress-bar-left.png b/src/assets/progress-bar-left.png
diff --git a/src/assets/progress-bar-right.png b/src/assets/progress-bar-right.png
diff --git a/src/assets/progress-bar-track.png b/src/assets/progress-bar-track.png
diff --git a/src/assets/progress-blue.png b/src/assets/progress-blue.png
diff --git a/src/assets/progress-green.png b/src/assets/progress-green.png
diff --git a/src/assets/progress-red.png b/src/assets/progress-red.png
diff --git a/src/assets/progress.png b/src/assets/progress.png
diff --git a/src/assets/radio-golden-off.png b/src/assets/radio-golden-off.png
diff --git a/src/assets/radio-golden-on.png b/src/assets/radio-golden-on.png
diff --git a/src/assets/radio-off.png b/src/assets/radio-off.png
diff --git a/src/assets/radio-on.png b/src/assets/radio-on.png
diff --git a/src/assets/scrollbar-button.png b/src/assets/scrollbar-button.png
diff --git a/src/assets/scrollbar-thumb.png b/src/assets/scrollbar-thumb.png
diff --git a/src/assets/scrollbar-track.png b/src/assets/scrollbar-track.png
diff --git a/src/assets/select-background-image.png b/src/assets/select-background-image.png
diff --git a/src/assets/select-border-image.png b/src/assets/select-border-image.png
diff --git a/src/assets/slider-left-golden.png b/src/assets/slider-left-golden.png
diff --git a/src/assets/slider-left.png b/src/assets/slider-left.png
diff --git a/src/assets/slider-right-golden.png b/src/assets/slider-right-golden.png
diff --git a/src/assets/slider-right.png b/src/assets/slider-right.png
diff --git a/src/assets/slider-thumb-golden.png b/src/assets/slider-thumb-golden.png
diff --git a/src/assets/slider-thumb.png b/src/assets/slider-thumb.png
diff --git a/src/assets/slider-track-golden.png b/src/assets/slider-track-golden.png
diff --git a/src/assets/slider-track.png b/src/assets/slider-track.png