Post - Rock Paper Scissors Lizard Spock: A Developer's Challenge

_config.yml

@@ -16,7 +16,7 @@ timezone:
 
 title: Huy Nguyen # the main title
 
-tagline: I am a software engineer with degree in software development for 12 years and married to technoogies # it will display as the subtitle
+tagline: A software engineer with degree in software development for 12 years and married to technoogies # it will display as the subtitle
 
 description: A place for sharing
 

_data/authors.yml

@@ -0,0 +1,4 @@
+999999:
+  name: Huy Nguyen
+  twitter: <twitter_of_author>
+  url: https://huynguyen1989.github.io/me/

_posts/2019-08-08-text-and-typography.md

@@ -5,7 +5,7 @@ author: cotes
 date: 2019-08-08 11:33:00 +0800
 categories: [Blogging, Demo]
 tags: [typography]
-pin: true
+pin: false
 math: true
 mermaid: true
 image:

_posts/2024-09-04-Rock-Paper-Scissor-Assignment

@@ -0,0 +1,342 @@
+---
+title: Rock Paper Scissors Lizard Spock: A Developer's Challenge
+description: Job's position assignment.
+author: 999999	
+date: 2024-08-08 12:12:00 +0800
+categories: [Blogging, Interview]
+tags: [interview]
+pin: true
+math: true
+mermaid: true
+image:
+  path: /Users/cross/Documents/InProgress/Github_Development/me/assets/posts/2024/POST-ID-1/mobile-rules-modal-bonus.jpg
+  alt: The Rules of Rock Paper Scissors Lizard Spock.
+---
+<!-- POST-ID-1 -->
+# A Developer's Challenge
+{: .mt-4 .mb-0 }
+
+The classic game of Rock Paper Scissors has been a staple of playgrounds and social gatherings for generations. However, in 2005, The Big Bang Theory's Raj Koothrappali and Sheldon Cooper introduced a new twist to the game: Rock Paper Scissors Lizard Spock. This expanded version of the game adds two new hand signals, "Lizard" and "Spock," and a new set of rules to govern their interactions.
+
+As a developer, you may be wondering how to tackle this problem and create a program that can play Rock Paper Scissors Lizard Spock. In this article, we'll explore the rules of the game, discuss possible approaches to solving the problem, and provide a sample implementation in Python | Javascript.
+
+The interview assignment focuses on resolving the problem of determining the winner using various methods, and delves deep into: coding skills, code patterns, live coding, and problem-solving approaches 
+
+- Front-End Framework using ReactJS
+- Back-End NodeJS and dependencies
+
+## Capture of given assets
+
+Of couse every assignment would not be in happy path :cry:
+![Desktop View](assets/posts/2024/POST-ID-1/ScreenShot-1.jpg){: width="450" height="350" }
+_Built and run_
+
+
+![Desktop View](assets/posts/2024/POST-ID-1/ScreenShot-2.jpg){: width="450" height="350" }
+_After hours of reading and fixed everything now in place_
+
+
+## Approaches to Solving the Problem
+
+1. If-Else Force 
+```Typescript
+export const winner = (player1: string, player2: string): string | undefined => {
+	let winner: string = '';
+
+	if (player1 === 'scissors') {
+		if (player2 === 'scissors') winner = 'draw';
+		else if (player2 === 'paper' || player2 === 'lizard') winner = player1;
+		else winner = player2;
+	} else if (player1 === 'paper') {
+		if (player2 === 'paper') winner = 'draw';
+		else if (player2 === 'rock' || player2 === 'spock') winner = player1;
+		else winner = player2;
+	} else if (player1 === 'rock') {
+		if (player2 === 'rock') winner = 'draw';
+		else if (player2 === 'lizard' || player2 === 'scissors') winner = player1;
+		else winner = player2;
+	} else if (player1 === 'lizard') {
+		if (player2 === 'lizard') winner = 'draw';
+		else if (player2 === 'spock' || player2 === 'paper') winner = player1;
+		else winner = player2;
+	} else if (player1 === 'spock') {
+		if (player2 === 'spock') winner = 'draw';
+		else if (player2 === 'scissors' || player2 === 'rock') winner = player1;
+		else winner = player2;
+	} else winner = 'draw';
+
+	return winner;
+};
+```
+2. Modular Arithmetic Approach
+
+```Typescript
+import { SIGN } from 'types'
+
+export const rules = {
+	[SIGN.PAPER]: new Set([SIGN.ROCK, SIGN.SPOCK]),
+	[SIGN.ROCK]: new Set([SIGN.SCISSORS, SIGN.LIZARD]),
+	[SIGN.SCISSORS]: new Set([SIGN.PAPER, SIGN.LIZARD]),
+	[SIGN.LIZARD]: new Set([SIGN.SPOCK, SIGN.PAPER]),
+	[SIGN.SPOCK]: new Set([SIGN.ROCK, SIGN.SCISSORS]),
+}
+```
+
+```Typescript
+import { SIGN } from 'types'
+
+export const rules = {
+	[SIGN.PAPER]: new Set([SIGN.ROCK, SIGN.SPOCK]),
+	[SIGN.ROCK]: new Set([SIGN.SCISSORS, SIGN.LIZARD]),
+	[SIGN.SCISSORS]: new Set([SIGN.PAPER, SIGN.LIZARD]),
+	[SIGN.LIZARD]: new Set([SIGN.SPOCK, SIGN.PAPER]),
+	[SIGN.SPOCK]: new Set([SIGN.ROCK, SIGN.SCISSORS]),
+}
+```
+
+3. Polar Coordinate System  - My approaching for more than 5 choices
+
+
+```text
+Number of possible cases, we can multiply the number of choices for each player
+- 5 choices = 5*5 = 25 total cases
+
+	2-D Array from 360/5 = 72 degree for each choice
+
+	1 Radian = 180/π  = 57.296 Deg
+	2π 	* rad   			= 360
+	2π/3 * rad 				= 120 deg
+	π/3 	* rad  			= 60  deg
+
+	1 Degree = degree * π/180 = 0.0174 Radial
+
+- List of choices would be [2π/5, 4π/5, 6π/5, 8π/5, 2π]
+
+- Following game's rules checking the angle of 2 choices
+
+	If Choice-1 === choice-2 => Draw
+	(If both choices from same position)
+
+	--- Circular rule ---
+	If |choice-1 - choice-2|   == 2π/5 => choice-1 win 
+	(check user's choice at X-position - 72 degree => Y-position of computer's choice => that's mean user's winning)
+
+	If |choice-2 - choice-1|   == 2π/5 => choice-2 win
+	(check computer's choice at X-position - 72 degree => Y-position of computer's choice => that's mean computer's winning)
+
+	--- Hexagon rule ---
+	If choice-1 - 2π/3*rad = choice-2 => chocie-1 win
+	(Check angles of both choices in between 144 Degree)
+```
+
+```css
+
+/* Angles - The use of some css preprocessor would be nice for iteration*/
+.deg72 {
+	position: absolute;
+	transform: rotate(72deg) translate(145px) rotate(-95deg);
+}
+.deg144 {
+	position: absolute;
+	transform: rotate(144deg) translate(145px) rotate(-144deg);
+
+}
+.deg216 {
+	position: absolute;
+	transform: rotate(216deg) translate(145px) rotate(-216deg);
+
+}
+.deg288 {
+	position: absolute;
+	transform: rotate(288deg) translate(145px) rotate(-288deg);
+
+}
+.deg360 {
+	position: absolute;
+	transform: rotate(360deg) translate(145px) rotate(-360deg);
+
+}
+
+```
+
+
+### Finalize
+
+So, the easiest way to implement the function to detect a winner would be the 1st and 2nd options.
+
+The advantage of the 3rd solution is that it allows to extend to many many choices and for a more consistent implementation of the UI and solution, but this would be more suitable for requirements that can be handled on the client's side. Some calculations would need to be placed on the server's side.
+
+To keep things simple and easy, as the assignment requires, we should choose the 1st and 2nd options to make the code more consistent, rather than opting for the complexity of the 3rd way
+
+
+#### H4 — heading
+{: data-toc-skip='' .mt-4 }
+<!-- markdownlint-restore -->
+
+## Paragraph
+
+Quisque egestas convallis ipsum, ut sollicitudin risus tincidunt a. Maecenas interdum malesuada egestas. Duis consectetur porta risus, sit amet vulputate urna facilisis ac. Phasellus semper dui non purus ultrices sodales. Aliquam ante lorem, ornare a feugiat ac, finibus nec mauris. Vivamus ut tristique nisi. Sed vel leo vulputate, efficitur risus non, posuere mi. Nullam tincidunt bibendum rutrum. Proin commodo ornare sapien. Vivamus interdum diam sed sapien blandit, sit amet aliquam risus mattis. Nullam arcu turpis, mollis quis laoreet at, placerat id nibh. Suspendisse venenatis eros eros.
+
+## Lists
+
+### Ordered list
+
+1. Firstly
+2. Secondly
+3. Thirdly
+
+### Unordered list
+
+- Chapter
+  - Section
+    - Paragraph
+
+### ToDo list
+
+- [ ] Job
+  - [x] Step 1
+  - [x] Step 2
+  - [ ] Step 3
+
+### Description list
+
+Sun
+: the star around which the earth orbits
+
+Moon
+: the natural satellite of the earth, visible by reflected light from the sun
+
+## Block Quote
+
+> This line shows the _block quote_.
+
+## Prompts
+
+<!-- markdownlint-capture -->
+<!-- markdownlint-disable -->
+> An example showing the `tip` type prompt.
+{: .prompt-tip }
+
+> An example showing the `info` type prompt.
+{: .prompt-info }
+
+> An example showing the `warning` type prompt.
+{: .prompt-warning }
+
+> An example showing the `danger` type prompt.
+{: .prompt-danger }
+<!-- markdownlint-restore -->
+
+## Tables
+
+| Company                      | Contact          | Country |
+| :--------------------------- | :--------------- | ------: |
+| Alfreds Futterkiste          | Maria Anders     | Germany |
+| Island Trading               | Helen Bennett    |      UK |
+| Magazzini Alimentari Riuniti | Giovanni Rovelli |   Italy |
+
+## Links
+
+<http://127.0.0.1:4000>
+
+## Footnote
+
+Click the hook will locate the footnote[^footnote], and here is another footnote[^fn-nth-2].
+
+## Inline code
+
+This is an example of `Inline Code`.
+
+## Filepath
+
+Here is the `/path/to/the/file.extend`{: .filepath}.
+
+## Code blocks
+
+### Common
+
+```text
+This is a common code snippet, without syntax highlight and line number.
+```
+
+### Specific Language
+
+```bash
+if [ $? -ne 0 ]; then
+  echo "The command was not successful.";
+  #do the needful / exit
+fi;
+```
+
+### Specific filename
+
+```sass
+@import
+  "colors/light-typography",
+  "colors/dark-typography";
+```
+{: file='_sass/jekyll-theme-chirpy.scss'}
+
+## Mathematics
+
+The mathematics powered by [**MathJax**](https://www.mathjax.org/):
+
+$$
+\begin{equation}
+  \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}
+  \label{eq:series}
+\end{equation}
+$$
+
+We can reference the equation as \eqref{eq:series}.
+
+When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
+
+$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
+
+## Mermaid SVG
+
+```mermaid
+ gantt
+  title  Adding GANTT diagram functionality to mermaid
+  apple :a, 2017-07-20, 1w
+  banana :crit, b, 2017-07-23, 1d
+  cherry :active, c, after b a, 1d
+```
+
+## Images
+
+### Default (with caption)
+
+![Desktop View](/posts/20190808/mockup.png){: width="450" height="350" }
+_Full screen width and center alignment_
+
+### Left aligned
+
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-75 .normal}
+
+### Float to left
+
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .left}
+Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
+
+### Float to right
+
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .right}
+Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
+
+### Dark/Light mode & Shadow
+
+The image below will toggle dark/light mode based on theme preference, notice it has shadows.
+
+![light mode only](/posts/20190808/devtools-light.png){: .light .w-75 .shadow .rounded-10 w='1212' h='668' }
+![dark mode only](/posts/20190808/devtools-dark.png){: .dark .w-75 .shadow .rounded-10 w='1212' h='668' }
+
+## Video
+
+{% include embed/youtube.html id='Balreaj8Yqs' %}
+
+## Reverse Footnote
+
+[^footnote]: The footnote source
+[^fn-nth-2]: The 2nd footnote source