wad-lab 1.0.5 → 1.0.7

package/templates/vue-memory-game/src/App.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { onMounted } from 'vue'
+import { useMemoryStore } from './stores/memoryStore'
+
+const store = useMemoryStore()
+
+onMounted(() => {
+  store.initGame()
+})
+</script>
+
+<template>
+  <div class="game-wrapper">
+    <h1>Vue Pinia Memory Game</h1>
+
+    <div class="stats">
+      <span>Moves: {{ store.moves }}</span>
+      <span>Matches: {{ store.matches }} / {{ store.symbols.length }}</span>
+    </div>
+
+    <button type="button" class="btn" @click="store.initGame()">Restart Game</button>
+
+    <div v-if="store.isGameOver" class="win-banner">
+      🎉 You won in {{ store.moves }} moves!
+    </div>
+
+    <div class="grid">
+      <div
+        v-for="card in store.cards"
+        :key="card.id"
+        class="card"
+        :class="{ flipped: card.isFlipped, matched: card.isMatched }"
+        @click="store.flipCard(card)"
+      >
+        {{ card.isFlipped || card.isMatched ? card.symbol : '?' }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.game-wrapper {
+  max-width: 360px;
+  margin: 30px auto;
+  text-align: center;
+  font-family: Arial, sans-serif;
+}
+
+.stats {
+  display: flex;
+  justify-content: space-around;
+  font-size: 18px;
+  font-weight: bold;
+  margin: 15px 0;
+}
+
+.btn {
+  padding: 8px 16px;
+  background-color: #2980b9;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-bottom: 20px;
+}
+
+.win-banner {
+  padding: 10px;
+  background-color: #d4edda;
+  color: #155724;
+  margin-bottom: 15px;
+  border-radius: 4px;
+  font-weight: bold;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, 75px);
+  gap: 10px;
+  justify-content: center;
+}
+
+.card {
+  width: 75px;
+  height: 75px;
+  background-color: #34495e;
+  color: white;
+  font-size: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.card.flipped {
+  background-color: #ecf0f1;
+  color: #2c3e50;
+}
+
+.card.matched {
+  background-color: #2ecc71;
+  color: white;
+}
+</style>

package/templates/vue-memory-game/src/main.js

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(createPinia())
+app.mount('#app')

package/templates/vue-memory-game/src/stores/memoryStore.js

@@ -0,0 +1,64 @@
+import { defineStore } from 'pinia'
+
+export const useMemoryStore = defineStore('memory', {
+  state: () => ({
+    symbols: ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊'],
+    cards: [],
+    flippedCards: [],
+    moves: 0,
+    matches: 0,
+    isLocked: false
+  }),
+  getters: {
+    isGameOver: (state) => state.matches === state.symbols.length
+  },
+  actions: {
+    initGame() {
+      const duplicated = [...this.symbols, ...this.symbols]
+      duplicated.sort(() => 0.5 - Math.random())
+
+      this.cards = duplicated.map((symbol, idx) => ({
+        id: idx,
+        symbol: symbol,
+        isFlipped: false,
+        isMatched: false
+      }))
+
+      this.flippedCards = []
+      this.moves = 0
+      this.matches = 0
+      this.isLocked = false
+    },
+
+    flipCard(card) {
+      if (this.isLocked || card.isFlipped || card.isMatched) return
+
+      card.isFlipped = true
+      this.flippedCards.push(card)
+
+      if (this.flippedCards.length === 2) {
+        this.moves++
+        this.checkMatch()
+      }
+    },
+
+    checkMatch() {
+      const [card1, card2] = this.flippedCards
+
+      if (card1.symbol === card2.symbol) {
+        card1.isMatched = true
+        card2.isMatched = true
+        this.matches++
+        this.flippedCards = []
+      } else {
+        this.isLocked = true
+        setTimeout(() => {
+          card1.isFlipped = false
+          card2.isFlipped = false
+          this.flippedCards = []
+          this.isLocked = false
+        }, 800)
+      }
+    }
+  }
+})

package/templates/vue-memory-game/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()]
+})

package/templates/vue-todo-pinia/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vue Pinia Todo List</title>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+</body>
+</html>

package/templates/vue-todo-pinia/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "vue-todo-pinia",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "pinia": "^4.1.0",
+    "vue": "^3.5.44"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.10",
+    "vite": "^8.3.4"
+  }
+}

package/templates/vue-todo-pinia/src/App.vue

@@ -0,0 +1,179 @@
+<script setup>
+import { ref } from 'vue'
+import { useTodoStore } from './stores/todoStore'
+
+const store = useTodoStore()
+const newTodoText = ref('')
+
+function handleAdd() {
+  store.addTodo(newTodoText.value)
+  newTodoText.value = ''
+}
+</script>
+
+<template>
+  <div class="todo-app">
+    <h1>Todo List (Pinia)</h1>
+
+    <form @submit.prevent="handleAdd" class="add-form">
+      <input
+        type="text"
+        v-model="newTodoText"
+        placeholder="What needs to be done?"
+        required
+      />
+      <button type="submit" class="btn btn-add">Add</button>
+    </form>
+
+    <div class="filters">
+      <button
+        type="button"
+        class="filter-btn"
+        :class="{ active: store.filter === 'all' }"
+        @click="store.setFilter('all')"
+      >
+        All ({{ store.totalCount }})
+      </button>
+      <button
+        type="button"
+        class="filter-btn"
+        :class="{ active: store.filter === 'active' }"
+        @click="store.setFilter('active')"
+      >
+        Pending ({{ store.pendingCount }})
+      </button>
+      <button
+        type="button"
+        class="filter-btn"
+        :class="{ active: store.filter === 'completed' }"
+        @click="store.setFilter('completed')"
+      >
+        Completed ({{ store.completedCount }})
+      </button>
+    </div>
+
+    <ul class="todo-list">
+      <li v-for="item in store.filteredTodos" :key="item.id" class="todo-item">
+        <label>
+          <input
+            type="checkbox"
+            :checked="item.done"
+            @change="store.toggleTodo(item.id)"
+          />
+          <span :class="{ completed: item.done }">{{ item.text }}</span>
+        </label>
+        <button
+          type="button"
+          class="btn-delete"
+          @click="store.deleteTodo(item.id)"
+        >
+          ✕
+        </button>
+      </li>
+    </ul>
+
+    <div v-if="store.todos.length === 0" class="empty-state">
+      No todos found. Add one above!
+    </div>
+
+    <div class="footer-actions" v-if="store.completedCount > 0">
+      <button type="button" class="btn btn-clear" @click="store.clearCompleted()">
+        Clear Completed
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.todo-app {
+  max-width: 450px;
+  margin: 30px auto;
+  font-family: Arial, sans-serif;
+}
+
+.add-form {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 15px;
+}
+
+.add-form input {
+  flex: 1;
+  padding: 8px;
+  font-size: 14px;
+}
+
+.btn {
+  padding: 8px 16px;
+  cursor: pointer;
+}
+
+.btn-add {
+  background-color: #27ae60;
+  color: white;
+  border: none;
+}
+
+.filters {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 15px;
+}
+
+.filter-btn {
+  padding: 5px 10px;
+  background-color: #eee;
+  border: 1px solid #ccc;
+  cursor: pointer;
+}
+
+.filter-btn.active {
+  background-color: #2980b9;
+  color: white;
+  border-color: #2980b9;
+}
+
+.todo-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.todo-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.completed {
+  text-decoration: line-through;
+  color: #888;
+}
+
+.btn-delete {
+  background: none;
+  border: none;
+  color: #e74c3c;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.empty-state {
+  text-align: center;
+  color: #888;
+  padding: 20px 0;
+}
+
+.footer-actions {
+  margin-top: 15px;
+  text-align: right;
+}
+
+.btn-clear {
+  background-color: #e74c3c;
+  color: white;
+  border: none;
+}
+</style>

package/templates/vue-todo-pinia/src/main.js

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(createPinia())
+app.mount('#app')

package/templates/vue-todo-pinia/src/stores/todoStore.js

@@ -0,0 +1,50 @@
+import { defineStore } from 'pinia'
+
+export const useTodoStore = defineStore('todo', {
+  state: () => ({
+    todos: [
+      { id: 1, text: 'Study Web Application Development', done: false },
+      { id: 2, text: 'Complete Lab Assignment', done: true }
+    ],
+    filter: 'all'
+  }),
+  getters: {
+    filteredTodos: (state) => {
+      if (state.filter === 'active') {
+        return state.todos.filter((t) => !t.done)
+      }
+      if (state.filter === 'completed') {
+        return state.todos.filter((t) => t.done)
+      }
+      return state.todos
+    },
+    totalCount: (state) => state.todos.length,
+    pendingCount: (state) => state.todos.filter((t) => !t.done).length,
+    completedCount: (state) => state.todos.filter((t) => t.done).length
+  },
+  actions: {
+    addTodo(text) {
+      if (!text || !text.trim()) return
+      this.todos.push({
+        id: Date.now(),
+        text: text.trim(),
+        done: false
+      })
+    },
+    toggleTodo(id) {
+      const item = this.todos.find((t) => t.id === id)
+      if (item) {
+        item.done = !item.done
+      }
+    },
+    deleteTodo(id) {
+      this.todos = this.todos.filter((t) => t.id !== id)
+    },
+    setFilter(filterName) {
+      this.filter = filterName
+    },
+    clearCompleted() {
+      this.todos = this.todos.filter((t) => !t.done)
+    }
+  }
+})

package/templates/vue-todo-pinia/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()]
+})

package/templates/vue-todo-router/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vue Router Todo App</title>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+</body>
+</html>

package/templates/vue-todo-router/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "vue-todo-router",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.44",
+    "vue-router": "^5.4.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.10",
+    "vite": "^8.3.4"
+  }
+}

package/templates/vue-todo-router/src/App.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="app-container">
+    <header class="app-header">
+      <h1>Vue Router Todo App</h1>
+      <nav class="nav">
+        <router-link to="/" class="nav-link">Task List</router-link>
+        <span class="divider">|</span>
+        <router-link to="/add" class="nav-link">Add New Task</router-link>
+      </nav>
+    </header>
+
+    <main class="main-content">
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.app-container {
+  max-width: 500px;
+  margin: 30px auto;
+  font-family: Arial, sans-serif;
+}
+
+.app-header {
+  border-bottom: 2px solid #333;
+  padding-bottom: 15px;
+  margin-bottom: 20px;
+}
+
+.nav {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.nav-link {
+  text-decoration: none;
+  color: #2980b9;
+  font-weight: bold;
+}
+
+.nav-link.router-link-exact-active {
+  color: #27ae60;
+  text-decoration: underline;
+}
+
+.divider {
+  color: #aaa;
+}
+
+.main-content {
+  padding: 10px 0;
+}
+</style>

package/templates/vue-todo-router/src/data/todoState.js

@@ -0,0 +1,38 @@
+import { reactive } from 'vue'
+
+export const todoState = reactive({
+  todos: [
+    { id: 1, title: 'Install Node.js & Vue CLI', description: 'Ensure the environment is ready for WAD development', done: true },
+    { id: 2, title: 'Build Vue Router Navigation', description: 'Implement multi-view routing and parameter handling', done: false },
+    { id: 3, title: 'Prepare for Lab Exam', description: 'Review state management and component communications', done: false }
+  ],
+
+  addTodo(title, description) {
+    if (!title || !title.trim()) return
+    const newId = this.todos.length > 0 ? Math.max(...this.todos.map((t) => t.id)) + 1 : 1
+    this.todos.push({
+      id: newId,
+      title: title.trim(),
+      description: description ? description.trim() : '',
+      done: false
+    })
+  },
+
+  toggleTodo(id) {
+    const item = this.todos.find((t) => t.id === Number(id))
+    if (item) {
+      item.done = !item.done
+    }
+  },
+
+  deleteTodo(id) {
+    const index = this.todos.findIndex((t) => t.id === Number(id))
+    if (index !== -1) {
+      this.todos.splice(index, 1)
+    }
+  },
+
+  getTodoById(id) {
+    return this.todos.find((t) => t.id === Number(id))
+  }
+})

package/templates/vue-todo-router/src/main.js

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+app.use(router)
+app.mount('#app')

package/templates/vue-todo-router/src/router/index.js

@@ -0,0 +1,17 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import TodoListView from '../views/TodoListView.vue'
+import AddTodoView from '../views/AddTodoView.vue'
+import TodoDetailView from '../views/TodoDetailView.vue'
+
+const routes = [
+  { path: '/', name: 'TodoList', component: TodoListView },
+  { path: '/add', name: 'AddTodo', component: AddTodoView },
+  { path: '/todo/:id', name: 'TodoDetail', component: TodoDetailView, props: true }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router