Modify game profile design

package.json

@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "compression": "^1.7.1",
-    "modern-normalize": "^1.0.0",
     "node-fetch": "^2.6.1",
     "polka": "next",
     "sirv": "^1.0.0"
@@ -28,6 +27,8 @@
     "@rollup/plugin-replace": "^2.2.0",
     "@rollup/plugin-url": "^5.0.0",
     "autoprefixer": "^10.2.3",
+    "clipboard": "^2.0.6",
+    "modern-normalize": "^1.0.0",
     "node-sass": "^5.0.0",
     "postcss": "^8.2.4",
     "rollup": "^2.3.4",

src/node_modules/components/CopyArea.svelte

@@ -0,0 +1,13 @@
+<script>
+    export let value;
+    let copyarea;
+
+    let copy = () => {
+        copyarea.select();
+        copyarea.setSelectionRange(0, 99999); 
+        document.execCommand("copy");
+        console.log(copyarea.value);
+    };
+</script>
+
+<input type="text" class="copyarea" on:click={copy} bind:value={value} bind:this={copyarea} readonly/>

src/node_modules/components/GameListItem.svelte

@@ -1,13 +1,15 @@
 <script>
+    import CopyArea from "components/CopyArea.svelte";
+
     export let name, link, gameid, playername;
 </script>
 
-<div class="media-item">
+<div class="game-item">
-    <div class="media-item__title">
+    <div class="game-item__title">
-        <p class="media-item__caption"><a href={link}>{name}</a></p>
+        <p class="game-item__caption"><a href={link}>{name}</a></p>
     </div>
-    <div class="media-item__content">
+    <div class="game-item__content">
-        <p>Player Name: {playername}</p>
+        <p><CopyArea value={playername} /><span class="game-item__icon material-icons">person</span></p>
-        <p>ID: {gameid}</p>
+        <p><CopyArea value={gameid} /><span class="game-item__icon material-icons">code</span></p>
     </div>
 </div>

src/style/app.scss

@@ -13,3 +13,5 @@
 @import './components/gallery';
 @import './components/mediaitem';
 @import './components/projectitem';
+@import './components/gameitem';
+@import './components/copyarea';

src/style/components/_copyarea.scss

@@ -0,0 +1,8 @@
+.copyarea {
+    background: $bg-primary;
+    color: $accent-primary;
+    padding: 0.5rem;
+    border: 1px solid $accent-primary;
+    font-family: 'Courier New', Courier, monospace;
+    cursor: pointer;
+}

src/style/components/_gameitem.scss

@@ -0,0 +1,34 @@
+.game-item {
+    padding: 0.25rem 1rem;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    @include transition;
+
+    &:hover {
+        background-color: $bg-secondary;
+    }
+    
+    &__title {
+        flex-grow: 1;
+    }
+    &__caption {
+        font-size: $text-2xl;
+        @include my(0.25rem);
+    }
+    
+    &__content {
+        @include my(0.5rem);
+        display: block;
+
+        p {
+            @include my(0.25rem);
+            text-align: right;
+        }
+        flex-shrink: 1;
+    }
+    &__icon {
+        padding: 0.5rem;
+        vertical-align: middle;
+    }
+}

yarn.lock

@@ -1175,6 +1175,15 @@ clean-css@^4.2.1:
   dependencies:
     source-map "~0.6.0"
 
+clipboard@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376"
+  integrity sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 cliui@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
@@ -1337,6 +1346,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
+
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -1561,6 +1575,13 @@ globule@^1.0.0:
     lodash "~4.17.10"
     minimatch "~3.0.2"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
+  dependencies:
+    delegate "^3.1.2"
+
 graceful-fs@^4.1.2, graceful-fs@^4.2.3:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
@@ -2487,6 +2508,11 @@ scss-tokenizer@^0.2.3:
     js-base64 "^2.1.8"
     source-map "^0.4.2"
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
+
 "semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.5.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
@@ -2775,6 +2801,11 @@ terser@^5.0.0:
     source-map "~0.7.2"
     source-map-support "~0.5.19"
 
+tiny-emitter@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"