wad-lab 1.2.2 → 1.2.3

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

@@ -1,51 +1,39 @@
+<script setup>
+import { useRpsStore } from './stores/rpsStore'
+
+const store = useRpsStore()
+</script>
+
 <template>
-  <div class="container">
-    <h1>Vue Rock Paper Scissors</h1>
+  <div class="game-container">
+    <h1>Rock Paper Scissors</h1>
 
     <div class="scoreboard">
-      <div class="score-card">
-        <span class="label">Player:</span>
-        <span class="value">{{ store.playerScore }}</span>
-      </div>
-      <div class="score-card">
-        <span class="label">Computer:</span>
-        <span class="value">{{ store.computerScore }}</span>
-      </div>
-      <div class="score-card">
-        <span class="label">Ties:</span>
-        <span class="value">{{ store.ties }}</span>
-      </div>
+      <div>Player: {{ store.playerScore }}</div>
+      <div>Computer: {{ store.computerScore }}</div>
+      <div>Ties: {{ store.ties }}</div>
     </div>
 
     <div class="choices">
-      <button @click="store.playRound('Rock')">✊ Rock</button>
-      <button @click="store.playRound('Paper')">✋ Paper</button>
-      <button @click="store.playRound('Scissors')">✌ Scissors</button>
+      <button @click="store.playRound('Rock')">Rock</button>
+      <button @click="store.playRound('Paper')">Paper</button>
+      <button @click="store.playRound('Scissors')">Scissors</button>
     </div>
 
-    <div class="results">
-      <div v-if="store.playerChoice && store.computerChoice" class="matchup">
-        <p>Player: <strong>{{ store.playerChoice }}</strong></p>
-        <p>Computer: <strong>{{ store.computerChoice }}</strong></p>
-      </div>
-      <p class="message">{{ store.resultMessage }}</p>
+    <div class="round-result" v-if="store.lastResult">
+      <p>You chose: <strong>{{ store.playerChoice }}</strong></p>
+      <p>Computer chose: <strong>{{ store.computerChoice }}</strong></p>
+      <h2>{{ store.lastResult }}</h2>
     </div>
 
     <button class="reset-btn" @click="store.resetGame">Reset Game</button>
   </div>
 </template>
 
-<script setup>
-import { useRpsStore } from './stores/rpsStore'
-
-const store = useRpsStore()
-</script>
-
 <style scoped>
-.container {
-  max-width: 500px;
-  margin: 40px auto;
-  padding: 20px;
+.game-container {
+  max-width: 450px;
+  margin: 30px auto;
   text-align: center;
   font-family: Arial, sans-serif;
 }
@@ -54,72 +42,25 @@ const store = useRpsStore()
   display: flex;
   justify-content: space-around;
   margin: 20px 0;
-  padding: 12px;
-  background: #f0f0f0;
-  border-radius: 6px;
-}
-
-.score-card {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.label {
   font-weight: bold;
 }
 
-.value {
-  font-size: 1.4rem;
-}
-
-.choices {
-  display: flex;
-  justify-content: center;
-  gap: 12px;
-  margin: 20px 0;
-}
-
-button {
+.choices button {
+  font-size: 18px;
   padding: 10px 16px;
-  font-size: 1rem;
+  margin: 0 8px;
   cursor: pointer;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  background: #fff;
 }
 
-button:hover {
-  background: #e9e9e9;
-}
-
-.results {
+.round-result {
   margin: 20px 0;
-  padding: 15px;
+  padding: 10px;
   border: 1px solid #ddd;
-  border-radius: 6px;
-  background: #fafafa;
-}
-
-.matchup {
-  display: flex;
-  justify-content: space-around;
-  margin-bottom: 10px;
-}
-
-.message {
-  font-size: 1.2rem;
-  font-weight: bold;
-  margin: 5px 0 0;
 }
 
 .reset-btn {
-  background: #e74c3c;
-  color: #fff;
-  border: none;
-}
-
-.reset-btn:hover {
-  background: #c0392b;
+  margin-top: 15px;
+  padding: 8px 16px;
+  cursor: pointer;
 }
 </style>

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

@@ -6,100 +6,70 @@ const store = useTicTacToeStore()
 
 <template>
   <div class="game-container">
-    <h1>Vue Tic Tac Toe</h1>
+    <h1>Tic Tac Toe</h1>
 
-    <div class="status">
-      <span v-if="store.winner">Player {{ store.winner }} Wins! 🎉</span>
-      <span v-else-if="store.isDraw">Game Draw! 🤝</span>
-      <span v-else>Player {{ store.currentPlayer }}'s Turn</span>
+    <div class="status-msg">
+      <span v-if="store.winner">Player {{ store.winner }} Wins!</span>
+      <span v-else-if="store.isDraw">Game Draw!</span>
+      <span v-else>Turn: Player {{ store.currentPlayer }}</span>
     </div>
 
     <div class="board">
       <button
         v-for="(cell, index) in store.board"
         :key="index"
-        type="button"
         class="cell"
-        :disabled="cell !== '' || !!store.winner || store.isDraw"
+        :disabled="cell !== null || store.winner !== null"
         @click="store.makeMove(index)"
       >
         {{ cell }}
       </button>
     </div>
 
-    <button type="button" class="btn-reset" @click="store.resetBoard">Reset Game</button>
+    <button class="reset-btn" @click="store.resetGame">Restart Game</button>
   </div>
 </template>
 
-<style>
-body {
-  font-family: Arial, sans-serif;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  margin: 0;
-  background-color: #f5f5f5;
-}
-
+<style scoped>
 .game-container {
+  max-width: 320px;
+  margin: 40px auto;
   text-align: center;
-  background: #ffffff;
-  padding: 30px;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-}
-
-h1 {
-  margin-top: 0;
+  font-family: Arial, sans-serif;
 }
 
-.status {
-  margin: 15px 0;
+.status-msg {
   font-size: 20px;
   font-weight: bold;
+  margin-bottom: 20px;
 }
 
 .board {
   display: grid;
-  grid-template-columns: repeat(3, 80px);
+  grid-template-columns: repeat(3, 1fr);
   gap: 8px;
-  margin: 20px auto;
-  width: 256px;
+  background-color: #333;
+  padding: 8px;
+  border-radius: 8px;
 }
 
 .cell {
-  width: 80px;
-  height: 80px;
-  background-color: #f9f9f9;
-  border: 2px solid #555;
+  height: 90px;
   font-size: 36px;
   font-weight: bold;
+  background-color: #fff;
+  border: none;
   cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.cell:hover:not(:disabled) {
-  background-color: #eee;
 }
 
 .cell:disabled {
   cursor: not-allowed;
 }
 
-.btn-reset {
-  padding: 10px 20px;
+.reset-btn {
+  margin-top: 20px;
+  padding: 8px 16px;
   font-size: 16px;
-  background-color: #333;
-  color: white;
-  border: none;
-  border-radius: 4px;
   cursor: pointer;
 }
-
-.btn-reset:hover {
-  background-color: #555;
-}
 </style>

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

@@ -1,85 +1,52 @@
+<script setup>
+import { useMoleStore } from './stores/moleStore'
+
+const store = useMoleStore()
+</script>
+
 <template>
   <div class="game-container">
-    <h1>Vue Whack A Mole</h1>
+    <h1>Whack A Mole</h1>
 
-    <div class="status-bar">
-      <span>Score: {{ store.score }}</span>
-      <span>Time Left: {{ store.timeLeft }}s</span>
+    <div class="info-bar">
+      <div>Score: {{ store.score }}</div>
+      <div>Time Left: {{ store.timeLeft }}s</div>
     </div>
 
-    <button class="start-btn" :disabled="store.isPlaying" @click="store.startGame()">
-      Start Game
-    </button>
-
     <div class="grid">
       <div
-        v-for="i in 9"
-        :key="i - 1"
+        v-for="i in store.holeCount"
+        :key="i"
         class="hole"
-        @click="store.whackMole(i - 1)"
+        @click="store.whack(i - 1)"
       >
-        <span v-if="store.activeHoleIndex === i - 1" class="mole">🐹</span>
+        <span v-if="store.activeHoleIndex === i - 1" class="mole">[TARGET]</span>
       </div>
     </div>
+
+    <div class="controls">
+      <button v-if="!store.isPlaying" @click="store.startGame">Start Game</button>
+      <button v-else @click="store.stopGame">Stop Game</button>
+    </div>
   </div>
 </template>
 
-<script setup>
-import { useMoleStore } from './stores/moleStore'
-
-const store = useMoleStore()
-</script>
-
-<style>
-body {
-  margin: 0;
-  font-family: sans-serif;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  background-color: #f0f2f5;
-}
-
+<style scoped>
 .game-container {
+  max-width: 360px;
+  margin: 30px auto;
   text-align: center;
-  background: #ffffff;
-  padding: 24px;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  width: 320px;
-}
-
-h1 {
-  margin-top: 0;
-  margin-bottom: 16px;
-  font-size: 24px;
+  font-family: Arial, sans-serif;
 }
 
-.status-bar {
+.info-bar {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 16px;
-  font-size: 16px;
+  font-size: 18px;
   font-weight: bold;
-}
-
-.start-btn {
-  padding: 10px 20px;
-  font-size: 16px;
-  background-color: #42b883;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
   margin-bottom: 20px;
 }
 
-.start-btn:disabled {
-  background-color: #a8d5c2;
-  cursor: not-allowed;
-}
-
 .grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -87,18 +54,32 @@ h1 {
 }
 
 .hole {
-  width: 80px;
-  height: 80px;
+  height: 90px;
   background-color: #795548;
   border-radius: 50%;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   cursor: pointer;
-  user-select: none;
 }
 
 .mole {
-  font-size: 40px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #fff;
+  background: #d97706;
+  padding: 4px 8px;
+  border-radius: 4px;
+  user-select: none;
+}
+
+.controls {
+  margin-top: 20px;
+}
+
+.controls button {
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
 }
 </style>

package/templates/vue-hospital-portal/src/components/AppointmentForm.vue

@@ -0,0 +1,144 @@
+<script setup>
+import { reactive } from 'vue'
+
+const props = defineProps({
+  doctors: { type: Array, required: true }
+})
+
+const emit = defineEmits(['submit-patient'])
+
+const form = reactive({
+  name: '',
+  age: '',
+  doctor: props.doctors[0]?.name || '',
+  bedType: 'General Ward',
+  bp: '120/80',
+  hr: 75,
+  temp: 98.6
+})
+
+function handleSubmit() {
+  if (!form.name.trim() || !form.age) return
+  emit('submit-patient', {
+    name: form.name.trim(),
+    age: Number(form.age),
+    doctor: form.doctor,
+    bedType: form.bedType,
+    vitals: {
+      bp: form.bp,
+      hr: Number(form.hr),
+      temp: Number(form.temp)
+    }
+  })
+  form.name = ''
+  form.age = ''
+}
+</script>
+
+<template>
+  <form @submit.prevent="handleSubmit" class="appt-form">
+    <h3>Patient Admission / OPD Registration</h3>
+
+    <div class="form-row">
+      <div class="form-group">
+        <label for="p-name">Patient Name</label>
+        <input id="p-name" v-model="form.name" required placeholder="Full Name" />
+      </div>
+      <div class="form-group">
+        <label for="p-age">Age</label>
+        <input id="p-age" v-model.number="form.age" type="number" min="1" max="120" required placeholder="Age" />
+      </div>
+    </div>
+
+    <div class="form-row">
+      <div class="form-group">
+        <label for="p-doc">Doctor</label>
+        <select id="p-doc" v-model="form.doctor">
+          <option v-for="d in doctors" :key="d.id" :value="d.name">{{ d.name }} ({{ d.specialty }})</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label for="p-bed">Bed Type</label>
+        <select id="p-bed" v-model="form.bedType">
+          <option value="General Ward">General Ward</option>
+          <option value="Semi-Private">Semi-Private</option>
+          <option value="Private Deluxe">Private Deluxe</option>
+          <option value="ICU">ICU</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="vitals-row">
+      <div class="form-group">
+        <label for="p-bp">BP</label>
+        <input id="p-bp" v-model="form.bp" placeholder="120/80" />
+      </div>
+      <div class="form-group">
+        <label for="p-hr">Heart Rate</label>
+        <input id="p-hr" v-model.number="form.hr" type="number" placeholder="75" />
+      </div>
+      <div class="form-group">
+        <label for="p-temp">Temp (F)</label>
+        <input id="p-temp" v-model.number="form.temp" type="number" step="0.1" placeholder="98.6" />
+      </div>
+    </div>
+
+    <button type="submit" class="btn btn-primary">Admit / Register</button>
+  </form>
+</template>
+
+<style scoped>
+.appt-form {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.appt-form h3 {
+  font-size: 16px;
+  margin-bottom: 4px;
+}
+
+.form-row, .vitals-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.form-group {
+  flex: 1;
+  min-width: 140px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.form-group label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #475569;
+}
+
+.form-group input,
+.form-group select {
+  padding: 8px 10px;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  font-size: 13px;
+}
+
+.btn-primary {
+  background: #0284c7;
+  color: #fff;
+  border: none;
+  padding: 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+  margin-top: 6px;
+}
+</style>

package/templates/vue-hospital-portal/src/components/DoctorCard.vue

@@ -0,0 +1,73 @@
+<script setup>
+defineProps({
+  doctor: { type: Object, required: true }
+})
+
+const emit = defineEmits(['book'])
+</script>
+
+<template>
+  <div class="doctor-card">
+    <h3>{{ doctor.name }}</h3>
+    <p class="specialty">{{ doctor.specialty }}</p>
+    <div class="doc-meta">
+      <span>Fee: ${{ doctor.fee }}</span>
+      <span>Slots: {{ doctor.availableSlots }}</span>
+    </div>
+    <button
+      type="button"
+      class="btn btn-book"
+      :disabled="doctor.availableSlots <= 0"
+      @click="emit('book', doctor.id)"
+    >
+      {{ doctor.availableSlots > 0 ? 'Book Consultation' : 'Fully Booked' }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.doctor-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.doctor-card h3 {
+  font-size: 16px;
+  margin: 0;
+  color: #1e293b;
+}
+
+.specialty {
+  font-size: 13px;
+  color: #64748b;
+  margin: 0;
+}
+
+.doc-meta {
+  display: flex;
+  justify-content: space-between;
+  font-size: 13px;
+  font-weight: 600;
+  margin: 8px 0;
+}
+
+.btn-book {
+  padding: 8px 12px;
+  background: #0284c7;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.btn-book:disabled {
+  background: #cbd5e1;
+  cursor: not-allowed;
+}
+</style>