From 14370b6fdb3f16d6d7c1dbd0d62bebf69b6b6290 Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Thu, 26 Dec 2024 23:29:15 +0100
Subject: [PATCH] 04 inizio monster slayer game
---
04 - monster slayer game/prj-monster-01-starting-setup/styles.css | 119 +++++++++++++++++++++++++++++++++++++++
04 - monster slayer game/prj-monster-01-starting-setup/index.html | 44 ++++++++++++++
04 - monster slayer game/prj-monster-01-starting-setup/app.js | 10 +++
3 files changed, 173 insertions(+), 0 deletions(-)
diff --git a/04 - monster slayer game/prj-monster-01-starting-setup/app.js b/04 - monster slayer game/prj-monster-01-starting-setup/app.js
new file mode 100644
index 0000000..7a1c0b4
--- /dev/null
+++ b/04 - monster slayer game/prj-monster-01-starting-setup/app.js
@@ -0,0 +1,10 @@
+const app = Vue.createApp({
+ data() {
+ return {};
+ },
+ computed: {},
+ watch: {},
+ methods: {},
+ });
+
+ app.mount("#game");
\ No newline at end of file
diff --git a/04 - monster slayer game/prj-monster-01-starting-setup/index.html b/04 - monster slayer game/prj-monster-01-starting-setup/index.html
new file mode 100644
index 0000000..7ad1663
--- /dev/null
+++ b/04 - monster slayer game/prj-monster-01-starting-setup/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Vue Basics</title>
+ <link
+ href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
+ rel="stylesheet"
+ />
+ <link rel="stylesheet" href="styles.css" />
+ <script src="https://unpkg.com/vue@next" defer></script>
+ <script src="app.js" defer></script>
+ </head>
+ <body>
+ <header>
+ <h1>Monster Slayer</h1>
+ </header>
+ <div id="game">
+ <section id="monster" class="container">
+ <h2>Monster Health</h2>
+ <div class="healthbar">
+ <div class="healthbar__value"></div>
+ </div>
+ </section>
+ <section id="player" class="container">
+ <h2>Your Health</h2>
+ <div class="healthbar">
+ <div class="healthbar__value"></div>
+ </div>
+ </section>
+ <section id="controls">
+ <button>ATTACK</button>
+ <button>SPECIAL ATTACK</button>
+ <button>HEAL</button>
+ <button>SURRENDER</button>
+ </section>
+ <section id="log" class="container">
+ <h2>Battle Log</h2>
+ <ul></ul>
+ </section>
+ </div>
+ </body>
+</html>
diff --git a/04 - monster slayer game/prj-monster-01-starting-setup/styles.css b/04 - monster slayer game/prj-monster-01-starting-setup/styles.css
new file mode 100644
index 0000000..fbc6fbb
--- /dev/null
+++ b/04 - monster slayer game/prj-monster-01-starting-setup/styles.css
@@ -0,0 +1,119 @@
+* {
+ box-sizing: border-box;
+}
+
+html {
+ font-family: 'Jost', sans-serif;
+}
+
+body {
+ margin: 0;
+}
+
+header {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ padding: 0.5rem;
+ background-color: #880017;
+ color: white;
+ text-align: center;
+ margin-bottom: 2rem;
+}
+
+section {
+ width: 90%;
+ max-width: 40rem;
+ margin: auto;
+}
+
+.healthbar {
+ width: 100%;
+ height: 40px;
+ border: 1px solid #575757;
+ margin: 1rem 0;
+ background: #fde5e5;
+}
+
+.healthbar__value {
+ background-color: #00a876;
+ width: 100%;
+ height: 100%;
+}
+
+.container {
+ text-align: center;
+ padding: 0.5rem;
+ margin: 1rem auto;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ border-radius: 12px;
+}
+
+#monster h2,
+#player h2 {
+ margin: 0.25rem;
+}
+
+#controls {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+}
+
+button {
+ font: inherit;
+ border: 1px solid #88005b;
+ background-color: #88005b;
+ color: white;
+ padding: 1rem 2rem;
+ border-radius: 12px;
+ margin: 1rem;
+ width: 12rem;
+ cursor: pointer;
+ box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
+}
+
+button:focus {
+ outline: none;
+}
+
+button:hover,
+button:active {
+ background-color: #af0a78;
+ border-color: #af0a78;
+ box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.26);
+}
+
+button:disabled {
+ background-color: #ccc;
+ border-color: #ccc;
+ box-shadow: none;
+ color: #3f3f3f;
+ cursor: not-allowed;
+}
+
+#log ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+#log li {
+ margin: 0.5rem 0;
+}
+
+.log--player {
+ color: #7700ff;
+}
+
+.log--monster {
+ color: #da8d00;
+}
+
+.log--damage {
+ color: red;
+}
+
+.log--heal {
+ color: green;
+}
\ No newline at end of file
--
Gitblit v1.8.0