diff --git a/.env b/.env
new file mode 100644
index 0000000..d643a8d
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+TESTING=Yay!
\ No newline at end of file
diff --git a/README.md b/README.md
index 7435989..484726b 100644
--- a/README.md
+++ b/README.md
@@ -1,48 +1,27 @@
-# Pick your own project
-
-Build an app of your choice.
-
-- You are free to use any technologies covered so far, but feel free to try new technologies you find interesting.
-- Keep it simple. Aim to get the basic functionality working on day one. You can then extend it on days two and three.
-- Feel free to use an external API to provide additional functionality to your app. Use an API that either does not have any authentication or uses API keys.
-- This is an opportunity to practice the parts you have challenging so far and improve your understanding of them.
-- Use pen and paper to draw a diagram of the webpage layout before starting to code. Have a think about what components you will need in advance.
-- Use prop-types and stateless components where appropriate.
-- Try to use Sass to create a separate stylesheet for each component.
-- Try to add some unit testing. Some parts will be easier to test than others, focus on those first.
-- Think about how to organise your data in advance
-- Make sure your app is responsive
-- Commit frequently
-- Create pull request at the end
-- Demos will be at 4pm on Friday
-- Keep it simple
-
-## Technical notes
-
-* Run `npm install` after cloning to download all dependencies
-* Use `npm run dev -- --watch` to build React
-* Use `npm test` or `npm test -- --watchAll` to run tests
-
-## README
-
-* Produce a README.md which explains
- * what the project does
- * what technologies it uses
- * how to build it and run it
- * any unresolved issues the user should be aware of
-
-## Inspiration
-
-- Take a look at [https://public-apis.jeremyfairbank.com/](https://public-apis.jeremyfairbank.com/) or [https://github.com/toddmotto/public-apis](https://github.com/toddmotto/public-apis) for possible APIs to use.
-
-## Default option
-
-If you are struggling to think of a project to build. Try to create a Top Trumps using the [Star Wars API](https://swapi.co/) which allows one user to play the game against the computer.
-
-- On load, fetch all vehicles from [https://swapi.co/api/vehicles/](https://swapi.co/api/vehicles/) end point.
-- Randomise the cards and deal half to player and half to computer.
-- Display top card to user
-- Allow user to pick an attribute from their card such as `cost_in_credits`, `length`, `max_atmosphering_speed`, `crew`, `passengers`, `cargo_capacity`.
-- If the value for chosen attribute is higher on the user's card than on computer's top card, they win the computer's card and it should be taken from computer's deck and added to the bottom of the user's deck. If the attribute is higher on the computer's top card, then user's card should be taken from the user's deck and added to the bottom of computer's deck.
-- Game continues until either user or computer has all the cards.
-- Implement some features of your choosing.
+
+
+# Exquisite Corpse
+
+Exquisite corpse (_cadavre exquis_ in French) is a game invented by the Surrealists aimed at stimulating creative response. The method involves the collection and assemblage of generated words or images, according to an agreed rule (in this case “Adjective-Noun”).
+
+This game seeks to mimic the original by randomly generating lists of words, selected by type (adjective/adverb - noun/verb) and combining the results to create unique combinations. Intriguing combinations may then be chosen for 'workshopping' - with a timer allowing 5 minutes \* of free-flow writing.
+
+### Features
+
+- "random" endpoint on API is used to fetch 3 cycles of words, which the user may select by type - adjective/adverb, noun/verb
+- local storage is used to select generatedword combinations for workshopping (may be added or deleted from selected stock)
+- timer set on adding word combo to the workshop textarea
+- css classes (with animation) indicate when word combo has been added, and when the timer is reaching end
+
+**The app is currently under development:**
+
+- Add descriptions as tooltips to generated word lists - this requires rebuild of word list arrays as objects with keys word: and definition, so as to pull in definition with Fetch.
+- Textarea functionality set to fade… whenever user pauses
+- Currently desktop-oriented design; address UX for mobile usage - server a different view for writing
+- Resets required for select menus
+
+### Looking forward
+
+- Develop using GraphQL API approach, with OED
+
+\* set to 10s for testing!
diff --git a/index.html b/index.html
index f8102eb..c6176b5 100644
--- a/index.html
+++ b/index.html
@@ -4,11 +4,15 @@
-
- YouJuke
+
+
+
+
+ Exquisite Corpse
-
+ Exquisite corpse (cadavre exquis in French) is a game
+ invented by the Surrealists aimed at stimulating creative
+ response. The method involves the collection and assemblage of
+ generated words or images, according to an agreed rule (in this
+ case “Adjective-Noun”).
+
+
+ This game seeks to mimic the original by randomly generating lists
+ of adjectives and nouns and combining the results to create unique
+ combinations. Intriguing combinations may then be chosen for
+ 'workshopping' – 5 minutes of free-flow writing.
+
+ );
+}
+
+WordCombination.propTypes = {
+ corpseitem: PropTypes.string,
+ removeFromFavourites: PropTypes.func,
+ addFavourites: PropTypes.func
+};
+
+export default WordCombination;
diff --git a/src/index.js b/src/index.js
index e0728fe..0e737c2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './components/App';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./components/App";
-ReactDOM.render(
- ,
- document.getElementById('root')
-);
+ReactDOM.render(, document.getElementById("root"));
+// patch required in webpack config node: { fs: "empty" }
+
+// READY TO SET UP DOTENV WITH NODE SERVER
+// const path = require("path");
+// require("dotenv").config({ path: path.resolve(__dirname, "..", ".env") });
+// console.log(process.env);
+
+// const test = process.env.TESTING;
+// console.log(test);
diff --git a/src/styles/base/_normalize.scss b/src/styles/base/_normalize.scss
new file mode 100644
index 0000000..aba238f
--- /dev/null
+++ b/src/styles/base/_normalize.scss
@@ -0,0 +1,341 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+ ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+ line-height: 1.15; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+ }
+
+ /* Sections
+ ========================================================================== */
+
+ /**
+ * Remove the margin in all browsers.
+ */
+
+ body {
+ margin: 0;
+ }
+
+ /**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+ h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+ }
+
+ /* Grouping content
+ ========================================================================== */
+
+ /**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+ hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+ }
+
+ /**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+ pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+ }
+
+ /* Text-level semantics
+ ========================================================================== */
+
+ /**
+ * Remove the gray background on active links in IE 10.
+ */
+
+ a {
+ background-color: transparent;
+ }
+
+ /**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+ abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+ }
+
+ /**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+ b,
+ strong {
+ font-weight: bolder;
+ }
+
+ /**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+ code,
+ kbd,
+ samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+ }
+
+ /**
+ * Add the correct font size in all browsers.
+ */
+
+ small {
+ font-size: 80%;
+ }
+
+ /**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+ sub,
+ sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+ }
+
+ sub {
+ bottom: -0.25em;
+ }
+
+ sup {
+ top: -0.5em;
+ }
+
+ /* Embedded content
+ ========================================================================== */
+
+ /**
+ * Remove the border on images inside links in IE 10.
+ */
+
+ img {
+ border-style: none;
+ }
+
+ /* Forms
+ ========================================================================== */
+
+ /**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+ button,
+ input,
+ optgroup,
+ select,
+ textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+ }
+
+ /**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+ button,
+ input { /* 1 */
+ overflow: visible;
+ }
+
+ /**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+ button,
+ select { /* 1 */
+ text-transform: none;
+ }
+
+ /**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+ button,
+ [type="button"],
+ [type="reset"],
+ [type="submit"] {
+ -webkit-appearance: button;
+ }
+
+ /**
+ * Remove the inner border and padding in Firefox.
+ */
+
+ button::-moz-focus-inner,
+ [type="button"]::-moz-focus-inner,
+ [type="reset"]::-moz-focus-inner,
+ [type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+ }
+
+ /**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+ button:-moz-focusring,
+ [type="button"]:-moz-focusring,
+ [type="reset"]:-moz-focusring,
+ [type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+ }
+
+ /**
+ * Correct the padding in Firefox.
+ */
+
+ fieldset {
+ padding: 0.35em 0.75em 0.625em;
+ }
+
+ /**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+ legend {
+ box-sizing: border-box; /* 1 */
+ color: inherit; /* 2 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ white-space: normal; /* 1 */
+ }
+
+ /**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+ progress {
+ vertical-align: baseline;
+ }
+
+ /**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+ textarea {
+ overflow: auto;
+ }
+
+ /**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+ [type="checkbox"],
+ [type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+ }
+
+ /**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+ [type="number"]::-webkit-inner-spin-button,
+ [type="number"]::-webkit-outer-spin-button {
+ height: auto;
+ }
+
+ /**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+ [type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+ }
+
+ /**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+ [type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+ }
+
+ /**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+ ::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+ }
+
+ /* Interactive
+ ========================================================================== */
+
+ /*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+ details {
+ display: block;
+ }
+
+ /*
+ * Add the correct display in all browsers.
+ */
+
+ summary {
+ display: list-item;
+ }
+
+ /* Misc
+ ========================================================================== */
+
+ /**
+ * Add the correct display in IE 10+.
+ */
+
+ template {
+ display: none;
+ }
+
+ /**
+ * Add the correct display in IE 10.
+ */
+
+ [hidden] {
+ display: none;
+ }
\ No newline at end of file
diff --git a/src/styles/base/_variables.scss b/src/styles/base/_variables.scss
new file mode 100644
index 0000000..eebff2c
--- /dev/null
+++ b/src/styles/base/_variables.scss
@@ -0,0 +1,9 @@
+// Variables
+
+// Color
+$text-color: #333;
+$background-color: #E8e8e8;
+$primary-color: green;
+
+// Padding
+$main-padding: 1rem;
\ No newline at end of file
diff --git a/src/styles/base/base.scss b/src/styles/base/base.scss
new file mode 100644
index 0000000..4021a2e
--- /dev/null
+++ b/src/styles/base/base.scss
@@ -0,0 +1,112 @@
+@import "_normalize";
+@import "variables";
+
+/* ==== BASE ==== */
+body {
+ font-family: "Inconsolata", monospace;
+ margin: 0;
+ padding: 0;
+ background: $background-color;
+ line-height: 1.5;
+ color: $text-color;
+ -webkit-font-smoothing: antialiased;
+}
+.container {
+ padding-left: $main-padding;
+ padding-right: $main-padding;
+ margin: 0 auto;
+}
+.menu--settings {
+ list-style-type: none;
+ padding-left: 0;
+ padding-right: 0;
+ margin: 0;
+}
+img {
+ max-width: 100%;
+ height: auto;
+ border-style: none;
+}
+
+/* ==== LAYOUT ==== */
+
+.sitehead {
+ padding: $main-padding * 2;
+}
+
+.masthead {
+ padding: $main-padding;
+}
+.main {
+ display: flex;
+ flex-flow: row wrap;
+ padding-bottom: $main-padding * 5;
+}
+.workshop {
+ padding: $main-padding;
+}
+.wordlists {
+ padding: $main-padding;
+ .generate {
+ margin-bottom: $main-padding * 2;
+ text-align: center;
+ &__corpses {
+ border: 1px dotted $text-color;
+ padding: $main-padding;
+ }
+ }
+}
+
+// MEDIA QUERIES
+@media (min-width: 768px) {
+ .masthead {
+ width: 66.66667%;
+ }
+ .workshop {
+ width: 50%;
+ }
+ .wordlists {
+ width: 50%;
+ padding: $main-padding;
+ .generate {
+ display: flex;
+ flex-flow: row wrap;
+ &__type1,
+ &__type2 {
+ width: 50%;
+ }
+ }
+ }
+}
+
+@media (min-width: 960px) {
+ .container {
+ max-width: 930px;
+ }
+ .wordlists {
+ width: 40%;
+ padding-left: $main-padding * 2;
+ }
+ .workshop {
+ width: 60%;
+ padding-right: $main-padding * 2;
+ }
+}
+
+@media (min-width: 1200px) {
+ .container {
+ max-width: 1170px;
+ }
+ .wordlists {
+ width: 33.33334%;
+ }
+ .workshop {
+ width: 66.66667%;
+ }
+}
+
+@media (min-width: 1440px) {
+ .container {
+ max-width: 1410px;
+ }
+}
diff --git a/src/styles/components/app.scss b/src/styles/components/app.scss
index 0bdf5c0..8b13789 100644
--- a/src/styles/components/app.scss
+++ b/src/styles/components/app.scss
@@ -1,3 +1 @@
-body {
- background-color: Cornsilk;
-}
+
diff --git a/src/styles/components/favourite.scss b/src/styles/components/favourite.scss
new file mode 100644
index 0000000..3121535
--- /dev/null
+++ b/src/styles/components/favourite.scss
@@ -0,0 +1,33 @@
+@import '../base/_variables.scss';
+
+.workshop__favourite {
+ color: lighten( $text-color, 40% );
+ &::before {
+ display: inline-block;
+ font-style: normal;
+ font-variant: normal;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ font-family: "Font Awesome 5 Free";
+ font-weight: 900;
+ content: "\f105";
+ margin-right: 5px;
+ }
+ &:hover {
+ text-decoration: none;
+ }
+ &.active {
+ color: $text-color;
+ &::before {
+ content: "\f107";
+ }
+ }
+}
+.workshop__listitem {
+ position: relative;
+ p {
+ position: absolute;
+ right: 0;
+ top: 0;
+ }
+}
diff --git a/src/styles/components/favourites.scss b/src/styles/components/favourites.scss
new file mode 100644
index 0000000..1a701ea
--- /dev/null
+++ b/src/styles/components/favourites.scss
@@ -0,0 +1,5 @@
+.workshop__textarea {
+ width: 100%;
+ height: 20vw;
+ padding: 1rem;
+}
diff --git a/src/styles/components/generate.scss b/src/styles/components/generate.scss
new file mode 100644
index 0000000..df13814
--- /dev/null
+++ b/src/styles/components/generate.scss
@@ -0,0 +1,54 @@
+@import "../base/_variables.scss";
+.wordlists__title {
+ text-align: center;
+}
+.generate__corpses {
+ opacity: 0;
+ transition: opacity 2.5s;
+ -webkit-transition: opacity 2.5s;
+ a {
+ display: inline-block;
+ text-decoration: none;
+ font-size: 1rem;
+ padding: $main-padding * 0.5;
+ // cursor: pointer;
+ text-align: center;
+ }
+}
+.generate__corpses.active {
+ opacity: 1;
+}
+.generate {
+ ul,
+ .generator {
+ width: 75%;
+ }
+ button {
+ display: inline-block;
+ width: 100%;
+ border: 1px dotted $text-color;
+ padding: $main-padding * 0.5 0;
+ margin: 0 0 $main-padding * 0.5 0;
+ text-decoration: none;
+ font-size: 1rem;
+ cursor: pointer;
+ text-align: center;
+ transition: background 250ms ease-in-out, transform 150ms ease;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ }
+
+ button:hover {
+ background: $text-color;
+ color: $background-color;
+ }
+
+ button:focus {
+ outline: 1px solid #fff;
+ outline-offset: -4px;
+ }
+
+ button:active {
+ transform: scale(0.99);
+ }
+}
diff --git a/src/styles/components/timer.scss b/src/styles/components/timer.scss
new file mode 100644
index 0000000..26a4a1b
--- /dev/null
+++ b/src/styles/components/timer.scss
@@ -0,0 +1,15 @@
+.workshop__timer {
+background: black;
+color: white;
+padding: 5px;
+transition: all 2s;
+}
+.workshop--timeout{
+ background: red;
+}
+.workshop--timeend {
+ -webkit-transform:scale(0);
+-moz-transform:scale(0);
+-ms-transform:scale(0);
+transform:scale(0);
+}
\ No newline at end of file
diff --git a/static/exquisite-corpse-1.png b/static/exquisite-corpse-1.png
new file mode 100644
index 0000000..6f56b3e
Binary files /dev/null and b/static/exquisite-corpse-1.png differ
diff --git a/tests/components/Generate.test.js b/tests/components/Generate.test.js
new file mode 100644
index 0000000..cf535aa
--- /dev/null
+++ b/tests/components/Generate.test.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import Generate from '../../src/components/Generate'
+import { shallow } from 'enzyme';
+
+describe('Generate', () => {
+
+ // enzyme test
+ test('should have inital select value on generate adjectives', () => {
+
+ const wrapper = shallow(
+ )
+
+ const select1 = wrapper.find('.select1 option').selected
+ expect(select1).toBe('default')
+ })
+
+ test('select noun')
+});
\ No newline at end of file
diff --git a/tests/components/__snapshots__/App.test.js.snap b/tests/components/__snapshots__/App.test.js.snap
new file mode 100644
index 0000000..cd11cc8
--- /dev/null
+++ b/tests/components/__snapshots__/App.test.js.snap
@@ -0,0 +1,142 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App matches the snapshot 1`] = `
+
+
+
+ Exquisite Corpse
+
+
+
+ Exquisite corpse (
+
+ cadavre exquis
+
+ in French) is a game invented by the Surrealists aimed at stimulating creative response. The method involves the collection and assemblage of generated words or images, according to an agreed rule (in this case “Adjective-Noun”).
+
+
+ This game seeks to mimic the original by randomly generating lists of adjectives and nouns and combining the results to create unique combinations. Intriguing combinations may then be chosen for 'workshopping' – 5 minutes of free-flow writing.
+
+
+
+
+
+
+ Workshop
+
+
+
+
+ Generate
+
+ nouns and adjectives to create a list of ‘exquisite corpses’
+
+
+
+ appealing exquisite corpses to the workshop area
+
+
+
+ Select
+
+ a corpse to start the timer and begin writing. Do not pause.
+