From 32030c4a255ff6bbc09cf0b7dd064d4062d68ee1 Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Mon, 31 Jul 2023 14:31:36 +0200 Subject: [PATCH 1/7] add the color setup --- main.ts | 51 +++++++++++++++++++++++++++++++++------------------ 1 file changed, 33 insertions(+), 18 deletions(-) diff --git a/main.ts b/main.ts index a00745a..90bf228 100644 --- a/main.ts +++ b/main.ts @@ -1,28 +1,28 @@ type TPSSearchParams = { - display?: "house-only" | "full" + display?: 'house-only' | 'full' } const params = new URL(document.location.href).searchParams -const display = params.get("display") +const display = params.get('display') -if (display === "house-only") { - document.querySelector("header")?.remove() +if (display === 'house-only') { + document.querySelector('header')?.remove() } -const size = params.get("size") +const size = params.get('size') -if (size === "small") { - const body = document.querySelector("body") +if (size === 'small') { + const body = document.querySelector('body') if (body) { - body.style.fontSize = "15px" + body.style.fontSize = '15px' } } -const focusElements = params.getAll("focus") +const focusElements = params.getAll('focus') if (focusElements.length > 0) { - const focusables = document.querySelectorAll(".focusable") + const focusables = document.querySelectorAll('.focusable') focusables.forEach((focusable) => { const elementToFocus = focusElements.some((element) => @@ -30,20 +30,35 @@ if (focusElements.length > 0) { ) if (!elementToFocus) { - focusable.classList.add("no-focus") + focusable.classList.add('no-focus') } }) } -const textHide = params.get("text") +const textHide = params.get('text') -if (textHide === "hide") { - const focusables = document.querySelectorAll(".focusable") - focusables.forEach((focusable) => focusable.classList.add("text-hide")) +if (textHide === 'hide') { + const focusables = document.querySelectorAll('.focusable') + focusables.forEach((focusable) => focusable.classList.add('text-hide')) } -const scrollParam = params.get("scroll") +const scrollParam = params.get('scroll') -if (scrollParam === "end") { - window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" }) +if (scrollParam === 'end') { + window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }) +} + +const primaryColorParam = params.get('primary') + +if (primaryColorParam) { + document.documentElement.style.setProperty( + '--primary-color', + `#${primaryColorParam}` + ) +} + +const colorParam = params.get('color') + +if (colorParam) { + document.documentElement.style.setProperty('--color', `#${colorParam}`) } From 89e8d87b2859a71198b73de31bceefe75fb3f836 Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Mon, 31 Jul 2023 14:31:48 +0200 Subject: [PATCH 2/7] extract red bin to be used everywhere --- src/modules/article/FlowSetup.vue | 11 +++++++++-- src/modules/feature/FeatureItem.vue | 15 +++++---------- src/modules/feature/QualityIssue.vue | 20 ++++++++++++++++++++ 3 files changed, 34 insertions(+), 12 deletions(-) create mode 100644 src/modules/feature/QualityIssue.vue diff --git a/src/modules/article/FlowSetup.vue b/src/modules/article/FlowSetup.vue index f2067a1..c3bd08d 100644 --- a/src/modules/article/FlowSetup.vue +++ b/src/modules/article/FlowSetup.vue @@ -4,6 +4,7 @@ import PullSystemIcon from '@/icons/PullSystemIcon.vue' import PushSystemIcon from '@/icons/PushSystemIcon.vue' import FeatureItem from '@/modules/feature/FeatureItem.vue' import FlowControls from '@/modules/feature/FlowControls.vue' +import QualityIssue from '@/modules/feature/QualityIssue.vue' import { Feature } from '@/modules/feature/feature' const feature: Feature = { @@ -36,8 +37,8 @@ const feature: Feature = { number and deliver as fast as possible.

- {{ feature.qualityIssue }} are the number of - defects the feature had during the flow. + + are the number of defects the feature had during the flow.

You have 20 features to deliver, and each day you can choose between 3 @@ -97,3 +98,9 @@ const feature: Feature = {

+ + diff --git a/src/modules/feature/FeatureItem.vue b/src/modules/feature/FeatureItem.vue index fd3c269..95595d4 100644 --- a/src/modules/feature/FeatureItem.vue +++ b/src/modules/feature/FeatureItem.vue @@ -1,4 +1,5 @@ + + + + From 06acfaa2b55e4e4a3954f0cdf76104b9b5ad7889 Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Mon, 31 Jul 2023 14:56:06 +0200 Subject: [PATCH 3/7] change problem solving icon to a lightbulb --- src/icons/ProblemSolvingIcon.vue | 7 +++++-- src/modules/article/FlowSetup.vue | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/icons/ProblemSolvingIcon.vue b/src/icons/ProblemSolvingIcon.vue index 1ef680a..b2bc50e 100644 --- a/src/icons/ProblemSolvingIcon.vue +++ b/src/icons/ProblemSolvingIcon.vue @@ -9,7 +9,10 @@ withDefaults(defineProps<{ color?: string }>(), { diff --git a/src/modules/article/FlowSetup.vue b/src/modules/article/FlowSetup.vue index c3bd08d..6d66820 100644 --- a/src/modules/article/FlowSetup.vue +++ b/src/modules/article/FlowSetup.vue @@ -86,7 +86,7 @@ const feature: Feature = { understand and limit rework. The more the team investigate, the more the team learn and start to be extremely good at problem solving.

-

Blue bin: the security stocks

+

Blue bin: the security stock

Blue bins are your security stock, to make sure teams can work without any blockers. It's to make sure the next team will always have material to From c8c1e29293a949b03c08cf703bed23eb5e908c8f Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Mon, 31 Jul 2023 15:33:02 +0200 Subject: [PATCH 4/7] fix border radius in table --- core.css | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/core.css b/core.css index d7ab07b..cc6f984 100644 --- a/core.css +++ b/core.css @@ -6,7 +6,7 @@ --color: white; } -* { +*:not(td):not(th) { border-radius: 0.5rem; } @@ -29,3 +29,18 @@ main { margin: 1rem 1rem 0; color: var(--color); } + +.meaning { + color: #9f9a9a; + font-style: italic; + font-weight: 100; + font-size: 1.2rem; +} + +.meaning::before { + content: '('; +} + +.meaning::after { + content: ')'; +} From bf92461a898b63a180ac62ea217896ff73967eec Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Mon, 31 Jul 2023 15:33:18 +0200 Subject: [PATCH 5/7] put everything in mind in the article body --- README.md | 12 ------------ src/modules/article/FlowHypothesis.vue | 12 ++++++++++-- src/modules/article/FlowIntro.vue | 5 +++-- src/modules/article/FlowSetup.vue | 2 +- 4 files changed, 14 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index fb9841f..bafe103 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,3 @@ # Thinking People System A interactive website to better understand the Thinking People System. - -## Feature flow - -### The project - -- 0 defect policy, -- has no external dependancies, -- the team has a strong opinion on Jidoka: - - teams spot 100% of the defects, - - teams do not take a feature who has defects, - - the team who introduced the defect needs to rework on the feature. -- there is no limit on how many defects a feature can have. diff --git a/src/modules/article/FlowHypothesis.vue b/src/modules/article/FlowHypothesis.vue index 31bad08..ded8445 100644 --- a/src/modules/article/FlowHypothesis.vue +++ b/src/modules/article/FlowHypothesis.vue @@ -4,13 +4,21 @@

Hypothesis:

    -
  1. it takes the same amount of time for each team to complete a task
    2. +
  2. + it takes the same amount of time for each team to complete a task + same task time +
    3. +
  3. teams have no other external dependencies
  4. teams know exactly what they need to produce their part, they will tag any defects they found when verifying the feature is good.
    5. -
  5. the team where the defect appears must rework the feature.
    6. +
  6. + 0 defect policy: the team where the defect appears must rework the + feature. +
  7. release team never fails
    8. +
  8. there is no limit on how many defects a feature can have.
diff --git a/src/modules/article/FlowIntro.vue b/src/modules/article/FlowIntro.vue index ca4099b..f8ee509 100644 --- a/src/modules/article/FlowIntro.vue +++ b/src/modules/article/FlowIntro.vue @@ -11,8 +11,9 @@

When money and pressure are in the game, fear, uncertainty, and doubt - spread out rapidly. So we rush, as fast as we can, and if a team has - nothing to do, it becomes a disaster. + spread out rapidly. So we rush, as fast as we can, and we produce as many + features as we can. And if a team has nothing to do, it becomes a disaster + as it is money lost.

diff --git a/src/modules/article/FlowSetup.vue b/src/modules/article/FlowSetup.vue index 6d66820..b95ecea 100644 --- a/src/modules/article/FlowSetup.vue +++ b/src/modules/article/FlowSetup.vue @@ -11,7 +11,7 @@ const feature: Feature = { name: 'As a user, in the homepage, I can login', complexity: 3, leadTime: 2, - qualityIssue: 2, + qualityIssue: 4, status: 'doing', step: 2 } From a1f43f4cb99121e8d87f7c59b01902cca77d54a1 Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Mon, 31 Jul 2023 18:06:59 +0200 Subject: [PATCH 6/7] install random js --- package.json | 1 + pnpm-lock.yaml | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/package.json b/package.json index 7e051c2..4a9a407 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "chart.xkcd": "^1.1.13", "comlink": "^4.4.1", "pinia": "^2.1.4", + "random-js": "^2.1.0", "vue": "^3.3.4", "vue-starport": "^0.3.0" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 97e3f3f..982589e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ dependencies: pinia: specifier: ^2.1.4 version: 2.1.4(typescript@5.1.6)(vue@3.3.4) + random-js: + specifier: ^2.1.0 + version: 2.1.0 vue: specifier: ^3.3.4 version: 3.3.4 @@ -897,6 +900,10 @@ packages: react-is: 18.2.0 dev: true + /random-js@2.1.0: + resolution: {integrity: sha512-CRUyWmnzmZBA7RZSVGq0xMqmgCyPPxbiKNLFA5ud7KenojVX2s7Gv+V7eB52beKTPGxWRnVZ7D/tCIgYJJ8vNQ==} + dev: false + /react-is@18.2.0: resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==} dev: true From 065227c985a1b4abf1b4c9a1abc57db5f1dcc22b Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Mon, 31 Jul 2023 18:07:10 +0200 Subject: [PATCH 7/7] use a true randomness in the app --- core.css | 3 +-- src/modules/article/FlowSetup.vue | 3 ++- src/modules/feature/feature-board.ts | 5 +++-- src/modules/feature/feature.fixture.ts | 3 ++- src/utils.ts | 16 ++++++++++++++-- 5 files changed, 22 insertions(+), 8 deletions(-) diff --git a/core.css b/core.css index cc6f984..2fc9033 100644 --- a/core.css +++ b/core.css @@ -32,9 +32,8 @@ main { .meaning { color: #9f9a9a; - font-style: italic; font-weight: 100; - font-size: 1.2rem; + font-size: 1rem; } .meaning::before { diff --git a/src/modules/article/FlowSetup.vue b/src/modules/article/FlowSetup.vue index b95ecea..e66eeec 100644 --- a/src/modules/article/FlowSetup.vue +++ b/src/modules/article/FlowSetup.vue @@ -91,7 +91,8 @@ const feature: Feature = { Blue bins are your security stock, to make sure teams can work without any blockers. It's to make sure the next team will always have material to transform. But it comes with a cost: overburden, stagnation (increase lead - time) and duplicated mistakes (not simulated here). The less you have, the + time) and duplicated mistakes + not simulated here. The less you have, the less your team has mental charge. The more you have, the more secure you are to make teams work. One solution: simplify your flow and lower the number of operation the teams have to do to deliver a feature. diff --git a/src/modules/feature/feature-board.ts b/src/modules/feature/feature-board.ts index 5554241..c5f57b7 100644 --- a/src/modules/feature/feature-board.ts +++ b/src/modules/feature/feature-board.ts @@ -7,6 +7,7 @@ import { getMean, pickRandomElement, popNElement, + randomFloat, shuffleArray, sumElements } from '@/utils' @@ -28,7 +29,7 @@ const hasQualityIssue = ({ ) const multiplicator = getOverburdenMultiplicator(tasksInParallel) - const quality = Math.random() + const quality = randomFloat(0, 1) return quality > qualityProbability / multiplicator } @@ -230,7 +231,7 @@ export const nextDay = ( state.meta.teamWorkExperience += 0.01 if (strategy === 'problem-solving') { - const hasTeamLearned = Math.random() > 0.25 + const hasTeamLearned = randomFloat(0, 1) > 0.25 if (hasTeamLearned) { state.meta.teamWorkExperience += 1.2 } diff --git a/src/modules/feature/feature.fixture.ts b/src/modules/feature/feature.fixture.ts index 051c2f5..fa07fbf 100644 --- a/src/modules/feature/feature.fixture.ts +++ b/src/modules/feature/feature.fixture.ts @@ -1,9 +1,10 @@ import { birds } from '@/data/bird' import { Feature } from '@/modules/feature/feature' +import { randomInteger } from '@/utils' export const features: Feature[] = birds.map((name) => ({ name, - complexity: Math.floor(Math.random() * 5) + 1, + complexity: randomInteger(1, 5), leadTime: 0, status: 'doing', step: Infinity, diff --git a/src/utils.ts b/src/utils.ts index a830c65..b6a43e8 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,3 +1,15 @@ +import { Random } from 'random-js' + +const random = new Random() + +export const randomInteger = (min: number, max: number) => { + return random.integer(min, max) +} + +export const randomFloat = (min: number, max: number) => { + return random.real(min, max) +} + export const getMean = (data: number[]) => Math.round(100 * (sumElements(data) / data.length)) / 100 @@ -11,7 +23,7 @@ export const shuffleArray = (array: T[]) => { randomIndex while (currentIndex !== 0) { - randomIndex = Math.floor(Math.random() * currentIndex) + randomIndex = randomInteger(0, currentIndex - 1) currentIndex-- ;[array[currentIndex], array[randomIndex]] = [ array[randomIndex], @@ -37,7 +49,7 @@ export const popNElement = (array: T[], numberOfElements: number) => { } export const pickRandomIndex = (array: T[]) => - Math.floor(Math.random() * array.length) + randomInteger(0, array.length - 1) export const pickRandomElement = (array: T[]) => array[pickRandomIndex(array)]