Peter Vivo

Posted on Sep 29 • Edited on Oct 14

A L I E N - S O L I T A R E

#devchallenge #gamechallenge #gamedev #webdev

This is a submission for the Web Game Challenge, Build a Game: Alien Edition

What I Built

A L I E N - S O L I T A R E
powered by jsdoc-duck

TLDR: play: alien-solitare.vercel.app How to play are included.

finally I reach the status where images don't selected randomly

Technical Achievement: I created a small jsDoc source React state handling npm module called: jsdoc-duck but until now I don't write any example application for it, I think this Challange is a right time for do it, and proof my module concept are working. Also proof the jsDoc working fine, and usable to typesafe JS coding without TypeScript.

Plagiarism: Saddly my time is very limited, so a first moment I write down the base concept to my phone meanwhile of passenger of country drive ( 2hr ) in temux and vim. My plane was 2 or 3 day development time is need to be enough, but I am not the fastes developer. That why I choose this game method which is very lovely, mid complex, used by: Card Crawl - base idea, reworked that game mechanism to Alien theme.

Art: A previous year I spended to create many (60K+) AI generated images with (dream.ai, clipDrop, ChatGPT) , so I have enough Sci-Fi related which is handy for this game.

Something above us!

Aliens or worst. For solving our mankind agression we are decide: stop the war on Earth, and let's go outside and conquerer as many planet as possible - we hope to find at least one. Each political group and great company agree to start exploring a different direction!

"We ended the war on Earth by starting a war in the stars."

Key Code:

duck working according this developer declared type contain all actions with their types

/**
 * @typedef { |
 * { type: "CREATE_DECK", payload: Card[] } |
 * { type: "SHUFFLE_DECK" } |
 * { type: "RELEASE_CARD", payload: SlotId } |
 * { type: "DRAG_START", payload: {from:SlotId, card:Card} } |
 * { type: "MOVE_CARD", payload: Card } |
 * { type: "DRAG_END", payload: SlotId } |
 * { type: "PLAY_CARD", payload: {actor:Card, slotId:SlotId } } |
 * { type: "GO_ON", payload: Phases } |
 * { type: "WHAT_IS_NEXT" }
 * } Actions
 */

Demo

alien-solitare.vercel.app

Pengeszikra / alien-solitare

jsdoc-duck example game for dev.io Challenge

This is a submission for the Web Game Challenge, Build a Game: Alien Edition

What I Built

A L I E N - S O L I T A R E powered by jsdoc-duck

View on GitHub

jsdoc-duck - npm

react/jsdoc minimal typesafe state handling. Latest version: 0.0.5, last published: 2 months ago. Start using jsdoc-duck in your project by running `npm i jsdoc-duck`. There are no other projects in the npm registry using jsdoc-duck.

npmjs.com

Journey

Under heavy development:

... when the drag and drop are start working

... deck building according Crawl Card Deck List plagium

I was rethink, this is a perfect example of interactive TDD development in process, because on editor I was modify the cardCollections.js and on the screen I continous show the result, which is collected this query on proper format, on game page.

<pre>{JSON.stringify({
  hostile: state.deck.filter(card => card.side === "DARK" && card.work === "HIT").map(card => card.power).sort(descend).join(),
  fighter: state.deck.filter(card => card.side === "LIGHT" && card.work === "HIT").map(card => card.power).sort(descend).join(),
  survivor: state.deck.filter(card => card.side === "LIGHT" && card.work === "PROTECT").map(card => card.power).sort(descend).join(),
  medicine: state.deck.filter(card => card.side === "LIGHT" && card.work === "RAISE").map(card => card.power).sort(descend).join(),
  assets: state.deck.filter(card => card.side === "LIGHT" && card.work === "WORTH").map(card => card.power).sort(descend).join(),
  skill: state.deck.filter(card => card.side === "LIGHT" && card.work === "SKILL").map(card => card.name).join(),
  debug: state.deck.filter(card => card.side !== "LIGHT" && card.side !== "DARK").map(card => card.id).join(),
  }, null, 2)}</pre>

final rush aganst the time: just 9h left, and need to be finalize the game rule, replace a random images with a selected set, publish to somwhere the running code. This is still a POC, that why I choose jump into a middle of development, and the game core part will realise.

License: Open Source

[    ][    ][     ][         ] <- 4 possible card draw from deck
[item][hero][alien][spaceship] <- hero have solution points

Burn Out vs. Survive

Our Captain (represent you in the game) have a bunch of solution to facing with incoming problems. But you can also manage allys and collect the assets. Two possible outcome will happen: Captain run out of solution and that is lead to Burn Out. But if no more problems, then Captain Survive and happy after all. Until the next mission...

Code size by Tokei

Comments is the jsDoc type system.

Yellow are indicated TYPE in code

thx to jsDoc

Live Without CSS file

Instead CSS I using Tailwind, but for simplify it is directly linked to html as cdn:

<script src="https://cdn.tailwindcss.com"></script>

Drawback: Not for product ready warning:

Previous image devtool log also show we can live without redux devtool, because we saw the ongoing react actions like in Redux just much lighter weight. Do not burn the woods!:

React Devtool

Proof to our game component structure keep as simple as possible.

Conclusion

So this game are very early POC state at right moment, but it is open source (jsdoc-duck also), so any one who is feel energy to improving this one will be a full functional game. This is a short feature list which is need to be develop:

some begining of game
card release animation
drop the Ally
skill cards
collect a new skill, captain card
more dangerous mission
UI graph
Redesign card border
high score
L5, L6, A3, S2 :: Space-ship / Location dynamic table size feature
responsive design
... lot of in my head, but need to be finishing the code MVP version.

Happy Coding! Remember: Something Above Us! quack . quack .. quack ....

Top comments (4)

Peter Vivo • Sep 30 • Edited

When I was start implementing the drag and drop parts which is hold a main branch of game rule. A first iteration was a if statement, but shortly identifyed, that is a too painfull, that why I choose a switch - case - return solution, whicsh is wery familar on React programmin. Just the returning state is need to be rework a good old redux reducer way.

/** @type {(move:Move) => State} */
const tableRule = (move) => {
  console.log('move::', move)
  const { table } = state;
  switch (move.join()) {

    case _(["LINE", "ACTIVE", "ALLY", "FIX"]):
    case _(["STORE", "ACTIVE", "ALLY", "FIX"]): {
      // captain solution fix aka heal
      if (table[to].card) return state;
      const captain = table.HERO.card;  
      const regen = Math.min(
          captain.maxPower - captain.power, 
          card.power
       );
      captain.power += regen;
      return {
        ...state,
        table: {
          ...table,
          [from]: { ...table[from], card: null }, 
          [to]: { ...table[to], card },
          HERO: { ...table.HERO, card: captain }
        },
        fly: null,
      };
      case _(["STORE", "ACTIVE", "ALLY", "ENGAGE"]):
      case _(["STORE", "ACTIVE", "ALLY", "GUARD"]):
      case _(["STORE", "ACTIVE", "ALLY", "SKILL"]):
        return table[to].card
          ? state
          : playOnTable(table)
        ;
      case: default: return state;
    }

  }
};

Peter Vivo • Oct 2 • Edited

The missing piece of my game was the easy interaction and animation. Instead of drag and drop which is working on desktop perfect. This click based with mooving anim is better. Bonus: this code a pure one page HTML just tailwind include. Using template tag.

Also critical part is the responsibility: ~~This layout POC just works on portrait mode. Some minor fixes are need for this.~~ But this POC can show the possibilities: have a life without framework. ( just CSS framework a good reason ).

Bit harder to remove drag and drop from my code and implement this method.

Peter Vivo • Oct 1

Mobile Last

known issue: This development process using Mobile Last philosophy, I don't tested on mobile until yesterday, result: Basic HTML drag and drop solution is don't work fine on mobile, so sure to make reworking ... soon.

Peter Vivo • Oct 6 • Edited

responsive version on air:

DEV Community

A L I E N - S O L I T A R E

What I Built

Something above us!

Key Code:

Demo

Pengeszikra / alien-solitare

jsdoc-duck example game for dev.io Challenge

What I Built

jsdoc-duck - npm

Journey

Burn Out vs. Survive

Code size by Tokei

Yellow are indicated TYPE in code

Live Without CSS file

React Devtool

Conclusion

Top comments (4)

Mobile Last

Read next

BLA ! BLA! BLA! DECEMBER...!

From Web2 to Web3: A Developer’s Guide to the Shift

How to Create a Dynamic Popover with CSS and JavaScript 🚀

Diving Back into React: A Software Engineer’s Learning Journey