Making GamePreview great again

Fonsole · Aug 20, 2017 · 57ea598 · 57ea598
1 parent eed6b15
commit 57ea598
Show file tree

Hide file tree

Showing 3 changed files with 194 additions and 50 deletions.
diff --git a/src/renderer/assets/localization/en.json b/src/renderer/assets/localization/en.json
@@ -41,6 +41,11 @@
   "GameList_local_games": "LOCAL GAMES",
   "GameListEntry_create": "CREATE GAME",
   "GamePreview_open": "OPEN",
+  "GamePreview_publish": "publish",
   "GamePreview_delete": "delete",
-  "GamePreview_select": "select a workspace"
+  "GamePreview_select": "select a workspace",
+  "GamePreview_game_name": "game name",
+  "GamePreview_game_name_placeholder": "name placeholder",
+  "GamePreview_game_description": "game description",
+  "GamePreview_game_description_placeholder": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
 }
diff --git a/src/renderer/components/Generic/FButton.vue b/src/renderer/components/Generic/FButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="fbutton" :style="{width: this.width + 'vh', height: this.height + 'vh'}"
+  <div id="fbutton" :style="{width: getWidth, height: this.height + 'vh'}"
   :class="`${ this.type }` + ' ' + `${ this.disabled ? 'disabled' : 'enabled' }`">
     <div id="background"></div>
     <div id="button" :style="{fontSize: this.height/2 + 'vh'}" @click="handleClick">
@@ -32,6 +32,14 @@
     data: () => ({
       colours: ['#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423'],
     }),
+    computed: {
+      getWidth() {
+        if (this.width === 'auto') {
+          return '100%';
+        }
+        return `${this.width}vh`;
+      },
+    },
     methods: {
       handleClick(e) {
         this.$emit('click', e);
@@ -44,14 +52,62 @@
   $primary-background-width: 23.5vh
 
   #fbutton
-    margin: 10px
+    // margin: 10px
 
     & > div
       position: absolute
       top: 50%
       left: 50%
       transform: translate(-50%, -50%)
 
+    &.delete
+      box-shadow: 0px 5px 0px #222
+      background: #333
+      transition: transform 0.15s, box-shadow 0.15s
+      transform: rotateX(0deg) translateY(0)
+      -webkit-font-smoothing: antialiased
+
+      &:hover
+        box-shadow: 0px 5px 0px #222
+        transform: rotateX(0deg) translateY(0)
+
+      &:hover:active
+        box-shadow: 0 1px 0 #222
+        background: #333
+        transition: transform 0.05s, box-shadow 0.05s
+        transform: rotateX(15deg) translateY(4px)
+
+      > #background
+        visibility: collapse
+
+      &.disabled
+        box-shadow: 0px 5px 0px #222
+        opacity: 0.5
+
+    &.publish
+      box-shadow: 0px 5px 0px #1f2142
+      background: #3f4487
+      transition: transform 0.15s, box-shadow 0.15s
+      transform: rotateX(0deg) translateY(0)
+      -webkit-font-smoothing: antialiased
+
+      &:hover
+        box-shadow: 0px 5px 0px #1f2142
+        transform: rotateX(0deg) translateY(0)
+
+      &:hover:active
+        box-shadow: 0 1px 0 #1f2142
+        background: #3f4487
+        transition: transform 0.05s, box-shadow 0.05s
+        transform: rotateX(15deg) translateY(4px)
+
+      > #background
+        visibility: collapse
+
+      &.disabled
+        box-shadow: 0px 5px 0px #283329
+        opacity: 0.5
+
     &.play
       box-shadow: 0px 5px 0px #335E38
       background: #48834B

diff --git a/src/renderer/components/Workshop/GamePreview.vue b/src/renderer/components/Workshop/GamePreview.vue
@@ -1,44 +1,66 @@
 <template>
   <div class="game-preview" v-if="gameName !== ''">
-    <div class="game-title">
-      {{ gameName }}
-    </div>
-    <div class="key-value-pair game-row-working-directory">
-      <div>WORKING DIRECTORY:</div>
-      <div>{{ gamePath }}</div>
-    </div>
-
-    <div class="key-value-pair game-row-change-date">
-      <div>CHANGE DATE:</div>
-      <div>{{ gameName && new Date() }}</div>
+    <div class="left">
+      <div class="nameAndDescription">
+        <h2>{{ $localize('game_name') }}</h2>
+        <div class="divider"></div>
+        <textarea maxlength="32" rows="1"
+        :placeholder="$localize('game_name_placeholder')" class="name">
+        </textarea>
+        <h2>{{ $localize('game_description') }}</h2>
+        <div class="divider"></div>
+        <textarea rows="8" :placeholder="$localize('game_description_placeholder')"
+        class="description">
+        </textarea>
+      </div>
     </div>
-
-    <div class="key-value-pair game-row-creation-date">
-      <div>CREATION DATE:</div>
-      <div>{{ gameName && new Date() }}</div>
+    <div class="right">
+      <div class="previewImage">
+        <img src="~@/assets/testgame2.jpg">
+      </div>
+      <div class="key-value-pair game-row-working-directory">
+        <div>DIRECTORY:</div>
+        <div>{{ gamePath }}</div>
+      </div>
+      <div class="key-value-pair game-row-change-date">
+        <div>CHANGE DATE:</div>
+        <div>{{ gameName && new Date() }}</div>
+      </div>
+      <div class="key-value-pair game-row-creation-date">
+        <div>CREATION DATE:</div>
+        <div>{{ gameName && new Date() }}</div>
+      </div>
+      <fbutton
+        class="button open-game-workspace"
+        height="8"
+        width="auto"
+        type="play"
+        :disabled="!gamePath"
+        @click="openWorkspace"
+      >
+        {{ $localize('open') }}
+      </fbutton>
+      <fbutton
+        class="button publish-game"
+        height="8"
+        width="auto"
+        type="publish"
+        :disabled="!gamePath"
+        @click="openWorkspace"
+      >
+        {{ $localize('publish') }}
+      </fbutton>
+      <fbutton
+        class="button delete-game"
+        height="8"
+        width="auto"
+        type="delete"
+        :disabled="!gamePath"
+        @click="openWorkspace"
+      >
+        {{ $localize('delete') }}
+      </fbutton>
     </div>
-
-    <fbutton
-      class="open-game-workspace"
-      height="8"
-      width="40"
-      type="play"
-      :disabled="!gamePath"
-      @click="openWorkspace"
-    >
-      {{ $localize('open') }}
-    </fbutton>
-
-    <fbutton
-      class="delete-game"
-      height="8"
-      width="40"
-      type="uninstall"
-      :disabled="!gamePath"
-      @click="openWorkspace"
-    >
-      {{ $localize('delete') }}
-    </fbutton>
   </div>
   <div class="placeholder" v-else-if="gameName === ''">
     <a class="logoContainer">
@@ -84,47 +106,108 @@
 <style lang="sass" scoped>
   @import "~@/assets/styles/global.sass"
 
+  h2
+    font-size: 4.5vh
+    margin: 0
+
   .placeholder
     display: flex
-    background-color: rgba(0, 0, 0, 0.4)
+    background-color: rgba(0, 0, 0, 0.6)
     align-items: center
     justify-content: center
     flex-direction: column
 
   .game-preview
     display: flex
-    background-color: rgba(0, 0, 0, 0.4)
-    flex-direction: column
+    background-color: rgba(0, 0, 0, 0.6)
+    flex-direction: row
+
+    .left
+      flex: 1 1 0
+      display: flex
+      flex-direction: column
+      margin: 2vh
+
+      .nameAndDescription
+        flex: 1 1 auto
+
+        textarea
+          resize: none
+          width: 100%
+          background: none
+          outline: none
+          font-family: zekton
+          text-transform: uppercase
+          font-size: 3.5vh
+          border: none
+          padding: 1px
+          margin-bottom: 1vh
+          color: white
+          overflow: hidden
+
+          &.description
+            font-size: 2.5vh
+            text-transform: none
+
+          &::placeholder
+            color: #6B90B5
+
+          &:focus
+            background-color: rgba(0, 0, 0, 0.4)
+            border: solid 1px rgba(0, 0, 0, 0.4)
+            border-radius: 1vh
+            outline: none
+            padding: 0
+
+            &::placeholder
+              // opacity: 0.0
+    .right
+      flex: 1 1 0
+      display: flex
+      flex-direction: column
+      padding: 0.75vw
+      max-width: 22.5vw
+      background-color: rgba(0, 0, 0, 0.6)
+
+      .previewImage
+        flex: 0 1 auto
+        margin-bottom: -0.25vh
+
+        img
+          width: 100%
+          box-shadow: 0 0 0 1px #3c3c3c
 
   .game-title
     align-self: center
     font-size: 3vw
     font-weight: 900
     height: 3.5vw
 
-  .open-game-workspace
+  .button
     align-self: flex-end
-    // Temporary !important use. Should be removed as well as id on reusable component
-    margin-top: auto !important
     margin-bottom: 2vh !important
 
+  .open-game-workspace
+    margin-top: auto !important
+
   .key-value-pair
     width: 100%
     display: flex
     justify-content: space-between
+    background-color: rgba(0, 0, 0, 0.6)
+    box-shadow: 0 0 0 1px #161616
 
     // Both
     > *
-      font-size: 2vw
+      font-size: 1vw
 
     // Key
     > *:first-child
-      margin-left: 12px
+      margin-left: 0.5vw
 
     // Value
     > *:last-child
-      margin-right: 12px
+      margin-right: 0.5vw
       color: #dfdfdf
-      // A fallback used to make element stick to right side if it goes multiline
       margin-left: auto
 </style>