A text adventure game experiment
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

70 lines
2.4KB

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  5. <link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
  6. <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  8. </head>
  9. <body>
  10. <div id="app">
  11. <v-app>
  12. <profile></profile>
  13. <v-content style="margin-bottom: 56px" dark>
  14. <v-container v-show="view=='look'">
  15. <stats :game="game"></stats>
  16. <location :game="game"></location>
  17. <items :game="game"></items>
  18. <monsters :game="game"></monsters>
  19. <go :game="game"></go>
  20. </v-container>
  21. <v-container v-show="view=='inventory'">
  22. <inventory :game="game"></inventory>
  23. </v-container>
  24. <v-container v-show="view=='equipment'">
  25. <equipment :game="game"></equipment>
  26. </v-container>
  27. <v-container v-show="view=='history'">
  28. <history :game="game"></history>
  29. </v-container>
  30. </v-content>
  31. <v-snackbar top v-model="snackbar" :color="notificationColor">
  32. <span v-html="notification"></span>
  33. <v-btn
  34. text
  35. multi-line
  36. @click="snackbar = false"
  37. >
  38. Close
  39. </v-btn>
  40. </v-snackbar>
  41. <v-bottom-navigation v-model="view" fixed grow dark color="#f4511e">
  42. <v-btn active value="look">
  43. <span>Look</span>
  44. <v-icon>mdi-eye</v-icon>
  45. </v-btn>
  46. <v-btn value="inventory">
  47. <span>Inventory</span>
  48. <v-icon>mdi-toolbox</v-icon>
  49. </v-btn>
  50. <v-btn value="equipment">
  51. <span>Equipment</span>
  52. <v-icon>mdi-sword</v-icon>
  53. </v-btn>
  54. <v-btn value="history">
  55. <span>History</span>
  56. <v-icon>mdi-history</v-icon>
  57. </v-btn>
  58. </v-bottom-navigation>
  59. </v-app>
  60. </div>
  61. <script src='node_modules/js-yaml/dist/js-yaml.min.js'></script>
  62. <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  63. <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  64. <script src="mobile.js" type="module"></script>
  65. </body>
  66. </html>