wad-lab 1.0.5 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/bin/index.js +9 -1
  2. package/package.json +1 -1
  3. package/templates/game-memory-cards/index.html +24 -0
  4. package/templates/game-memory-cards/script.js +90 -0
  5. package/templates/game-memory-cards/style.css +74 -0
  6. package/templates/game-rock-paper-scissors/index.html +35 -0
  7. package/templates/game-rock-paper-scissors/script.js +49 -0
  8. package/templates/game-rock-paper-scissors/style.css +67 -0
  9. package/templates/game-tic-tac-toe/index.html +30 -0
  10. package/templates/game-tic-tac-toe/script.js +82 -0
  11. package/templates/game-tic-tac-toe/style.css +66 -0
  12. package/templates/game-whack-a-mole/index.html +34 -0
  13. package/templates/game-whack-a-mole/script.js +83 -0
  14. package/templates/game-whack-a-mole/style.css +75 -0
  15. package/templates/vue-cart-router-pinia/index.html +12 -0
  16. package/templates/vue-cart-router-pinia/package.json +20 -0
  17. package/templates/vue-cart-router-pinia/src/App.vue +78 -0
  18. package/templates/vue-cart-router-pinia/src/main.js +9 -0
  19. package/templates/vue-cart-router-pinia/src/router/index.js +17 -0
  20. package/templates/vue-cart-router-pinia/src/stores/cartStore.js +58 -0
  21. package/templates/vue-cart-router-pinia/src/views/CartView.vue +139 -0
  22. package/templates/vue-cart-router-pinia/src/views/CheckoutView.vue +144 -0
  23. package/templates/vue-cart-router-pinia/src/views/ProductCatalogView.vue +73 -0
  24. package/templates/vue-cart-router-pinia/vite.config.js +6 -0
  25. package/templates/vue-memory-game/index.html +12 -0
  26. package/templates/vue-memory-game/package.json +19 -0
  27. package/templates/vue-memory-game/src/App.vue +106 -0
  28. package/templates/vue-memory-game/src/main.js +7 -0
  29. package/templates/vue-memory-game/src/stores/memoryStore.js +64 -0
  30. package/templates/vue-memory-game/vite.config.js +6 -0
  31. package/templates/vue-todo-pinia/index.html +12 -0
  32. package/templates/vue-todo-pinia/package.json +19 -0
  33. package/templates/vue-todo-pinia/src/App.vue +179 -0
  34. package/templates/vue-todo-pinia/src/main.js +7 -0
  35. package/templates/vue-todo-pinia/src/stores/todoStore.js +50 -0
  36. package/templates/vue-todo-pinia/vite.config.js +6 -0
  37. package/templates/vue-todo-router/index.html +12 -0
  38. package/templates/vue-todo-router/package.json +19 -0
  39. package/templates/vue-todo-router/src/App.vue +55 -0
  40. package/templates/vue-todo-router/src/data/todoState.js +38 -0
  41. package/templates/vue-todo-router/src/main.js +7 -0
  42. package/templates/vue-todo-router/src/router/index.js +17 -0
  43. package/templates/vue-todo-router/src/views/AddTodoView.vue +85 -0
  44. package/templates/vue-todo-router/src/views/TodoDetailView.vue +89 -0
  45. package/templates/vue-todo-router/src/views/TodoListView.vue +77 -0
  46. package/templates/vue-todo-router/vite.config.js +6 -0
  47. package/templates/servlet-flow/SERVLET_EXAM_CHEATSHEET.md +0 -389
@@ -0,0 +1,75 @@
1
+ body {
2
+ font-family: Arial, sans-serif;
3
+ display: flex;
4
+ justify-content: center;
5
+ align-items: center;
6
+ min-height: 100vh;
7
+ margin: 0;
8
+ background-color: #f0f0f0;
9
+ }
10
+
11
+ .game-container {
12
+ text-align: center;
13
+ background: #ffffff;
14
+ padding: 30px;
15
+ border: 1px solid #ccc;
16
+ border-radius: 8px;
17
+ }
18
+
19
+ .stats-bar {
20
+ display: flex;
21
+ justify-content: space-around;
22
+ font-size: 18px;
23
+ font-weight: bold;
24
+ margin: 15px 0;
25
+ }
26
+
27
+ .btn-start {
28
+ padding: 10px 20px;
29
+ font-size: 16px;
30
+ background-color: #27ae60;
31
+ color: white;
32
+ border: none;
33
+ border-radius: 4px;
34
+ cursor: pointer;
35
+ margin-bottom: 20px;
36
+ }
37
+
38
+ .btn-start:hover {
39
+ background-color: #219150;
40
+ }
41
+
42
+ .grid {
43
+ display: grid;
44
+ grid-template-columns: repeat(3, 90px);
45
+ grid-gap: 12px;
46
+ margin: 0 auto;
47
+ width: 294px;
48
+ }
49
+
50
+ .hole {
51
+ width: 90px;
52
+ height: 90px;
53
+ background-color: #795548;
54
+ border-radius: 50%;
55
+ position: relative;
56
+ overflow: hidden;
57
+ cursor: pointer;
58
+ }
59
+
60
+ .mole {
61
+ width: 100%;
62
+ height: 100%;
63
+ position: absolute;
64
+ top: 100%;
65
+ display: flex;
66
+ justify-content: center;
67
+ align-items: center;
68
+ font-size: 40px;
69
+ user-select: none;
70
+ transition: top 0.2s ease-out;
71
+ }
72
+
73
+ .hole.up .mole {
74
+ top: 0;
75
+ }
@@ -0,0 +1,12 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Vue Shopping Cart</title>
7
+ </head>
8
+ <body>
9
+ <div id="app"></div>
10
+ <script type="module" src="/src/main.js"></script>
11
+ </body>
12
+ </html>
@@ -0,0 +1,20 @@
1
+ {
2
+ "name": "vue-cart-router-pinia",
3
+ "version": "1.0.0",
4
+ "private": true,
5
+ "type": "module",
6
+ "scripts": {
7
+ "dev": "vite",
8
+ "build": "vite build",
9
+ "preview": "vite preview"
10
+ },
11
+ "dependencies": {
12
+ "pinia": "^4.1.0",
13
+ "vue": "^3.5.44",
14
+ "vue-router": "^5.4.0"
15
+ },
16
+ "devDependencies": {
17
+ "@vitejs/plugin-vue": "^6.0.10",
18
+ "vite": "^8.3.4"
19
+ }
20
+ }
@@ -0,0 +1,78 @@
1
+ <script setup>
2
+ import { useCartStore } from './stores/cartStore'
3
+
4
+ const cartStore = useCartStore()
5
+ </script>
6
+
7
+ <template>
8
+ <div class="store-app">
9
+ <header class="store-header">
10
+ <h1>Vue Pinia Shopping Cart</h1>
11
+ <nav class="nav">
12
+ <router-link to="/" class="nav-link">Products</router-link>
13
+ <span class="divider">|</span>
14
+ <router-link to="/cart" class="nav-link cart-link">
15
+ Cart ({{ cartStore.cartCount }})
16
+ </router-link>
17
+ </nav>
18
+ </header>
19
+
20
+ <main class="store-main">
21
+ <router-view />
22
+ </main>
23
+ </div>
24
+ </template>
25
+
26
+ <style scoped>
27
+ .store-app {
28
+ max-width: 650px;
29
+ margin: 30px auto;
30
+ font-family: Arial, sans-serif;
31
+ padding: 0 15px;
32
+ }
33
+
34
+ .store-header {
35
+ display: flex;
36
+ justify-content: space-between;
37
+ align-items: center;
38
+ border-bottom: 2px solid #333;
39
+ padding-bottom: 15px;
40
+ margin-bottom: 20px;
41
+ }
42
+
43
+ .store-header h1 {
44
+ font-size: 20px;
45
+ margin: 0;
46
+ }
47
+
48
+ .nav {
49
+ display: flex;
50
+ gap: 10px;
51
+ align-items: center;
52
+ }
53
+
54
+ .nav-link {
55
+ text-decoration: none;
56
+ color: #2980b9;
57
+ font-weight: bold;
58
+ }
59
+
60
+ .nav-link.router-link-exact-active {
61
+ color: #27ae60;
62
+ text-decoration: underline;
63
+ }
64
+
65
+ .cart-link {
66
+ background-color: #f1f2f6;
67
+ padding: 6px 12px;
68
+ border-radius: 20px;
69
+ }
70
+
71
+ .divider {
72
+ color: #ccc;
73
+ }
74
+
75
+ .store-main {
76
+ padding: 10px 0;
77
+ }
78
+ </style>
@@ -0,0 +1,9 @@
1
+ import { createApp } from 'vue'
2
+ import { createPinia } from 'pinia'
3
+ import App from './App.vue'
4
+ import router from './router'
5
+
6
+ const app = createApp(App)
7
+ app.use(createPinia())
8
+ app.use(router)
9
+ app.mount('#app')
@@ -0,0 +1,17 @@
1
+ import { createRouter, createWebHistory } from 'vue-router'
2
+ import ProductCatalogView from '../views/ProductCatalogView.vue'
3
+ import CartView from '../views/CartView.vue'
4
+ import CheckoutView from '../views/CheckoutView.vue'
5
+
6
+ const routes = [
7
+ { path: '/', name: 'Catalog', component: ProductCatalogView },
8
+ { path: '/cart', name: 'Cart', component: CartView },
9
+ { path: '/checkout', name: 'Checkout', component: CheckoutView }
10
+ ]
11
+
12
+ const router = createRouter({
13
+ history: createWebHistory(),
14
+ routes
15
+ })
16
+
17
+ export default router
@@ -0,0 +1,58 @@
1
+ import { defineStore } from 'pinia'
2
+
3
+ export const useCartStore = defineStore('cart', {
4
+ state: () => ({
5
+ products: [
6
+ { id: 1, name: 'Wireless Laptop', price: 999, category: 'Electronics' },
7
+ { id: 2, name: 'Noise-Canceling Headphones', price: 149, category: 'Audio' },
8
+ { id: 3, name: 'Mechanical Keyboard', price: 79, category: 'Accessories' },
9
+ { id: 4, name: 'Optical Gaming Mouse', price: 39, category: 'Accessories' },
10
+ { id: 5, name: 'USB-C Docking Hub', price: 49, category: 'Electronics' }
11
+ ],
12
+ items: []
13
+ }),
14
+ getters: {
15
+ cartCount: (state) => {
16
+ return state.items.reduce((total, item) => total + item.quantity, 0)
17
+ },
18
+ cartTotal: (state) => {
19
+ return state.items.reduce((total, item) => total + item.price * item.quantity, 0)
20
+ }
21
+ },
22
+ actions: {
23
+ addToCart(product) {
24
+ const existing = this.items.find((item) => item.id === product.id)
25
+ if (existing) {
26
+ existing.quantity++
27
+ } else {
28
+ this.items.push({
29
+ id: product.id,
30
+ name: product.name,
31
+ price: product.price,
32
+ quantity: 1
33
+ })
34
+ }
35
+ },
36
+ incrementQuantity(id) {
37
+ const item = this.items.find((i) => i.id === id)
38
+ if (item) {
39
+ item.quantity++
40
+ }
41
+ },
42
+ decrementQuantity(id) {
43
+ const item = this.items.find((i) => i.id === id)
44
+ if (item) {
45
+ item.quantity--
46
+ if (item.quantity <= 0) {
47
+ this.removeFromCart(id)
48
+ }
49
+ }
50
+ },
51
+ removeFromCart(id) {
52
+ this.items = this.items.filter((item) => item.id !== id)
53
+ },
54
+ clearCart() {
55
+ this.items = []
56
+ }
57
+ }
58
+ })
@@ -0,0 +1,139 @@
1
+ <script setup>
2
+ import { useCartStore } from '../stores/cartStore'
3
+
4
+ const cartStore = useCartStore()
5
+ </script>
6
+
7
+ <template>
8
+ <div>
9
+ <h2>Your Shopping Cart</h2>
10
+
11
+ <div v-if="cartStore.items.length === 0" class="empty-cart">
12
+ <p>Your cart is empty.</p>
13
+ <router-link to="/">Browse Products</router-link>
14
+ </div>
15
+
16
+ <div v-else>
17
+ <table class="cart-table">
18
+ <thead>
19
+ <tr>
20
+ <th>Product</th>
21
+ <th>Price</th>
22
+ <th>Quantity</th>
23
+ <th>Subtotal</th>
24
+ <th>Action</th>
25
+ </tr>
26
+ </thead>
27
+ <tbody>
28
+ <tr v-for="item in cartStore.items" :key="item.id">
29
+ <td>{{ item.name }}</td>
30
+ <td>${{ item.price }}</td>
31
+ <td class="qty-cell">
32
+ <button type="button" class="btn-qty" @click="cartStore.decrementQuantity(item.id)">-</button>
33
+ <span>{{ item.quantity }}</span>
34
+ <button type="button" class="btn-qty" @click="cartStore.incrementQuantity(item.id)">+</button>
35
+ </td>
36
+ <td>${{ item.price * item.quantity }}</td>
37
+ <td>
38
+ <button type="button" class="btn-remove" @click="cartStore.removeFromCart(item.id)">Remove</button>
39
+ </td>
40
+ </tr>
41
+ </tbody>
42
+ <tfoot>
43
+ <tr>
44
+ <td colspan="3" class="total-label">Grand Total:</td>
45
+ <td colspan="2" class="total-value">${{ cartStore.cartTotal }}</td>
46
+ </tr>
47
+ </tfoot>
48
+ </table>
49
+
50
+ <div class="cart-actions">
51
+ <button type="button" class="btn btn-clear" @click="cartStore.clearCart()">Clear Cart</button>
52
+ <router-link to="/checkout" class="btn btn-checkout">Proceed to Checkout</router-link>
53
+ </div>
54
+ </div>
55
+ </div>
56
+ </template>
57
+
58
+ <style scoped>
59
+ .empty-cart {
60
+ padding: 30px;
61
+ text-align: center;
62
+ color: #777;
63
+ }
64
+
65
+ .cart-table {
66
+ width: 100%;
67
+ border-collapse: collapse;
68
+ margin: 15px 0;
69
+ }
70
+
71
+ .cart-table th, .cart-table td {
72
+ border: 1px solid #ddd;
73
+ padding: 10px;
74
+ text-align: left;
75
+ }
76
+
77
+ .cart-table th {
78
+ background-color: #f2f2f2;
79
+ }
80
+
81
+ .qty-cell {
82
+ display: flex;
83
+ align-items: center;
84
+ gap: 8px;
85
+ }
86
+
87
+ .btn-qty {
88
+ width: 24px;
89
+ height: 24px;
90
+ background-color: #eee;
91
+ border: 1px solid #ccc;
92
+ cursor: pointer;
93
+ }
94
+
95
+ .btn-remove {
96
+ background-color: #e74c3c;
97
+ color: white;
98
+ border: none;
99
+ padding: 4px 8px;
100
+ border-radius: 3px;
101
+ cursor: pointer;
102
+ }
103
+
104
+ .total-label {
105
+ text-align: right;
106
+ font-weight: bold;
107
+ }
108
+
109
+ .total-value {
110
+ font-weight: bold;
111
+ color: #27ae60;
112
+ font-size: 16px;
113
+ }
114
+
115
+ .cart-actions {
116
+ display: flex;
117
+ justify-content: space-between;
118
+ margin-top: 15px;
119
+ }
120
+
121
+ .btn {
122
+ padding: 10px 18px;
123
+ border-radius: 4px;
124
+ text-decoration: none;
125
+ font-size: 14px;
126
+ cursor: pointer;
127
+ border: none;
128
+ }
129
+
130
+ .btn-clear {
131
+ background-color: #95a5a6;
132
+ color: white;
133
+ }
134
+
135
+ .btn-checkout {
136
+ background-color: #27ae60;
137
+ color: white;
138
+ }
139
+ </style>
@@ -0,0 +1,144 @@
1
+ <script setup>
2
+ import { ref } from 'vue'
3
+ import { useRouter } from 'vue-router'
4
+ import { useCartStore } from '../stores/cartStore'
5
+
6
+ const cartStore = useCartStore()
7
+ const router = useRouter()
8
+
9
+ const name = ref('')
10
+ const address = ref('')
11
+ const orderPlaced = ref(false)
12
+
13
+ function handleCheckout() {
14
+ orderPlaced.value = true
15
+ cartStore.clearCart()
16
+ }
17
+ </script>
18
+
19
+ <template>
20
+ <div class="checkout-wrapper">
21
+ <h2>Checkout & Order Summary</h2>
22
+
23
+ <div v-if="orderPlaced" class="success-banner">
24
+ <h3>Thank you for your order! 🎉</h3>
25
+ <p>Your order has been placed successfully.</p>
26
+ <router-link to="/" class="btn btn-shop">Continue Shopping</router-link>
27
+ </div>
28
+
29
+ <div v-else-if="cartStore.items.length === 0" class="empty-state">
30
+ <p>No items in cart to checkout.</p>
31
+ <router-link to="/">Browse Catalog</router-link>
32
+ </div>
33
+
34
+ <div v-else class="checkout-content">
35
+ <div class="order-summary">
36
+ <h3>Order Items:</h3>
37
+ <ul>
38
+ <li v-for="item in cartStore.items" :key="item.id">
39
+ {{ item.name }} x {{ item.quantity }} — ${{ item.price * item.quantity }}
40
+ </li>
41
+ </ul>
42
+ <p class="summary-total">Total Amount: <strong>${{ cartStore.cartTotal }}</strong></p>
43
+ </div>
44
+
45
+ <form @submit.prevent="handleCheckout" class="checkout-form">
46
+ <h3>Shipping Information</h3>
47
+ <div class="form-group">
48
+ <label for="custName">Full Name:</label>
49
+ <input id="custName" type="text" v-model="name" required placeholder="John Doe" />
50
+ </div>
51
+
52
+ <div class="form-group">
53
+ <label for="custAddr">Delivery Address:</label>
54
+ <textarea id="custAddr" v-model="address" rows="3" required placeholder="123 Main St, City"></textarea>
55
+ </div>
56
+
57
+ <button type="submit" class="btn btn-place">Confirm and Place Order</button>
58
+ </form>
59
+ </div>
60
+ </div>
61
+ </template>
62
+
63
+ <style scoped>
64
+ .checkout-wrapper {
65
+ max-width: 500px;
66
+ }
67
+
68
+ .checkout-content {
69
+ display: flex;
70
+ flex-direction: column;
71
+ gap: 20px;
72
+ }
73
+
74
+ .order-summary {
75
+ background-color: #f8f9fa;
76
+ padding: 15px;
77
+ border-radius: 6px;
78
+ border: 1px solid #ddd;
79
+ }
80
+
81
+ .order-summary ul {
82
+ padding-left: 20px;
83
+ margin: 10px 0;
84
+ }
85
+
86
+ .summary-total {
87
+ font-size: 16px;
88
+ margin-top: 10px;
89
+ }
90
+
91
+ .checkout-form {
92
+ display: flex;
93
+ flex-direction: column;
94
+ gap: 12px;
95
+ }
96
+
97
+ .form-group {
98
+ display: flex;
99
+ flex-direction: column;
100
+ gap: 4px;
101
+ }
102
+
103
+ input, textarea {
104
+ padding: 8px;
105
+ border: 1px solid #ccc;
106
+ border-radius: 4px;
107
+ }
108
+
109
+ .btn {
110
+ padding: 10px 16px;
111
+ border: none;
112
+ border-radius: 4px;
113
+ cursor: pointer;
114
+ text-decoration: none;
115
+ font-size: 14px;
116
+ text-align: center;
117
+ }
118
+
119
+ .btn-place {
120
+ background-color: #27ae60;
121
+ color: white;
122
+ margin-top: 10px;
123
+ }
124
+
125
+ .btn-shop {
126
+ background-color: #2980b9;
127
+ color: white;
128
+ display: inline-block;
129
+ margin-top: 10px;
130
+ }
131
+
132
+ .success-banner {
133
+ background-color: #d4edda;
134
+ color: #155724;
135
+ padding: 20px;
136
+ border-radius: 6px;
137
+ text-align: center;
138
+ }
139
+
140
+ .empty-state {
141
+ padding: 20px 0;
142
+ text-align: center;
143
+ }
144
+ </style>
@@ -0,0 +1,73 @@
1
+ <script setup>
2
+ import { useCartStore } from '../stores/cartStore'
3
+
4
+ const cartStore = useCartStore()
5
+ </script>
6
+
7
+ <template>
8
+ <div>
9
+ <h2>Available Products</h2>
10
+ <div class="product-grid">
11
+ <div v-for="product in cartStore.products" :key="product.id" class="product-card">
12
+ <h3>{{ product.name }}</h3>
13
+ <p class="category">{{ product.category }}</p>
14
+ <p class="price">${{ product.price }}</p>
15
+ <button
16
+ type="button"
17
+ class="btn btn-add"
18
+ @click="cartStore.addToCart(product)"
19
+ >
20
+ Add to Cart
21
+ </button>
22
+ </div>
23
+ </div>
24
+ </div>
25
+ </template>
26
+
27
+ <style scoped>
28
+ .product-grid {
29
+ display: grid;
30
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
31
+ gap: 15px;
32
+ margin-top: 15px;
33
+ }
34
+
35
+ .product-card {
36
+ border: 1px solid #ddd;
37
+ border-radius: 6px;
38
+ padding: 15px;
39
+ text-align: center;
40
+ background-color: #fafafa;
41
+ }
42
+
43
+ .product-card h3 {
44
+ font-size: 16px;
45
+ margin: 5px 0;
46
+ }
47
+
48
+ .category {
49
+ color: #777;
50
+ font-size: 12px;
51
+ margin-bottom: 8px;
52
+ }
53
+
54
+ .price {
55
+ font-size: 18px;
56
+ font-weight: bold;
57
+ color: #27ae60;
58
+ margin-bottom: 12px;
59
+ }
60
+
61
+ .btn-add {
62
+ background-color: #2980b9;
63
+ color: white;
64
+ border: none;
65
+ padding: 8px 12px;
66
+ border-radius: 4px;
67
+ cursor: pointer;
68
+ }
69
+
70
+ .btn-add:hover {
71
+ background-color: #1f618d;
72
+ }
73
+ </style>
@@ -0,0 +1,6 @@
1
+ import { defineConfig } from 'vite'
2
+ import vue from '@vitejs/plugin-vue'
3
+
4
+ export default defineConfig({
5
+ plugins: [vue()]
6
+ })
@@ -0,0 +1,12 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Vue Pinia Memory Game</title>
7
+ </head>
8
+ <body>
9
+ <div id="app"></div>
10
+ <script type="module" src="/src/main.js"></script>
11
+ </body>
12
+ </html>
@@ -0,0 +1,19 @@
1
+ {
2
+ "name": "vue-memory-game",
3
+ "version": "1.0.0",
4
+ "private": true,
5
+ "type": "module",
6
+ "scripts": {
7
+ "dev": "vite",
8
+ "build": "vite build",
9
+ "preview": "vite preview"
10
+ },
11
+ "dependencies": {
12
+ "pinia": "^4.1.0",
13
+ "vue": "^3.5.44"
14
+ },
15
+ "devDependencies": {
16
+ "@vitejs/plugin-vue": "^6.0.10",
17
+ "vite": "^8.3.4"
18
+ }
19
+ }