Some final adjustments

- Image for the social metadata - Remove unused CSS - Write documentation in the README - Adjust Riichi UI theme
EmeraldCoder · Jun 22, 2024 · d32b3b6 · d32b3b6
1 parent 28bcc8e
commit d32b3b6
Show file tree

Hide file tree

Showing 11 changed files with 77 additions and 556 deletions.
diff --git a/README.md b/README.md
@@ -1,29 +1,69 @@
-# riichi-wait-trainer
+# Riichi Wait Trainer
 
-## Project setup
-```
-yarn install
-```
+A web application designed to help you train and identify waits of a tenpai hand in Riichi Mahjong (Japanese Mahjong).
 
-### Compiles and hot-reloads for development
-```
-yarn serve
-```
+![Application](./public/og-image.png)
+
+## Links
+
+* [Live Application](https://tools.phil.moe/riichi/wait-trainer)
+
+## Development
 
-### Compiles and minifies for production
+This project utilizes Vue.js (3.x) with Vite and Yarn (1.x) for dependency management.
+
+### Getting Started
+
+After cloning the repository, install the necessary dependencies with:
+
+``` bash
+yarn
 ```
+
+### Building the Application
+
+To build the application, run:
+
+```bash
 yarn build
 ```
 
-### Run your unit tests
-```
-yarn test:unit
-```
+### Development Mode
+
+To start the application in development mode, use:
 
-### Lints and fixes files
+```bash
+yarn dev
 ```
+
+### Other Useful Commands
+
+* Run the linter on the code:
+
+```bash
 yarn lint
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/)
+### Project Structure
+
+* `/.github/workflows`: Contains .yml configurations for GitHub Actions.
+* `/deploy`: Kubernetes .yml configurations for deployment.
+* `/dist`: Output folder for builds.
+* `/nginx`: NGINX configuration files.
+* `/public`: Static assets to be copied during the build process.
+* `/src`: Main application code.
+
+## Github Actions
+
+### Continuous Integration
+
+Triggered by commits or pull requests on the master branch. This action verifies that the project builds correctly and adheres to linter specifications.
+
+### Publish
+
+Triggered by the creation of a release. This action builds the application inside a Docker image, pushes it to the image repository, and updates the Kubernetes cluster for automatic deployment of the new release.
+
+## Credits
+
+* Mahjong related components are from [@emeraldcoder/riichi-ui-vue](https://www.npmjs.com/package/@emeraldcoder/riichi-ui-vue)
+* Tile images are sourced from [FluffyStuff/riichi-mahjong-tiles](https://github.com/FluffyStuff/riichi-mahjong-tiles)
diff --git a/index.html b/index.html
@@ -7,12 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="Web application to train yourself at identifying waits of a tenpai hand at Riichi Mahjong (Japanese Mahjong).">
 
-  <!-- <meta name="twitter:card" content="summary_large_image" /> -->
   <meta property="og:title" content="Riichi Mahjong Wait Trainer">
   <meta property="og:description" content="Web application to train yourself at identifying waits of a tenpai hand at Riichi Mahjong (Japanese Mahjong).">
   <meta property="og:type" content="website">
   <meta property="og:url" content="<%- VITE_BASE_URL_FULL %>">
-  <!-- <meta property="og:image" content="<%= VITE_BASE_URL_FULL %>og-image.png"> -->
+  <meta property="og:image" content="<%= VITE_BASE_URL_FULL %>og-image.png">
 
   <link rel="manifest" href="/site.webmanifest">
   <meta name="theme-color" content="#1b5e20">

diff --git a/package.json b/package.json
@@ -1,16 +1,14 @@
 {
   "name": "riichi-wait-trainer",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "private": true,
   "license": "MIT",
   "type": "module",
   "scripts": {
     "dev": "vite --host",
     "build": "vite build",
     "preview": "vite preview --port 5050",
-    "test:unit": "vitest run",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --ignore-path .gitignore",
-    "watch:test:unit": "vitest"
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --ignore-path .gitignore"
   },
   "dependencies": {
     "@emeraldcoder/riichi-ui-vue": "0.0.0-beta.5",
@@ -30,7 +28,6 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-vue": "^8.2.0",
     "vite": "^5.0.0",
-    "vitest": "^1.0.0",
     "vite-plugin-html": "^3.0.0"
   }
 }
diff --git a/public/og-image.png b/public/og-image.png
diff --git a/src/assets/riichi-ui.theme.css b/src/assets/riichi-ui.theme.css
@@ -0,0 +1,3 @@
+:root {
+  --riichi-tile-border-color: var(--dark-green);
+}
diff --git a/src/assets/style.css b/src/assets/style.css
@@ -31,12 +31,6 @@ FUNCTIONAL CSS
   padding-right: var(--gap-size);
 }
 
-.m-r {
-  margin-right: var(--gap-size);
-}
-.m-r-2 {
-  margin-right: calc(var(--gap-size) * 2);
-}
 .m-l {
   margin-left: var(--gap-size);
 }
@@ -46,29 +40,10 @@ FUNCTIONAL CSS
 .m-t-2 {
   margin-top: calc(var(--gap-size) * 2);
 }
-.m-b {
-  margin-bottom: var(--gap-size);
-}
-
-.bold {
-  font-weight: bold;
-}
-
-.txt-2 {
-  font-size: 2rem;
-  line-height: 2rem;
-}
 
 .txt-center {
   text-align: center;
 }
-.txt-right {
-  text-align: right;
-}
-
-.responsive {
-  overflow-y: auto;
-}
 
 .row {
   display: flex;
@@ -94,25 +69,15 @@ FUNCTIONAL CSS
   gap: 0;
 }
 
-.gap-2 {
-  gap: calc(var(--gap-size) * 2);
-}
-
 .gap-txt {
   gap: 0.5em;
 }
 
-@media (max-width: 959px) {
-  .no-mobile {
-    display: none;
-  }
-}
-
 /* ---
 TITLES
 --- */
 
-h1, h2, h3 {
+h1, h2 {
   margin: 0;
 }
 
@@ -178,95 +143,12 @@ button:hover:enabled {
   background: var(--green-hover);
 }
 
-button.active {
-  background: var(--orange);
-}
-button.active:hover:enabled {
-  background: var(--orange-hover);
-}
-
-button.text {
-  background: none;
-}
-
 button.large {
   font-size: 1.5rem;
   font-weight: bold;
   line-height: 2.5rem;
 }
 
-.btn-group {
-  display: flex;
-}
-.btn-group button {
-  flex: 1;
-  border-radius: 0;
-  border-right-width: 0;
-}
-.btn-group button:first-child {
-  border-top-left-radius: var(--radius);
-  border-bottom-left-radius: var(--radius);
-}
-.btn-group button:last-child {
-  border-top-right-radius: var(--radius);
-  border-bottom-right-radius: var(--radius);
-  border-right-width: 1px;
-}
-
-.btn-groups .btn-group button {
-  border-radius: 0;
-  border-bottom-width: 0;
-}
-.btn-groups .btn-group:first-of-type button:first-child {
-  border-top-left-radius: var(--radius);
-}
-.btn-groups .btn-group:first-of-type button:last-child {
-  border-top-right-radius: var(--radius);
-}
-.btn-groups .btn-group:last-of-type button {
-  border-bottom-width: 1px;
-}
-.btn-groups .btn-group:last-of-type button:first-child {
-  border-bottom-left-radius: var(--radius);
-}
-.btn-groups .btn-group:last-of-type button:last-child {
-  border-bottom-right-radius: var(--radius);
-}
-
-.btn-groups.with-labels {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  align-items: center;
-}
-.btn-groups.with-labels label {
-  grid-column: 1;
-  grid-row: auto;
-  text-align: right;
-  padding-right: 0.5rem;
-}
-.btn-groups.with-labels .btn-group {
-  grid-column: 2;
-  grid-row: auto;
-}
-
-.btn-group-column {
-  display: flex;
-  flex-direction: column;
-}
-.btn-group-column button {
-  border-radius: 0;
-  border-bottom-width: 0;
-}
-.btn-group-column button:first-child {
-  border-top-right-radius: var(--radius);
-  border-top-left-radius: var(--radius);
-}
-.btn-group-column button:last-child {
-  border-bottom-right-radius: var(--radius);
-  border-bottom-left-radius: var(--radius);
-  border-bottom-width: 1px;
-}
-
 /* ---
 HEADER
 --- */
@@ -304,39 +186,4 @@ main {
   */
   padding-top: calc((var(--gap-size) * 3.5) + 1.3rem);
   padding-bottom: var(--gap-size);
-}
-
-/* ---
-TABLES
---- */
-
-table {
-  border: none;
-  border-collapse: collapse;
-  width: 100%;
-}
-table tbody tr td,
-table tbody tr th {
-  padding: calc(var(--gap-size) / 2);
-}
-
-/* this is will probably broke the calculation details tables */
-
-/* table tbody tr:nth-child(even) td,
-table tbody tr:nth-child(even) th {
-  background: var(--green);
-} */
-
-/* ---
-TEXTBOXES
---- */
-
-.txt-input {
-  font-size: 1rem;
-  line-height: 1;
-  padding: 0.5rem;
-  border: 1px solid var(--dark-green);
-  border-radius: 0;
-  background: rgba(255, 255, 255, 0.5);
-  outline-color: var(--orange);
 }
diff --git a/src/components/AnswerInput.vue b/src/components/AnswerInput.vue
@@ -49,7 +49,7 @@ function toggleTileSelection (tile) {
 
 <style scoped>
 .tile--selected {
-  border-color: orange;
+  border-color: var(--orange);
   position: relative;
 }
 .tile--selected::after {
@@ -59,7 +59,10 @@ function toggleTileSelection (tile) {
   height: 100%;
   top: 0;
   left: 0;
-  background: gold;
+  background: var(--orange);
   opacity: 0.3;
 }
+.tile--selected:hover::after {
+  background: var(--orange-hover);
+}
 </style>
diff --git a/src/components/WaitTrainer.vue b/src/components/WaitTrainer.vue
@@ -16,7 +16,7 @@
       <answer-input v-model="userAnswer" :read-only="status !== 'user'" :suits="question.hand.reduce((agg, x) => { const suit = x[1]; if (!agg.includes(suit)) { agg.push(suit); } return agg }, []).sort()"/>
 
       <div class="bottom-buttons" v-show="status === 'user'">
-        <button class="large">Submit</button>
+        <button class="large" :disabled="userAnswer.length === 0">Submit</button>
       </div>
     </form>
 
@@ -138,7 +138,7 @@ function ukeireAreIdentical (a, b) {
   border-radius: 0;
 }
 
-@media (max-width: 1920px) {
+@media (max-width: 1919px) {
   .bottom-buttons {
     gap: unset;
     max-width: unset;