feat: styles and tips (#1)

* feat: basic style

* feat: tip

* refactor: prepare type for MineBlock

app/assets/main.css

@@ -0,0 +1,6 @@
+summary::marker {
+  display: none;
+}
+summary::-webkit-details-marker {
+  display: none;
+}

app/components/MineBlock.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MineSweeperOptions } from './mine'
+import type { MineSweeperOptions } from './types'
 import { watch } from 'vue'
 
 const { options } = defineProps<{
@@ -172,11 +172,11 @@ watch(
     <div
       v-show="block.isTurned && block.isMine"
       ref="bombImg"
-      class="i-material-symbols-bomb"
+      class="i-mdi-bomb"
     />
     <div
       v-show="block.isFlag && !block.isTurned"
-      class="i-material-symbols-flag-outline"
+      class="i-mdi-flag-outline"
     />
   </div>
 </template>

app/components/MineSweeper.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MineSweeperOptions } from './mine'
+import type { MineSweeperOptions } from './types'
 
 const { options } = defineProps<{
   options: MineSweeperOptions

app/components/types.ts

@@ -0,0 +1,12 @@
+export interface MineSweeperOptions {
+  width: number
+  height: number
+  bombProb: number
+}
+
+export interface MineBlockType {
+  faceup: boolean
+  clickable: 'ok' | 'flag'
+  type: 'normal' | 'bomb'
+  bombsAround: number
+}

app/pages/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MineSweeperOptions } from '~/components/mine'
+import type { MineSweeperOptions } from '~/components/types'
 
 const mineSweeper = useTemplateRef('mineSweeper')
 const options = reactive<MineSweeperOptions>({
@@ -10,20 +10,56 @@ const options = reactive<MineSweeperOptions>({
 function onReset() {
   mineSweeper.value?.init()
 }
+
+const help = useTemplateRef('help')
+const show = ref(false)
+onClickOutside(help, () => show.value = false)
 </script>
 
 <template>
-  <div all="c-gray-7 font-mono" flex flex-col items-center gap-y-2xl pt-3xl>
-    <div font-size-8>
-      minesweeper
-    </div>
+  <div flex="~ col items-center gap-y-2xl" pt-3xl c-gray-7 font-mono>
+    <h2 flex="~ items-center gap-x-4">
+      <p font-size-8>
+        minesweeper
+      </p>
+
+      <div ref="help" relative>
+        <button aspect-ratio-square h-auto w-auto rounded-full p-2 btn-outline @click="show = !show">
+          <div i-mdi-help text-lg />
+        </button>
+
+        <Transition
+          enter-active-class="transition"
+          leave-active-class="transition"
+          enter-from-class="op-0 translate-y-lg"
+          leave-to-class="op-0 translate-y-lg"
+        >
+          <section v-show="show" w="[max-content]" absolute mt-4 rounded-md bg-white p-4 shadow>
+            <div flex>
+              <div i-mdi-mouse-left-click-outline />
+              /
+              <div i-mdi-gesture-tap />
+            </div>
+            Left click/Tap to check
+
+            <div mt-4 flex>
+              <div i-mdi-mouse-right-click-outline />
+              /
+              <div i-mdi-gesture-tap-hold />
+            </div>
+            Right click/Hold to flag
+          </section>
+        </Transition>
+      </div>
+    </h2>
+
     <div w-full flex flex-wrap items-center justify-center gap-x-4 gap-y-4>
       <div>
         x length:
         <input
           v-model="options.width"
           placeholder="input x length..."
-          w-xm h-6
+          input
           type="number"
         >
       </div>
@@ -32,7 +68,7 @@ function onReset() {
         <input
           v-model="options.height"
           placeholder="input y length..."
-          w-xm h-6
+          input
           type="number"
         >
       </div>
@@ -41,17 +77,16 @@ function onReset() {
         <input
           v-model="options.bombProb"
           placeholder="input bomb probability..."
-          max="1"
-          min="0"
-          step="0.05"
-          type="number"
-          w-xm h-6
+          max="1" min="0" step="0.05" type="number"
+          input
         >
       </div>
     </div>
-    <button h-8 w-20 font-size-4 transition-100 btn @click="onReset">
+
+    <button btn @click="onReset">
       reset
     </button>
+
     <div flex="~ col gap-y-1" mb-6xl select-none @contextmenu.prevent>
       <MineSweeper ref="mineSweeper" :options />
     </div>

nuxt.config.ts

@@ -3,6 +3,10 @@ export default defineNuxtConfig({
   app: {
     baseURL: '/minesweeper/',
   },
+  css: [
+    '@unocss/reset/tailwind-compat.css',
+    './app/assets/main.css',
+  ],
   compatibilityDate: '2024-10-28',
   devtools: { enabled: true },
   modules: [

package.json

@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.8.0",
-    "@iconify-json/material-symbols": "^1.2.5",
+    "@iconify-json/mdi": "^1.2.1",
     "@unocss/eslint-plugin": "^0.63.6",
     "@unocss/nuxt": "^0.63.6",
     "@vueuse/core": "^11.1.0",

uno.config.ts

@@ -10,10 +10,11 @@ import {
 
 export default defineConfig({
   shortcuts: [
-    [
-      'btn',
-      'b-0 shadow-md rounded cursor-pointer bg-gray-2 transition-100 hover:shadow-lg hover:bg-gray-1 active:bg-gray-3',
-    ],
+    ['btn', 'font-medium inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm transition-colors focus-visible:outline-none px-4 py-2 shadow c-#fafafa disabled:pointer-events-none bg-#18181b hover:bg-#18181b/90 disabled:opacity-50'],
+
+    ['btn-outline', 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-(1 solid #e4e4e7) bg-transparent shadow-sm hover:bg-#f4f4f5 hover:text-#18181b h-9 px-4 py-2'],
+
+    ['input', 'b-(1 solid #e4e4e7) p-(x-3 y-2) rounded-md focus:outline-none focus:ring-(2 #18181b offset-2) disabled:cursor-not-allowed disabled:opacity-50'],
   ],
   presets: [
     presetUno(),