Upload files to "/"

Reviewed-on: andrea/homework5#2

PROPOSAL_20220899.md

@@ -1,101 +0,0 @@
-- [My proposal](#my-proposal)
-  - [Basic Information](#basic-information)
-  - [Video Game: nag a ram](#video-game-nag-a-ram)
-    - [Game Mechanics](#game-mechanics)
-    - [Technical Implementation](#technical-implementation)
-  - [Use of AI](#use-of-ai)
-
-# My proposal
-
-## Basic Information
-
-- Name: Yu Min Choi
-- ID: 20220899
-- [Repository](https://git.prototyping.id/20220899/homework5)
-
-## Video Game: nag a ram
-
-_**nag a ram**_ is an anagram game that helps English speakers improve problem-solving skills and build vocabulary.
-
-> An anagram is a word or phrase made by using the letters of another word or phrase in a different order. For example, _silent_ and _listen_ are anagrams. _triangle_, _alerting_, _integral_, and _relating_ are all anagrams of one another.
->
-> \*_nag a ram_ is an anagram of _anagram_.
-
-### Game Mechanics
-
-**How to Play**
-
-1. A base word appears on screen. The player can choose the number of letters beforehand or leave it random.
-2. Drag the letter tiles to rearrange them into a valid anagram before time runs out. The time limit scales with word length — longer words get more time.
-3. Press **Complete** to submit the answer.
-4. If correct, the player earns points and can save the word to a personal vocabulary list for later review.
-5. If incorrect or time runs out, one life is lost. The player has 5 lives per session. Once all lives are spent, there is a 5-minute cooldown before the game can be restarted.
-
-**Constraints**
-
-- Word: Single word only
-- Time: Scales with word length
-- Lives: 5 per session
-
-**Scoring**
-
-- Base points: Awarded per correct answer, scaled by word length
-- Streak bonus: Multiplied by consecutive correct answers
-- Easter egg: Double points for palindrome answers
-
-**Interface**
-
-The letter tiles are designed to resemble wooden blocks, giving the game a tactile, physical feel reminiscent of classic word games like Scrabble.
-
-![pic](assets/scrabble.jpg)
-
-### Technical Implementation
-
-[**Random Word API**](https://random-word-api.herokuapp.com/)
-
-The base word is randomly generated using the Random Word API with a length parameter.
-
-For example,
-https://random-word-api.herokuapp.com/word?length=9 returns:
-
-```json
-["triangle"]
-```
-
-[**Anagramica API**](http://anagramica.com/api)
-
-Once base word fetched from the Random Word API, the Anagramica API is used to verify at least one valid anagram (excluding the base word itself) exists. If the player's submission matches any word in the array, the answer is validated.
-
-For example, http://www.anagramica.com/best/:triangle returns:
-
-```json
-{
-  "best": ["alerting", "altering", "integral", "relating", "triangle"]
-}
-```
-
-**Word module**
-
-- `fetchRandomWord(length)`: Fetches a random word from the Random Word API with the specified or random length
-- `fetchAnagrams(word)`: Fetches valid anagrams from the Anagramica API
-  - Uses `.filter()` to exclude the base word and ensure at least one valid anagram exists
-- `validateAnswer(answer, anagrams)`: Checks if the player's input matches a valid anagram
-  - Uses `.includes()` to search the anagram array
-- `isPalindrome(answer)`: Checks if the given word is a palindrome
-  - Uses recursion to compare letters inward from both ends
-
-**Game class**
-
-Manages state: score, timer, lives, streak
-
-- `addScore(wordLength)`: Calculates and adds points based on word length, applies the streak multiplier, and doubles points if the palindrome check passes
-- `startTimer(wordLength, onTick, onTimeUp)`: Starts a countdown scaled to word length
-- `stopTimer()`: Stops the timer, either when the player submits an answer or when time runs out
-- `deductLife()`: Removes a life and resets the streak
-- `isGameOver()`: Checks if all lives have been used
-
-**Vocabulary class**
-
-## Use of AI
-
-AI was used to paraphrase and refine the written content of this proposal.

PROPOSAL_20265367.md

@@ -0,0 +1,175 @@
+ # Game Proposal | Graphic Puzzle Game
+
+- **Name**: Suhyun Lim
+- **Student ID**: 20265367  
+- **Repository URL**: https://git.prototyping.id/20265367/homework5.git
+
+## 1. Game Overview
+
+This project proposes an educational puzzle game designed to improve the perceptual sensitivity of beginner designers.  
+The game focuses on enhancing the player's ability to recognize subtle visual differences in composition, alignment, typography, and graphic details.
+
+The game is structured into two rounds, each targeting a different aspect of visual literacy.
+
+-  **Round 1: Tile Sliding Composition Puzzle**  
+  The player rearranges fragmented image tiles to reconstruct the original reference design.
+
+-  **Round 2: Typeface Matching Challenge**  
+  The player identifies and connects four matching pairs of alphabet letters that belong to the same font family.
+
+The broader purpose of the game is not only entertainment, but also the cultivation of observational skills essential to graphic design practice. Through repeated play, users are expected to improve their ability to detect formal inconsistencies and typographic nuances.
+
+The player wins by clearing both rounds within the time limit or target score. The player loses if time expires or too many mistakes are made.
+
+
+<p align="center">
+  <img src="IMG_5367_1.png" width="800">
+</p>
+
+---
+
+## 2. Game Mechanics
+
+The player interacts through **mouse clicks** and **dragging gestures**.
+
+| Action | Description |
+| :--- | :--- |
+| **Slide Tile** | Click or drag adjacent tiles to reconstruct the target image. |
+| **Compare Reference** | Observe the reference design and identify misplaced visual fragments. |
+| **Select Letter** | Click two letters to attempt a font match. |
+| **Connect Pair** | Successfully identify four correct font pairs. |
+| **Hint Use** | Optional hint reveals one correct move with score penalty. |
+
+
+### Round 1: Tile Sliding Puzzle
+
+The player is shown a target composition (poster, layout, or logo-based image) and a shuffled tile board.
+
+The objective is to restore the original arrangement by sliding tiles into the empty space.  
+This round trains:
+
+- spatial organization awareness  
+- balance and hierarchy recognition  
+- sensitivity to alignment and negative space
+
+
+### Round 2: Typeface Pair Matching
+
+The player is shown multiple alphabet characters rendered in different fonts.
+
+The objective is to identify four pairs of letters that share the same typeface characteristics.
+
+Examples of recognition cues include:
+
+- serif vs sans-serif  
+- stroke contrast  
+- terminal shape  
+- x-height proportion  
+- geometric vs humanist construction
+
+This round trains typographic discrimination and detail recognition.
+
+---
+
+## 3. Core Systems
+
+### 3.1 Puzzle Board System (Array-based Grid Logic)
+
+The tile puzzle board will be implemented as a two-dimensional array.
+
+Each tile object stores:
+
+- currentRow  
+- currentCol  
+- targetRow  
+- targetCol  
+- imageFragment  
+- movable
+Where 0 represents the empty slot.
+
+The system checks whether adjacent tiles may move into the empty space and continuously verifies puzzle completion.
+
+
+### 3.2 Typography Matching System (Object Comparison Logic)
+Each letter card is stored as an object in an array.
+
+Main properties:
+
+- character
+- fontFamily
+- selected
+- matched
+- position
+
+[
+ letter: "R",
+ fontFamily: "Helvetica",
+ selected: false,
+ matched: false
+]
+When two cards are selected, the system compares their fontFamily values.
+
+If identical:
+- pair remains visible
+- score increases
+
+If different:
+- cards reset after delay
+- mistake counter increases
+
+
+### 3.3 Scoring and Progression System
+The game rewards speed and accuracy.
+**Score Sources**
+- Puzzle completion bonus
+- Fast matching bonus
+- Consecutive correct streak bonus
+- Remaining time bonus
+**Penalties**
+- Wrong font matches
+- Hint usage
+- Excessive move count
+**Win Condition**
+- Clear Round 1 and Round 2 successfully
+**ose Condition**
+- Timer reaches zero
+- Mistake limit exceeded
+
+### 3.4 Adaptive Difficulty Scaling
+To maintain challenge and learning effectiveness, the game gradually increases difficulty.
+
+**Round 1 Scaling**
+- Grid size expands: 3×3 → 4×4
+- More visually similar fragments used
+- Consecutive correct streak bonus
+- Less reference preview time
+
+**Round 2 Scaling**
+- Fonts become more visually similar
+- More distractor letters appear
+- Matching time shortens
+
+This system encourages progressive perceptual training.
+
+---
+
+## 4. Educational Value
+This game explores how interactive systems can support design literacy through play.
+Rather than teaching design through lectures alone, it applies procedural learning: users repeatedly engage with perceptual tasks and improve through immediate feedback.
+The project therefore combines entertainment, pedagogy, and visual cognition training in a game format.
+
+---
+
+## 5. References
+- sliding-puzzle.com: https://sliding-puzzle.com/impossible
+
+<p align="center">
+  <img src="IMG_5367_2.png" width="800">
+</p>
+
+
+- Kern Type: https://type.method.ac/
+
+<p align="center">
+  <img src="IMG_5367_3.png" width="800">
+</p>