Upgrade NPM dependencies

From now on, use README instructions to add example dummy data.

.gitignore

@@ -10,3 +10,8 @@ npm-debug.log
 .cache
 _build
 .vscode
+
+docs
+
+static/albums.json
+static/covers

.tool-versions

@@ -1 +1 @@
-nodejs 10.12.0
+nodejs 12.10.0

LICENSE

@@ -0,0 +1,8 @@
+/*
+ * ----------------------------------------------------------------------------
+ * "THE BEER-WARE LICENSE" (Revision 42):
+ * <yttan@fastmail.se> wrote this code.  As long as you retain this notice you
+ * can do whatever you want with this stuff. If we meet some day, and you think
+ * this stuff is worth it, you can buy me a beer in return.   Anders Ytterström
+ * ----------------------------------------------------------------------------
+ */

README.md

@@ -1,5 +1,7 @@
 # BRÜTAL LEGEND
 
+https://www.youtube.com/embed/VW88ofmfF0w
+
 Progress visualisation of the quest to own a vinyl copy of all songs older than 1990 used in [Brütal Legend](https://en.wikipedia.org/wiki/Br%C3%BCtal_Legend), where possible.
 
 Also a project for learning
@@ -24,3 +26,9 @@ Use `npm run lint` to lint files.
 ## Build release
 
     npm run build
+
+## Example data
+
+The data should consist of a list of images (albums covers), and a JSON file. To have some example data to fiddle around with, a dummy data folder is available.
+
+    cp static/dummy-data/* static

css/brutal.css

@@ -3,7 +3,8 @@ body {
     background-color: #111;
     color: #aaa;
     font-size: large;
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+        Helvetica Neue, Arial, sans-serif;
     padding: 0;
     margin: 0 auto;
     max-width: 80em;
@@ -18,7 +19,8 @@ a:visited {
     text-decoration: line-through;
 }
 
-a:hover, a:focus {
+a:hover,
+a:focus {
     color: #fff;
 }
 
@@ -62,43 +64,55 @@ p:last-child {
     margin-bottom: 0;
 }
 
-input {
+/* === /Base === */
+/* === Field === */
+
+.field {
     background-color: #333;
     color: #fff;
     border-width: 0;
     border-radius: 5px;
     font-size: large;
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
-    padding: .5rem 1rem;
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+        Helvetica Neue, Arial, sans-serif;
+    padding: 0.5rem 1rem;
     display: block;
     width: 100%;
     box-sizing: border-box;
     margin-top: 0.5em;
 }
 
-input:hover {
+.field:hover {
     background-color: #444;
 }
 
-input:focus {
+.field:focus {
     background-color: #fff;
     color: #000;
 }
 
 @media (min-width: 500px) {
-    input {
-        min-width: 17em;
+    .field {
         margin-top: 0;
     }
+
+    input.field {
+        min-width: 17em;
+    }
 }
 
-/* === /Base === */
+/* === /Field === */
 /* === Helpers === */
 
 .blur {
     filter: blur(25px);
 }
 
+.visuallyhidden {
+    position: absolute;
+    left: -9999em;
+}
+
 /* === /Helpers === */
 /* === Albums === */
 
@@ -136,6 +150,7 @@ input:focus {
 @media (min-width: 500px) {
     .album__cover {
         margin: 0 0 0.5em;
+        width: 100%;
         padding-top: 0;
     }
 }
@@ -143,6 +158,7 @@ input:focus {
 @media (min-width: 1200px) {
     .album__cover {
         margin: 0 1em 0 0;
+        width: auto;
         padding-top: 0;
     }
 }
@@ -155,7 +171,7 @@ input:focus {
 
 .album__cover__media:after {
     position: absolute;
-    content: '';
+    content: "";
     top: 0;
     right: 0;
     bottom: 0;
@@ -197,31 +213,51 @@ input:focus {
     right: 0;
     bottom: 0;
     left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .selected-album__inner {
-    display: flex;
-    height: 100%;
     overflow: auto;
+    border: 3px solid #a83;
+    background: black;
+    padding: 2em;
+    max-height: 80%;
+    display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
 }
 
 .selected-album__summary {
     text-transform: uppercase;
     padding: 0.5em;
-    background-color: #000;
     margin-bottom: 0.5em;
 }
 
 .selected-album__description {
     color: #fff;
-    padding: 0.5rem;
-    overflow: auto;
-    margin: 0;
+    padding: 0 0.5rem 2em;
+    margin: 0 auto;
     max-width: 40em;
-    background-color: #000;
+}
+
+.selected-album__cover {
+    display: none;
+}
+
+@media (min-width: 1200px) {
+    .selected-album__cover {
+        display: block;
+        width: 75vh;
+        max-width: 900px;
+        height: auto;
+    }
+
+    .selected-album__media {
+        width: 100%;
+        height: auto;
+    }
 }
 
 /* === /Selected album === */

package.json

@@ -1,7 +1,7 @@
 {
     "scripts": {
         "start": "cross-env NODE_ENV=development parcel index.html --public-url / --out-dir _build",
-        "build": "cross-env NODE_ENV=production parcel build index.html --public-url /urban-enigma/ --out-dir docs --no-source-maps --no-content-hash",
+        "build": "cross-env NODE_ENV=production parcel build index.html --public-url /bl/ --out-dir docs --no-source-maps --no-content-hash",
         "lint": "cross-env NODE_ENV=development prettier --check src/**/*"
     },
     "devDependencies": {
@@ -23,7 +23,8 @@
         "react-dom": "^16.8.5",
         "react-redux": "^6.0.1",
         "redux": "^4.0.1",
-        "redux-saga": "^1.0.2"
+        "redux-saga": "^1.0.2",
+        "symbol-observable": "^4.0.0"
     },
     "postcss": {
         "modules": false,

src/components/album-list.tsx

@@ -20,6 +20,6 @@ export default (props: Props) => {
 
 type Props = {
     albums: Array<interfaces.Album>;
-    handleOnClick: Function;
+    handleOnClick(album: interfaces.Album): void;
     blurred: boolean;
 };

src/components/album.tsx

@@ -30,7 +30,7 @@ export default (props: Props) => {
                 />
             </figure>
             <span>
-                #{id + 1}: {artist} - {song}, från "{title}" ({year})<br />
+                #{("00" + id).substr(-2, 2)}: {artist} - {song}, från "{title}" ({year})<br />
                 <small>✔️ {purchased_on}</small>
             </span>
         </article>
@@ -40,5 +40,5 @@ export default (props: Props) => {
 type Props = {
     key: number;
     album: Album;
-    handleOnClick: Function;
+    handleOnClick(album: Album): void;
 };

src/components/app.tsx

@@ -1,12 +1,14 @@
 import React from "react";
 import AlbumList from "../containers/album-list";
 import FilterInput from "../containers/filter-input";
+import SortSelect from "../containers/sort-select";
 import Modal from "../containers/modal";
 
 export default () => (
     <React.Fragment>
         <header>
             <h1>Brütal Legend</h1>
+            <SortSelect />
             <FilterInput />
         </header>
         <AlbumList />

src/components/filter-input.tsx

@@ -7,7 +7,10 @@ export default (props: Props) => {
             <input
                 type="text"
                 value={value}
-                onChange={evt => handleOnChange(evt.target.value)}
+                className="field"
+                onChange={(evt: { target: HTMLInputElement }) =>
+                    handleOnChange(evt.target.value)
+                }
                 placeholder="Filtrera på år, artist, låt, skivtitel ..."
             />
         </div>
@@ -16,5 +19,5 @@ export default (props: Props) => {
 
 type Props = {
     value: string;
-    handleOnChange: Function;
+    handleOnChange(filterValue: string): void;
 };

src/components/modal.tsx

@@ -2,28 +2,51 @@ import React from "react";
 import { Album } from "../interfaces";
 
 export default (props: Props) => {
-    const handleKeyPress = (e: KeyboardEvent, callback: Function) => {
-        console.log(e.charCode);
-        callback();
+    const handleKeyPress = (
+        keyPressed: string,
+        albumId: number,
+        close: Function
+        //goto: Function
+    ) => {
+        if (keyPressed === "Escape") {
+            close();
+        }
+        // } else if (keyPressed === "ArrowRight") {
+        //     goto(albumId, 1);
+        // } else if (keyPressed === "ArrowLeft") {
+        //     goto(albumId, -1);
+        // }
     };
 
-    const { album, handleOnClick } = props;
+    const { album, close /*goto*/ } = props;
     const { id, artist, title, songs, year, img, description } = album;
+
     if (id === undefined) {
         return "";
     }
-    // const imagePath = `assets/covers/${img}`;
+
+    const imagePath = `./covers/${img}`;
     const song = songs.join(", ");
+
+    document.onkeyup = (e: KeyboardEvent) =>
+        handleKeyPress(e.key, album.id, close /*goto*/);
+
     return (
         <div
-            className="selected-album"
+            className="selected-album blurred"
             tabIndex={0}
-            onClick={() => handleOnClick()}
-            onKeyPress={e => handleKeyPress(e, handleOnClick)}
+            onClick={() => close()}
         >
             <div className="selected-album__inner">
+                <figure className="selected-album__cover">
+                    <img
+                        src={imagePath}
+                        alt="cover"
+                        className="selected-album__media"
+                    />
+                </figure>
                 <span className="selected-album__summary">
-                    #{id + 1}: {artist} - {song}, från "{title}" ({year})
+                    #{("00" + id).substr(-2, 2)}: {artist} - {song}, från "{title}" ({year})
                     <br />
                 </span>
                 <div className="selected-album__description">
@@ -38,5 +61,6 @@ export default (props: Props) => {
 
 type Props = {
     album: Album;
-    handleOnClick(): void;
+    close(): void;
+    // goto(albumId: number, direction: number): void;
 };

src/components/sort-select.tsx

@@ -3,12 +3,17 @@ import React from "react";
 export default (props: Props) => {
     const { value, handleOnChange } = props;
     return (
-        <div hidden>
-            <label htmlFor="sortBy">Sortera efter</label>
+        <div>
+            <label htmlFor="sortBy" className="visuallyhidden">
+                Sortera efter
+            </label>
             <select
                 id="sortBy"
                 value={value}
-                onChange={evt => handleOnChange(evt.target.value)}
+                className="field"
+                onChange={(evt: { target: HTMLSelectElement }) =>
+                    handleOnChange(evt.target.value)
+                }
             >
                 <option value="id">Inköpsdatum</option>
                 <option value="artist">Artist</option>
@@ -20,5 +25,5 @@ export default (props: Props) => {
 
 type Props = {
     value: string;
-    handleOnChange: Function;
+    handleOnChange(sortKey: string): void;
 };

src/containers/album-list.ts

@@ -6,17 +6,20 @@ import { Album, State } from "../interfaces";
 const atos = (o: Album) =>
     [o.artist, o.title, o.songs.join(" "), o.year].join(" ").toLowerCase();
 
-const getAlbums = (albums: Array<Object>, filter: string) => {
+const getAlbums = (albums: Array<Object>, filter: string, sortKey: string) => {
     if (filter) {
         const term = filter.toLowerCase();
-        return albums.filter((album: Album) => atos(album).match(term));
+        albums = albums.filter((album: Album) => atos(album).match(term));
     }
-    return albums;
+    return [...albums].sort((a: Album, b: Album) =>
+        a[sortKey] > b[sortKey] ? 1 : -1
+    );
 };
 
 const mapStateToProps = (state: State) => ({
-    albums: getAlbums(state.albums, state.visibilityFilter),
-    blurred: "id" in state.selectedAlbum
+    albums: getAlbums(state.albums, state.visibilityFilter, state.sortKey),
+    blurred: "id" in state.selectedAlbum,
+    sortKey: state.sortKey
 });
 
 const mapDispatchToProps = (dispatch: Function) => ({

src/containers/modal.ts

@@ -8,7 +8,7 @@ const mapStateToProps = (state: State) => ({
 });
 
 const mapDispatchToProps = (dispatch: Function) => ({
-    handleOnClick: () => dispatch(unselectAlbum())
+    close: () => dispatch(unselectAlbum())
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Modal);

static/albums.json

@@ -1,208 +0,0 @@
-[
-  {
-    "id": 0,
-    "purchased_on": "2016-01-24",
-    "artist": "Sanctuary",
-    "songs": [
-      "Battle Angels"
-    ],
-    "title": "Refuge Denied",
-    "year": 1987,
-    "description": "Bandet bildades 1985 i Seattle. De hann med två plattor innan de upplöstes i början av 1990-talet (för att 18 år senare återförenas ...). De var gunstlingar hos Dave Mustaine, som axlade producentrollen på det här alldeles strålande debutalbumet.\n\nDet härliga ljudet av sent 1980-tal i kombination med höga falsetter som sopar banan med rätt många Power Metal-band som kom till scenen 20 år senare gör att mitt projekt får en bra start. Det episka omslaget är dessutom alldeles för bra för att komma till sin rätt på en läskärm eller ett CD-fodral.",
-    "img": "00.jpg"
-  },
-  {
-    "id": 1,
-    "purchased_on": "2016-01-31",
-    "artist": "Nitro",
-    "songs": [
-      "Machine Gunn Eddie"
-    ],
-    "title": "O.F.R.",
-    "year": 1989,
-    "description": "Bandet bildades 1987 i Hollywood och var aktiva fram till 1993. De gjorde bara två skivor, varav O.F.R. är deras debutalbum, delvis självproducerat.\n\nDe gick under etiketten \"Glam Metal\" och jag har svårt att själv bedöma huruvida detta är korrekt eller inte; jag uppskattar dock intensiteten, kreativiteten och mixen av grymtande, imponerande falsetter (det längsta falsettskriket är 32 sekunder!), dubbeltramp och de utflippade riffen.\n\nOmslaget är närmast att betrakta som \"utsökt så in i helvete\".",
-    "img": "01.jpg"
-  },
-  {
-    "id": 2,
-    "purchased_on": "2016-03-12",
-    "artist": "Omen",
-    "songs": [
-      "Axeman"
-    ],
-    "title": "Battle Cry",
-    "year": 1984,
-    "description": "Bandet bildades 1983 i Los Angeles och föll litet grann i glömska efter de fyra första skivorna 1984-1988, med bara sporadiska skivsläpp efter det.\n\nDe brukar räknas till en av förfäderna inom Power Metal och The Axeman, det första spåret på debutskivan \"Battle Cry\" är inget undantag, med intro i form av en viskande mansröst som övergår till tuggande riff med symfoniska inslag.\n\nOmslaget hade gjort Rhapsody (OF FIRE) stolta, och många fler avundsjuka.",
-    "img": "02.jpg"
-  },
-  {
-    "id": 3,
-    "purchased_on": "2016-03-20",
-    "artist": "KISS",
-    "songs": [
-      "God of Thunder"
-    ],
-    "title": "Destroyer",
-    "year": 1976,
-    "description": "KISS är ett band som nästan är omöjligt att missa, men likväl: de bildades 1973 i New York City och är mest kända för sina påkostade scenframträdanden och utsmyckade scenpersonligheter.\n\n\"Destroyer\" är den fjärde LPn och den har ett gäng betydligt mer kända låtar än God of Thunder. Jag har alltid uppskattat Brütal Legend för att man valt denna låt istället, då den passar oerhört bra in-game.\n\nOmslaget? Sjukt episkt, ett av de snyggaste KISS har i sin katalog i mitt tycke.",
-    "img": "03.jpg"
-  },
-  {
-    "id": 4,
-    "purchased_on": "2015-01-01",
-    "artist": "Ozzy Osbourne",
-    "songs": [
-      "Mr. Crowley"
-    ],
-    "title": "Bizzard of Ozz",
-    "year": 1980,
-    "description": "En riktig klassiker! Mr Crowley är den avslutande låten på Ozzys debutalbum som soloartist. Min relation till skivan präglas främst av att det från början var tänkt att vara bandet The Blizzard of Ozzs debutskiva, men ibland ryter management (läs: Fru Ozzbourne ... ) ifrån.\n\nJag gillar att man valde att ta med Mr Crowley, då denna låt mer än någon annan på debutskivan uppvisar vad Randy Rhoads var kapabel till och vilken ribba han satte för framtida gitarrister för Ozzy. RIP. I spelet används låten högst förträffligt i main plot.\n\nFör en gångs skull är det ett omslag som är högst tvivelaktigt. Jag kan sträcka mig till att kalla det \"fulsnyggt\" ...",
-    "img": "04.jpg"
-  },
-  {
-    "id": 5,
-    "purchased_on": "2015-01-01",
-    "artist": "Running Wild",
-    "songs": [
-      "Riding the Storm"
-    ],
-    "title": "Death or Glory",
-    "year": 1989,
-    "description": "Running Wild bildades 1976 och hade 2-3 skivor med hedniska teman innan de övergick till sitt kännetecken: piratflaggor, nitar och speed metal, för att senare på 90-talet dra åt power metal-hållet. De är ett av de viktigaste banden under min uppväxt.\n\n\"Death or Glory\" är en av deras mest kända skivor, och Riding the storm öppnar den skivan med ett härligt intro och exemplariska riff.\n\nOmslaget är supernice.",
-    "img": "05.jpg"
-  },
-  {
-    "id": 6,
-    "purchased_on": "2016-07-09",
-    "artist": "Diamond Head",
-    "songs": [
-      "Am I Evil"
-    ],
-    "title": "Am I Evil",
-    "year": 1987,
-    "description": "Diamond Head bildades 1976 i England och anses i efterhand vara en av pionärerna inom NWOBHM. De släppte ett gäng skivor och splittrades för första gången 1985, för att sedan återförenas och splittras igen några gånger. Det är under den första tiden av inaktivitet som samlingsalbumet \"Am I Evil\" släpptes.\n\n\"Am I Evil\" är en låt från debutskivan \"Lightning to the Nations\" (1980) men har spelats in i flera versioner, där Metallicas cover troligtvis är den som är den mest kända. I Brütal Legend användes den version som släpptes på samlingsalbumet, vilket är en nyinspelad version av bandet själva. Personligen är detta min favorit av de versioner jag lyssnat på.\n\nOmslaget är så fint att det knappt ens går att beskriva. Färgsättningen, motiven, bandlogon ... ren hårdrockskärlek! Det är den här typen av omslag som var inspiration till hur Brütal Legends \"Age of Metal\" designades.",
-    "img": "06.jpg"
-  },
-  {
-    "id": 7,
-    "purchased_on": "2016-07-10",
-    "artist": "Anvil",
-    "songs": [
-      "March of the Crabs",
-      "Tag Team"
-    ],
-    "title": "Metal on Metal",
-    "year": 1982,
-    "description": "Anvil är ett kanadeniskt band, bildat 1978, som efter några bra år under tidigt 1980-tal föll i glömska. De fick förnyat intresse hos fans efter dokumentären \"Anvil! The Story of Anvil\" som producerades av en av bandets roadies.\n\nDet här är den första av flera skivor jag skriver om som har mer än en låt i spelet Brütal Legend, och det är välförjänt. Detta är med klassisk Heavy Metal-mått mätt en skiva som åldrats oerhört väl. Sång, riff, gitarrsolon och produktion är fläckfri.\n\nOmslaget är charmigt och tidsenligt, med en sväng av humor.",
-    "img": "07.jpg"
-  },
-  {
-    "id": 8,
-    "purchased_on": "2016-07-29",
-    "artist": "Black Sabbath",
-    "songs": [
-      "Children of the Grave"
-    ],
-    "title": "Masters of Reality",
-    "year": 1971,
-    "description": "Den första och ej sista låten med Black Sabbath, detta fantastiskt inflytelserika band som hade sin klassiska period mellan 1970 och 1975. \"Masters of Reality\" är den tredje skivan släppt inom loppet av två år, och är den första där bandet spelar nedstämt.\n\nChildren of the Grave är en odödlig Black Sabbath-låt och passar utmärkt i Brütal Legend, med dess tuggande bass, hårda trummor och primitivt distade gitarriff.",
-    "img": "08.jpg"
-  },
-  {
-    "id": 9,
-    "purchased_on": "2016-10-30",
-    "artist": "Budgie",
-    "songs": [
-      "Breadfan"
-    ],
-    "title": "Never Turn Your Back on a Friend",
-    "year": 1973,
-    "description": "Rockbandet Budgie bildades 1967 i Cardiff, Wales och räknas till ett av de första Heavy Metal-banden. De spelade tillsammans i 20 år och har sedan återförenats temporärt ett par gånger.\n\nLåten \"Breadfan\" är förmodligen mest känd för att Metallica gjort en cover på den.\n\nOmslaget är otroligt snyggt!",
-    "img": "09.jpg"
-  },
-  {
-    "id": 10,
-    "purchased_on": "2016-12-28",
-    "artist": "Savatage",
-    "songs": [
-      "Hall of the Mountain King"
-    ],
-    "title": "Hall of the Mountain King",
-    "year": 1987,
-    "description": "Savatage bildades 1978 och hade inledningsvis sval framgång. Denna skiva markerade ett skifte i musikalisk inriktning och är också den första av fyra skivsläpp som anses vara bandets bästa period. Nämnda period avslutades dessvärre på grund av att en grundande medlem dödades i en trafikolycka 1993.\n\nTitelspåret är episk Heavy Metal, har progressiva inslag och är full av energi. Omslaget är så bra som något omslag kunde vara med allt på elvan under 1980-talet.",
-    "img": "10.jpg"
-  },
-  {
-    "id": 11,
-    "purchased_on": "2017-01-03",
-    "artist": "Metal Church",
-    "songs": [
-      "Metal Church"
-    ],
-    "title": "Metal Church",
-    "year": 1984,
-    "description": "Mer representation av amerikanskt 1980-tal. Metal Church kombinerar Heavy Metal med Speed Metal, och redan på denna debutplatta finns mycket element som 20 år senare skulle bli typiska för Power Metal. Det sägs att Metallica gick i god för Metal Church hos Elekta, det skivbolag som gav ut debuten. Bandet lades på is för första gången 1994, men kom alltid tillbaka och räknas idag som aktivt, med 11 skivor släppta.\n\nOmslaget är helt otroligt jävla snyggt. Det är exakt den här typen av skivomslag som inspirerade Double Fines design av World of Metal.",
-    "img": "11.jpg"
-  },
-  {
-    "id": 12,
-    "purchased_on": "2017-01-25",
-    "artist": "Ostrogoth",
-    "songs": [
-      "Queen of Desire"
-    ],
-    "title": "Ecstasy and Anger",
-    "year": 1984,
-    "description": "Ostrogoth var ett NWOBHM-band från Ghent, Belgien som var aktivt 1980-1988, för att sedan lägga ner efter tre skivor. Återföreningar har skett men inte med bandets originalmedlemmar.\n\nDetta är ett band som lånat från andra mer framgångsrika band, men de gör det snyggt och bra. Låten ifråga har ett Van Halen-inspirerat intro och en stark refräng, varvat med det sedvanlig gitarr-onani.\n\nOmslaget, med en guld- och silverfärgad skorpion, har sin charm.",
-    "img": "12.jpg"
-  },
-  {
-    "id": 13,
-    "purchased_on": "2017-05-18",
-    "artist": "Coroner",
-    "songs": [
-      "Skeleton on Your Shoulder"
-    ],
-    "title": "Punishment for Decadence",
-    "year": 1988,
-    "description": "Coroner är ett experimentiellt Thrash Metal-band från Zurich, Schweiz som lade ner 1996 utan att riktigt nått någon publik utanför Europa, för att återförenas 2011. Bandmedlemmarna hade lärt känna varandra som roadies till Celtic Frost.\n\nOmslaget är inte så jättespännande men det beskriver låten riktigt bra.",
-    "img": "13.jpg"
-  },
-  {
-    "id": 14,
-    "purchased_on": "2017-07-27",
-    "artist": "Riot",
-    "songs": [
-      "Narita",
-      "Road Racin'"
-    ],
-    "title": "Narita",
-    "year": 1979,
-    "description": "Heavy Metal-bandet Riot bildades i New York City 1975 och är sedan 2012 känd som Riot V. Bandet har haft två avbrott och hade sin storhetstid i början av 1980-talet, från vilken ingen originalmedlem består.\n\nNarita är bandets andra skiva och har två låtar med i spelet, båda relaterade till Ironheade: klassisk old school Heavy Metal med 1970-talets mjuka hörn.\n\nOmslaget föreställer en Sumobrottare i spindelmannen-spandex och illerhuvud som dansar över ett fält av människokranium, hållandes en stridsyxa. I bakgrunden syns ett snötäckt fjäll och ett anländande flygplan.",
-    "img": "14.jpg"
-  },
-  {
-    "id": 15,
-    "purchased_on": "2017-07-28",
-    "artist": "Motörhead",
-    "songs": [
-      "(We are) The Roadcrew"
-    ],
-    "title": "Ace of Spades",
-    "year": 1982,
-    "description": "Motörhead bildades 1975 och var aktivt fram tills att dess frontman Lemmy Kilmister, en sann kultklenod inom hårdrocken, gick bort 2015. Det är ingen tillfällighet att så många låtar av Motörhead är med i ett spel som Brütal Legend.\n\n\"Ace of Spades\" är den fjärde skivan och inledde Motörheads 1980-tal. Jag förknippade den tidigare med dess titelspår, men (We Are) The Roadcrew, en låt som skrevs för att särskilt hylla bandets roadies, är mycket passande till spelets berättelse.\n\nDet tidlösa omslaget är någon sorts variant av spaghetti-western med skinnställ.",
-    "img": "15.jpg"
-  },
-  {
-    "id": 16,
-    "purchased_on": "2019-03-16",
-    "artist": "Angel Witch",
-    "songs": [
-      "Angel Witch"
-    ],
-    "title": "Angel Witch",
-    "year": 1980,
-    "description": "Brittiska Angel Witch var en del av NWOBHM-vågen och bildades 1979. Efter 3 album på tidigt 1980-tal splittrades och återförenades bandet några gånger, med nya medlemmar utöver dess sångare som också är huvudsaklig kompositör och manager. De är har idag många tunga erkännanden och håller fortfarande igång, med den fjärde skivan släppt 2012.\n\nOmslaget är demoniskt och sataniskt, vilket passar mycket bra i vinylformatet.",
-    "img": "16.jpg"
-  }
-]

static/dummy-data/albums.json

@@ -0,0 +1,68 @@
+[
+    {
+        "id": 6,
+        "img": "05.jpg",
+        "title": "Death or Glory",
+        "artist": "Running Wild",
+        "album": "Death or Glory",
+        "year": 1989,
+        "purchased_on": "2016-04-09",
+        "description": "",
+        "songs": ["Riding the Storm"]
+    },
+    {
+        "id": 5,
+        "img": "04.jpg",
+        "title": "Blizzard of Ozz",
+        "artist": "Ozzy Osbourne",
+        "album": "Blizzard of Ozz",
+        "year": 1980,
+        "purchased_on": "2016-04-05",
+        "description": "",
+        "songs": ["Mr Crowley"]
+    },
+    {
+        "id": 4,
+        "img": "03.jpg",
+        "title": "Destroyer",
+        "artist": "KISS",
+        "album": "Destroyer",
+        "year": 1976,
+        "purchased_on": "2016-03-19",
+        "description": "",
+        "songs": ["God of Thunder"]
+    },
+    {
+        "id": 3,
+        "img": "02.jpg",
+        "title": "Battle Cry",
+        "artist": "Omen",
+        "album": "Battle Cry",
+        "year": 1984,
+        "purchased_on": "2016-03-12",
+        "description": "",
+        "songs": ["The Axeman"]
+    },
+    {
+        "id": 2,
+        "img": "01.jpg",
+        "title": "O.F.R.",
+        "artist": "Nitro",
+        "album": "O.F.R.",
+        "year": 1989,
+        "purchased_on": "2016-01-31",
+        "description": "",
+        "songs": ["Machine Gunn Eddie"]
+    },
+    {
+        "id": 1,
+        "img": "00.jpg",
+        "title": "Refuge Denied",
+        "artist": "Sanctuary",
+        "album": "Refuge Denied",
+        "year": 1987,
+        "purchased_on": "2016-01-24",
+        "description": "",
+        "songs": ["Battle Angels"]
+    }
+]