v1.0 (#16)

parksb · Dec 23, 2018 · eb39baa · eb39baa
2 parents 129e229 + cc0ed6d
commit eb39baa
Show file tree

Hide file tree

Showing 12 changed files with 181 additions and 94 deletions.
diff --git a/README.md b/README.md
@@ -1,14 +1,16 @@
 # Santa Inc.
 
-![](https://img.shields.io/github/release-pre/ParkSB/santa-inc.svg?style=flat-square)
-![](https://img.shields.io/github/license/ParkSB/santa-inc.svg?style=flat-square)
+[![](https://img.shields.io/github/release-pre/ParkSB/santa-inc.svg?style=flat-square)](https://github.com/ParkSB/santa-inc/releases)
+[![](https://img.shields.io/github/license/ParkSB/santa-inc.svg?style=flat-square)](https://github.com/ParkSB/santa-inc/blob/develop/LICENSE)
 
 > **_세계를 선도하는 글로벌 기업 (주)산타_**
 
 Santa Inc.는 루돌프와 요정을 착취하는 clicker 게임입니다. 초국적 블랙 기업 산타 주식회사를 운영해보세요! 
 
-# [🎮 PLAY (Web)](https://harooo.com/oddgame/santa/)
+# [🎮 PLAY (Web)](https://parksb.github.io/project/santainc/)
 
 ![Santa Inc.](assets/meta/preview.png)
 
-그렇습니다. 크리스마스에는 역시 코딩이죠. (2015년 12월 24일 ~~무리하게 크리스마스 이브에 맞춰 런칭하려다가 엉망이 된~~ 완성된 코드는 [GitLab - Santa Inc. v1.0.1](https://gitlab.com/ParkSB/santa-inc)에 있습니다.)
+그렇습니다. 크리스마스에는 역시 코딩이죠.
+
+2015년 12월 24일 ~~무리하게 크리스마스 이브에 맞춰 런칭하려다가 엉망이 된~~ 완성된 코드는 [GitLab - Santa Inc. v1.0.1](https://gitlab.com/ParkSB/santa-inc)에 있습니다. 2015년 1.0.1 버전은 [harooo.com/oddgame/santa](https://harooo.com/oddgame/santa/)에서 플레이할 수 있습니다.
diff --git a/public/index.html b/public/index.html
@@ -38,9 +38,9 @@
                 <li class="m-list m-off" id="personnel">인사</li>
             </ul>
         </div>
-        <ul id="item-list" class="on list">
-            <li class="preview">
-                <img class="item-img preview-img" src="./assets/rudolph.gif" />
+        <ul id="worker-list" class="on list">
+            <li id="preview">
+                <img class="worker-img preview-img" src="./assets/rudolph.gif" />
                 <p>???
                     <img class="item-present-img" src="./assets/present.png" />
                     <span class="t">30</span>

diff --git a/public/style.css b/public/style.css
@@ -80,6 +80,11 @@ body {
     cursor: pointer;
 }
 
+#present-img:active {
+    filter: brightness(95%);
+    -webkit-filter: brightness(95%);
+}
+
 #present-num {
     margin-top: 0;
     margin-bottom: 0;
@@ -162,13 +167,13 @@ body {
     background-color: #303030;
 }
 
-.item-img {
+.worker-img {
     width: 60px;
     height: 60px;
     margin-left: 20px;
 }
 
-#item-list li p, #personnel-list li p {
+#worker-list li p, #personnel-list li p {
     color: white;
     font-size: 12pt;
     font-weight: bold;

diff --git a/src/interfaces/CommonInterface.ts b/src/interfaces/CommonInterface.ts
@@ -5,25 +5,37 @@ import Worker from '../workers/Worker';
 class CommonInterface {
   private static instance: CommonInterface;
 
+  private elements: any;
+
   constructor() {
     if (CommonInterface.instance) {
       return CommonInterface.instance;
     }
 
+    this.elements = {
+      playGround: $('#play-ground'),
+      presentImg: $('#present-img'),
+      creditContainer: $('#credit-container'),
+      creditCloseIcon: $('#credit-close-btn'),
+      creditIcon: $('#top-icon-container .fa-user-friends'),
+      audioIcon: $('#top-icon-container .audio-icon'),
+      menuItem: $('#menu li'),
+    };
+
     CommonInterface.instance = this;
   }
 
   attachPresentEvent(): void {
-    $('#present-img').click(() => {
+    this.elements.presentImg.click(() => {
       Game.updateTotalPresent(Game.getClickPresent());
     });
   } // attachPresentEvent
 
   attachMenuEvent(): void {
-    $('#menu li').on('click', (e: JQuery.Event) => {
+    this.elements.menuItem.on('click', (e: JQuery.Event) => {
       const { id } = <HTMLInputElement>e.target;
       const tab: any = {
-        hire: '#item-list',
+        hire: '#worker-list',
         policy: '#policy-list',
         personnel: '#personnel-list'
       };
@@ -37,12 +49,12 @@ class CommonInterface {
   } // attachMenuEvent
 
   attachCreditEvent(): void {
-    $('#top-icon-container .fa-user-friends').on('click', () => {
-      $("#credit-container").css("visibility", "visible").css("opacity", "1");
+    this.elements.creditIcon.on('click', () => {
+      this.elements.creditContainer.css("visibility", "visible").css("opacity", "1");
     });
 
-    $("#credit-close-btn").on('click', () => {
-        $("#credit-container").css("visibility", "hidden").css("opacity", "0");
+    this.elements.creditCloseIcon.on('click', () => {
+      this.elements.creditContainer.css("visibility", "hidden").css("opacity", "0");
     });
   } // attachCreditEvent
 
@@ -54,7 +66,7 @@ class CommonInterface {
     audio.loop = true;
     audio.play();
 
-    $('#top-icon-container .audio-icon').on('click', (e: JQuery.Event) => {
+    this.elements.audioIcon.on('click', (e: JQuery.Event) => {
       if (flag) {
         $(e.currentTarget).attr('class', 'fas fa-play top-icon');
         audio.pause();
@@ -70,9 +82,9 @@ class CommonInterface {
   refreshPlayGround(): void {
     const workers: Worker[] = Game.getHiredWorkers();
 
-    $('#play-ground').html('');
+    this.elements.playGround.html('');
     workers.forEach((worker: Worker) => {
-      $('#play-ground').append(`<img src="${worker.getImg()}" />`);
+      this.elements.palyGround.append(`<img src="${worker.getImg()}" />`);
     });
   } // refreshPlayGround
 }

diff --git a/src/interfaces/PersonnelInterface.ts b/src/interfaces/PersonnelInterface.ts
@@ -13,7 +13,27 @@ class PersonnelInterface {
     }
 
     this.elements = {
-      personnelList: '#personnel-list'
+      personnelList: $('#personnel-list'),
+      personnelItem: (
+        name: string,
+        img: string,
+        korName: string,
+        level: string,
+        levelCost: number,
+        output: number,
+      ) => {
+        return (
+          `<li id="${name}">` +
+          `<img class="worker-img" src="${img}"/>` +
+          `<p>${korName}` +
+          `<br/><span class="lv">${level}</span>` +
+          '<img class="item-present-img" src="./assets/present.png">' +
+          `<span class="t">${levelCost}</span>` +
+          `<br/><span class="output">${output}개 생산</span>` +
+          '</p>' +
+          '</li>'
+        );
+      }
     };
 
     PersonnelInterface.instance = this;
@@ -22,21 +42,21 @@ class PersonnelInterface {
   drawPersonnelList(worker: Worker): void {
     const level = Worker.getLevelList();
 
-    $(this.elements.personnelList).append(
-      `<li id="${worker.getName()}">` +
-      `<img class="item-img" src="${worker.getImg()}"/>` +
-      `<p>${worker.getKorName()}` +
-      `<br/><span class="lv">${level[worker.getLevel()]}</span>` +
-      '<img class="item-present-img" src="./assets/present.png">' +
-      `<span class="t">${worker.getLevelCost()}</span>` +
-      `<br/><span class="output">${worker.getOutput()}개 생산</span>` +
-      '</p>' +
-      '</li>'
+    this.elements.personnelList.append(
+      this.elements.personnelItem(
+        worker.getName(),
+        worker.getImg(),
+        worker.getKorName(),
+        level[worker.getLevel()],
+        worker.getLevelCost(),
+        worker.getOutput()
+      )
     );
   } // drawPersonnelList
 
   attachEvent(): void {
-    $(this.elements.personnelList).delegate('li', 'click', (e: JQuery.Event) => {
+    // 직원 승진
+    this.elements.personnelList.delegate('li', 'click', (e: JQuery.Event) => {
       const { id } = <HTMLInputElement>e.currentTarget;
       const workers: Worker[] = Game.getHiredWorkers();
 
@@ -46,7 +66,7 @@ class PersonnelInterface {
             const workerClass: any = worker.constructor;
             const originalOutput: number = worker.getOutput();
 
-            if (worker.getLevel() < 3 && worker.getOutput() < workerClass.getMaxOutput()) {
+            if ((worker.getLevel() < 3) && (worker.getOutput() < workerClass.getMaxOutput())) {
               const level = Worker.getLevelList();
 
               worker.increaseLevel();

diff --git a/src/interfaces/PolicyInterface.ts b/src/interfaces/PolicyInterface.ts
@@ -15,7 +15,25 @@ class PolicyInterface {
     }
 
     this.elements = {
-      policyList: '#policy-list'
+      policyList: $('#policy-list'),
+      policyItem: (
+        name: string,
+        korName: string,
+        cost: number,
+        description: string,
+        spec: string
+      ) => {
+        return (
+          `<li id="${name}">` +
+          `<p>${korName}` +
+          '<img class="item-present-img" src="./assets/present.png">' +
+          `<span class="t">${cost}</span>` +
+          `<br/><span style="font-weight:normal;">${description}</span>` +
+          `<br/><span style="font-size:10pt;color:#A0A0A0;font-weight:normal;">${spec}</span>` +
+          '</p>' +
+          '</li>'
+        );
+      },
     };
 
     this.policyTable = PolicyTable;
@@ -26,21 +44,20 @@ class PolicyInterface {
   drawPolicyList(policy: Policy): void {
     const policyClass: any = policy.constructor;
 
-    $(this.elements.policyList).append(
-      `<li id="${policy.getName()}">` +
-      `<p>${policy.getKorName()}` +
-      '<img class="item-present-img" src="./assets/present.png">' +
-      `<span class="t">${policyClass.getCost()}</span>` +
-      `<br/><span style="font-weight:normal;">${policy.getDescription()}</span>` +
-      `<br/><span style="font-size:10pt;color:#A0A0A0;font-weight:normal;">${policy.getSpec()}</span>` +
-      '</p>' +
-      '</li>'
+    this.elements.policyList.append(
+      this.elements.policyItem(
+        policy.getName(),
+        policy.getKorName(),
+        policyClass.getCost(),
+        policy.getDescription(),
+        policy.getSpec()
+      )
     );
   } // drawPolicyList
 
   attachEvent(): void {
     // 정책 채택
-    $(this.elements.policyList).delegate('li', 'click', (e: JQuery.Event) => {
+    this.elements.policyList.delegate('li', 'click', (e: JQuery.Event) => {
       const { id } = <HTMLInputElement>e.currentTarget;
       const policy: Policy = new this.policyTable[id]();
       const policyClass: any = this.policyTable[id];
@@ -51,6 +68,7 @@ class PolicyInterface {
 
         Game.updateTotalPresent(-1 * policyClass.getCost());
         $(`#${id}`).remove();
+
         policy.execute();
 
         if (nextPolicies) {