index.html 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <!DOCTYPE html>
  2. <html>
  3. <title>Tribe Management</title>
  4. <script src='source.js'></script>
  5. <link rel="stylesheet" type="text/css" href="style.css">
  6. <meta charset="utf-8" />
  7. <body>
  8. <div id='main'>
  9. <p id='year'>Year: 100</p>
  10. <h2>RESOURCES</h2>
  11. <div class='resourceTable'>
  12. <div class='column'>
  13. <p><b>Food</b></p>
  14. <p id='food'>10</p>
  15. <button onclick='moreFood()' onmouseover='showInfo(true, "food")' onmouseout="showInfo(false)">More Food</button>
  16. <p id='fTimer'><i>0</i></p>
  17. </div>
  18. <div class='column'>
  19. <p><b>Water</b></p>
  20. <p id='water'>10</p>
  21. <button onclick='moreWater()' onmouseover='showInfo(true, "water")' onmouseout="showInfo(false)">More Water</button>
  22. <p id='waTimer'><i>0</i></p>
  23. </div>
  24. <div class='column'>
  25. <p><b>Wood</b></p>
  26. <p id='wood'>15</p>
  27. <button onclick='moreWood()' onmouseover='showInfo(true, "wood")' onmouseout="showInfo(false)">More Wood</button>
  28. <p id='woTimer'><i>0</i></p>
  29. </div>
  30. <div class='column' id='hiddenStone'>
  31. <p><b>Stone</b></p>
  32. <p id='stone'>0</p>
  33. <button onclick='moreStone()' onmouseover='showInfo(true, "stone")' onmouseout="showInfo(false)">More Stone</button>
  34. <p id='sTimer'><i>0</i></p>
  35. </div>
  36. </div>
  37. <br>
  38. <!--<button onclick='endTurn()' onmouseover='showInfo(true, "endyr")' onmouseout="showInfo(false)">End Year</button>-->
  39. <p id='warnings'></p>
  40. <div id='war'>
  41. <p>Hide me until armory bought</p>
  42. <button onclick='raid()' onmouseover='showInfo(true, "raid")' onmouseout="showInfo(false)">Go raiding</button>
  43. <button onclick='conquer()' onmouseover='showInfo(true, "war")' onmouseout="showInfo(false)">Go to war</button>
  44. </div>
  45. <div id='trade'>
  46. <p>Hide me until trade post bought</p>
  47. </div>
  48. </div>
  49. <div id='second'>
  50. <p id='pop'>Population: 8/8</p>
  51. <p id='unusedPop'>Available Workers: 0/8</p>
  52. <h2>BUILD</h2>
  53. <p><b>Home </b></p>
  54. <p id='homes'>2<p>
  55. <p id='homeMat'>Required: 50 Wood</p>
  56. <button onclick='buildHouse()' onmouseover='showInfo(true, "home")' onmouseout="showInfo(false)">Build a home</button>
  57. <div class='workerAreas'>
  58. <div id='side1' class='column'>
  59. <h2>RESOURCES</h2>
  60. <div id='farmBuilds'>
  61. <p><b>Farm</b></p>
  62. <p id='farm'>0</p>
  63. <p id='farmMat'>Required: 40 Wood</p>
  64. <button onclick='buildFarm()' onmouseover='showInfo(true, "farm")' onmouseout="showInfo(false)">Build Farm</button>
  65. <br>
  66. <button onclick='addWorker(true, "farmer")'>Λ</button>
  67. <button onclick='addWorker(false, "farmer")'>V</button>
  68. <p id='farmerCount'><i>Farmers: 8/8</i></p>
  69. <div id='loggingCamps'>
  70. <p><b>Logging Camp</b></p>
  71. <p id='logs'>0</p>
  72. <p id='logMat'>Required: 40 Wood</p>
  73. <button onclick='buildLogger()' onmouseover='showInfo(true, "log")' onmouseout="showInfo(false)">Build logging camp</button>
  74. <br>
  75. <button onclick='addWorker(true, "logger")'>Λ</button>
  76. <button onclick='addWorker(false, "logger")'>V</button>
  77. <p id='loggerCount'><i>Loggers: 0/0</i></p>
  78. </div>
  79. <div id='quarryBuilds' >
  80. <p><b>Quarry</b></p>
  81. <p id='quarry'>0</p>
  82. <p id='quarryCost'>Required: 45 Wood</p>
  83. <button onclick="buildQuarry()" onmouseover='showInfo(true, "quarry")' onmouseout="showInfo(false)">Build quarry</button>
  84. <br>
  85. <button onclick='addWorker(true, "miner")'>Λ</button>
  86. <button onclick="addWorker(false, 'miner')">V</button>
  87. <p id='minerCount'><i>Miners: 0/0</i></p>
  88. </div>
  89. </div>
  90. </div>
  91. <div id='side2' class='column'>
  92. <h2>MILITARY</h2>
  93. <div id='wallBuilds'>
  94. <p><b>Wall</b></p>
  95. <p id='wall'>None</p>
  96. <p id='wallMat'>Required: 45 Wood</p>
  97. <button onclick='buildWall()' onmouseover='showInfo(true, "wall")' onmouseout="showInfo(false)">Build Wall</button>
  98. <br>
  99. <button onclick='addWorker(true, "guard")'>Λ</button>
  100. <button onclick='addWorker(false, "guard")'>V</button>
  101. <p id='guardCount'><i>Guards: 0/0</i></p>
  102. </div>
  103. <div id='ArmoryBuild'>
  104. <p><b>Armory</b></p>
  105. <p id='armory'>0</p>
  106. <p id='armCost'>Required: 40 Stone</p>
  107. <button onclick="buildArmory()" onmouseover='showInfo(true, "armory")' onmouseout="showInfo(false)">Build Armory</button>
  108. <br>
  109. <button onclick='addWorker(true, "soldier")'>Λ</button>
  110. <button onclick='addWorker(false, "soldier")'>V</button>
  111. <p id='soldierCount'><i>Soldiers: 0/0</i></p>
  112. </div>
  113. </div>
  114. <div id='side3' class='column'>
  115. <h2>MISC.</h2>
  116. <div id='tradeBuilds'>
  117. <p><b>Trading Post</b></p>
  118. <p id='tradePost'>0</p>
  119. <p id='tradeMat'>Required: 50 Wood</p>
  120. <button onclick='buildTrade()' onmouseover='showInfo(true, "trade")' onmouseout="showInfo(false)">Build Trade Post</button>
  121. </div>
  122. <div id='wellBuild'>
  123. <p><b>Well</b></p>
  124. <p id='well'>0</p>
  125. <p id='wellCost'>Required: 20 Stone</p>
  126. <button onclick='buildWell()' onmouseover='showInfo(true, "well")' onmouseout="showInfo(false)">Build Well</button>
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. <!--<div id='saveLoad'>
  132. <--<p><i>note: saving uses cookies. by saving the game,<br>you accept the cookies taken by the game.</i></p>--
  133. <button onclick="saveGame()">Save game</button>
  134. <button onclick='loadGame()'>Load game</button>
  135. </div>-->
  136. <div id='info'>
  137. <p id='itemInformation'>hi</p>
  138. </div>
  139. <div class='speedButtons'>
  140. <button onclick='speedChange(0)' id='pause'><img src='Icons/icons8-pause-24.png'></button>
  141. <button onclick='speedChange(1)' id='speed1'><img src='Icons/icons8-play-24.png'></button>
  142. <button onclick='speedChange(2)' id='speed2'><img src='Icons/icons8-fast-forward-24.png'></button>
  143. <button onclick="speedChange(3)" id='speed3'><img src='Icons/icons8-end-24.png'></button>
  144. </div>
  145. <!--<div id='pause'>
  146. </div>-->
  147. <div id='menu'>
  148. <img src='icons8-menu-24.png' onclick='showMenu()'>
  149. <div id='fullMenu'>
  150. <div id='saveLoad'>
  151. <!--<p><i>note: saving uses cookies. by saving the game,<br>you accept the cookies taken by the game.</i></p>-->
  152. <button onclick="saveGame()">Save game</button>
  153. <button onclick='loadGame()'>Load game</button>
  154. </div>
  155. </div>
  156. </div>
  157. </body>
  158. <!--<a target="_blank" href="https://icons8.com/icons/set/menu">Menu icon</a> icon by <a target="_blank" href="https://icons8.com">Icons8</a>-->
  159. </html>